/* motion.css : polish de mouvement. Tout est masqué-puis-révélé uniquement sous html.mo (posé par motion.js). */
:root{--mo-ease:cubic-bezier(.22,.8,.24,1)}

/* Barre de progression + en-tête */
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;pointer-events:none;will-change:transform}
.site-header{transition:background-color .3s,box-shadow .3s,border-color .3s}
.site-header.scrolled{background:rgba(7,8,10,.92);box-shadow:0 10px 30px -14px rgba(0,0,0,.7);border-bottom-color:var(--line-2)}
.nav-links a{position:relative}
.nav-links a:not(.only-m)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--mo-ease)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{transform:scaleX(1)}

/* Titre hero : reflet lent */
h1 .grad{background-image:linear-gradient(95deg,var(--cyan),var(--orange),var(--cyan));background-size:200% 100%;animation:mo-shimmer 9s linear infinite}
@keyframes mo-shimmer{to{background-position:-200% 0}}

/* Boutons */
.btn.primary{position:relative;overflow:hidden;isolation:isolate}
.btn.primary::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(34,211,238,.35),rgba(255,154,31,.3),transparent);transform:translateX(-130%) skewX(-18deg);pointer-events:none}
.btn.primary:hover::after{transform:translateX(230%) skewX(-18deg);transition:transform .8s var(--mo-ease)}
.btn:active{transform:translateY(1px) scale(.97)}

/* En-têtes de section */
.mo .eyebrow{opacity:0;transform:translateX(-10px);transition:opacity .6s var(--mo-ease),transform .6s var(--mo-ease)}
.mo .in .eyebrow,.mo .eyebrow.in{opacity:1;transform:none}
.mo h2 .w{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .6s var(--mo-ease),transform .6s var(--mo-ease);transition-delay:calc(var(--i)*55ms + 120ms)}
.mo .sec-head.in h2 .w,.mo h2.reveal.in .w{opacity:1;transform:none}

/* Facts */
.mo .fact .ico{opacity:0;transform:translateX(-12px) scale(.7);transition:opacity .5s var(--mo-ease),transform .6s var(--mo-ease)}
.mo .facts.on .fact .ico{opacity:1;transform:none;animation:mo-pulse 2.6s ease-in-out 1.2s 2}
.mo .fact:nth-child(2) .ico{transition-delay:.12s;animation-delay:1.4s!important}
.mo .fact:nth-child(3) .ico{transition-delay:.24s;animation-delay:1.6s!important}
.mo .fact:nth-child(4) .ico{transition-delay:.36s;animation-delay:1.8s!important}
@keyframes mo-pulse{50%{transform:scale(1.14)}}

/* Maroc */
#maroc{overflow-x:clip}
.js .maroc-grid .card{transition:opacity .7s var(--ease) calc(var(--d,0)*90ms),transform .7s var(--ease) calc(var(--d,0)*90ms),translate .3s var(--mo-ease),border-color .3s,box-shadow .3s}
.maroc-grid .card:hover{translate:0 -5px;border-color:var(--line-2);box-shadow:0 18px 40px -22px rgba(34,211,238,.35)}
.maroc-grid .card .ico{transition:transform .4s var(--mo-ease)}
.maroc-grid .card:hover .ico{transform:translateY(-3px) rotate(-8deg) scale(1.12)}
.mo .zone{opacity:0;transition:opacity .8s var(--mo-ease),transform .9s var(--mo-ease)}
.mo .zone.ma{transform:translateX(-28px)}
.mo .zone.fr{transform:translateX(28px);transition-delay:.12s}
.mo .zones.in .zone{opacity:1;transform:none}

/* Méthode */
.mo .step::after{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--mo-ease) calc(var(--d,0)*.4s + .35s)}
.mo .steps.on .step::after{transform:none}
.mo .step::before{opacity:0;transform:scale(.4);transform-origin:left center;transition:opacity .4s,transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0)*.4s + .15s)}
.mo .steps.on .step::before{opacity:1;transform:none}

/* Mentions */
.mentions{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--fs-xs);color:var(--muted)}
.mentions li{display:inline-flex;align-items:center;gap:7px}
.mentions .ico{width:14px;height:14px;color:var(--cyan);flex:none}
.final .mentions{justify-content:center;margin-top:26px}
.mentions-note{margin:12px auto 0;font-size:var(--fs-xs);color:var(--muted);max-width:60ch}

/* Histoire */
.timeline{position:relative}
.mo .timeline::after{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:linear-gradient(var(--cyan),var(--orange));transform:scaleY(var(--p,0));transform-origin:top;pointer-events:none}
.mo .tl::before{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1) .1s}
.mo .tl.in::before{transform:none}
.mo .story figure img{clip-path:inset(0 0 100% 0 round var(--r-lg,20px));transition:clip-path 1.1s var(--mo-ease);transform:translateY(var(--py,0px))}
.mo .story figure.in img{clip-path:inset(0 0 0 0 round var(--r-lg,20px))}

/* FAQ : ouverture animée (amélioration progressive) */
@supports (selector(::details-content)){
  .faq details{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .35s var(--mo-ease),opacity .3s,content-visibility .35s allow-discrete}
  .faq details[open]::details-content{block-size:auto;opacity:1}
}

/* CTA final */
.final::before{animation:mo-glow 7s ease-in-out infinite alternate}
@keyframes mo-glow{from{opacity:.65;transform:scale(1)}to{opacity:1;transform:scale(1.12)}}
.final .btn.primary{translate:var(--mx,0) var(--my,0);transition:translate .25s var(--mo-ease),box-shadow .25s,transform .2s}

@media (prefers-reduced-motion:reduce){
  .scroll-progress,.btn.primary::after{display:none}
  h1 .grad,.final::before{animation:none}
  .mo *,.mo *::before,.mo *::after{opacity:1!important;transform:none!important;clip-path:none!important;translate:none!important;animation:none!important}
  .mo .timeline::after{display:none}
  .faq details::details-content{transition:none}
}