/* ==========================================================================
   Crescere SB · feuille de style unique, commune aux 7 pages.
   Refonte visuelle du 28 juillet 2026.

   PRINCIPE GÉNÉRAL, à lire avant de modifier quoi que ce soit.

   Le site a deux régimes de couleur et deux seulement :
     · la nuit  : fond sombre, encre crème. C'est le régime par défaut,
                  celui de l'accueil, des prestations, du à propos et des
                  deux outils.
     · le papier: fond crème, encre sombre. C'est celui des deux pages de
                  fond réglementaire, qui se lisent comme un document.

   Chaque régime pose les mêmes noms de variables avec des valeurs
   inversées : --fond, --encre, --accent-titre, --accent-petit. Tout le
   reste de la feuille ne parle qu'à ces noms, jamais aux couleurs brutes.
   Conséquence pratique : un bloc posé dans l'un ou l'autre régime se
   recolore tout seul, il n'y a aucune règle en double à maintenir.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. LA CHARTE
   -------------------------------------------------------------------------- */

:root {
  /* Les trois couleurs de la charte. Aucune autre couleur sur le site. */
  --sombre: #3D3935;
  --creme:  #E8E4DC;
  --or:     #C8900A;

  /* Deux nuances de l'or, et non deux couleurs de plus : les trois valeurs
     partagent la même teinte (42,3 degrés) et la même saturation (0,90).
     Seule la luminosité change, ce qui permet de rester lisible sur les deux
     fonds sans sortir de la charte.

       --or        sur fond sombre : contraste 4,06   grands titres seulement
                   sur fond crème  : contraste 2,22   à ne pas utiliser
       --or-clair  sur fond sombre : contraste 4,85   petits textes
       --or-fonce  sur fond crème  : contraste 4,57   petits textes et titres

     Les éléments purement graphiques (filets, bordures, jauges, puces)
     gardent --or : ils ne portent aucune information écrite. */
  --or-clair: #DB9E0B;
  --or-fonce: #845F07;

  /* Les mêmes couleurs en composantes, pour fabriquer des transparences. */
  --sombre-rvb: 61, 57, 53;
  --creme-rvb:  232, 228, 220;
  --or-rvb:     200, 144, 10;

  /* Typographie : Work Sans exclusivement. La liste qui suit le nom n'est
     qu'un filet de sécurité si le fichier de police ne se charge pas. */
  --police: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Largeurs et rythme vertical */
  --largeur:         1200px;
  --largeur-lecture: 68ch;
  --marge:           clamp(1.25rem, 5vw, 3.25rem);
  --gouttiere:       clamp(1.25rem, 3vw, 2.5rem);
  --air:             clamp(3rem, 5vw, 4.25rem);
  --air-large:       clamp(4rem, 7vw, 6rem);

  /* Rayon unique. Presque nul : la sobriété passe par les angles nets. */
  --rayon: 3px;

  /* Grain appliqué aux fonds sombres. C'est une image fabriquée dans la
     feuille elle-même, donc aucun fichier et aucune requête réseau.
     Sans lui, un aplat sombre plein écran paraît mort. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23b)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Régime de nuit : la valeur par défaut du site. */
body,
.zone--nuit {
  --fond:      var(--sombre);
  --fond-rvb:  var(--sombre-rvb);
  --encre:     var(--creme);
  --encre-rvb: var(--creme-rvb);
  --accent-titre: var(--or);
  --accent-petit: var(--or-clair);
}

/* Régime de papier : les pages de fond réglementaire, et les blocs de
   rupture posés au milieu d'une page de nuit. */
body.papier,
.zone--papier {
  --fond:      var(--creme);
  --fond-rvb:  var(--creme-rvb);
  --encre:     var(--sombre);
  --encre-rvb: var(--sombre-rvb);
  --accent-titre: var(--or-fonce);
  --accent-petit: var(--or-fonce);
}


/* --------------------------------------------------------------------------
   2. LA POLICE, HÉBERGÉE DANS LE SITE
   Un seul fichier par jeu de caractères couvre toutes les graisses de 400 à
   700. Aucune requête vers un serveur extérieur.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/work-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/work-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* --------------------------------------------------------------------------
   3. BASES
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Les ancres ne doivent pas passer sous la barre de navigation collante. */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Le grain, posé une fois pour toutes au-dessus du fond et en dessous de
   tout le reste. Il ne réagit pas au pointeur et ne s'imprime pas. */
body:not(.papier)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.035;
}
body > * { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 1.35rem + 3.4vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.9rem); }
h3 { font-size: clamp(1.12rem, 1.04rem + 0.4vw, 1.35rem); }

p { margin: 0 0 0.9em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 0.9em; padding-left: 1.2em; }
li { margin-bottom: 0.35em; }
li:last-child { margin-bottom: 0; }

/* Les mots clés en gras portent le balayage du regard. Work Sans est une
   police variable : 650 se distingue du 400 courant sans passer pour du
   gras d'imprimerie. */
strong { font-weight: 650; }

/* La règle du « mot en or » : dans chaque titre de section, un mot clé, et
   un seul, est enveloppé dans <span class="or">. La nuance change avec le
   régime de couleur, la règle ne change pas. */
.or { color: var(--accent-titre); }

/* Meme teinte, version reservee aux textes courants. Le dore de marque
   plafonne a 4,06 de contraste sur le fond sombre, sous le seuil de 4,50 :
   hors des grands titres, c'est cette nuance qui est employee. */
.or-petit { color: var(--accent-petit); }

/* Accessibilité : lien d'évitement, visible seulement au clavier */
.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--or-clair);
  color: var(--sombre);
  font-weight: 600;
  text-decoration: none;
}
.lien-evitement:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--or-clair);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* --------------------------------------------------------------------------
   4. STRUCTURE : enveloppes et zones
   -------------------------------------------------------------------------- */

.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge);
}
.enveloppe--large { max-width: 1440px; }
.enveloppe--etroite { max-width: 860px; }

/* Une zone est une section de page. Elle porte son propre régime de couleur
   et son propre fond, ce qui permet d'alterner nuit et papier au fil de la
   lecture sans écrire une seule règle en double. */
.zone {
  position: relative;
  padding-block: var(--air);
  background: var(--fond);
  color: var(--encre);
}
.zone--serree { padding-block: clamp(2rem, 3.5vw, 3rem); }
.zone--ample  { padding-block: var(--air-large); }

/* Filet de séparation entre deux zones de même régime. */
.zone--filet { border-top: 1px solid rgba(var(--encre-rvb), 0.13); }

/* Les zones de papier posées dans une page de nuit reprennent le grain à
   l'envers : un très léger voile sombre, sinon l'aplat crème paraît plat. */
.zone--papier { background-image: var(--grain); background-blend-mode: multiply; }
.zone--papier { background-color: var(--creme); }

/* Colonne de lecture, pour les longs passages de texte. */
.lecture { max-width: var(--largeur-lecture); }
.lecture p + p { margin-top: 0; }
.lecture h2, .lecture h3 { margin-bottom: 1rem; }

