/* RQLA — couche de mouvement.
   Même DA (papier / nuit / soleil, Barlow, IBM Plex Mono) : on n'ajoute que du mouvement.
   Les états « cachés » ne s'appliquent que sous .anim, posé par un script en tête de page
   et retiré si motion.js ne charge pas ou si l'utilisateur demande moins d'animations. */

/* ---------- Barre de progression de lecture ---------- */
.progres{position:fixed;inset:0 0 auto;height:3px;z-index:60;background:var(--soleil);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* ---------- Navigation : soulignement qui se trace ---------- */
.nav a.lien-nav{padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .35s var(--ease),opacity .2s}
.nav a.lien-nav:hover,.nav a.lien-nav.actif{opacity:1;text-decoration:none;background-size:100% 1.5px}

/* ---------- Boutons ---------- */
.bouton{transition:background .25s,color .25s,border-color .25s,box-shadow .3s,translate .25s var(--ease)}
.bouton-plein:hover{box-shadow:0 10px 26px -12px rgba(232,149,43,.7)}

/* ---------- Mots masqués (titres) ---------- */
.mot{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em .03em .1em;margin:-.16em -.03em -.1em}
.mot-i{display:inline-block}
.anim .mot-i{transform:translateY(112%);transition:transform .95s var(--ease) calc(var(--base,0ms) + var(--w,0) * 65ms)}
.anim .vu .mot-i{transform:none}

/* ---------- Héros ---------- */
.anim:not(.pret) .heros h1{visibility:hidden}
.anim .heros h1{opacity:1;animation:none}
.anim .heros>img{top:-80px;height:calc(100% + 80px);translate:0 var(--py,0px);will-change:translate}
.anim .heros .conteneur{translate:0 calc(var(--hp,0) * -36px)}
.anim .heros .etiquette{opacity:0;animation:monte .8s var(--ease) .05s forwards}
.anim .heros .etiquette::after{transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .5s}
.anim .heros .etiquette.vu::after{transform:none}
.anim .heros .chapo{animation-delay:.85s}
.anim .heros .actions{animation-delay:1.05s}
.anim .heros .fiche{border-top-color:transparent;position:relative}
.anim .heros .fiche::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:rgba(255,255,255,.25);transform:scaleX(0);transform-origin:left;animation:trace 1.3s var(--ease) 1.1s forwards}
.anim .heros .fiche div{opacity:0;animation:monte .9s var(--ease) both}
.anim .heros .fiche div:nth-child(1){animation-delay:1.25s}
.anim .heros .fiche div:nth-child(2){animation-delay:1.35s}
.anim .heros .fiche div:nth-child(3){animation-delay:1.45s}
.anim .heros .fiche div:nth-child(4){animation-delay:1.55s}

/* ---------- Bande défilante ---------- */
.bande{position:relative;z-index:2;overflow:hidden;background:var(--soleil);color:var(--encre);border-block:1px solid var(--encre)}
.bande-piste{display:flex;width:max-content;animation:defile 46s linear infinite}
.bande:hover .bande-piste{animation-play-state:paused}
.bande ul{display:flex;flex-shrink:0;list-style:none;margin:0;padding:0}
.bande li{display:flex;align-items:center;padding:15px 0;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.bande li::after{content:"";width:7px;height:7px;margin:0 30px;background:var(--encre);transform:rotate(45deg)}

/* ---------- Apparitions au défilement ---------- */
.anim [data-r]{opacity:0;translate:0 26px;transition:opacity .85s var(--ease) calc(var(--i,0) * var(--step,70ms)),translate .85s var(--ease) calc(var(--i,0) * var(--step,70ms))}
.anim [data-r].vu{opacity:1;translate:none}
.anim .etiquette[data-r]::after{transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .25s}
.anim .etiquette[data-r].vu::after{transform:none}
.anim .coches li[data-r]::before{scale:0;transition:scale .5s var(--ease) calc(var(--i,0) * var(--step,70ms) + .3s)}
.anim .coches li[data-r].vu::before{scale:1}
.anim .bareme li[data-r] .points{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) calc(var(--i,0) * 90ms + .3s)}
.anim .bareme li[data-r].vu .points{transform:none}

/* Micro-interactions au survol (sans décalage de mise en page) */
.lignes li>div,.recit li>div{transition:translate .35s var(--ease)}
.lignes li:hover>div,.recit li:hover>div{translate:8px 0}
.lignes li .n,.recit .quand{transition:color .3s}
.lignes li:hover .n{color:var(--encre)}

/* ---------- Méthode : frise ---------- */
.frise .rail i::after{content:"";position:absolute;right:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--soleil);box-shadow:0 0 0 0 rgba(232,149,43,.45)}
.anim .frise .rail i::after{animation:pouls 2s var(--ease) infinite}
.frise li strong,.frise li>span:not(.num){transition:opacity .5s var(--ease)}
.anim .frise li:not(.atteint) strong,.anim .frise li:not(.atteint)>span:not(.num){opacity:.55}
.frise li.atteint .num{animation:pop .6s var(--ease)}

