/* ═══════════════════════════════════════════════════════════
   vie.css — le mouvement, sans aucun parti pris visuel.
   Chaque invitation apporte ses couleurs et sa typographie ;
   ce fichier n'apporte que la vie.
   ═══════════════════════════════════════════════════════════ */

/* la jauge de lecture — la couleur vient de --jauge */
.jauge{position:fixed;top:0;left:0;height:3px;width:0;z-index:90;
  background:var(--jauge,currentColor);transition:width .12s linear}

/* titres découpés en mots, qui montent derrière un masque */
.mot{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.1em;margin-bottom:-.1em}
.mot > i{display:inline-block;font-style:inherit;transform:translateY(112%);
  transition:transform .95s cubic-bezier(.16,1,.3,1)}
.vu .mot > i{transform:none}

/* blocs qui se révèlent */
.rev{opacity:0;transform:translateY(26px);
  transition:opacity .85s ease,transform .95s cubic-bezier(.16,1,.3,1)}
.vu .rev,.rev.vu{opacity:1;transform:none}
.rev.g{transform:translateX(-26px)}
.rev.d{transform:translateX(26px)}
.vu .rev.g,.vu .rev.d,.rev.g.vu,.rev.d.vu{transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
.d4{transition-delay:.4s}.d5{transition-delay:.5s}

/* listes en cascade */
.casc > *{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.vu .casc > *{opacity:1;transform:none}
.vu .casc > *:nth-child(1){transition-delay:.05s}
.vu .casc > *:nth-child(2){transition-delay:.13s}
.vu .casc > *:nth-child(3){transition-delay:.21s}
.vu .casc > *:nth-child(4){transition-delay:.29s}
.vu .casc > *:nth-child(5){transition-delay:.37s}
.vu .casc > *:nth-child(6){transition-delay:.45s}
.vu .casc > *:nth-child(7){transition-delay:.53s}
.vu .casc > *:nth-child(8){transition-delay:.61s}

/* filets qui se tracent */
.trait{transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.16,1,.3,1) .1s}
.vu .trait{transform:scaleX(1)}

/* la photo détourée : proportions verrouillées, jamais déformée
   (la page publiée impose un img{max-width:100%} qui écrase tout) */
.sujet{position:absolute;pointer-events:none;width:auto;max-width:none;
  transform:translateX(var(--cx,-50%)) translateY(var(--py,0px)) scale(var(--ps,1))}
.sujet img{height:100%;width:100%;max-width:none;object-fit:contain;display:block}
.sujet img{opacity:0;animation:vie-pose 1.25s cubic-bezier(.16,1,.3,1) .45s forwards}
@keyframes vie-pose{from{opacity:0;transform:translateY(30px) scale(1.04)}
  to{opacity:1;transform:none}}

/* le mot de fin des formulaires de démonstration */
.note-ex{opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.note-ex.on{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
  .mot > i,.rev,.casc > *{transform:none!important;opacity:1!important}
  .trait{transform:scaleX(1)!important}
  .sujet img{opacity:1!important}
}