/* Micro intitulé au-dessus d'un titre. Petit texte, donc nuance lisible. */
.surtitre {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--accent-petit);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Le surtitre à filet, utilisé en tête de zone : un trait or le précède. */
.surtitre--filet {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.surtitre--filet::before {
  content: '';
  width: clamp(1.5rem, 4vw, 3rem);
  height: 1px;
  background: var(--or);
  flex-shrink: 0;
}

.attenue { color: rgba(var(--encre-rvb), 0.68); }

.chapeau {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: rgba(var(--encre-rvb), 0.78);
}

/* Entête de zone : le titre et son surtitre, alignés à gauche sur le même
   axe que le contenu qui suit. Un seul axe de lecture par page. */
.entete-zone { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.entete-zone h2 { max-width: 18ch; }
/* Variante pour un titre qui doit tenir sur une seule ligne : la largeur de
   lecture est levee, il n'est plus borne que par la colonne. En dessous de
   1075px de large environ, il repasse naturellement sur deux lignes. */
.entete-zone--titre-ample h2 { max-width: none; }
.entete-zone p { margin-top: 1rem; max-width: 56ch; color: rgba(var(--encre-rvb), 0.72); }

/* Variante à deux colonnes : le titre à gauche, le propos à droite. C'est
   ce qui casse l'empilement centré du site précédent. */
.entete-zone--duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gouttiere);
  align-items: end;
}
.entete-zone--duo p { margin-top: 0; }
@media (max-width: 820px) {
  .entete-zone--duo { grid-template-columns: 1fr; align-items: start; }
  .entete-zone--duo p { margin-top: 1rem; }
}


/* --------------------------------------------------------------------------
   5. BOUTONS ET LIENS
   -------------------------------------------------------------------------- */

.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  /* Fond en or clair et non en or de marque : le libellé, sombre sur or de
     marque, mesurait 4,06 de contraste pour un seuil de 4,50. En or clair il
     passe à 4,85. Même teinte, même saturation, seule la luminosité change.
     Ne pas « corriger » ce choix en remettant --or. */
  background: var(--or-clair);
  color: var(--sombre);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Le survol ne touche pas au fond : l'assombrir ferait repasser le libellé
   sous le seuil de contraste. C'est le relief et le halo qui marquent
   l'état, pas la couleur. */
.bouton:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -12px rgba(var(--or-rvb), 0.9);
}
.bouton:active { transform: translateY(0); }

/* La flèche avance d'un cran au survol. */
.bouton::after {
  content: '\2192';
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.2s ease;
}
.bouton:hover::after { transform: translateX(3px); }
.bouton--sans-fleche::after { content: none; }

/* Bouton secondaire : contour seul, dans l'encre du régime en cours. */
.bouton--contour {
  background: transparent;
  border-color: rgba(var(--encre-rvb), 0.35);
  color: var(--encre);
}
.bouton--contour:hover {
  border-color: var(--accent-petit);
  color: var(--accent-petit);
  box-shadow: none;
}

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.9rem;
}

/* Lien texte avec flèche, pour les passerelles entre pages. */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--encre);
  font-weight: 650;
  font-size: 0.95rem;
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--or), var(--or));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.25s ease;
}
.lien-fleche:hover { background-size: 100% 2px; }
.lien-fleche::after {
  content: '\2192';
  color: var(--accent-petit);
  transition: transform 0.2s ease;
}
.lien-fleche:hover::after { transform: translateX(3px); }


/* --------------------------------------------------------------------------
   6. EN-TÊTE ET NAVIGATION
   La barre est transparente en haut de page et se pose sur un fond flouté
   dès le premier défilement. La classe est ajoutée par le script ; sans
   script, la barre reste simplement opaque, rien n'est perdu.
   -------------------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease,
              backdrop-filter 0.3s ease;
}
.entete--posee {
  background: rgba(var(--sombre-rvb), 0.88);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: rgba(var(--creme-rvb), 0.13);
}
/* Sur les pages de papier, l'en-tête garde le régime de nuit : c'est le
   fil qui tient les sept pages ensemble. */
.entete {
  --encre: var(--creme);
  --encre-rvb: var(--creme-rvb);
  --accent-petit: var(--or-clair);
  color: var(--creme);
}
body.papier .entete { background: var(--sombre); }
body.papier .entete--posee { background: rgba(var(--sombre-rvb), 0.92); }

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
  padding-block: 0.7rem;
  transition: min-height 0.3s ease;
}
.entete--posee .entete__interieur { min-height: 64px; }

.marque {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
/* Le fichier du logo comporte une marge transparente autour du dessin :
   la hauteur ci-dessous est donc plus grande que la hauteur visible. */
.marque__logo {
  height: 52px;
  width: auto;
  transition: height 0.3s ease;
}
.entete--posee .marque__logo { height: 46px; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.1rem);
}

