/* ==========================================================================
   styles-landing.css : la page d'accueil.

   Phase 2, lot 2. La page a un pic visuel unique et assumé : le défilé des
   quatre outils (§ 5). Tout le reste est tenu en dessous, pour que ce
   moment-là compte. C'est la règle de la direction artistique : concentrer
   l'audace sur un seul élément signature, discipliner tout le reste.

   Le socle ne bouge pas : papier crème, encre, bleu pour l'action, orange
   réservé aux réussites, Bricolage Grotesque. La hiérarchie se fait au
   poids et à l'espace, jamais à la couleur.

   Aucune couleur en dur. Tout vient de design-tokens.css.

   Sommaire :
      1. Trames communes
      2. Le premier écran
      3. Paraf vivant
      4. Le constat (sans / avec)
      5. LE DÉFILÉ DES OUTILS
      6. Le CV et le tri automatique
      7. Les relances
      8. Les écoles
      9. La FAQ
     10. Les guides (carrousel)
     11. La dernière demande
     12. Le pied de page
     13. Le mouvement, et son interrupteur
     14. Écrans étroits
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Trames communes
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

/* L'en-tête est collé en haut : une ancre doit s'arrêter en dessous, pas
   dessous. 68 px de barre, plus une respiration. */
:target { scroll-margin-top: calc(68px + var(--esp-4)); }

.largeur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--esp-3);
}

.section { padding: var(--esp-12) 0; }

/* Une section « pleine » occupe l'écran entier et centre son contenu. Deux
   précautions : svh et non vh, parce que la barre d'adresse d'un téléphone
   fait varier vh et ferait sauter la mise en page au premier défilement ;
   et min-height et non height, pour qu'une section plus haute que l'écran
   grandisse au lieu de se faire couper. */
.pleine {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Une section sur deux se pose sur un fond à peine plus froid que le
   papier. C'est le rythme vertical de la page : pas de bordure, pas de
   cadre, juste un changement de sol. */
.section-creuse { background: var(--surface-creuse); }

.titre-section {
  margin: 0 0 var(--esp-1);
  font-size: var(--t-section);
  font-weight: var(--graisse-titre);
  letter-spacing: var(--suivi-section);
  line-height: var(--interligne-titre);
  max-width: 20ch;
}

/* La petite étiquette qui nomme la section. Elle situe sans peser : c'est
   de l'interface, pas du discours. */
/* La seconde moitié d'un titre, en orange de marque. C'est le seul écart
   assumé à la règle « l'orange ne décore jamais » (CHARTE.md § 1) : il est
   ici demandé, tenu à un seul mot par page, et il tient 5,3:1 sur l'encre. */
.titre-accent { color: var(--orange); }

.etiquette-section {
  margin: 0 0 var(--esp-1);
  font-size: var(--t-interface);
  font-weight: var(--graisse-moyen);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}

.sous-titre {
  margin: 0 0 var(--esp-6);
  font-size: var(--t-sous-titre);
  font-weight: var(--graisse-corps);
  color: var(--muted);
  max-width: 58ch;
  line-height: var(--interligne-corps);
}

/* Le paraphe de la marque, posé sous un titre comme un soulignement tracé
   à la main. La charte interdit de le redresser ou de le recolorer. */
.paraphe {
  display: block;
  width: 250px;
  max-width: 60%;
  margin: 0 0 var(--esp-3);
}

.note {
  margin: var(--esp-5) 0 0;
  font-size: var(--t-corps);
  color: var(--muted);
  max-width: 62ch;
  line-height: var(--interligne-corps);
}

/* Bouton d'action de la page. Le système à trois niveaux vit dans
   styles-base.css ; ici, seule la taille change. */
.btn-large {
  font-size: var(--t-sous-titre);
  font-weight: var(--graisse-moyen);
  padding: 15px var(--esp-4);
}

/* --------------------------------------------------------------------------
   2. Le premier écran
   -------------------------------------------------------------------------- */

/* Le premier écran prend la fenêtre entière, moins la barre du haut. Rien
   de la section suivante ne dépasse : ce qui dépasse à moitié se lit comme
   une erreur de mise en page, pas comme une invitation à descendre. */
.hero {
  min-height: calc(100svh - 68px);
  display: flex;
  align-items: center;
  padding: var(--esp-8) 0;
}

.hero-grille { width: 100%; }

.hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--esp-8);
  align-items: center;
}

/* Le titre est en trois lignes fixes (les <br> du HTML). Sa plus longue
   ligne doit tenir dans la colonne : le plafond descend donc à 48 px là où
   le reste du site monte à 64 px. */
.hero-titre {
  margin: 0 0 var(--esp-3);
  font-size: clamp(2.125rem, 1.55rem + 1.9vw, 3rem);
  font-weight: var(--graisse-titre);
  letter-spacing: var(--suivi-page);
  line-height: 1.08;
  text-wrap: balance;
}

.hero-chapo {
  margin: 0 0 var(--esp-5);
  font-size: var(--t-sous-titre);
  color: var(--muted);
  max-width: 50ch;
  line-height: var(--interligne-corps);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

/* Volontairement un lien, pas un bouton : deux boutons côte à côte se
   disputeraient l'attention, et la charte veut une action par écran. */
.hero-lien {
  font-size: var(--t-corps);
  font-weight: var(--graisse-moyen);
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--metal);
  padding-bottom: 2px;
  transition:
    color var(--dur-court) var(--ease-sortie),
    border-color var(--dur-court) var(--ease-sortie);
}

.hero-lien:hover { color: var(--ink); border-color: var(--ink); }

/* Le cadre est plus large que Paraf : c'est cette marge qui donne aux
   étiquettes de quoi se poser à côté du personnage plutôt que dessus. */
.hero-visuel {
  position: relative;
  justify-self: center;
  width: min(100%, 460px);
  padding: var(--esp-4) 0 var(--esp-6);
}

