/* ==========================================================================
   Système de mouvement CIT — « lever, tracer, dévoiler »
   Une seule courbe, un seul rythme, quatre primitives posées en data-m :
     rise   le contenu se lève (fondu + 24 px)
     lines  les grands titres montent mot à mot depuis un masque
     wipe   les photos se dévoilent comme une palissade qu'on retire
            (wipe : de bas en haut · wipe-x : de gauche à droite)
     draw   les filets se tracent de gauche à droite, comme un trait de cote
   js/motion.js ajoute .is-in à l'entrée dans l'écran et numérote (--bi)
   les éléments d'un même lot pour un décalage régulier. --d = retard explicite.
   Les « scènes » (méthode, lots, formulaire…) s'enchaînent depuis le .is-in
   de leur parent. Tout est neutralisé par prefers-reduced-motion.
   Les états « avant animation » ne s'appliquent qu'avec html.js (js/boot.js) :
   sans JavaScript, ou pour un robot qui lit le HTML, tout le contenu reste visible.
   ========================================================================== */
:root{
  --e-out:cubic-bezier(.2,.7,.2,1);      /* sortie douce : lever, dévoiler */
  --e-draw:cubic-bezier(.65,0,.35,1);    /* tracé : départ et arrivée nets */
  --t-fast:.25s; --t-base:.55s; --t-slow:.9s; --t-reveal:1.2s;
  --stagger:80ms;
}
[data-m]{--delay:calc(var(--d,0ms) + var(--bi,0) * var(--stagger))}

/* --- rise --- */
.js [data-m="rise"]{opacity:0;transform:translate3d(0,24px,0);transition:opacity var(--t-slow) var(--e-out) var(--delay),transform var(--t-slow) var(--e-out) var(--delay)}
[data-m="rise"].is-in{opacity:1;transform:none}

/* --- lines --- */
[data-m="lines"] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .03em .16em;margin:-.12em -.03em -.16em}
.js [data-m="lines"] .w>span{display:inline-block;transform:translate3d(0,112%,0);transition:transform var(--t-reveal) var(--e-out);transition-delay:calc(var(--delay) + var(--wi,0) * 45ms)}
[data-m="lines"].is-in .w>span{transform:none}

/* --- wipe --- */
.js [data-m="wipe"]{clip-path:inset(100% 0 0 0)}
.js [data-m="wipe-x"]{clip-path:inset(0 100% 0 0)}
[data-m="wipe"],[data-m="wipe-x"]{transition:clip-path var(--t-reveal) var(--e-draw) var(--delay)}
[data-m="wipe"].is-in,[data-m="wipe-x"].is-in{clip-path:inset(0 0 0 0)}
.js [data-m^="wipe"] .zoom{transform:scale(1.16);transition:transform calc(var(--t-reveal) * 1.7) var(--e-out) var(--delay)}
[data-m^="wipe"].is-in .zoom{transform:scale(1)}

/* --- draw --- */
.js [data-m="draw"]{transform:scaleX(0);transform-origin:left center;transition:transform var(--t-reveal) var(--e-draw) var(--delay)}
[data-m="draw"].is-in{transform:none}

/* Changement de langue : on réaffiche sans rejouer */
.m-instant [data-m],.m-instant [data-m] *{transition:none!important;animation:none!important}

/* ==========================================================================
   Accents d'interface
   ========================================================================== */
/* Barre de progression de lecture — un trait de cote orange */
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;background:var(--orange);transform-origin:left;transform:scaleX(var(--p,0))}

/* En-tête : arrive du haut au chargement ; soulignement tracé */
.hdr{animation:m-drop .9s var(--e-out) .05s both}
.hdr.settled{animation:none}
@keyframes m-drop{from{transform:translateY(-100%)}}
.hdr nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform var(--t-base) var(--e-draw)}
.hdr nav a:hover:after,.hdr nav a.act:after{transform:scaleX(1);transform-origin:left}

/* Menu mobile : les liens se lèvent l'un après l'autre */
.mnav:not([hidden]) a{animation:m-rise .6s var(--e-out) both;animation-delay:calc(var(--k,0) * 55ms + 60ms)}
.mnav:not([hidden]){animation:m-fade .3s ease both}