.nav__liens {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.8rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__liens li { margin: 0; }

.nav__lien {
  position: relative;
  display: inline-block;
  padding-block: 0.4rem;
  color: rgba(var(--creme-rvb), 0.78);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav__lien::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav__lien:hover { color: var(--creme); }
.nav__lien:hover::after { transform: scaleX(1); }
.nav__lien[aria-current='page'] { color: var(--creme); }
.nav__lien[aria-current='page']::after { transform: scaleX(1); }

.nav .bouton { padding: 0.6rem 1.15rem; font-size: 0.875rem; }

/* Petits écrans : l'en-tête cesse d'être collant et les entrées de menu
   passent sur une bande qui défile horizontalement. Aucun script, aucun
   menu déroulant, et une hauteur d'en-tête qui reste raisonnable. */
@media (max-width: 900px) {
  .entete { position: static; background: var(--sombre); }
  .entete__interieur {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    padding-block: 0.9rem;
  }
  .entete__interieur > .marque { align-self: flex-start; }
  .nav { justify-content: space-between; gap: 0.75rem; }
  .nav__liens {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.1rem;
    padding-bottom: 0.2rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav__liens::-webkit-scrollbar { display: none; }
  .nav .bouton { flex-shrink: 0; }
}
@media (max-width: 560px) {
  .nav .bouton { display: none; }
  .marque__logo { height: 44px; }
}


/* --------------------------------------------------------------------------
   7. HAUTS DE PAGE
   -------------------------------------------------------------------------- */

/* ---- Le hero de l'accueil : image pleine largeur, texte par dessus ---- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(94vh, 900px);
  padding-block: clamp(4rem, 12vh, 8rem) 0;
  overflow: hidden;
  background: var(--sombre);
}
/* L'image remonte derrière la barre de navigation, qui est transparente
   tant que la lecture n'a pas commencé. La remontée ne vaut que sur les
   écrans où la barre est collante : plus bas, elle est en pile et occupe
   sa place normale. */
/* Les 90px compensent la remontée : ils replacent le contenu là où il
   serait sans elle. Ce qui vient en plus est la respiration voulue sous la
   barre. Elle suit la hauteur de l'écran, pour ne pas repousser le bas du
   hero hors de vue sur un portable. */
@media (min-width: 901px) {
  .hero { margin-top: -90px; padding-top: calc(90px + clamp(2rem, 5vh, 4.5rem)); }
}

.hero__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le cadrage descend sous le milieu : c'est la table et le groupe qui
     doivent rester visibles, pas le plafond. */
  object-position: center 62%;
}
/* Deux voiles superposés : un dégradé vertical qui rend le bas lisible, et
   un voile latéral qui protège la colonne de texte à gauche. */
.hero__fond::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Trois voiles superposés. Les deux premiers rendent le texte lisible ;
     le troisième ramène une photo froide dans la teinte de la charte, sans
     recolorer l'image ni sortir des trois couleurs. */
  background:
    linear-gradient(to top, rgba(var(--sombre-rvb), 0.97) 5%, rgba(var(--sombre-rvb), 0.8) 45%, rgba(var(--sombre-rvb), 0.72) 100%),
    linear-gradient(to right, rgba(var(--sombre-rvb), 0.8) 0%, rgba(var(--sombre-rvb), 0.35) 65%, rgba(var(--sombre-rvb), 0.5) 100%),
    linear-gradient(rgba(var(--sombre-rvb), 0.35), rgba(var(--sombre-rvb), 0.35));
}

/* Filigrane des trois chevrons, calé à droite, à hauteur de la première
   ligne du titre. Il passe derrière le texte, jamais devant, et se dissout
   vers le bas. */
.chevrons-fondu {
  position: absolute;
  z-index: -1;
  /* 5.75rem tombe sur l'axe de la première ligne du titre. Le décalage de
     38,7 pour cent remonte le dessin de façon que ce soit le chevron doré,
     et non le centre du groupe, qui se cale sur cet axe. */
  top: 5.15rem;
  right: var(--marge);
  width: clamp(200px, 26vw, 430px);
  height: auto;
  transform: translateY(-38.7%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
}
/* La progression du logo : le bas presque effacé, l'or en tête. */
.chevrons-fondu__bas    { stroke: var(--creme); opacity: 0.10; }
.chevrons-fondu__milieu { stroke: var(--creme); opacity: 0.17; }
.chevrons-fondu__haut   { stroke: var(--or);    opacity: 0.42; }

/* Sous cette largeur, la colonne de texte occupe toute la place : le
   filigrane passerait derrière les mots au lieu de les accompagner. */
@media (max-width: 900px) {
  .chevrons-fondu { display: none; }
}

.hero__contenu {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Rupture d'échelle : cet élément, et lui seul, casse l'échelle
   typographique du site. */
.positionnement {
  max-width: 21ch;
  margin: 0;
  font-size: clamp(2.15rem, 1rem + 4.6vw, 4.4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
@media (max-width: 860px) {
  /* Sous 860 px la phrase descend à sept ou huit lignes. L'équilibrage
     cesse d'agir au-delà de six lignes et laisse une orpheline. */
  .positionnement { text-wrap: pretty; max-width: 100%; }
}

.hero .chapeau { margin-top: 1.6rem; max-width: 52ch; }
.hero .boutons { margin-top: 2.1rem; }

/* Bandeau des trois repères, au pied du hero. */
.reperes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.repere {
  padding: 1.3rem clamp(0.5rem, 2vw, 1.5rem) 0.2rem 0;
}
/* Deux des trois repères sont des liens. Au repos ils ne se distinguent pas
   des autres : le bandeau reste calme. L'affordance vient du survol, par un
   soulignement du libellé, pas par un changement de couleur qui abaisserait
   le contraste du doré. */
a.repere {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.repere:hover .repere__cle {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
a.repere:hover p { color: var(--encre); }
.repere__cle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.4rem;
  color: var(--accent-petit);
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Le picto suit la taille du libellé plutot qu'une valeur fixe :
   les deux restent alignés si le texte change de corps. */
.repere__cle .picto { width: 1.5em; height: 1.5em; }
/* Aucune taille imposee : ces trois phrases prennent le corps courant du
   site, comme les paragraphes des sections suivantes. Seul le libelle dore
   est mis en avant. */
.repere p { margin: 0; color: rgba(var(--encre-rvb), 0.7); }
@media (max-width: 700px) {
  .reperes { grid-template-columns: 1fr; }
  .repere { padding-bottom: 1rem; }
}

/* ---- Haut des pages intérieures ---- */

.haut {
  position: relative;
  padding-block: clamp(3.25rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--fond);
  color: var(--encre);
  overflow: hidden;
}
/* Un halo doré très diffus, calé en haut à droite. Il donne de la
   profondeur au fond sombre sans rien ajouter à la charte. */
.haut::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 760px;
  max-height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--or-rvb), 0.16), transparent 68%);
  pointer-events: none;
}
.haut > * { position: relative; }
/* Sur fond crème le halo se voit comme une tache : les pages de papier n'en
   portent pas. */
body.papier .haut::before { display: none; }

.haut__titre {
  max-width: 19ch;
  font-size: clamp(2.3rem, 1.3rem + 3.9vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
}
.haut .chapeau { margin-top: 1.4rem; max-width: 58ch; }
.haut .boutons { margin-top: 1.9rem; }

/* Bande d'image posée sous un haut de page. */
.bande-image {
  position: relative;
  overflow: hidden;
  background: var(--sombre);
}
.bande-image img {
  width: 100%;
  height: clamp(220px, 34vw, 420px);
  object-fit: cover;
}
.bande-image::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Le voile est assez appuyé pour qu'une photo aux couleurs vives reste
     dans la teinte de la charte au lieu de trouer la page. */
  background:
    linear-gradient(to bottom, rgba(var(--sombre-rvb), 0.62), rgba(var(--sombre-rvb), 0.38) 45%, rgba(var(--sombre-rvb), 0.78)),
    linear-gradient(rgba(var(--sombre-rvb), 0.22), rgba(var(--sombre-rvb), 0.22));
}
/* Sur une page de papier, la bande ne se fond pas dans du sombre : le voile
   se fait crème et reste très léger. */
.bande-image--claire { background: var(--creme); }
.bande-image--claire::after {
  background: linear-gradient(to bottom, rgba(var(--creme-rvb), 0.2), transparent 35%, rgba(var(--creme-rvb), 0.35));
}
.bande-image--claire img { height: clamp(180px, 24vw, 300px); }


/* --------------------------------------------------------------------------
   8. PLAQUES, GRILLES ET SURVOLS
   La plaque remplace la carte de la version précédente. Elle a un fond de
   verre, un filet fin, et un halo doré qui suit le pointeur.
   -------------------------------------------------------------------------- */

.grille {
  display: grid;
  gap: var(--gouttiere);
}
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.plaque {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(var(--encre-rvb), 0.04);
  border: 1px solid rgba(var(--encre-rvb), 0.12);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}
/* Le halo suit le pointeur. Les deux variables sont posées par le script
   en propriétés de style, jamais en attribut écrit dans la page : la
   politique de sécurité du site interdit les attributs de style. */
.plaque::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(220px circle at var(--x, 50%) var(--y, 50%),
              rgba(var(--or-rvb), 0.16), transparent 70%);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.plaque:hover {
  border-color: rgba(var(--or-rvb), 0.55);
  transform: translateY(-3px);
}
.plaque:hover::before { opacity: 1; }
.plaque > * { position: relative; }
.plaque h3 { margin-bottom: 0.8rem; }
/* Titre de plaque en un mot : capitales et doré de marque. La casse est
   posée par le style et non dans le texte, pour que les accents suivent et
   que le mot reste lisible tel quel par les lecteurs d'écran. */
.plaque__titre {
  color: var(--accent-titre);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Plaque numérotée : le numéro en grand, en filigrane, dans le coin. */
.plaque--numerotee { counter-increment: plaque; padding-top: clamp(2rem, 4vw, 3rem); }
.plaque--numerotee::after {
  content: '0' counter(plaque);
  position: absolute;
  top: clamp(0.6rem, 2vw, 1.1rem);
  right: clamp(1rem, 2.5vw, 1.8rem);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(var(--encre-rvb), 0.07);
  pointer-events: none;
}
.compteur-plaques { counter-reset: plaque; }

/* Plaque cliquable : porte d'entrée, passerelle. */
a.plaque {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.plaque .plaque__suite {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  color: var(--accent-petit);
  font-size: 0.85rem;
  font-weight: 650;
}
a.plaque .plaque__suite::after {
  content: '\2192';
  transition: transform 0.2s ease;
}
a.plaque:hover .plaque__suite::after { transform: translateX(4px); }

.plaque__picto { margin-bottom: 1.1rem; }

/* Plaque de papier posée sur une page de nuit. Elle rebascule les quatre
   variables du régime, donc le texte, les petits accents et la bordure
   suivent tout seuls : aucune règle de couleur en double à maintenir. */
/* Le sélecteur porte aussi la forme a.plaque--papier : sans cela, la règle
   color: inherit posée plus haut sur a.plaque l'emporterait en spécificité
   et le titre resterait crème sur crème. */
.plaque--papier,
a.plaque--papier {
  --fond:      var(--creme);
  --fond-rvb:  var(--creme-rvb);
  --encre:     var(--sombre);
  --encre-rvb: var(--sombre-rvb);
  --accent-titre: var(--or-fonce);
  --accent-petit: var(--or-fonce);
  background: var(--creme);
  border-color: rgba(var(--sombre-rvb), 0.16);
  color: var(--sombre);
}
.plaque--papier:hover { border-color: rgba(var(--or-rvb), 0.75); }

/* Bandeau de source commun à un groupe de plaques. Même filet et même fond
   que les plaques qu'il légende, en plus discret : il documente, il ne
   raconte rien. */
.source-commune {
  margin-top: clamp(0.9rem, 2vw, 1.4rem);
  padding: 0.85rem clamp(1rem, 2.5vw, 1.4rem);
  background: rgba(var(--encre-rvb), 0.03);
  border: 1px solid rgba(var(--encre-rvb), 0.12);
  border-radius: var(--rayon);
  font-size: 0.88rem;
  color: rgba(var(--encre-rvb), 0.68);
}
.source-commune strong { letter-spacing: 0.06em; }


/* --------------------------------------------------------------------------
   9. LA FRISE DES ÉTAPES
   Quatre étapes reliées par un filet or continu. Les numéros sont posés sur
   le filet, pas au-dessus du texte : la lecture se fait de gauche à droite.
   -------------------------------------------------------------------------- */

.frise {
  counter-reset: etape;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gouttiere);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr));
}
.frise > li {
  position: relative;
  margin: 0;
  padding-top: 2.9rem;
}
/* Le filet qui court sous les numéros. */
.frise > li::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 0;
  right: calc(var(--gouttiere) * -1);
  height: 1px;
  background: rgba(var(--encre-rvb), 0.18);
}
.frise > li:last-child::before { right: 0; }
/* Le numéro, posé sur le filet. */
.frise > li::after {
  counter-increment: etape;
  content: '0' counter(etape);
  position: absolute;
  top: 0;
  left: 0;
  padding-right: 0.9rem;
  background: var(--fond);
  color: var(--accent-petit);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.18em;
}
.frise h3 { margin-bottom: 0.55rem; }
.frise p { font-size: 0.95rem; color: rgba(var(--encre-rvb), 0.72); }
.frise .lien-fleche { margin-top: 0.9rem; font-size: 0.88rem; }

.frise__picto { margin-bottom: 1rem; }


/* --------------------------------------------------------------------------
   10. BLOCS À DEUX TEMPS : une image, un propos
   C'est le gabarit qui casse la répétition sur la page Prestations.
   -------------------------------------------------------------------------- */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.duo--miroir > .duo__visuel { order: 2; }
.duo--decale { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.duo--haut { align-items: start; }

.duo__visuel {
  position: relative;
  border-radius: var(--rayon);
  overflow: hidden;
}
.duo__visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.duo:hover .duo__visuel img { transform: scale(1.03); }
/* Un voile discret garde l'image dans le ton du fond. */
.duo__visuel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 30%, rgba(var(--sombre-rvb), 0.35));
  pointer-events: none;
}
/* Filet or sur un angle, comme signature. */
.duo__visuel::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 44%;
  height: 2px;
  background: var(--or);
}