/* Étiquettes flottantes de la charte : carte blanche, rotation de -6 à -8°,
   ombre douce, débordant volontairement du visuel. */
.etiquette {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte);
  padding: 10px 14px;
  display: grid;
  gap: 3px;
}

/* Une à gauche, deux à droite, aucune sur le visage ni sur le bras levé. */
.etiquette-1 { left: -4%;  bottom: 26%; transform: rotate(-7deg); }
.etiquette-2 { right: -4%; top: 4%;     transform: rotate(6deg); }
.etiquette-3 { right: -2%; bottom: 2%;  transform: rotate(-4deg); }

.etiquette-titre { font-size: var(--t-interface); color: var(--muted-doux); }

.etiquette-ligne {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  font-weight: var(--graisse-moyen);
  white-space: nowrap;
}

.pastille {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.pastille-alerte { background: var(--alerte); }
.pastille-info   { background: var(--blue); }
.pastille-succes { background: var(--succes); }

/* --------------------------------------------------------------------------
   3. PARAF VIVANT

   Quatre gestes, tous très lents, aucun n'attire l'œil à lui seul : le
   corps respire, l'ombre au sol suit, le capuchon se balance autour de son
   inclinaison de charte, le bras salue et les yeux clignent.

   Deux règles techniques valables partout ici :

   a) un attribut transform="..." dans le SVG et une propriété CSS transform
      ne se cumulent pas : la seconde écrase le premier. Toutes les
      inclinaisons de la charte (-5° pour le corps, -6° pour le capuchon)
      sont donc RÉÉCRITES dans chaque étape des keyframes. Retirer un -5deg
      d'une image-clé redresserait le personnage, ce que la charte interdit.

   b) transform-box: view-box fait compter transform-origin dans les
      coordonnées du viewBox (0 0 260 330), pas dans le cadre de l'élément.
      C'est ce qui permet d'écrire « pivote autour des pieds » en clair.
   -------------------------------------------------------------------------- */

.paraf {
  display: block;
  width: auto;
  height: clamp(250px, 27vw, 350px);
  margin: 0 auto;
  overflow: visible;
}

.paraf-corps,
.paraf-capuchon,
.paraf-bras,
.paraf-yeux,
.paraf-ombre { transform-box: view-box; }

/* La respiration : un degré autour des pieds, en 6 secondes. Assez lent
   pour qu'on ne le voie pas bouger, assez présent pour que le personnage
   ne soit pas un autocollant. */
.paraf-corps {
  transform-origin: 130px 300px;
  animation: paraf-respire 6s ease-in-out infinite;
}

@keyframes paraf-respire {
  0%, 100% { transform: rotate(-5deg)   translateY(0); }
  50%      { transform: rotate(-6.1deg) translateY(-5px); }
}

/* L'ombre suit : quand le personnage se redresse, elle rétrécit un peu. */
.paraf-ombre {
  transform-origin: 132px 312px;
  animation: paraf-ombre 6s ease-in-out infinite;
}

@keyframes paraf-ombre {
  0%, 100% { transform: scale(1);          opacity: 1; }
  50%      { transform: scale(0.94, 0.88); opacity: 0.82; }
}

/* Le capuchon se balance autour de -6°, jamais au-delà de -8,2° ni en deçà
   de -4,4° : la charte veut un capuchon penché, pas droit. Le pivot est la
   bague, en bas du capuchon. */
.paraf-capuchon {
  transform-origin: 132px 134px;
  animation: paraf-capuchon 6.8s ease-in-out infinite;
}

@keyframes paraf-capuchon {
  0%, 100% { transform: rotate(-6deg); }
  35%      { transform: rotate(-8.2deg); }
  70%      { transform: rotate(-4.4deg); }
}

/* Le salut dure une seconde et demie, le cycle en dure onze : Paraf salue
   à l'ouverture, se tient tranquille, puis resalue. Pivot à l'épaule. */
.paraf-bras {
  transform-origin: 168px 178px;
  animation: paraf-salut 11s var(--ease-sortie) infinite;
}

@keyframes paraf-salut {
  0%   { transform: rotate(0deg); }
  3%   { transform: rotate(-15deg); }
  6%   { transform: rotate(6deg); }
  9%   { transform: rotate(-11deg); }
  13%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* Le clignement. Les paupières n'existent pas dans le dessin : on écrase
   les yeux sur 4 % du cycle, soit environ 220 ms. */
.paraf-yeux {
  transform-origin: 133px 181px;
  animation: paraf-cligne 5.5s steps(1, end) infinite;
}

@keyframes paraf-cligne {
  0%, 92%   { transform: scaleY(1); }
  94%       { transform: scaleY(0.12); }
  96%       { transform: scaleY(1); }
  97%       { transform: scaleY(0.12); }
  99%, 100% { transform: scaleY(1); }
}

/* Au survol, tout le personnage se soulève. Un seul geste ajouté, sur
   l'élément entier : rien ne se met à clignoter. */
@media (hover: hover) and (pointer: fine) {
  .hero-visuel .paraf { transition: transform var(--dur-long) var(--ease-sortie); }
  .hero-visuel:hover .paraf { transform: translateY(-8px); }
}

.final-paraf {
  display: block;
  height: 112px;
  width: auto;
  margin: 0 auto var(--esp-3);
}

.ecoles-paraf {
  height: 116px;
  width: auto;
  flex: none;
  align-self: center;
}

/* --------------------------------------------------------------------------
   4. Le constat (sans / avec)

   Typographie seule. Pas de carte, pas d'illustration, pas de couleur
   d'accent : ce bloc doit frapper à la lecture et rester visuellement en
   dessous du défilé qui suit.
   -------------------------------------------------------------------------- */

.constat { padding: var(--esp-12) 0 var(--esp-8); }

.constat-titre {
  margin: 0 0 var(--esp-8);
  font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);
  font-weight: var(--graisse-titre);
  letter-spacing: var(--suivi-page);
  line-height: 1.15;
  max-width: 24ch;
}

.face-a-face {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-6);
}

