/* ===== Animations Mayara Group (légères, respectent "réduire les animations") ===== */
.hero{position:relative;overflow:hidden}
.hero-inner{position:relative;z-index:2}
.hero-inner.has-slider{display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center}

/* Apparition au défilement */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* Texte du haut de page */
.hero-text>*{animation:rise .8s ease both}
.hero-text>*:nth-child(2){animation-delay:.12s}
.hero-text>*:nth-child(3){animation-delay:.24s}
.hero-text>*:nth-child(4){animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Boutons et photos */
.btn{transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.22)}
.btn:active{transform:translateY(0)}
.car{overflow:hidden}
.car-photo{transition:transform .6s ease}
.car:hover .car-photo{transform:scale(1.07)}
.car{transition:transform .3s,box-shadow .3s}
.car:hover{box-shadow:0 12px 28px rgba(0,0,0,.16)}
.icon{display:inline-block;transition:transform .3s}
.card:hover .icon{transform:scale(1.2) rotate(-6deg)}
.wa-float{animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55),0 4px 16px rgba(0,0,0,.3)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0),0 4px 16px rgba(0,0,0,.3)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0),0 4px 16px rgba(0,0,0,.3)}}

/* Carrousel des véhicules (accueil) */
.hero-slider{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.4);aspect-ratio:4/3;background:#0a2f52;border:3px solid rgba(255,255,255,.25);animation:rise .9s .2s ease both}
.hero-slider .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1s ease,transform 6s ease}
.hero-slider .slide.on{opacity:1;transform:scale(1)}
.hero-slider .cap{position:absolute;left:0;bottom:0;right:0;padding:34px 18px 14px;background:linear-gradient(transparent,rgba(5,30,55,.9));color:#fff;font-weight:700;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.hero-slider .cap a{background:#25d366;color:#fff;text-decoration:none;font-size:.82rem;padding:6px 12px;border-radius:20px;white-space:nowrap}
.hero-slider .dots{position:absolute;top:12px;right:12px;display:flex;gap:6px}
.hero-slider .dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.5);cursor:pointer}
.hero-slider .dots button.on{background:#fff;transform:scale(1.3)}

/* Décor animé : mer, bateau, camion */
.hero-scene{position:absolute;left:0;right:0;bottom:0;height:150px;z-index:1;pointer-events:none}
.hero-scene svg{position:absolute;bottom:0}
.ship{width:230px;bottom:26px;left:-260px;opacity:.2;animation:sail 48s linear infinite,bob 4s ease-in-out infinite}
.truck{width:170px;bottom:4px;left:-200px;opacity:.22;animation:drive 26s linear infinite 4s}
.waves{position:absolute;left:0;right:0;bottom:0;height:38px;opacity:.16;background:repeat-x bottom/160px 38px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='38'%3E%3Cpath d='M0 20 Q20 4 40 20 T80 20 T120 20 T160 20 V38 H0Z' fill='white'/%3E%3C/svg%3E");animation:waves 9s linear infinite}
@keyframes sail{from{left:-260px}to{left:100%}}
@keyframes drive{from{left:-200px}to{left:100%}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes waves{to{background-position-x:160px}}

/* Parcours : commande, transit, livraison */
.route{position:relative;display:flex;justify-content:space-between;align-items:center;margin:0 auto 30px;max-width:760px;height:46px}
.route::before{content:"";position:absolute;left:14px;right:14px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:repeating-linear-gradient(90deg,#b8cddd 0 10px,transparent 10px 18px)}
.route .stop{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;font-size:.8rem;font-weight:700;color:var(--bleu)}
.route .stop i{width:28px;height:28px;border-radius:50%;background:var(--vert);border:4px solid #fff;box-shadow:0 0 0 2px var(--vert);display:block;margin-bottom:2px}
.route .stop span{position:absolute;top:34px;white-space:nowrap}
.route .rtruck{position:absolute;z-index:3;left:0;top:-4px;font-size:1.7rem;animation:trip 7s ease-in-out infinite}
@keyframes trip{0%{left:0}45%,55%{left:calc(50% - 14px)}100%{left:calc(100% - 28px)}}
.route-wrap{padding-bottom:18px;margin-top:8px}

@media(max-width:900px){
  .hero-inner.has-slider{grid-template-columns:1fr}
  .hero-slider{aspect-ratio:16/10}
  .ship{width:160px}.truck{width:120px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .hero-slider .slide:first-of-type{opacity:1}
}

/* Photos du site */
.card-photo{max-width:none;width:calc(100% + 60px);margin:-30px -30px 18px;height:190px;object-fit:cover;border-radius:14px 14px 0 0;transition:transform .6s ease}
.card{overflow:hidden}
.card:hover .card-photo{transform:scale(1.06)}
.photo-banner{width:100%;max-height:420px;object-fit:cover;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:250px;gap:16px}
.gallery figure{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.1);background:#e9eef2}
.gallery figure.wide{grid-column:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gallery figure:hover img{transform:scale(1.07)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;color:#fff;font-weight:700;font-size:.9rem;background:linear-gradient(transparent,rgba(5,30,55,.85))}
@media(max-width:900px){.gallery{grid-template-columns:1fr 1fr;grid-auto-rows:210px}.gallery figure.wide{grid-column:span 2}.card-photo{height:160px}}
@media(max-width:560px){.gallery{grid-template-columns:1fr;grid-auto-rows:220px}.gallery figure.wide{grid-column:auto}}
img[src*="siege-port"]{object-position:center 15%}