/* Portrait, ou image d'attente en tenant lieu. Format vertical, calé à
   droite de la colonne pour ne pas concurrencer le titre. */
.portrait {
  width: 100%;
  max-width: 360px;
  margin-left: auto;
}
.portrait img { aspect-ratio: 4 / 5; }

/* Paragraphe de liaison posé sous une grille. */
.liaison { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

@media (max-width: 860px) {
  .duo,
  .duo--decale { grid-template-columns: 1fr; gap: 1.5rem; }
  .portrait { max-width: 300px; margin-inline: 0; }
  .duo--miroir > .duo__visuel { order: 0; }
  .duo__visuel img { max-height: 320px; }
}


/* --------------------------------------------------------------------------
   11. PAGE PRESTATIONS
   -------------------------------------------------------------------------- */

/* Le ruban collant des quatre familles a été retiré le 29 juillet 2026 : il
   doublait le sommaire posé juste en dessous. Les ancres #cadrer, #former,
   #outiller et #ancrer restent en place, le sommaire s'en sert. */

/* ---- Cartouche de famille ---- */

.cartouche {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.25rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid rgba(var(--encre-rvb), 0.14);
}
.cartouche__rang {
  min-width: 1.6ch;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgba(var(--encre-rvb), 0.28);
}
.cartouche__verbe {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: 0.65rem;
}
.cartouche__contexte {
  margin: 0;
  max-width: 52ch;
  color: rgba(var(--encre-rvb), 0.72);
}
.cartouche__picto { color: var(--or); margin-bottom: 0.7rem; }

/* Cartouche illustrée : la photo de la famille se pose à droite du verbe et
   du contexte. Elle ouvre la section au lieu d'être enfermée dans une des
   prestations, ce qui laisse les onze cartes strictement comparables. */
.cartouche--illustree {
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
}
.cartouche__visuel {
  position: relative;
  border-radius: var(--rayon);
  overflow: hidden;
}
.cartouche__visuel img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 240px;
  object-fit: cover;
}
.cartouche__visuel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, transparent 45%, rgba(var(--sombre-rvb), 0.4));
}
@media (max-width: 900px) {
  .cartouche--illustree { grid-template-columns: auto minmax(0, 1fr); }
  .cartouche__visuel { grid-column: 1 / -1; margin-top: 1.25rem; }
  .cartouche__visuel img { max-height: 180px; }
}

