/* Animation du titre du bandeau d'accueil (14/10/2026, demande d'Alexis) — réglage « Animation du titre » de l'éditeur
   Bandeau vidéo (admin/modules/heros-rendu.js ANIMATIONS_TITRE) → data-anim-titre sur la section du héros.
   Chargé par l'accueil seulement quand une animation est réglée, et toujours par l'aperçu de l'éditeur.
   Le trait rouge sous le mot mis en valeur (« vol plaisir ») n'est plus un soulignement du texte mais un fond dessiné, pour pouvoir
   l'animer : même place (.12em sous la ligne de base), même épaisseur (.07em), même rouge. Ses mesures sont des propriétés
   enregistrées (@property) : sans elles (navigateur ancien), le trait reste fixe, comme aujourd'hui.
   Couleurs de la charte seulement : Klein #001CA8, Dungeon Keeper #F32837, Smoke #F5F5F5.
   Entrée : à chaque texte qui devient actif (.fl-texte.est-active). Effet du mot : toutes les 10 secondes, en boucle ;
   il s'arrête avec le bouton pause du bandeau et n'existe pas quand le visiteur réduit les animations. */

@property --fa-l { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@property --fa-x { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --fa-c { syntax: '<percentage>'; inherits: false; initial-value: -80%; }
@property --fa-k { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --fa-trait { syntax: '<color>'; inherits: true; initial-value: #F32837; }

:root .fl-scene.fl-scene-accueil[data-anim-titre] {
  --fa-ep: .07em;          /* épaisseur du trait (celle du soulignement d'origine) */
  --fa-bas: .061em;        /* distance entre le bas du mot et le bas du trait : .12em sous la ligne de base (Montserrat) */
  --fa-reflet: transparent;
  --fa-echange-trait: #001CA8;
  --fa-ease: cubic-bezier(.22, .8, .2, 1);
}
:root .fl-scene.fl-scene-accueil.fl-mod-aplat[data-anim-titre] { --fa-ep: .09em; --fa-echange-trait: #F5F5F5; }
:root .fl-scene.fl-scene-accueil.fl-mod-aube[data-anim-titre] { --fa-ep: .065em; }
:root .fl-scene.fl-scene-accueil.fl-mod-cinema[data-anim-titre] { --fa-ep: .075em; --fa-bas: 0em; --fa-echange-trait: #F5F5F5; }

/* Le trait dessiné : 1er fond = trait rouge (longueur --fa-l depuis --fa-x), 2e fond = reflet qui file le long du trait (--fa-c). */
:root .fl-scene.fl-scene-accueil[data-anim-titre] .fl-titre .v6-lapsus {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(var(--fa-trait), var(--fa-trait)), linear-gradient(90deg, transparent, var(--fa-reflet) 50%, transparent);
  background-repeat: no-repeat;
  background-size: var(--fa-l) calc(var(--fa-k) * var(--fa-ep)), 26% var(--fa-ep);
  background-position: var(--fa-x) calc(100% - var(--fa-bas)), var(--fa-c) calc(100% - var(--fa-bas));
}
/* Modèle Cinéma : le pavé Klein sous le mot reste en 3e fond. */
:root .fl-scene.fl-scene-accueil.fl-mod-cinema[data-anim-titre] .fl-titre .v6-lapsus {
  background-image: linear-gradient(var(--fa-trait), var(--fa-trait)), linear-gradient(90deg, transparent, var(--fa-reflet) 50%, transparent), linear-gradient(#001CA8, #001CA8);
  background-size: var(--fa-l) calc(var(--fa-k) * var(--fa-ep)), 26% var(--fa-ep), 100% calc(100% - .2em - .075em);
  background-position: var(--fa-x) 100%, var(--fa-c) 100%, 0 .2em;
}

/* ── Entrées du titre ── */
@keyframes fa-monte { from { opacity: 0; transform: translateY(.32em); } }
@keyframes fa-rideau { from { opacity: .2; transform: translateY(.22em); clip-path: inset(100% -.3em -.5em -.3em); } to { clip-path: inset(-.4em -.3em -.5em -.3em); } }
@keyframes fa-net { from { opacity: 0; filter: blur(14px); transform: scale(1.025); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes fa-glisse { from { opacity: 0; transform: translateX(-.45em); } }
@keyframes fa-mot-net { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }
@keyframes fa-mot-decolle { from { opacity: 0; top: .45em; } to { opacity: 1; top: 0; } }
/* Le trait se dessine de gauche à droite. */
@keyframes fa-dessin { from { --fa-l: 0%; } to { --fa-l: 100%; } }

/* ── Effets du mot, toutes les 10 secondes ── */
/* Trait redessiné : il se retire vers la droite puis repart de la gauche. */
@keyframes fa-redessin {
  0%, 2% { --fa-l: 100%; --fa-x: 100%; }
  8% { --fa-l: 0%; --fa-x: 100%; }
  8.01% { --fa-l: 0%; --fa-x: 0%; }
  15%, 100% { --fa-l: 100%; --fa-x: 0%; }
}
/* Reflet : une lueur Smoke file le long du trait. */
@keyframes fa-comete { 0% { --fa-c: -80%; } 9%, 100% { --fa-c: 180%; } }
/* Battement : le trait s'épaissit deux fois. */
@keyframes fa-battement { 0%, 12%, 100% { --fa-k: 1; } 3%, 8.5% { --fa-k: 2.3; } 5.5% { --fa-k: 1; } }
/* Petit envol du mot, trait compris. */
@keyframes fa-envol { 0%, 9%, 100% { top: 0; } 3% { top: -.13em; } 6% { top: .025em; } }
/* Bleu, rouge : le mot passe au rouge, son trait au bleu (au Smoke sur fond Klein), puis ils reviennent. */
@keyframes fa-echange { 3%, 9% { color: #F32837; --fa-trait: var(--fa-echange-trait); } }

/* « Trait redessiné » */
:root .fl-scene.fl-scene-accueil[data-anim-titre="trait"] .fl-texte.est-active .fl-titre { animation: fa-monte .78s var(--fa-ease) .08s both; }
:root .fl-scene.fl-scene-accueil[data-anim-titre="trait"] .fl-texte.est-active .fl-titre .v6-lapsus { animation: fa-dessin .75s var(--fa-ease) .7s both, fa-redessin 10s ease-in-out 6s infinite; }
/* « Rideau » */
:root .fl-scene.fl-scene-accueil[data-anim-titre="rideau"] { --fa-reflet: rgba(245, 245, 245, .95); }
:root .fl-scene.fl-scene-accueil[data-anim-titre="rideau"] .fl-texte.est-active .fl-titre { animation: fa-rideau 1.05s var(--fa-ease) .08s both; }
:root .fl-scene.fl-scene-accueil[data-anim-titre="rideau"] .fl-texte.est-active .fl-titre .v6-lapsus { animation: fa-dessin .7s var(--fa-ease) .95s both, fa-comete 10s cubic-bezier(.45, 0, .3, 1) 2.2s infinite; }
/* « Mise au point » */
:root .fl-scene.fl-scene-accueil[data-anim-titre="mise_au_point"] .fl-texte.est-active .fl-titre { animation: fa-net 1.1s var(--fa-ease) .05s both; }
:root .fl-scene.fl-scene-accueil[data-anim-titre="mise_au_point"] .fl-texte.est-active .fl-titre .v6-lapsus { animation: fa-mot-net .8s var(--fa-ease) .85s both, fa-battement 10s ease-in-out 3s infinite; }
/* « Envol » */
:root .fl-scene.fl-scene-accueil[data-anim-titre="envol"] .fl-texte.est-active .fl-titre { animation: fa-glisse .85s var(--fa-ease) .05s both; }
:root .fl-scene.fl-scene-accueil[data-anim-titre="envol"] .fl-texte.est-active .fl-titre .v6-lapsus { animation: fa-mot-decolle .9s var(--fa-ease) .6s both, fa-envol 10s ease-in-out 3s infinite; }
/* « Bleu, rouge » */
:root .fl-scene.fl-scene-accueil[data-anim-titre="echange"] .fl-texte.est-active .fl-titre { animation: fa-monte .78s var(--fa-ease) .08s both; }
:root .fl-scene.fl-scene-accueil[data-anim-titre="echange"] .fl-texte.est-active .fl-titre .v6-lapsus { animation: fa-dessin .75s var(--fa-ease) .7s both, fa-echange 10s ease-in-out 3s infinite; }

/* Bouton pause du bandeau (js/signature.js : aria-pressed) : l'effet du mot s'arrête, le trait reste entier. */
:root .fl-scene.fl-scene-accueil[data-anim-titre]:has(.v6-pause[aria-pressed="true"]) .fl-texte.est-active .fl-titre .v6-lapsus { animation: none; }

/* Mouvement réduit : aucune animation, le trait entier à sa place. */
@media (prefers-reduced-motion: reduce) {
  :root .fl-scene.fl-scene-accueil[data-anim-titre] .fl-texte .fl-titre,
  :root .fl-scene.fl-scene-accueil[data-anim-titre] .fl-texte .fl-titre .v6-lapsus { animation: none !important; }
}