/* Le seul trait de séparation de la section : un filet vertical entre les
   deux colonnes. Il ne survit pas au passage sur une seule colonne. */
.face-avec {
  border-left: 1px solid var(--line);
  padding-left: var(--esp-6);
}

.face-etiquette {
  margin: 0 0 var(--esp-3);
  font-size: var(--t-interface);
  font-weight: var(--graisse-moyen);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-doux);
}

.face-avec .face-etiquette { color: var(--blue); }

.face-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
}

.face-liste li {
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.1875rem);
  line-height: 1.45;
  padding-left: var(--esp-4);
  position: relative;
}

.face-sans .face-liste li { color: var(--muted); }
.face-avec .face-liste li { color: var(--ink); font-weight: var(--graisse-moyen); }

/* À gauche une barre couchée, à droite une coche. Deux signes opposés, en
   traits, sans jamais compter sur la couleur seule pour dire lequel est
   lequel : la forme suffit. */
.face-sans .face-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 14px;
  height: 2px;
  background: var(--metal);
}

.face-avec .face-liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.34em;
  width: 6px;
  height: 12px;
  border: solid var(--blue);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* --------------------------------------------------------------------------
   5. LE DÉFILÉ DES OUTILS

   Le pic visuel de la page.

   Comment ça marche, en une phrase : la piste est haute (quatre écrans),
   son contenu est collé en haut de la fenêtre pendant toute cette hauteur,
   et le rail des panneaux glisse latéralement au rythme exact du
   défilement vertical.

   La mécanique est entièrement en CSS, avec le défilement piloté
   (view-timeline / animation-timeline). Trois conséquences :
     - aucun JavaScript ne calcule de position, donc rien ne saccade ;
     - rien à réparer si un script tombe ;
     - la CSP du site (style-src 'self') est respectée, puisque rien n'est
       écrit dans un attribut style.

   Le repli est dans @supports plus bas : sur un navigateur qui ne connaît
   pas encore cette norme, et sur tout téléphone, la même structure devient
   un carrousel qu'on pousse au doigt, avec accrochage panneau par panneau.
   -------------------------------------------------------------------------- */

.defile {
  background: var(--ink);
  color: var(--paper);
}

/* PAR DÉFAUT, la section est un carrousel qu'on pousse au doigt ou à la
   souris. C'est le comportement de base : il ne demande ni JavaScript ni
   norme récente, et il marche sur tout. Le défilé collé n'est ajouté
   par-dessus que là où le navigateur sait le faire (voir plus bas). */
.defile-piste { padding: var(--esp-12) 0; }

.defile-collant {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
}

.defile-tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-4);
  flex-wrap: wrap;
}

.defile-tete .titre-section { margin-bottom: var(--esp-1); }

.defile-invite {
  margin: 0;
  font-size: var(--t-corps);
  color: var(--metal);
}

.defile-jauge {
  display: none;
  width: min(240px, 40%);
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.22);
  overflow: hidden;
  margin-bottom: var(--esp-1);
}

.defile-jauge-remplie {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--gloss);
  transform-origin: left center;
  transform: scaleX(0);
}

.defile-rail {
  display: flex;
  align-items: stretch;
  gap: var(--esp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 max(var(--esp-3), calc((100vw - var(--largeur)) / 2)) var(--esp-2);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.defile-rail::-webkit-scrollbar { display: none; }

.panneau { scroll-snap-align: center; }

.panneau {
  position: relative;
  overflow: hidden;
  flex: none;
  width: min(1000px, 86vw);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--esp-5);
  align-items: center;
  background: rgba(255, 253, 248, 0.055);
  border: 1px solid rgba(255, 253, 248, 0.14);
  border-radius: var(--r-panneau);
  padding: var(--esp-5);
}

/* Le numéro est du texte : il lui faut 4,5:1. Le bleu clair de la charte
   n'atteint que 4,42:1 sur le fond d'un panneau, et l'orange est réservé
   aux moments de réussite (CHARTE.md § 1). C'est donc le métal, à 10,2:1. */
/* Chaque outil a sa teinte. Elle ne sert qu'à trois choses : le filet du
   haut, le numéro et les puces. Le texte, lui, reste au blanc cassé : la
   couleur situe, elle ne se lit jamais. */
.panneau-01 { --accent-panneau: #8E9BFF; }
.panneau-02 { --accent-panneau: #5FD8A4; }
.panneau-03 { --accent-panneau: #FF9366; }
.panneau-04 { --accent-panneau: #B9A2FF; }

.panneau::before {
  content: "";
  position: absolute;
  left: var(--esp-5);
  right: var(--esp-5);
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent-panneau, var(--gloss));
}

.panneau-num {
  font-family: var(--police-chiffres);
  font-size: var(--t-interface);
  color: var(--accent-panneau, var(--metal));
}

.panneau-titre {
  margin: var(--esp-1) 0 var(--esp-2);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  font-weight: var(--graisse-titre);
  letter-spacing: var(--suivi-section);
}

.panneau-chapo {
  margin: 0;
  font-size: var(--t-corps);
  line-height: var(--interligne-corps);
  color: var(--metal);
  max-width: 46ch;
}

.panneau-points {
  margin: var(--esp-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--esp-1);
}

.panneau-points li {
  position: relative;
  padding-left: var(--esp-3);
  font-size: 0.9375rem;
}

/* Le marqueur est un carré de 6 px, pas une puce ronde : c'est le même
   vocabulaire que les pastilles d'état du produit. */
.panneau-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  /* Carré de 6 px : élément graphique, seuil 3:1. Toutes les teintes de
     panneau sont au-dessus de 5:1 sur ce fond. */
  background: var(--accent-panneau, var(--gloss));
}

.panneau-lien {
  display: inline-block;
  margin-top: var(--esp-3);
  font-size: var(--t-corps);
  font-weight: var(--graisse-moyen);
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 253, 248, 0.4);
  padding-bottom: 2px;
  transition: border-color var(--dur-court) var(--ease-sortie);
}

.panneau-lien:hover { border-color: var(--accent-panneau, var(--gloss)); }

/* Le côté droit d'un panneau : une démonstration, jamais une capture
   d'écran. Ce sont des morceaux d'interface redessinés pour la page. */
.panneau-visuel {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-carte);
  padding: var(--esp-4);
  min-height: 260px;
  display: grid;
  align-content: center;
  gap: var(--esp-3);
}

.panneau-visuel-titre {
  margin: 0;
  font-size: var(--t-interface);
  font-weight: var(--graisse-moyen);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-doux);
  text-align: center;
}