/* ---- Une prestation ----
   Un seul gabarit pour les onze, et non plus trois en alternance. Le but
   n'est pas que deux blocs voisins se ressemblent le moins possible, c'est
   que chaque prestation se reconnaisse au premier coup d'oeil et se compare
   aux autres : même carte, même rang, même pictogramme, mêmes repères.
   ---------------------------------------------------------------------- */

.offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: var(--gouttiere);
}

.offre {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: rgba(var(--encre-rvb), 0.04);
  border: 1px solid rgba(var(--encre-rvb), 0.13);
  border-top: 2px solid rgba(var(--or-rvb), 0.55);
  border-radius: var(--rayon);
}
/* Une prestation seule dans sa famille prend toute la largeur. */
.offre--large { grid-column: 1 / -1; }

.offre__entete {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.75rem;
}
.offre__entete h3 { margin: 0; font-size: 1.18rem; }
.offre__rang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.18rem 0.4rem;
  border: 1px solid rgba(var(--or-rvb), 0.5);
  border-radius: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-petit);
}
.offre__picto { width: 22px; height: 22px; }

/* Les trois critères de lecture : pour qui, quel niveau, quelle durée. Ils
   se lisent avant le texte et se comparent d'une carte à l'autre.
   Le nom .reperes est déjà pris par le bandeau du hero, d'où .criteres. */
.criteres {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.15rem;
  padding: 0.9rem 0 0;
  border-top: 1px solid rgba(var(--encre-rvb), 0.12);
}
.criteres li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
  margin: 0;
}
.critere__intitule {
  font-size: 0.63rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-petit);
}
.critere__valeur {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  font-weight: 600;
}
@media (max-width: 420px) {
  .criteres li { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* L'objectif porte le résumé de la prestation. Sa valeur n'est donc pas un
   libellé court comme les deux autres repères : elle se lit comme du texte
   courant, sans la graisse ni le calage vertical des lignes courtes.

   La hauteur est réservée sur quatre lignes pour les cartes en colonnes :
   sans cela, l'intitulé des apports ne tombait pas au même niveau d'une
   carte à sa voisine. Les cartes pleine largeur ne sont jamais côte à
   côte, elles n'ont rien à aligner. */
.critere--objectif .critere__valeur {
  display: block;
  font-weight: 400;
}
.offre:not(.offre--large) .critere--objectif .critere__valeur {
  min-height: calc(4 * 0.88rem * 1.6);
}

/* Les livrables : présents parce qu'ils engagent, mais en retrait pour ne
   plus peser autant que le propos. */
.livrables {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: rgba(var(--encre-rvb), 0.72);
}
.livrables__intitule {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-petit);
}
.livrables ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.livrables li {
  position: relative;
  margin: 0;
  padding-left: 1.1rem;
  line-height: 1.5;
}
.livrables li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 1px;
  background: var(--or);
}
.livrables--colonnes ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0.4rem 1.75rem; }

/* Les apports ferment la carte. Ils se calent en haut, sous le propos dont
   la hauteur est réservée : c'est l'intitulé doré qui doit tomber au même
   niveau d'une carte à l'autre, pas le bas de la carte. */
.offre .livrables--apports { padding-top: 1.15rem; }
.offre .attenue { margin: 1.15rem 0 0; }
.offre--large .livrables--apports ul {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 0.4rem 1.75rem;
}

/* ---- Les deux échelles de lecture ----
   Durée de l'intervention et niveau requis. Volontairement différentes à
   l'oeil, des barres d'un côté, des points de l'autre : on ne doit jamais
   confondre le temps que ça prend et ce qu'il faut savoir avant. ---- */

.jauge { display: inline-flex; gap: 3px; }
.jauge span {
  width: 5px;
  height: 12px;
  background: rgba(var(--encre-rvb), 0.22);
}
.jauge--1 span:nth-child(1),
.jauge--2 span:nth-child(-n+2),
.jauge--3 span { background: var(--or); }

.niveau { display: inline-flex; gap: 4px; }
.niveau span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--encre-rvb), 0.22);
}
.niveau--1 span:nth-child(1),
.niveau--2 span:nth-child(-n+2),
.niveau--3 span { background: var(--or); }

/* Légende commune, posée une seule fois en haut de page. */
.legende {
  display: grid;
  gap: 0.8rem;
  margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 0;
  padding-block: 1.15rem;
  border-block: 1px solid rgba(var(--encre-rvb), 0.13);
  font-size: 0.78rem;
  color: rgba(var(--encre-rvb), 0.66);
}
.legende__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.6rem;
  margin: 0;
}
.legende__ligne > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.legende__note {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(var(--encre-rvb), 0.55);
}
.legende__intitule {
  min-width: 12.5rem;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-petit);
}

/* ---- Sommaire des onze prestations ---- */

.sommaire {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
.sommaire__famille a {
  display: block;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(var(--or-rvb), 0.45);
  color: var(--encre);
  font-size: 0.95rem;
  font-weight: 650;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.sommaire__famille a:hover { border-bottom-color: var(--or); }
.sommaire__famille ul { list-style: none; margin: 0; padding: 0; }
.sommaire__famille li {
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
  color: rgba(var(--encre-rvb), 0.66);
}
@media (max-width: 780px) { .sommaire { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .sommaire { grid-template-columns: 1fr; } }

/* ---- Appel à l'action en fin de famille ---- */

.appel-famille {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid rgba(var(--encre-rvb), 0.14);
}
.appel-famille p { margin: 0; max-width: 46ch; color: rgba(var(--encre-rvb), 0.72); }
.appel-famille .bouton { flex-shrink: 0; }

/* ---- Une seule encre pour le texte courant de la page prestations ----
   Ailleurs sur le site, les textes secondaires sont posés à 55 ou 72 pour
   cent de l'encre : la hiérarchie se lit alors dans la clarté. Ici, les
   tailles sont presque toutes identiques d'un bloc à l'autre, si bien que
   la différence de clarté ne se lisait plus comme une hiérarchie mais
   comme une inégalité de traitement. Tout le texte courant repasse donc à
   l'encre pleine, et la hiérarchie ne tient plus qu'à la taille, à la
   graisse et aux petits intitulés dorés.

   Le bloc est volontairement borné à .page-prestations : les mêmes
   classes servent ailleurs, notamment .livrables sur la page article 50
   et .attenue sur cinq autres pages, qui gardent leurs nuances. */
.page-prestations .cartouche__contexte,
.page-prestations .legende,
.page-prestations .legende__note,
.page-prestations .sommaire__famille li,
.page-prestations .appel p,
.page-prestations .chapeau,
.page-prestations .offre .livrables,
.page-prestations .offre .attenue { color: var(--encre); }


/* --------------------------------------------------------------------------
   12. BLOCS PARTICULIERS
   -------------------------------------------------------------------------- */

/* Chiffre géant : les deux données de satisfaction, le score des outils. */
.compteurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--gouttiere);
  align-items: end;
}
.compteur__valeur {
  display: block;
  font-size: clamp(3.4rem, 2rem + 6vw, 6rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--or);
}
.compteur__unite { font-size: 0.35em; font-weight: 600; letter-spacing: -0.01em; }
.compteur__libelle {
  display: block;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(var(--encre-rvb), 0.16);
  font-size: 0.92rem;
  color: rgba(var(--encre-rvb), 0.72);
}

/* Citation de mise en avant, en très grand. */
.citation {
  margin: 0;
  font-size: clamp(1.4rem, 0.95rem + 1.9vw, 2.5rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 24ch;
}
.citation__source {
  display: block;
  margin-top: 1.4rem;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-petit);
}

/* Encadré à filet or, posé au fil du texte. */
.encadre {
  margin-block: 1.6rem;
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  border-left: 3px solid var(--or);
  background: rgba(var(--encre-rvb), 0.045);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.encadre h3 { margin-bottom: 0.7rem; }

/* Bandeau de promesse en tête des pages d'outils. */
.promesse {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  max-width: 62ch;
  margin-top: 2.25rem;
  padding: clamp(1rem, 2.4vw, 1.35rem) clamp(1.15rem, 3vw, 1.6rem);
  border: 1px solid rgba(var(--or-rvb), 0.5);
  border-left-width: 3px;
  border-radius: var(--rayon);
  background: rgba(var(--or-rvb), 0.07);
}
.promesse__icone { flex-shrink: 0; width: 22px; height: 22px; margin-top: 3px; color: var(--or); }
.promesse p { margin: 0; font-size: 0.95rem; color: rgba(var(--encre-rvb), 0.8); }
.promesse strong { display: block; margin-bottom: 0.25rem; color: var(--encre); }

/* Liste de faits : certifications, écoles. */
.faits { list-style: none; margin: 0; padding: 0; }
.faits li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(var(--encre-rvb), 0.12);
}
.faits li:last-child { border-bottom: 0; }
.faits strong { flex-shrink: 0; }
.faits span { font-size: 0.9rem; color: rgba(var(--encre-rvb), 0.66); }

/* Liste à chevrons. */
.liste-chevron { list-style: none; margin: 0; padding: 0; }
.liste-chevron li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.55rem;
}
.liste-chevron li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--or);
  border-bottom: 1px solid var(--or);
  transform: rotate(-45deg);
}