/* ---------- Galerie : rideau, zoom et parallaxe ---------- */
.fig{position:relative;overflow:hidden}
.fig img{scale:1.12;translate:0 var(--pp,0px);transition:filter .4s,scale 1.2s var(--ease)}
.fig:hover img{scale:1.18}
.anim .fig[data-rideau] img{scale:1.3}
.anim .fig[data-rideau].vu img{scale:1.12}
.anim .fig[data-rideau].vu:hover img{scale:1.18}
.anim .fig[data-rideau]::after{content:"";position:absolute;inset:0;background:var(--nuit);transform-origin:bottom;transition:transform 1.1s var(--ease) calc(var(--i,0) * 110ms);pointer-events:none}
.anim .fig[data-rideau].vu::after{transform:scaleY(0)}

/* ---------- Témoignage : le texte s'éclaire au défilement ---------- */
.mot-s{transition:opacity .2s linear}

/* ---------- Simulateur ---------- */
.verdict.maj{animation:fondu .5s var(--ease)}

/* ---------- FAQ ---------- */
.faq summary{transition:color .25s}
.faq summary:hover{color:var(--soleil-texte)}
.faq summary::after,.faq details[open] summary::after{content:"+";transition:rotate .4s var(--ease);line-height:1}
.faq details.ouvre summary::after{rotate:45deg}

/* ---------- Formulaire : trait qui se remplit au focus ---------- */
.formulaire input:not([type=checkbox]),.formulaire select,.formulaire textarea{background-image:linear-gradient(var(--soleil),var(--soleil));background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;transition:background-size .4s var(--ease),border-color .3s}
.formulaire input:not([type=checkbox]):focus,.formulaire select:focus,.formulaire textarea:focus{background-size:100% 2px}
.formulaire label:focus-within{color:var(--encre)}

/* ---------- Suivi : l'écran du portail s'anime quand on le voit ----------
   Sans .anim (moins d'animations, script absent), l'écran s'affiche directement dans son état final. */
.anim .ecran:not(.vu){opacity:0;translate:0 30px}
.anim .ecran{transition:opacity .9s var(--ease),translate .9s var(--ease)}
.anim .ecran:not(.vu) .rail-v i{transform:scaleY(0)}
.anim .ecran:not(.vu) .frise-v li:not(.a-venir) .pt,.anim .ecran:not(.vu) .flux .slot{opacity:0}
.ecran.vu .rail-v i{animation:e-pousse 1.7s var(--sortie) .35s both}
.ecran.vu .frise-v li.fait .pt{animation:e-pop .45s var(--rebond) both;animation-delay:calc(var(--i) * 170ms + 350ms)}
.ecran.vu .frise-v li.fait .pt svg{animation:e-trace .35s ease-out both;animation-delay:calc(var(--i) * 170ms + 500ms)}
.ecran.vu .frise-v li.cours .pt{animation:e-pop .45s var(--rebond) both,e-onde 1.8s ease-out 4;animation-delay:1.4s,1.9s}
.ecran.vu .flux .slot{animation:e-ouvre .6s var(--sortie) both;animation-delay:calc(var(--i) * 650ms + 1.5s)}
.ecran.vu .flux .evt{animation:e-tombe .7s var(--sortie) both;animation-delay:calc(var(--i) * 650ms + 1.56s)}
.ecran.vu .flux .evt .coche{animation:e-pop .5s var(--rebond) both;animation-delay:calc(var(--i) * 650ms + 1.95s)}
.ecran.vu .flux .evt .coche svg{animation:e-trace .4s ease-out both;animation-delay:calc(var(--i) * 650ms + 2.1s)}
@keyframes e-pop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.18);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes e-trace{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes e-pousse{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes e-onde{0%{box-shadow:0 0 0 0 rgba(232,149,43,.55)}100%{box-shadow:0 0 0 12px rgba(232,149,43,0)}}
@keyframes e-ouvre{from{grid-template-rows:0fr;margin-bottom:0;opacity:1}to{grid-template-rows:1fr;opacity:1}}
@keyframes e-tombe{from{opacity:0;transform:translateY(-22px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- Images clés ---------- */
@keyframes trace{to{transform:none}}
@keyframes defile{to{transform:translateX(-50%)}}
@keyframes pop{0%{transform:scale(.72)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(232,149,43,.5)}70%,100%{box-shadow:0 0 0 12px rgba(232,149,43,0)}}
@keyframes fondu{from{opacity:.25}to{opacity:1}}

/* ---------- Moins d'animations : tout reste lisible et statique ---------- */
@media (prefers-reduced-motion:reduce){
  .bande-piste{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .bande ul+ul{display:none}
  .bande ul{flex-wrap:wrap;justify-content:center;padding:6px 24px}
  .lignes li:hover>div,.recit li:hover>div{translate:none}
}