/* Les quatre états de Paraf, en rangée compacte dans le panneau 01. */
.etats-rangee {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--esp-1);
}

.etat {
  margin: 0;
  border-radius: var(--r-carte);
  padding: var(--esp-2) var(--esp-1);
  text-align: center;
}

.etat img {
  display: block;
  height: 72px;
  width: auto;
  margin: 0 auto var(--esp-1);
}

.etat b {
  display: block;
  font-size: 0.8125rem;
  font-weight: var(--graisse-moyen);
}

.etat span {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.35;
  display: block;
  margin-top: 2px;
}

.etat-neutre    { background: var(--fond-neutre); }
.etat-succes    { background: var(--fond-succes); }
.etat-alerte    { background: var(--fond-alerte); }
.etat-signature { background: var(--fond-signature); }

/* Le CV miniature du panneau 02 : des barres, pas du faux texte. Un faux
   texte illisible se lit quand même de travers ; des barres disent
   « document » sans mentir sur son contenu. */
.mini-cv {
  display: grid;
  gap: var(--esp-1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-champ);
  padding: var(--esp-3);
}

.mini-cv-ligne {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-creuse);
}

.mini-cv-titre { height: 14px; width: 55%; background: var(--ink); }
.mini-cv-ligne.w-85 { width: 85%; }
.mini-cv-ligne.w-70 { width: 70%; }
.mini-cv-ligne.w-60 { width: 60%; }
.mini-cv-ligne.w-40 { width: 40%; }

.mini-cv-bloc {
  height: 44px;
  border-radius: var(--esp-1);
  background: var(--fond-neutre);
  margin: var(--esp-1) 0;
}

.mini-badge {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  justify-content: center;
  font-size: 0.875rem;
  font-weight: var(--graisse-moyen);
  color: var(--succes-texte);
}

/* Le fil de suivi du panneau 03. Une seule étape est active : c'est la
   seule à porter la couleur, et elle porte aussi un texte qui le dit. */
.fil {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-3);
}

.fil-etape {
  position: relative;
  padding-left: var(--esp-4);
  font-size: 0.9375rem;
}

.fil-etape b { display: block; font-weight: var(--graisse-moyen); }
.fil-etape i { font-style: normal; font-size: 0.8125rem; color: var(--muted-doux); }

.fil-pastille {
  position: absolute;
  left: 0;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--metal);
  background: var(--surface);
}

/* Le trait qui relie deux étapes. Il ne descend pas depuis la dernière. */
.fil-etape:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 17px;
  width: 1px;
  height: calc(100% + var(--esp-3) - 17px);
  background: var(--line);
}

.fil-faite .fil-pastille { border-color: var(--succes); background: var(--succes); }
.fil-active .fil-pastille { border-color: var(--alerte); background: var(--alerte); }
.fil-active b { color: var(--alerte-texte); }

/* La liste de prospection du panneau 04. */
.cible { display: grid; gap: var(--esp-2); }

.cible-titre {
  margin: 0;
  font-size: var(--t-interface);
  font-weight: var(--graisse-moyen);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-doux);
}

.cible-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-1);
  counter-reset: cible;
}

.cible-liste li {
  counter-increment: cible;
  position: relative;
  padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-champ);
  font-size: 0.9375rem;
}

.cible-liste li::before {
  content: counter(cible);
  position: absolute;
  left: var(--esp-2);
  top: var(--esp-2);
  font-family: var(--police-chiffres);
  font-size: var(--t-interface);
  color: var(--blue);
}

.cible-liste b { display: block; font-weight: var(--graisse-moyen); }
.cible-liste span { font-size: 0.8125rem; color: var(--muted-doux); }

.cible-note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ---- Le défilement piloté, quand le navigateur le connaît -----------------
   La règle vit dans @supports pour deux raisons : elle ne s'applique que
   là où elle a du sens, et le repli au-dessus reste intact partout
   ailleurs. `animation-range: contain` couvre exactement la période
   pendant laquelle la piste remplit la fenêtre, c'est-à-dire la période
   où le contenu est collé. */
/* Le préfixe html:not(.sans-defile) sur chaque règle est un filet, pas une
   coquetterie. Si, chez un visiteur, la timeline de défilement ne se
   résout pas (rendu suspendu, cas limite d'un moteur, bogue à venir), le
   rail resterait immobile et seul le premier panneau serait atteignable :
   la section serait morte. script-landing.js détecte exactement ce cas et
   pose .sans-defile sur <html>, ce qui rend d'un coup le carrousel qu'on
   pousse au doigt. Personne ne se retrouve devant un mur. */