/* Mention légale du NDA : reproduite mot pour mot, jamais reformulée. */
.mention-nda { font-size: 0.88rem; line-height: 1.6; }

/* Emplacement en attente d'un élément fourni par Samuel. */
.a-integrer {
  padding: clamp(1.6rem, 4vw, 2.5rem);
  border: 1px dashed rgba(var(--or-rvb), 0.6);
  border-radius: var(--rayon);
  background: rgba(var(--or-rvb), 0.06);
  text-align: center;
}
.a-integrer__etiquette {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.75rem;
  background: var(--or-clair);
  color: var(--sombre);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.a-integrer h3 { margin-bottom: 0.75rem; }
.a-integrer p { max-width: 56ch; margin-inline: auto; }

/* Appel à l'action de fin de page, sur toute la largeur. */
.appel {
  position: relative;
  overflow: hidden;
}
.appel::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -60%;
  width: 90vw;
  height: 90vw;
  max-width: 900px;
  max-height: 900px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--or-rvb), 0.15), transparent 65%);
  pointer-events: none;
}
.appel__interieur { position: relative; text-align: center; }
.appel h2 { max-width: 20ch; margin-inline: auto; }
.appel p { max-width: 52ch; margin-inline: auto; margin-top: 1.2rem; color: rgba(var(--encre-rvb), 0.75); }
.appel .boutons { justify-content: center; }

/* Pictogrammes dessinés dans la page : aucune image à charger. */
.picto {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--or);
}
.picto--petit { width: 20px; height: 20px; }
.chevron { width: 24px; height: 24px; color: var(--or); flex-shrink: 0; }


/* --------------------------------------------------------------------------
   13. PAGES DE PAPIER : article 50 et mentions légales
   -------------------------------------------------------------------------- */

.document {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .document { grid-template-columns: 1fr; } }

/* Sommaire latéral, qui suit la lecture. */
.sommaire-lateral {
  position: sticky;
  top: 6.5rem;
  font-size: 0.9rem;
}
.sommaire-lateral__intitule {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-petit);
}
.sommaire-lateral ul { list-style: none; margin: 0; padding: 0; }
.sommaire-lateral li { margin-bottom: 0.75rem; }
.sommaire-lateral a {
  color: rgba(var(--encre-rvb), 0.72);
  text-decoration: none;
  border-left: 1px solid rgba(var(--encre-rvb), 0.2);
  padding-left: 0.9rem;
  display: block;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.sommaire-lateral a:hover { color: var(--encre); border-left-color: var(--or); }
@media (max-width: 900px) { .sommaire-lateral { position: static; } }

.texte-long { max-width: var(--largeur-lecture); }
.texte-long > h2 {
  margin-top: 3.25rem;
  margin-bottom: 1rem;
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--encre-rvb), 0.14);
}
.texte-long > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.texte-long h3 { margin-top: 2.1rem; margin-bottom: 0.6rem; }
.texte-long a {
  color: var(--encre);
  text-decoration: underline;
  text-decoration-color: rgba(var(--or-rvb), 0.6);
  text-underline-offset: 3px;
}
.texte-long a:hover { text-decoration-color: var(--or); }

/* Tableau de référence. La charte n'admet ni rouge ni vert : ce qui est
   applicable et ce qui est reporté se distinguent par l'épaisseur du filet,
   jamais par la couleur. */
.enveloppe-tableau { overflow-x: auto; }
.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.tableau th,
.tableau td {
  text-align: left;
  vertical-align: top;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid rgba(var(--encre-rvb), 0.14);
}
.tableau th {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--encre-rvb), 0.6);
}
.tableau td:first-child {
  font-weight: 650;
  border-left: 1px solid rgba(var(--or-rvb), 0.35);
}
.tableau tr.echeance-active td:first-child { border-left: 5px solid var(--or); }
.tableau td:last-child { color: rgba(var(--encre-rvb), 0.72); }


/* --------------------------------------------------------------------------
   14. LES DEUX OUTILS INTERACTIFS
   Tout se passe dans le navigateur. Aucune de ces lignes n'envoie quoi que
   ce soit à un serveur. Les noms de classes viennent des deux scripts et ne
   doivent pas être renommés : seul leur habillage a changé.
   -------------------------------------------------------------------------- */

/* L'outil est posé sur une plaque, comme un objet distinct de la page. */
.plateau {
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: rgba(var(--encre-rvb), 0.04);
  border: 1px solid rgba(var(--encre-rvb), 0.13);
  border-radius: var(--rayon);
}

.quiz { max-width: 100%; margin-inline: auto; }

/* Écran d'accueil de l'outil */
.quiz__depart { text-align: center; }
.quiz__depart .picto { margin-inline: auto; margin-bottom: 1.25rem; }
.quiz__depart h3 { margin-bottom: 0.85rem; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); }
.quiz__depart p { max-width: 52ch; margin-inline: auto; color: rgba(var(--encre-rvb), 0.75); }
.quiz__depart .bouton { margin-top: 1.85rem; }

/* Rappel des trois zones, montré avant de commencer */
.zones-explication {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  margin-top: 2.4rem;
  text-align: left;
}
.zone-carte {
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(var(--encre-rvb), 0.14);
  border-left: 3px solid var(--or);
  border-radius: var(--rayon);
  background: rgba(var(--encre-rvb), 0.04);
  font-size: 0.92rem;
  color: rgba(var(--encre-rvb), 0.75);
}
.zone-carte strong { display: block; margin-bottom: 0.3rem; color: var(--encre); }
/* Les trois zones se distinguent par l'épaisseur du filet, pas par une
   couleur hors charte. */
