/* Ecran de choix Formation / Agent vocal (Mika, 2026-10-28) : le premier ecran des
   deux sites, juste sous l'en-tete. Fond : Lensky qui court a travers le Quebec cote
   formation, la scene 3D de LEA cote agent vocal ; deux grands mots par-dessus.
   Partage tel quel par les pages statiques de la formation et par le site de
   LEA (SelecteurSites.tsx) : un seul fichier, un seul rendu.
   --choix-y : distance entre le haut de l'ECRAN et le titre, la meme sur les deux
   sites pour que les mots ne bougent pas quand on passe de l'un a l'autre (Mika,
   2026-10-29). --choix-entete : hauteur de l'en-tete quand il est DANS le flux
   (formation, regle dans portail.css) ; sur LEA l'en-tete flotte par-dessus (0). */
.choix{
  --choix-vert:#0E4A24; --choix-or:#C99A3B; --choix-y:clamp(7.5rem,18svh,11rem);
  position:relative;z-index:20;box-sizing:border-box;
  min-height:calc(100svh - var(--choix-entete,0px));
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:clamp(1.25rem,2.4vw,2rem);
  padding:calc(var(--choix-y) - var(--choix-entete,0px)) clamp(1rem,3vw,2.5rem) clamp(1.5rem,4vw,3rem);
  overflow:hidden;background:#F7F1E3;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#fff;text-align:center}
.choix > :not(.choix-scene){position:relative}
/* Cote formation : Lensky court a travers le Quebec (dessin a la main, Mika 2026-10-28).
   Quatre couches d'images (assets/scenes/q-*.webp, 2 bandes cote a cote chacune) glissent
   a des vitesses differentes ; Lensky joue une planche de 6 images. Rien n'est recalcule
   pendant l'animation : seulement des images qui se deplacent. */
/* La scene couvre toujours toute la largeur (une bande de decor fait 16:9 : hauteur au
   moins 56,25vw), ancree en bas : la route reste visible, le haut du ciel est rogne. */
.choix-scene{position:absolute;left:0;right:0;bottom:0;height:max(100%,56.25vw);pointer-events:none}
/* Le premier ecran de la formation prend 3/4 de l'ecran (en-tete compris) : le contenu
   qui suit depasse en bas et invite a descendre. Voile noir sur la scene pour faire
   ressortir le titre et les mots en blanc. */
.choix:not(.choix-lea){min-height:calc(var(--choix-bas) - var(--choix-entete,0px))}
.choix-scene::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.36)}
.choix-couche{position:absolute;left:0;top:0;height:100%;width:auto;max-width:none;
  will-change:transform;animation:choix-defile linear infinite}
.c-ciel{animation-duration:90s}.c-loin{animation-duration:48s}.c-fleuve{animation-duration:30s}.c-pres{animation-duration:9s}
@keyframes choix-defile{to{transform:translateX(-50%)}}
/* --lh : hauteur de Lensky, en % de la scene, plafonnee sur telephone. Ses pieds sont a
   15,5 % du bas de l'image : on les garde sur la route (8,6 % du bas de la scene). */
.choix-lensky{--lh:min(36%,40vw);position:absolute;left:24%;height:var(--lh);bottom:calc(8.6% - .155 * var(--lh));
  aspect-ratio:580/440;background:url("/formation/assets/scenes/q-lensky.webp") 0 0/600% 100% no-repeat;
  animation:choix-course 1.08s steps(6) infinite}
@keyframes choix-course{to{background-position:120% 0}}
@media (max-width:760px){.choix-lensky{left:auto;right:6%}}
@media (prefers-reduced-motion:reduce){.choix-couche,.choix-lensky{animation:none}}
.choix *{box-sizing:border-box}
.choix-titre{margin:0;font-size:clamp(1.05rem,.9rem + .6vw,1.4rem);font-weight:600;letter-spacing:.02em;
  line-height:1.3;text-shadow:0 2px 14px rgba(0,0,0,.35)}
/* Deux grands mots, sans boite (piste « surligneur », Mika 2026-10-29). Le site affiche
   est pose sur un coup de surligneur or, ecrit en vert boussole ; l'autre est en blanc
   et prend le meme traitement au survol. */
.choix-mots{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;
  gap:clamp(1.25rem,4vw,3.5rem)}