@supports (animation-timeline: view()) {
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {

    /* La piste devient haute de quatre écrans : c'est cette hauteur qui
       règle la vitesse du défilé. Un écran pour lire, trois pour faire
       passer les trois panneaux suivants. */
    html:not(.sans-defile) .defile-piste {
      height: 400vh;
      padding: 0;
      view-timeline-name: --piste-outils;
      view-timeline-axis: block;
    }

    /* Le contenu reste collé en haut pendant toute la traversée. */
    html:not(.sans-defile) .defile-collant {
      position: sticky;
      top: 0;
      height: 100vh;
      min-height: 620px;
      justify-content: center;
      overflow: hidden;
    }

    /* Le rail n'est plus poussé à la main : il est tiré par le
       défilement de la page. */
    html:not(.sans-defile) .defile-rail {
      overflow-x: visible;
      scroll-snap-type: none;
      width: max-content;
      padding-bottom: 0;
      animation: defile-glisse linear both;
      animation-timeline: --piste-outils;
      animation-range: contain 0% contain 100%;
    }

    html:not(.sans-defile) .defile-jauge { display: block; }

    html:not(.sans-defile) .defile-jauge-remplie {
      animation: defile-jauge linear both;
      animation-timeline: --piste-outils;
      animation-range: contain 0% contain 100%;
    }
  }
}

/* -100 % vaut la largeur du rail entier : l'amener à +100vw pose son bord
   droit contre le bord droit de la fenêtre. Le dernier panneau finit donc
   pile en place, quel que soit le nombre de panneaux. */
@keyframes defile-glisse {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% + 100vw)); }
}

@keyframes defile-jauge {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   6. Le CV

   À gauche le texte, à droite une scène : une feuille de CV, sa note posée
   dessus comme un tampon, et Paraf penché par-dessus le bord avec une
   bulle. La feuille n'est pas une capture d'écran : des barres disent
   « document » sans mentir sur un contenu qui n'existe pas.
   -------------------------------------------------------------------------- */

.cv-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--esp-8);
  align-items: center;
  width: 100%;
}

.cv-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-3);
}

.cv-point {
  border-left: 2px solid var(--line);
  padding-left: var(--esp-3);
  transition: border-color var(--dur) var(--ease-sortie);
}

.cv-point:hover { border-color: var(--blue); }

.cv-point h3 {
  margin: 0 0 var(--esp-0-5);
  font-size: var(--t-corps);
  font-weight: var(--graisse-titre);
}

.cv-point p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: var(--interligne-corps);
  max-width: 48ch;
}

/* La scène. Le rembourrage du haut laisse la place à Paraf, qui déborde
   volontairement au-dessus de la feuille. */
.cv-scene {
  position: relative;
  padding-top: var(--esp-8);
  justify-self: center;
  width: min(100%, 430px);
}

.cv-relecteur {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--esp-1);
  pointer-events: none;
}

/* Paraf est coupé par le haut de la feuille : on ne voit que le buste, ce
   qui donne l'impression qu'il est derrière, en train de relire. */
.cv-paraf {
  height: 104px;
  width: auto;
  display: block;
  transform: translateY(14px) rotate(4deg);
}

/* La bulle. Elle arrive, tient quelques secondes, repart, et recommence :
   un commentaire de relecture, pas un bandeau publicitaire. */
.cv-bulle {
  position: relative;
  margin: 0 0 var(--esp-2);
  max-width: 22ch;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8125rem;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 12px 12px 4px 12px;
  box-shadow: var(--ombre-carte);
  animation: cv-bulle 9s var(--ease-sortie) infinite;
}

/* La pointe de la bulle, en bas à droite, tournée vers Paraf. */
.cv-bulle::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: 0;
  width: 12px;
  height: 12px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

@keyframes cv-bulle {
  0%          { opacity: 0; transform: translateY(6px) scale(0.96); }
  6%, 42%     { opacity: 1; transform: none; }
  50%, 100%   { opacity: 0; transform: translateY(-4px) scale(0.98); }
}

.cv-feuille {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte);
  padding: var(--esp-4);
  display: grid;
  gap: var(--esp-3);
}

.cv-feuille-tete {
  display: grid;
  gap: var(--esp-1);
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid var(--line);
}

.cv-nom    { display: block; height: 14px; width: 48%; border-radius: 999px; background: var(--ink); }
.cv-poste  { display: block; height: 9px;  width: 32%; border-radius: 999px; background: var(--metal); }

.cv-feuille-corps { display: grid; gap: var(--esp-1); }

.cv-rubrique {
  display: block;
  height: 8px;
  width: 22%;
  border-radius: 999px;
  background: var(--blue);
  margin-top: var(--esp-2);
}

.cv-trait {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--surface-creuse);
}

.cv-trait.w-90 { width: 90%; }
.cv-trait.w-85 { width: 85%; }
.cv-trait.w-75 { width: 75%; }
.cv-trait.w-70 { width: 70%; }
.cv-trait.w-60 { width: 60%; }

/* La note, posée sur la feuille en bas à gauche, en débordant : c'est un
   tampon apposé sur le document, pas un encadré de la mise en page. */
.cv-note {
  position: absolute;
  left: calc(-1 * var(--esp-3));
  bottom: calc(-1 * var(--esp-4));
  width: 190px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-fenetre);
  padding: var(--esp-3);
}

.cv-note-chiffre {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--police-chiffres);
  font-variant-numeric: tabular-nums;
  font-size: 2.75rem;
  font-weight: var(--graisse-titre);
  line-height: 1;
  letter-spacing: -0.03em;
}

.cv-note-sur { font-size: 0.875rem; color: var(--metal); font-weight: var(--graisse-corps); }

.cv-note-libelle {
  margin: var(--esp-1) 0 var(--esp-2);
  font-size: 0.75rem;
  color: var(--metal);
  line-height: 1.35;
}

.cv-jauge {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.2);
  overflow: hidden;
}

/* La largeur cible est écrite ici, pas posée par le script : la CSP du
   site interdit le style en ligne. Le JavaScript ne fait que compter le
   nombre à voix haute, il ne touche à aucune dimension. */
.cv-jauge-remplie {
  display: block;
  height: 100%;
  width: 92%;
  border-radius: 999px;
  background: #5FD8A4;
}

.cv-controles {
  list-style: none;
  margin: var(--esp-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--esp-1);
}