.zone-carte--1 { border-left-width: 6px; }
.zone-carte--2 { border-left-width: 3px; }
.zone-carte--3 { border-left-width: 1px; border-left-color: rgba(var(--or-rvb), 0.5); }

/* Barre de progression. La largeur est écrite par le script à partir de
   l'attribut data-largeur : ne pas remplacer par une transformation. */
.quiz__progression { margin-bottom: 2.4rem; }
.quiz__jauge {
  height: 3px;
  background: rgba(var(--encre-rvb), 0.15);
  overflow: hidden;
}
.quiz__jauge span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--or);
  transition: width 0.35s ease;
}
.quiz__compteur {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--encre-rvb), 0.6);
}
.quiz__note-parcours {
  margin: 0.85rem 0 0;
  font-size: 0.86rem;
  color: rgba(var(--encre-rvb), 0.68);
}

/* Une question */
.quiz__enonce {
  margin-bottom: 1.75rem;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.quiz__precision {
  margin-top: -1.15rem;
  margin-bottom: 1.75rem;
  font-size: 0.94rem;
  color: rgba(var(--encre-rvb), 0.7);
}

.quiz__options { display: grid; gap: 0.65rem; }

.option {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  width: 100%;
  padding: 1rem 1.2rem;
  background: rgba(var(--encre-rvb), 0.02);
  border: 1px solid rgba(var(--encre-rvb), 0.2);
  border-radius: var(--rayon);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.45;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.option:hover {
  border-color: var(--or);
  background: rgba(var(--or-rvb), 0.1);
  transform: translateX(2px);
}
.option[aria-checked='true'] {
  border-color: var(--or);
  background: rgba(var(--or-rvb), 0.17);
}
.option__puce {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid rgba(var(--encre-rvb), 0.35);
  border-radius: 50%;
}
.option[aria-checked='true'] .option__puce {
  border-color: var(--or);
  background: var(--or);
}
.option[aria-checked='true'] .option__puce::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--sombre);
}
/* La modalité « Je ne sais pas » est mise à distance des autres. */
.option--jnsp {
  margin-top: 0.55rem;
  border-style: dashed;
  font-size: 0.94rem;
}

.quiz__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--encre-rvb), 0.13);
}
.quiz__retour {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: rgba(var(--encre-rvb), 0.7);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(var(--encre-rvb), 0.3);
}
.quiz__retour:hover { color: var(--encre); text-decoration-color: var(--or); }
.quiz__note-vie-privee {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: rgba(var(--encre-rvb), 0.6);
}

/* Champ libre */
.quiz__champ-libre {
  width: 100%;
  min-height: 120px;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(var(--encre-rvb), 0.2);
  border-radius: var(--rayon);
  background: rgba(var(--encre-rvb), 0.03);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.55;
  color: inherit;
  resize: vertical;
}
.quiz__champ-libre:focus { border-color: var(--or); }
.quiz__mention-champ {
  margin-top: 0.9rem;
  font-size: 0.86rem;
  color: rgba(var(--encre-rvb), 0.68);
}

/* ---- LA RESTITUTION ---- */

.resultat > * + * { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.resultat__entete {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 3.4vw, 2.25rem);
  background: rgba(var(--or-rvb), 0.08);
  border: 1px solid rgba(var(--or-rvb), 0.35);
  border-radius: var(--rayon);
}
.resultat__entete .secondaire,
.resultat__entete .attenue { color: rgba(var(--encre-rvb), 0.75); }

.resultat__score {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
/* Rupture d'échelle des pages d'outils : le score, et rien d'autre. */
.resultat__chiffre {
  font-size: clamp(4rem, 2.2rem + 8vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--or);
}
.resultat__sur { font-size: 1.05rem; color: rgba(var(--encre-rvb), 0.7); }

.resultat__zone {
  display: inline-block;
  margin-bottom: 1.5rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--or);
  border-radius: 2px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-petit);
}

.resultat__ecart {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--encre-rvb), 0.2);
}

.resultat h3 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.25rem;
}

/* Sous-scores */
.sous-scores { display: grid; gap: 1.5rem; }
.sous-score__ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.sous-score__nom { font-weight: 650; }
.sous-score__valeur {
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  color: rgba(var(--encre-rvb), 0.7);
  /* La valeur ne se coupe jamais : c'est l'intitulé, à gauche, qui prend
     les lignes dont il a besoin. */
  white-space: nowrap;
  flex-shrink: 0;
}
.sous-score__jauge {
  height: 6px;
  background: rgba(var(--encre-rvb), 0.13);
  border-radius: 3px;
  overflow: hidden;
}
.sous-score__jauge span {
  display: block;
  height: 100%;
  background: var(--or);
  border-radius: 3px;
}
.sous-score__cout {
  margin-top: 0.55rem;
  font-size: 0.9rem;
  color: rgba(var(--encre-rvb), 0.72);
}
.sous-scores__lecture {
  margin-top: 0.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-left: 3px solid var(--or);
  background: rgba(var(--encre-rvb), 0.04);
}

/* Listes de constats */
.constats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.constats li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin: 0;
  padding: 1.15rem 1.3rem;
  border: 1px solid rgba(var(--encre-rvb), 0.13);
  border-radius: var(--rayon);
  background: rgba(var(--encre-rvb), 0.025);
}
.constats--exposition li { border-left: 3px solid var(--or); }
.constats strong { display: block; margin-bottom: 0.3rem; }

/* Le repliable de correction */
.correction {
  border: 1px solid rgba(var(--encre-rvb), 0.16);
  border-radius: var(--rayon);
}
.correction > summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 1.35rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.correction > summary::-webkit-details-marker { display: none; }
.correction > summary::after {
  content: '+';
  margin-left: auto;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent-petit);
}
.correction[open] > summary::after { content: '-'; }
.correction[open] > summary { border-bottom: 1px solid rgba(var(--encre-rvb), 0.16); }
.correction__contenu { padding: 1.5rem 1.35rem; }
.correction__contenu h4 {
  margin: 2rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 650;
}
.correction__contenu h4:first-child { margin-top: 0; }
.correction__piege {
  margin-top: 0.4rem;
  font-size: 0.88rem;
  color: rgba(var(--encre-rvb), 0.68);
}
.correction__bloc {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(var(--encre-rvb), 0.14);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--encre-rvb), 0.6);
}
.glossaire { display: grid; gap: 0.9rem; margin: 0; }
.glossaire div {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(var(--encre-rvb), 0.1);
}
.glossaire dt { font-weight: 650; margin-bottom: 0.2rem; }
.glossaire dd { margin: 0; font-size: 0.93rem; color: rgba(var(--encre-rvb), 0.72); }

/* Sortie de restitution */
.resultat__sortie {
  padding: clamp(1.5rem, 3.4vw, 2.25rem);
  background: rgba(var(--encre-rvb), 0.05);
  border: 1px solid rgba(var(--encre-rvb), 0.14);
  border-radius: var(--rayon);
}
.resultat__sortie h3 { margin-bottom: 1rem; }
.resultat__sortie .boutons { margin-top: 1.75rem; }
.sortie__note { margin-top: 1.25rem; font-size: 0.88rem; color: rgba(var(--encre-rvb), 0.7); }