.choix-mot{display:flex;flex-direction:column;align-items:center;gap:clamp(.6rem,1.2vw,1rem);
  color:#fff;text-decoration:none}
.choix-mot-nom{position:relative;isolation:isolate;padding:0 .06em}
.choix-mot-texte{display:block;font-size:clamp(3rem,1.6rem + 5.6vw,6.25rem);font-weight:800;
  letter-spacing:-.045em;line-height:1.05;white-space:nowrap;text-shadow:0 4px 24px rgba(0,0,0,.3);
  transition:color .3s ease}
.choix-feutre{position:absolute;z-index:-1;left:-.14em;right:-.14em;top:18%;bottom:6%;
  background:var(--choix-or);border-radius:6px 14px 8px 12px;
  transform:rotate(-1.5deg) scaleX(0);transform-origin:left;transition:transform .3s ease}
.choix-mot[aria-current] .choix-feutre,.choix-mot:hover .choix-feutre,.choix-mot:focus-visible .choix-feutre{
  transform:rotate(-1.5deg) scaleX(1)}
.choix-mot[aria-current] .choix-mot-texte,.choix-mot:hover .choix-mot-texte,.choix-mot:focus-visible .choix-mot-texte{
  color:var(--choix-vert);text-shadow:none}
.choix-mot:focus-visible{outline:3px solid #fff;outline-offset:6px;border-radius:8px}
.choix-mot-detail{display:inline-flex;align-items:center;gap:.5rem;font-size:clamp(.9rem,.85rem + .25vw,1rem);
  font-weight:600;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.choix-mot-detail svg{width:1em;height:1em;flex:none;transition:transform .2s ease}
.choix-mot[aria-current] .choix-mot-detail svg{color:var(--choix-or)}
.choix-mot:hover .choix-mot-detail svg{transform:translateX(3px)}
.choix-mot[aria-current]:hover .choix-mot-detail svg{transform:translateY(3px)}
/* Cote agent vocal : l'ecran est transparent, on voit la scene 3D de l'immeuble (ou son
   illustration fixe) qui est derriere, sans voile (Mika, 2026-10-28). Le fond est clair :
   textes en vert boussole avec un halo clair au lieu du blanc. */
.choix.choix-lea{background:transparent;color:var(--choix-vert)}
/* Le carre du haut de page (carte blanche de la formation, panneau « Agent vocal LEA »)
   commence a --carte-y du haut de l'ecran sur les deux sites, comme les mots (Mika,
   2026-10-29). Formation : portail.css en tire le chevauchement de la carte. LEA : le
   panneau est colle a --hero-haut du haut de sa section (SectionShell « top »), donc
   l'ecran de choix mesure exactement --carte-y moins --hero-haut ; ses mots peuvent
   deborder dessous (transparent, le haut de la section est vide). */
/* --choix-bas : fin du premier ecran de la formation (bas de l'animation). */
:root{--carte-y:51svh;--choix-bas:75svh;--hero-haut:6.5rem}
/* Telephone : memes proportions que l'ordinateur (Mika, 2026-10-29). Les deux mots
   restent cote a cote, a la meme echelle par rapport a la largeur de l'ecran, et la
   carte suit juste apres, a la meme distance relative. La carte ne chevauche que le
   bas de la route : Lensky reste visible au-dessus d'elle. */
@media (max-width:760px){
  /* La carte de la formation commence a la meme hauteur que le panneau de LEA, juste
     sous les mots. Pour garder Lensky visible, le paysage garde sa taille et c'est le
     haut du ciel qui est coupe (.choix-scene plus haute que l'ecran de choix, ancree
     en bas) ; Lensky, plus petit, court sur la route entre les mots et la carte. */
  :root{--carte-y:36svh;--choix-bas:39svh}
  .choix:not(.choix-lea) .choix-scene{height:max(100%,calc(47svh - 4.6rem))}
  .choix-mots{flex-wrap:nowrap;gap:.75rem;width:100%}
  .choix-mot{flex:1 1 0;min-width:0}
  .choix-mot-texte{font-size:6.6vw}
  /* En bloc : si la ligne passe sur deux lignes, la fleche suit le dernier mot au
     lieu de rester seule sur le cote. */
  .choix-mot-detail{display:block;font-size:.75rem;line-height:1.35;text-wrap:balance}
  .choix-mot-detail svg{display:inline-block;vertical-align:-.15em;margin-left:.3em}
}
.choix.choix-lea{min-height:0;height:calc(var(--carte-y) - var(--hero-haut));padding-bottom:0;overflow:visible}
.choix-lea .choix-titre,.choix-lea .choix-mot-detail{text-shadow:0 0 18px rgba(233,243,236,.95),0 0 4px rgba(233,243,236,.9)}
.choix-lea .choix-mot{color:var(--choix-vert)}
.choix-lea .choix-mot-texte{text-shadow:0 0 22px rgba(233,243,236,.95),0 0 6px rgba(233,243,236,.9)}
.choix-lea .choix-mot:focus-visible{outline-color:var(--choix-vert)}
@media (prefers-reduced-motion:reduce){.choix-feutre,.choix-mot-texte,.choix-mot-detail svg{transition:none}}