.cv-controles li {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: 0.875rem;
  color: var(--muted);
}

/* La coche est dessinée en CSS : deux bords d'un rectangle penché. Pas
   d'emoji, pas de police d'icônes pour un seul signe. */
.coche {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--succes);
  position: relative;
}

.coche::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid var(--sur-bleu);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* --------------------------------------------------------------------------
   7. Les relances
   -------------------------------------------------------------------------- */

.grille-3 {
  display: grid;
  gap: var(--esp-2);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* .carte vient de styles-base.css (fond blanc, filet, 14 px de rayon).
   Ici, seul le survol s'ajoute : un soulèvement de deux pixels. */
.carte {
  transition:
    border-color var(--dur) var(--ease-sortie),
    box-shadow var(--dur) var(--ease-sortie),
    transform var(--dur) var(--ease-sortie);
}

@media (hover: hover) and (pointer: fine) {
  .carte:hover {
    border-color: var(--metal);
    box-shadow: var(--ombre-douce);
    transform: translateY(-2px);
  }
}

/* Une teinte par étape, sur le filet du haut et sur le numéro. Elle situe
   l'étape, elle ne porte jamais l'information : le nom de l'étape est
   écrit juste en dessous. */
.carte-01 { --accent-carte: var(--blue);      --fond-carte: var(--fond-neutre); }
/* Le vert de marque ne fait que 3,7:1 sur son propre fond : illisible en
   texte. C'est donc sa version foncée, à 8,3:1. */
.carte-02 { --accent-carte: var(--succes-texte); --fond-carte: var(--fond-succes); }
.carte-03 { --accent-carte: var(--orange-texte); --fond-carte: var(--fond-signature); }

.carte-01, .carte-02, .carte-03 {
  position: relative;
  overflow: hidden;
  background: var(--fond-carte);
  border-color: transparent;
}

.carte-01::before, .carte-02::before, .carte-03::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--accent-carte);
}

.carte-num {
  font-family: var(--police-chiffres);
  font-size: var(--t-interface);
  color: var(--accent-carte, var(--blue));
}

.carte-titre {
  margin: var(--esp-2) 0 var(--esp-1);
  font-size: var(--t-sous-titre);
  font-weight: var(--graisse-titre);
  letter-spacing: var(--suivi-section);
}

.carte-texte {
  margin: 0;
  font-size: var(--t-corps);
  color: var(--muted);
  line-height: var(--interligne-corps);
}

/* --------------------------------------------------------------------------
   8. Les questions, et les écoles

   Deux colonnes : les questions à gauche, la demande des écoles à droite.
   Deux publics dans un seul écran, sans que le second prenne la place du
   premier.
   -------------------------------------------------------------------------- */

.questions-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--esp-8);
  align-items: start;
  width: 100%;
}

.questions-colonne .titre-section { margin-bottom: var(--esp-4); }

.faq {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.faq-item { border-bottom: 1px solid var(--line); }

.faq-question {
  list-style: none;
  cursor: pointer;
  padding: var(--esp-3) var(--esp-5) var(--esp-3) 0;
  font-size: var(--t-corps);
  font-weight: var(--graisse-moyen);
  letter-spacing: var(--suivi-section);
  position: relative;
  transition: color var(--dur-court) var(--ease-sortie);
}

/* Le triangle par défaut de Safari et de Chrome, retiré des deux façons
   que ces navigateurs comprennent. */
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ""; }

.faq-question:hover { color: var(--blue); }

.faq-question:focus-visible {
  outline: none;
  box-shadow: var(--focus-anneau);
  border-radius: var(--r-champ);
}

/* Le signe plus, dessiné en deux traits. La barre verticale disparaît
   quand la question est ouverte : le plus devient un moins. */
.faq-question::before,
.faq-question::after {
  content: "";
  position: absolute;
  right: var(--esp-1);
  top: 50%;
  background: var(--ink);
  transition:
    transform var(--dur) var(--ease-sortie),
    opacity var(--dur) var(--ease-sortie);
}

.faq-question::before { width: 12px; height: 2px; margin-top: -1px; }

.faq-question::after {
  width: 2px;
  height: 12px;
  margin-top: -6px;
  right: calc(var(--esp-1) + 5px);
}

.faq-item[open] .faq-question::after { transform: rotate(90deg); opacity: 0; }

.faq-reponse { padding: 0 var(--esp-6) var(--esp-3) 0; }

.faq-reponse p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: var(--interligne-corps);
}

.faq-item[open] .faq-reponse {
  animation: faq-ouvre var(--dur) var(--ease-sortie) both;
}

@keyframes faq-ouvre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Le second public. Volontairement plus petit et plus calme que la colonne
   de gauche : l'étudiant reste la personne à qui la page parle. */
.ecoles-bloc {
  position: relative;
  background: var(--fond-neutre);
  border-radius: var(--r-panneau);
  padding: var(--esp-5);
  align-self: start;
}

.ecoles-paraf {
  position: absolute;
  top: calc(-1 * var(--esp-5));
  right: var(--esp-4);
  height: 96px;
  width: auto;
}

.ecoles-titre {
  margin: 0 0 var(--esp-2);
  font-size: var(--t-sous-titre);
  font-weight: var(--graisse-titre);
  letter-spacing: var(--suivi-section);
  max-width: 22ch;
}

.ecoles-para {
  margin: 0 0 var(--esp-4);
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: var(--interligne-corps);
}

/* --------------------------------------------------------------------------
   10. Les guides (carrousel)

   Des fiches hautes qu'on pousse au doigt, à la souris ou aux flèches. La
   fiche survolée reprend ses couleurs et les autres s'éteignent : c'est le
   seul endroit de la page où une image est traitée, et ça remplace un
   soulèvement de plus.
   -------------------------------------------------------------------------- */

.guides {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--esp-12) 0;
  background: var(--surface-creuse);
  overflow: hidden;
}