.resultat__reprise {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  font-size: 0.88rem;
  color: rgba(var(--encre-rvb), 0.7);
}
.resultat__reprise button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(var(--or-rvb), 0.6);
}
.resultat__reprise button:hover { color: var(--encre); }

/* Rappel du commentaire laissé par le visiteur */
.rappel-commentaire {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px dashed rgba(var(--encre-rvb), 0.28);
  border-radius: var(--rayon);
}
.rappel-commentaire blockquote {
  margin: 0.7rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--or);
  font-style: normal;
}

/* Deux noms hérités des scripts, conservés pour ne rien casser. */
.secondaire { color: rgba(var(--encre-rvb), 0.7); }


/* --------------------------------------------------------------------------
   15. PIED DE PAGE
   -------------------------------------------------------------------------- */

.pied {
  --fond: var(--sombre);
  --fond-rvb: var(--sombre-rvb);
  --encre: var(--creme);
  --encre-rvb: var(--creme-rvb);
  --accent-petit: var(--or-clair);
  background: var(--sombre);
  color: var(--creme);
  padding-block: clamp(2.75rem, 5vw, 4rem) 1.75rem;
  border-top: 1px solid rgba(var(--creme-rvb), 0.12);
}

.pied__haut {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(var(--creme-rvb), 0.14);
}
@media (max-width: 780px) { .pied__haut { grid-template-columns: 1fr; } }

.pied__titre {
  margin-bottom: 1.1rem;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or-clair);
}
.pied p { color: rgba(var(--creme-rvb), 0.72); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 0.65rem; }
.pied a {
  color: rgba(var(--creme-rvb), 0.82);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.pied a:hover { color: var(--creme); border-bottom-color: var(--or); }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.75rem;
  font-size: 0.86rem;
  color: rgba(var(--creme-rvb), 0.62);
}
.pied__bas p { margin: 0; color: inherit; }
.pied__legal { max-width: 62ch; }


/* --------------------------------------------------------------------------
   16. APPARITIONS AU DÉFILEMENT
   RÈGLE DE SÉCURITÉ : rien n'est masqué tant que le script n'a pas posé la
   classe « js-anim » sur la page. Sans JavaScript, sans le fichier, ou avec
   un navigateur ancien, tout le contenu s'affiche normalement.
   -------------------------------------------------------------------------- */

.js-anim .a-apparaitre {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-anim .a-apparaitre.est-apparu {
  opacity: 1;
  transform: none;
}

/* Variante latérale, pour les blocs à deux temps. */
.js-anim .a-apparaitre--cote { transform: translateY(14px) translateX(-18px); }
.js-anim .a-apparaitre--cote.est-apparu { transform: none; }

/* Cascade : les éléments d'une même grille s'allument l'un après l'autre.
   Le décalage est écrit ici et non en attribut de style dans la page, que
   la politique de sécurité du site interdit. */
.js-anim .grille > .a-apparaitre:nth-child(2),
.js-anim .frise > li.a-apparaitre:nth-child(2),
.js-anim .compteurs > .a-apparaitre:nth-child(2) { transition-delay: 0.09s; }
.js-anim .grille > .a-apparaitre:nth-child(3),
.js-anim .frise > li.a-apparaitre:nth-child(3),
.js-anim .compteurs > .a-apparaitre:nth-child(3) { transition-delay: 0.18s; }
.js-anim .grille > .a-apparaitre:nth-child(4),
.js-anim .frise > li.a-apparaitre:nth-child(4) { transition-delay: 0.27s; }
.js-anim .grille > .a-apparaitre:nth-child(n+5),
.js-anim .frise > li.a-apparaitre:nth-child(n+5) { transition-delay: 0.36s; }

/* Le hero n'attend pas le défilement : il s'installe au chargement. */
.js-anim .hero__contenu > * { animation: monte 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
/* Le filigrane est exclu : l'animation se termine sur transform: none, ce
   qui écraserait le calage vertical des chevrons. */
.js-anim .hero__contenu > .chevrons-fondu { animation: none; }
.js-anim .hero__contenu > *:nth-child(2) { animation-delay: 0.1s; }
.js-anim .hero__contenu > *:nth-child(3) { animation-delay: 0.2s; }
.js-anim .hero__contenu > *:nth-child(4) { animation-delay: 0.3s; }
.js-anim .hero .reperes { animation: monte 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; }
@keyframes monte {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   17. BARRE D'ACTION ET FIL DE LECTURE
   -------------------------------------------------------------------------- */

/* Barre d'action, montrée après le premier écran sur les pages longues.
   L'élément est fabriqué par le script : sans script, il n'existe pas. */
.barre-action {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 55;
  transform: translate(-50%, 130%);
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: calc(100vw - 2rem);
  padding: 0.55rem 0.55rem 0.55rem 1.35rem;
  background: rgba(var(--sombre-rvb), 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--creme-rvb), 0.16);
  border-radius: 100px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.barre-action.est-visible { transform: translate(-50%, 0); }
.barre-action p {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(var(--creme-rvb), 0.8);
  white-space: nowrap;
}
.barre-action .bouton { padding: 0.6rem 1.2rem; font-size: 0.875rem; }
@media (max-width: 620px) {
  .barre-action p { display: none; }
  .barre-action { padding: 0.5rem; }
}

/* Fil de progression de lecture, sur les pages réellement longues. */
.fil-lecture {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 70;
  pointer-events: none;
}
.fil-lecture span {
  display: block;
  height: 100%;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
}


/* --------------------------------------------------------------------------
   18. IMPRESSION
   -------------------------------------------------------------------------- */

@media print {
  /* À l'impression, aucun bloc ne reste masqué. */
  .js-anim .a-apparaitre { opacity: 1 !important; transform: none !important; }

  body { background: #fff; color: #000; }
  body::before { display: none; }

  .entete, .pied, .barre-action, .fil-lecture, .sommaire-lateral,
  .hero__fond, .bande-image, .duo__visuel, .cartouche__visuel { display: none !important; }

  /* Les fonds sombres sont neutralisés : une restitution de diagnostic
     imprimée doit rester lisible et ne pas vider une cartouche d'encre. */
  .zone, .haut, .hero, .plaque, .plateau, .resultat__entete, .resultat__sortie,
  .encadre, .promesse, .constats li, .zone-carte {
    background: #fff !important;
    color: #000 !important;
    border-color: #999 !important;
  }
  .or, .compteur__valeur, .resultat__chiffre { color: #000 !important; }

  a { text-decoration: underline; }

  /* Le tableau de référence reste lisible, en-tête répété d'une page à l'autre. */
  .tableau thead { display: table-header-group; }
  .tableau th, .tableau td { border-color: #999 !important; }

  /* On évite de couper un bloc en deux entre deux feuilles. */
  .plaque, .offre, .constats li, .correction { break-inside: avoid; }

  /* Le rythme vertical de l'écran est trop large pour le papier. */
  .zone { padding-block: 1.2rem !important; }
}