/* Boutons : flèche qui avance, contour qui se remplit par un tracé */
.btn .arr{transition:transform var(--t-fast) var(--e-out)}
.btn:hover .arr{transform:translateX(4px)}
.btn-o:active{transform:scale(.98)}
.btn-g{position:relative;isolation:isolate;overflow:hidden}
.btn-g:before{content:"";position:absolute;inset:0;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e-draw);z-index:-1}
.btn-g:hover:before{transform:scaleX(1);transform-origin:left}
.btn-g span{position:relative;transition:color .3s}

/* Hero : repères orange qui se plantent après le tracé du filet */
.js .facts>div:before{transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--e-out) calc(var(--delay) + .35s)}
.facts>div.is-in:before{transform:none}

/* Méthode : la frise se trace, puis chaque étape se pose */
.js .method ol:before{transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--e-draw) .2s}
.method.is-in ol:before{transform:none}
.js .method li{opacity:0;transform:translate3d(0,14px,0);transition:opacity .6s var(--e-out),transform .6s var(--e-out);transition-delay:calc(.35s + var(--k) * 190ms)}
.js .method li:before{transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.3s + var(--k) * 190ms)}
.method.is-in li{opacity:1;transform:none}
.method.is-in li:before{transform:none}
@media (max-width:860px){
  .js .method ol:before{transform:scaleY(0);transform-origin:top}
  .method.is-in ol:before{transform:none}
}

/* Projet à la une : les 11 lots se posent comme des étiquettes */
.js .lots span{opacity:0;transform:translate3d(0,8px,0);transition:opacity .4s var(--e-out),transform .4s var(--e-out);transition-delay:calc(.5s + var(--k) * 45ms)}
.feat-txt.is-in .lots span{opacity:1;transform:none}

/* Index des réalisations : les lignes se rangent au changement de filtre */
.idx.reflow .idx-row{animation:m-rise .55s var(--e-out) both;animation-delay:calc(var(--k,0) * 45ms)}

/* Métiers : le compteur bascule */
.met-prev .count{display:inline-block;overflow:hidden;vertical-align:top}
.met-prev .count b{display:inline-block;font-weight:inherit;animation:m-tick .45s var(--e-out)}
@keyframes m-tick{from{transform:translateY(100%);opacity:0}}

/* Panneau projet : la photo se dévoile, le texte suit */
.drawer.on .d-img img{animation:m-unveil 1s var(--e-draw) .15s both}
.drawer.on .d-body>*{animation:m-rise .7s var(--e-out) both;animation-delay:calc(.3s + var(--k,0) * 60ms)}

/* Formulaire en 3 étapes */
.steps i:after{content:"";position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e-draw)}
.steps i.on:after{transform:none}
.step-in{animation:m-slide .5s var(--e-out) both}
.step-in .opt{animation:m-rise .5s var(--e-out) both;animation-delay:calc(.08s + var(--k,0) * 40ms)}
.check{width:64px;height:64px;flex:none}
.check circle{fill:var(--orange);transform-origin:center;animation:m-pop .5s cubic-bezier(.34,1.56,.64,1) both}
.check path{fill:none;stroke:var(--nuit-2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:m-stroke .5s var(--e-draw) .35s forwards}

/* Images : léger zoom au survol des fiches */
.idx-thumb img,.met-prev img{will-change:transform}

/* ==========================================================================
   Images-clés partagées
   ========================================================================== */
@keyframes m-rise{from{opacity:0;transform:translate3d(0,18px,0)}}
@keyframes m-fade{from{opacity:0}}
@keyframes m-slide{from{opacity:0;transform:translate3d(calc(var(--dir,1) * 28px),0,0)}}
@keyframes m-unveil{from{clip-path:inset(0 0 100% 0);transform:scale(1.12)}to{clip-path:inset(0);transform:none}}
@keyframes m-pop{from{transform:scale(0)}}
@keyframes m-stroke{to{stroke-dashoffset:0}}

/* ==========================================================================
   Accessibilité : mouvement réduit
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  [data-m]{opacity:1!important;transform:none!important;clip-path:none!important}
  [data-m] .w>span,[data-m] .zoom{transform:none!important}
}