.guides-grille {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--esp-6);
  align-items: center;
  width: 100%;
}

.guides-intro { align-self: center; }

.guides-chapo {
  margin: var(--esp-2) 0 var(--esp-3);
  font-size: var(--t-corps);
  color: var(--muted);
  line-height: var(--interligne-corps);
}

.guides-tous {
  font-size: var(--t-corps);
  font-weight: var(--graisse-moyen);
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-court) var(--ease-sortie);
}

.guides-tous:hover { border-color: var(--blue); }

.guides-fleches {
  display: flex;
  gap: var(--esp-1);
  margin-top: var(--esp-4);
}

.guides-fleche {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--metal);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.125rem;
  font-family: inherit;
  cursor: pointer;
  transition:
    background var(--dur-court) var(--ease-sortie),
    border-color var(--dur-court) var(--ease-sortie);
}

.guides-fleche:hover { background: var(--survol); border-color: var(--ink); }

.guides-fleche:focus-visible { outline: none; box-shadow: var(--focus-anneau); }

/* Désactivée aux extrémités : on ne cache pas un bouton devenu inutile, on
   le montre inerte, pour que la rangée ne se réorganise pas sous le doigt. */
.guides-fleche[disabled] { opacity: 0.4; cursor: default; }

/* Le rail déborde volontairement à droite du cadre : c'est ce qui dit
   qu'il y a la suite. Le calcul rend la marge intérieure droite égale à ce
   qui reste entre la grille et le bord de l'écran. */
.guides-rail {
  display: flex;
  gap: var(--esp-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: var(--esp-2);
  margin-right: calc(-1 * max(var(--esp-3), (100vw - var(--largeur)) / 2));
  padding-right: max(var(--esp-3), calc((100vw - var(--largeur)) / 2));
  scrollbar-width: none;
}

.guides-rail::-webkit-scrollbar { display: none; }

.guides-rail:focus-visible { outline: none; box-shadow: var(--focus-anneau); }

.fiche {
  flex: none;
  width: 260px;
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--r-panneau);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  transition:
    transform var(--dur) var(--ease-sortie),
    box-shadow var(--dur) var(--ease-sortie),
    border-color var(--dur) var(--ease-sortie);
}

.fiche-visuel {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-creuse);
}

.fiche-visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Éteinte au repos, rallumée au survol de sa fiche : la rangée entière se
     réveille sur celle qu'on regarde. */
  filter: grayscale(1) contrast(0.95);
  transition:
    filter var(--dur-long) var(--ease-sortie),
    transform var(--dur-long) var(--ease-sortie);
}

.fiche-corps {
  padding: var(--esp-3);
  display: grid;
  align-content: start;
  gap: var(--esp-1);
}

.fiche-categorie {
  font-size: var(--t-interface);
  font-weight: var(--graisse-moyen);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}

.fiche-titre {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--graisse-titre);
  line-height: 1.35;
}

.fiche-meta {
  margin: var(--esp-0-5) 0 0;
  font-family: var(--police-chiffres);
  font-size: var(--t-interface);
  color: var(--muted-doux);
}

@media (hover: hover) and (pointer: fine) {
  .guides-rail:hover .fiche { opacity: 0.72; }
  .guides-rail .fiche:hover {
    opacity: 1;
    transform: translateY(-4px);
    border-color: var(--metal);
    box-shadow: var(--ombre-carte);
  }
  .fiche:hover .fiche-visuel img { filter: none; transform: scale(1.05); }
}

.fiche { transition: opacity var(--dur) var(--ease-sortie), transform var(--dur) var(--ease-sortie), box-shadow var(--dur) var(--ease-sortie), border-color var(--dur) var(--ease-sortie); }

.fiche:focus-visible { outline: none; box-shadow: var(--focus-anneau); }

/* --------------------------------------------------------------------------
   11. La dernière demande
   -------------------------------------------------------------------------- */

.final { padding: var(--esp-8) 0 var(--esp-12); }

.final-bloc {
  background: var(--fond-neutre);
  border-radius: var(--r-panneau);
  padding: var(--esp-8) var(--esp-6) var(--esp-12);
  text-align: center;
}

.final-titre {
  margin: 0 0 var(--esp-2);
  font-size: var(--t-section);
  font-weight: var(--graisse-titre);
  letter-spacing: var(--suivi-section);
}

.final-texte {
  margin: 0 auto var(--esp-5);
  font-size: var(--t-corps);
  color: var(--muted);
  max-width: 48ch;
  line-height: var(--interligne-corps);
}

/* --------------------------------------------------------------------------
   12. Le pied de page
   -------------------------------------------------------------------------- */

.pied {
  border-top: 1px solid var(--line);
  padding: var(--esp-8) 0 var(--esp-6);
}

.pied-haut {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--esp-6);
  padding-bottom: var(--esp-6);
  border-bottom: 1px solid var(--line);
}

.pied-logo {
  width: 160px;
  height: auto;
  display: block;
  margin-bottom: var(--esp-2);
}

.pied-baseline {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 34ch;
  line-height: var(--interligne-corps);
}

.pied-colonne { display: grid; align-content: start; gap: var(--esp-1); }

.pied-titre {
  margin: 0 0 var(--esp-1);
  font-size: var(--t-interface);
  font-weight: var(--graisse-moyen);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-doux);
}

.pied-colonne a,
.pied-bouton {
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--muted);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  justify-self: start;
  transition: color var(--dur-court) var(--ease-sortie);
}

.pied-colonne a:hover,
.pied-bouton:hover { color: var(--ink); }

.pied-mention {
  margin: var(--esp-4) 0 0;
  font-size: var(--t-interface);
  color: var(--muted-doux);
}

/* --------------------------------------------------------------------------
   13. Le mouvement, et son interrupteur

   Un seul geste répété dans toute la page : les blocs montent de 14 px en
   apparaissant, dans l'ordre de lecture. C'est la classe .revele, posée
   dans le HTML et allumée par script-landing.js quand le bloc entre à
   l'écran.

   Si le JavaScript ne s'exécute pas, rien n'est caché : la classe
   .js-mouvement n'est jamais posée sur <html>, et toutes les règles
   ci-dessous restent inertes.
   -------------------------------------------------------------------------- */

.js-mouvement .revele {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-long) var(--ease-sortie),
    transform var(--dur-long) var(--ease-sortie);
}

.js-mouvement .revele.vu { opacity: 1; transform: none; }

/* Le décalage entre voisins d'une même rangée. Trois valeurs suffisent :
   au-delà, le dernier bloc se ferait attendre. */
.js-mouvement .revele.retard-1 { transition-delay: 60ms; }
.js-mouvement .revele.retard-2 { transition-delay: 120ms; }
.js-mouvement .revele.retard-3 { transition-delay: 180ms; }



/* La jauge se remplit une fois, quand la scène arrive à l'écran. La
   largeur d'arrivée est celle du CSS (92 %), l'animation part de zéro. */
.cv-scene.vu .cv-jauge-remplie {
  animation: cv-remplit 1100ms var(--ease-sortie) both;
}

@keyframes cv-remplit {
  from { width: 0; }
  to   { width: 92%; }
}

/* Le premier écran ne se dévoile pas au défilement : il est déjà là. Il
   entre en une fois, à l'ouverture de la page. */
.hero-texte > *,
.hero-visuel { animation: entree-hero var(--dur-long) var(--ease-sortie) both; }

.hero-titre   { animation-delay: 0ms; }
.hero-chapo   { animation-delay: 60ms; }
.hero-actions { animation-delay: 120ms; }
.hero-visuel  { animation-delay: 120ms; }

@keyframes entree-hero {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* L'interrupteur général.

   Un utilisateur qui a demandé moins d'animations ne reçoit aucun
   mouvement : ni la respiration de Paraf, ni le défilé des outils, ni les
   dévoilements. La page reste entière et lisible, simplement immobile.
   design-tokens.css met déjà toutes les durées à zéro ; ici on coupe les
   animations en boucle, qu'une durée nulle ne suffit pas à arrêter. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .guides-rail { scroll-behavior: auto; }

  .paraf-corps,
  .paraf-ombre,
  .paraf-capuchon,
  .paraf-bras,
  .paraf-yeux,
  .hero-texte > *,
  .hero-visuel,
  .faq-item[open] .faq-reponse,
  .cv-scene.vu .cv-jauge-remplie,
  .cv-bulle,
  .defile-rail,
  .defile-jauge-remplie { animation: none !important; }

  .hero-visuel:hover .paraf { transform: none; }
  .defile-jauge-remplie { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   14. Écrans étroits

   Chaque palier simplifie la grille du dessus. Aucun texte ne descend sous
   16 px, aucune cible de clic sous 44 px.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .cv-grille,
  .questions-grille { grid-template-columns: 1fr; gap: var(--esp-6); }

  /* Paraf saute du coin du bloc écoles : sur une colonne, il chevaucherait
     la fin de la FAQ juste au-dessus. */
  .ecoles-paraf { display: none; }

  .guides-grille { grid-template-columns: 1fr; gap: var(--esp-4); }
  .pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero-grille { grid-template-columns: 1fr; gap: var(--esp-6); }
  .hero-visuel { order: -1; }

  .titre-section { max-width: none; }

  /* Le panneau d'un outil passe en une colonne : le texte, puis sa
     démonstration en dessous. */
  .panneau {
    grid-template-columns: 1fr;
    width: min(560px, 84vw);
    padding: var(--esp-4);
  }

  .panneau-visuel { min-height: 0; }
  .etats-rangee { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .face-a-face { grid-template-columns: 1fr; gap: var(--esp-5); }
  .face-avec { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--esp-5); }

  .ecoles-bloc { flex-direction: column; align-items: flex-start; }
  .ecoles-paraf { align-self: flex-start; }
}

@media (max-width: 640px) {
  /* Sur un téléphone, une section n'est plus tenue de remplir l'écran :
     avec un contenu empilé, elle le dépasse de toute façon, et forcer une
     hauteur ne ferait que creuser des vides. */
  .pleine,
  .guides { min-height: 0; display: block; }

  .hero { min-height: 0; display: block; }

  /* La note quitte le débordement : sur 340 px, elle sortirait de l'écran. */
  .cv-note { position: static; width: auto; margin-top: var(--esp-3); }
  .cv-scene { padding-top: var(--esp-6); }
  .cv-relecteur { right: var(--esp-1); }
  .cv-paraf { height: 84px; }

  /* Doigt, pas souris : sous 640 px, tout ce qui se touche fait au moins
     44 px de haut. Les liens de texte gagnent leur hauteur en marge
     intérieure, ce qui ne change rien à la ligne de base. */
  .hero-lien,
  .panneau-lien,
  .guides-tous,
  .pied-colonne a,
  .pied-bouton {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .section { padding: var(--esp-8) 0; }
  .constat { padding: var(--esp-8) 0 var(--esp-6); }
  .guides { padding: var(--esp-8) 0; }
  .hero { padding: var(--esp-6) 0; }
  .final-bloc { padding: var(--esp-6) var(--esp-3) var(--esp-8); }
  .ecoles-bloc { padding: var(--esp-4); }
  .largeur { padding: 0 var(--esp-2); }

  /* Les étiquettes reviennent dans le cadre : débordantes sur un petit
     écran, elles seraient coupées par le bord de la page. La troisième
     part : trois étiquettes sur 340 px se chevaucheraient. */
  .etiquette-1 { left: 0; }
  .etiquette-2 { right: 0; }
  .etiquette-3 { display: none; }

  .pied-haut { grid-template-columns: 1fr; gap: var(--esp-4); }
}