/* ============================================================
   DOS SOLIDE — feuille de style unique

   Direction : imprimé plutôt qu'interface. Papier chaud, encre
   brune, une grotesque étroite pour les titres et une romaine
   pour le texte courant. Pas de cartes arrondies, pas de grille
   symétrique : des filets, des blancs inégaux, des photos qui
   sortent du cadre.
   ============================================================ */

/* ---------- Polices servies avec le site ----------
   Big Shoulders Display (titres) et Newsreader (texte), SIL Open Font
   License 1.1, en version variable. Les héberger ici plutôt que d'appeler
   Google évite de transmettre l'adresse IP des visiteurs à un tiers.
   Voir outils/polices.sh pour les rafraîchir. */

@font-face {
  font-family: 'Titres'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('../fonts/titres-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: 'Titres'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('../fonts/titres-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;
}
@font-face {
  font-family: 'Texte'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('../fonts/texte-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: 'Texte'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('../fonts/texte-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;
}
@font-face {
  font-family: 'Douce'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/douce-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: 'Neutre'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/neutre-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: 'Neutre'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/neutre-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;
}
@font-face {
  font-family: 'Texte'; font-style: italic; font-weight: 300 500; font-display: swap;
  src: url('../fonts/texte-italique-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;
}

:root {
  --encre:      #f5f4ec;   /* le fond dominant est clair */
  --encre-2:    #21453a;   /* les sections alternées deviennent l'aplat vert pin */
  --papier:     #f5f4ec;
  --craie:      #1c231f;
  --jaune:      #1c231f;
  --ambre:      #2c6550;
  --ambre-encre:#2c6550;
  --gris-s:     #4f5a53;
  --gris-p:     #4f5a53;
  --trait-s:    #dde0d3;
  --trait-p:    #dde0d3;
  /* Le caractère est ce qui séparait le moins cette page de sa
     référence : tout y était en grotesque ronde, exactement son
     registre. Les titres passent à une étroite industrielle très
     haute, le texte courant à une grotesque neutre. Le contraste
     entre les deux fait le travail que faisaient les aplats. */
  --titres: 'Titres', 'Oswald', 'Haettenschweiler', Impact, sans-serif;
  --texte:  'Neutre', 'Helvetica Neue', Arial, sans-serif;
  --douce:  'Douce', 'Helvetica Neue', Arial, sans-serif;
  --marine:     #2c6550;
  --bleu-pale:  #cfe6d5;

  /* Ce qui s'écrit sur l'aplat alterné. Une variante dont l'aplat
     est clair n'a que ces deux jetons à redéfinir.
     Le texte courant y est en craie pleine et non en vert pâle : sur
     le vert pin, le pâle reculait au point qu'on lisait les chiffres
     et pas leur légende. La hiérarchie est portée par le corps et par
     le citron des chiffres, elle n'a pas besoin de la couleur. */
  --aplat-titre: #f5f4ec;
  --aplat-texte: #f5f4ec;
  --aplat-filet: rgba(207, 230, 213, .28);

  /* Le pied de page. Les valeurs par défaut conviennent à toute
     direction dont le fond dominant est clair ; une direction sombre,
     où --craie et --encre sont inversés, redéfinit ces quatre-là. */
  --pied-fond:   var(--craie);
  --pied-texte:  #f5f4ec;
  --pied-doux:   rgba(245, 244, 236, .8);
  --pied-accent: var(--bleu-pale);

  --serre: 1240px;
  --etroit: 720px;
  --marge: clamp(20px, 5vw, 56px);
  --section: clamp(76px, 9vw, 132px);
  --rayon: 0px;
  /* L'entaille : un coin coupé, repris des découpes du symbole. Elle
     remplace partout l'arrondi. Une page entière en rayon 999 est la
     silhouette la plus commune du web, et celle de la référence. */
  --coupe: 14px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 78px; }

body {
  margin: 0;
  background: var(--encre);
  color: var(--craie);
  font-family: var(--texte);
  font-size: 18.5px;
  line-height: 1.64;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Un grain très léger sur toute la page : sans lui, les aplats sombres
   ont la platitude propre aux interfaces. Avec, ils ont la matière d'un
   papier imprimé. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 900; pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* Sans cela, un enfant de grille refuse de passer sous sa largeur de
   contenu minimale et pousse la colonne hors de l'écran. */
.hero-inner > *, .methode-grille > *, .suivi-inner > *, .suivi-corps > *,
.theo-inner > *, .contact-inner > *, .bandeau-inner > *, .situations li > *,
.etape > *, .preuve-item { min-width: 0; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--titres);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 0.95;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.9rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2.5rem, 5.4vw, 4.2rem); margin-bottom: 0.5em; }
h3 { font-size: 1.5rem; line-height: 0.95; }

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

strong { font-weight: 600; }
.accent { color: var(--ambre); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ambre); color: var(--encre); padding: 12px 20px; font-weight: 600; }
.skip-link:focus { left: 12px; top: 12px; }
:focus-visible { outline: 2px solid var(--ambre); outline-offset: 3px; }

.bloc { width: 100%; max-width: var(--serre); margin: 0 auto; padding: 0 var(--marge); }
.bloc-etroit { max-width: calc(var(--etroit) + var(--marge) * 2); }

/* Le surtitre : capitales étroites très espacées, précédées d'un filet
   court. C'est la seule ornementation récurrente de la page. */
.surtitre {
  font-family: var(--titres); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ambre);
  margin: 0 0 1.3em; display: flex; align-items: center; gap: 14px;
}
.surtitre::before { content: ''; width: 34px; height: 2px; background: currentColor; flex: none; }
.surtitre-clair { color: var(--ambre-encre); }
.surtitre-bandeau { color: var(--encre); }

/* ---------- Marque ---------- */

.marque-lien { display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit; }
.marque { width: 17px; height: 30px; flex: none; color: var(--ambre); }
.marque-mot {
  font-family: var(--titres); font-weight: 700; font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1;
}
.marque-mot em { font-style: normal; font-weight: 800; }

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  /* Le texte d'un bouton en flex se replie en fer à gauche s'il passe
     sur deux lignes : il faut le recentrer explicitement. */
  text-align: center;
  font-family: var(--titres); font-weight: 700; font-size: 1.06rem;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 15px 28px 13px; border: 0; border-radius: 0;
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
.bouton-plein { background: var(--ambre); color: var(--encre); }
.bouton-plein:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--encre-2); }
.clair .bouton-plein:hover, .bandeau .bouton-plein:hover { box-shadow: 5px 5px 0 var(--encre); }
.bouton-sombre { background: var(--encre); color: var(--craie); }
.bouton-sombre:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 rgba(20, 17, 14, .35); }
.bouton-sm { padding: 10px 18px 8px; font-size: 0.95rem; }

.lien-fleche {
  display: inline-flex; align-items: baseline; gap: 9px;
  font-family: var(--titres); font-weight: 600; font-size: 1.06rem;
  text-transform: uppercase; letter-spacing: 0.07em; text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.lien-fleche::after { content: '\2192'; transition: transform .16s ease; }
.lien-fleche:hover::after { transform: translateX(5px); }

/* ---------- En-tête ---------- */

.entete {
  position: sticky; top: 0; z-index: 100;
  background: var(--encre);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.entete.defile { border-bottom-color: var(--trait-s); }
.entete-inner { display: flex; align-items: center; gap: 26px; min-height: 68px; }
.nav { display: flex; gap: 30px; margin-left: auto; }
.nav a {
  text-decoration: none; font-family: var(--titres); font-weight: 600;
  font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gris-s); transition: color .16s ease;
}
.nav a:hover { color: var(--craie); }
.burger { display: none; }

/* ---------- Hero ---------- */

.hero { position: relative; border-bottom: 1px solid var(--trait-s); }
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
  max-width: none; padding-right: 0;
  padding-left: max(var(--marge), calc((100vw - var(--serre)) / 2 + var(--marge)));
}
.hero-texte { padding: clamp(52px, 7vw, 96px) 0 clamp(52px, 7vw, 96px); }
.hero h1 { margin-bottom: 0.32em; }
.hero-chapeau {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--gris-s);
  max-width: 27em; margin-bottom: 2em;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.hero-note { margin-top: 1.6em; font-size: 0.95rem; color: var(--gris-p); font-style: italic; }

/* La photo va jusqu'au bord de la fenêtre : rien ne l'encadre. */
.hero-visuel { position: relative; align-self: stretch; min-height: 480px; }
.hero-visuel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 52% 50%;
}

/* ---------- Bandeau de preuve ---------- */

.preuve { background: var(--encre-2); border-bottom: 1px solid var(--trait-s); }
.preuve-grille {
  display: grid; grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(20px, 3vw, 44px);
}
.preuve-item { padding: 40px 0 42px; position: relative; }
.preuve-item + .preuve-item { padding-left: clamp(20px, 3vw, 44px); }
.preuve-item + .preuve-item::before {
  content: ''; position: absolute; left: 0; top: 44px; bottom: 46px; width: 1px;
  background: var(--trait-s);
}
.preuve-item strong {
  display: block; font-family: var(--titres); font-weight: 800;
  font-size: clamp(2.1rem, 3.4vw, 3rem); line-height: 0.9;
  text-transform: uppercase; color: var(--craie); margin-bottom: 12px;
}
.preuve-item span { font-size: 0.98rem; color: var(--gris-s); line-height: 1.5; }

/* ---------- Sections ---------- */

.sombre, .clair, .bandeau { padding: var(--section) 0; }
.sombre-alt { background: var(--encre-2); }
.clair { background: var(--papier); color: var(--encre); }
.clair .lien-fleche { color: var(--ambre-encre); }

/* ---------- « C'est pour toi si » : une liste, pas des cartes ---------- */

.situations { margin: 0; padding: 0; list-style: none; counter-reset: s; }
/* Quatre colonnes depuis l'ajout de la pastille : le numéro, le
   pictogramme cerclé, l'intitulé, puis le texte. */
.situations li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 3.4rem 46px minmax(0, 13em) minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 36px); align-items: center;
  padding: 26px 0; border-top: 1px solid var(--trait-p);
}
.situations li:last-child { border-bottom: 1px solid var(--trait-p); }
.situations li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--titres); font-weight: 700; font-size: 1.15rem;
  color: var(--ambre-encre); letter-spacing: 0.06em;
}
.situations h3 { color: var(--encre); }
.situations p { color: var(--gris-p); margin: 0; font-size: 1.02rem; }

/* ---------- Méthode ---------- */

.methode-grille {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(34px, 5vw, 78px); align-items: start;
}
.etapes { list-style: none; margin: 0; padding: 0; }
.etape {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 2.6vw, 34px);
  padding: 32px 0; border-top: 1px solid var(--trait-s);
}
.etape:first-child { border-top: 0; padding-top: 0; }
/* Les numéros sont en réserve, dessinés au filet : ils structurent la
   colonne sans peser autant qu'un aplat. */
.etape-num {
  font-family: var(--titres); font-weight: 800; font-size: 3.4rem; line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1.4px var(--ambre); letter-spacing: 0.01em;
}
.etape h3 { margin-bottom: 0.45em; }
.etape p { color: var(--gris-s); margin: 0; }

/* La photo sort du cadre à droite. */
.methode-visuel { margin: 0; position: sticky; top: 96px; }
.methode-visuel img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.methode-visuel figcaption {
  margin-top: 14px; font-size: 0.95rem; color: var(--gris-p); font-style: italic;
}

.methode-conclusion {
  margin-top: clamp(44px, 5vw, 70px); padding-top: 34px;
  border-top: 3px solid var(--ambre);
  font-family: var(--titres); font-weight: 500; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.04;
  letter-spacing: 0.01em; color: var(--craie); max-width: 22em;
}
.methode-conclusion strong { font-weight: 800; color: var(--ambre); }

/* ---------- Le suivi ---------- */

.suivi-inner {
  display: grid; grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.suivi-visuel { margin: 0; }
.suivi-visuel img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.suivi-visuel figcaption {
  margin-top: 14px; font-size: 0.95rem; color: var(--gris-p); font-style: italic;
}
.suivi-corps { display: grid; gap: clamp(30px, 3.5vw, 48px); align-content: center; }
.suivi-texte p { color: var(--gris-s); }
.suivi-tarif { font-style: italic; color: var(--gris-p) !important; }
.suivi-texte .bouton { margin-top: 1.7em; }

.inclus { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait-s); }
.inclus li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--trait-s);
  font-size: 1.02rem;
}
.inclus li::before {
  content: '\2014'; color: var(--ambre); font-family: var(--titres); font-weight: 700;
}

/* ---------- Théo ---------- */

.theo-inner {
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(34px, 5vw, 78px); align-items: start;
}
.theo-portrait { margin: 0; }
.theo-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.theo-portrait figcaption {
  margin-top: 14px; font-size: 0.95rem; color: var(--gris-p); font-style: italic;
}
.theo-texte p { color: var(--gris-p); }
.theo-titre {
  font-family: var(--titres); font-weight: 600; font-size: 1.3rem;
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--ambre-encre);
  margin: -0.1em 0 1.5em;
}
/* Lettrine : le signe le plus court qui dise « ceci a été composé ». */
.theo-titre + p::first-letter {
  float: left; font-family: var(--titres); font-weight: 800; font-size: 4.1em;
  line-height: 0.76; padding: 0.06em 0.1em 0 0; color: var(--encre);
}
.theo-mission {
  font-family: var(--titres); font-weight: 600; text-transform: uppercase;
  font-size: 1.5rem; line-height: 1.03; letter-spacing: 0.01em;
  color: var(--encre) !important; border-top: 3px solid var(--ambre-encre);
  padding-top: 22px; margin-top: 1.8em; max-width: 20em;
}

.formations { margin: 0 0 1em; padding: 0; list-style: none; }
.formations li {
  padding: 10px 0; font-size: 1rem; color: var(--gris-p);
  border-bottom: 1px solid var(--trait-p);
}
.formations-note { font-style: italic; }

/* ---------- Dépliants ---------- */

.depliant { border-top: 1px solid var(--trait-p); }
.depliant:last-of-type { border-bottom: 1px solid var(--trait-p); }
.depliant > summary {
  cursor: pointer; list-style: none; position: relative;
  font-family: var(--titres); font-weight: 700; font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: 0.015em; line-height: 1.06;
  padding: 24px 52px 22px 0;
}
.depliant > summary::-webkit-details-marker { display: none; }
.depliant > summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  font-family: var(--titres); font-weight: 500; font-size: 2.1rem; line-height: 1;
  color: var(--ambre-encre); transition: rotate .2s ease;
}
.depliant[open] > summary::after { rotate: 45deg; }
.depliant > *:not(summary) { margin-bottom: 26px; }
.depliant p { color: var(--gris-p); max-width: 44em; }

#theo .depliant { margin-top: 2.4em; }

/* ---------- Retours : des citations, pas des cartes ---------- */

.retours-grille { columns: 2; column-gap: clamp(34px, 5vw, 72px); }
.retour { break-inside: avoid; margin: 0 0 clamp(30px, 4vw, 46px); }
.retour blockquote { margin: 0; position: relative; }
/* Le guillemet pend dans la marge, comme en typographie de livre. */
.retour blockquote::before {
  content: '\00AB'; position: absolute; left: -0.62em; top: -0.06em;
  font-family: var(--titres); font-weight: 700; font-size: 2.1em; line-height: 1;
  color: var(--ambre);
}
.retour p { font-size: 1.06rem; color: var(--craie); font-style: italic; }
.retour figcaption {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--trait-s);
  font-family: var(--titres); font-weight: 600; font-size: 0.94rem;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--gris-s);
}
.retours-note { margin-top: 20px; font-size: 0.95rem; color: var(--gris-p); max-width: 46em; font-style: italic; }

/* ---------- Bandeau formation ---------- */

.bandeau { background: var(--ambre); color: var(--encre); }
.bandeau-inner { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.45fr);
  gap: clamp(28px, 4vw, 60px); align-items: end; }
.bandeau h2 { color: var(--encre); font-size: clamp(2.3rem, 4.4vw, 3.5rem); }
.bandeau p { max-width: 32em; color: var(--encre); }
.bandeau .bouton { justify-self: start; }

/* ---------- Avertissement médical ---------- */

.avertissement {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--trait-p);
  font-size: 0.98rem; color: var(--gris-p); font-style: italic;
}

/* ---------- Contact ---------- */

.contact-inner {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(38px, 5vw, 84px); align-items: start;
}
.contact-texte h2 { font-size: clamp(2.3rem, 4vw, 3.3rem); }
.contact-texte p { color: var(--gris-s); }
.contact-liens { list-style: none; margin: 2.2em 0 0; padding: 0; border-top: 1px solid var(--trait-s); }
.contact-liens li { border-bottom: 1px solid var(--trait-s); }
.contact-liens a {
  display: block; padding: 16px 0; text-decoration: none;
  font-family: var(--titres); font-weight: 600; font-size: 1.24rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: color .16s ease, padding-left .16s ease;
}
.contact-liens a:hover { color: var(--ambre); padding-left: 10px; }

/* Champs soulignés : une boîte arrondie par champ, c'est le formulaire de
   tout le monde. Un filet suffit à dire où l'on écrit. */
.formulaire { border-top: 3px solid var(--ambre); padding-top: 30px; }
.champ { margin-bottom: 24px; }
.champ label, .consentement span {
  display: block; font-family: var(--titres); font-weight: 600; font-size: 0.92rem;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--gris-s);
  margin-bottom: 8px;
}
.champ input, .champ textarea {
  width: 100%; font: inherit; font-size: 1.04rem; color: var(--craie);
  background: transparent; border: 0; border-bottom: 1px solid var(--trait-s);
  border-radius: 0; padding: 9px 0; transition: border-color .16s ease;
}
.champ input::placeholder, .champ textarea::placeholder { color: #5d5347; font-style: italic; }
.champ input:focus, .champ textarea:focus { border-bottom-color: var(--ambre); outline: none; }
.champ textarea { resize: vertical; min-height: 104px; }

.consentement { display: flex; align-items: flex-start; gap: 12px; margin: 26px 0 26px; }
.consentement input { margin-top: 5px; accent-color: var(--ambre); flex: none; }
.consentement span {
  margin: 0; font-family: var(--texte); font-weight: 380; font-size: 0.98rem;
  text-transform: none; letter-spacing: 0; line-height: 1.5; color: var(--gris-s);
}
.formulaire .bouton { width: 100%; }
.formulaire-etat { margin: 16px 0 0; font-size: 0.98rem; color: var(--ambre); min-height: 1.3em; font-style: italic; }
.cache { position: absolute; left: -9999px; }

/* ---------- Pied de page ---------- */

.pied { border-top: 1px solid var(--trait-s); padding: clamp(52px, 6vw, 78px) 0 36px; }
.pied-haut { display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap; padding-bottom: 32px; }
.pied-nav { display: flex; flex-wrap: wrap; gap: 26px; }
.pied-nav a {
  text-decoration: none; font-family: var(--titres); font-weight: 600;
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gris-s);
}
.pied-nav a:hover { color: var(--craie); }

.depliant-pied { border-top-color: var(--trait-s); }
.depliant-pied:last-of-type { border-bottom-color: var(--trait-s); }
.depliant-pied > summary { font-size: 1.1rem; color: var(--gris-s); padding: 20px 52px 18px 0; }
.depliant-pied > summary::after { color: var(--ambre); }
.mentions { max-width: 58em; }
.mentions h3 {
  font-size: 0.95rem; letter-spacing: 0.19em; color: var(--ambre); margin: 30px 0 10px;
}
.mentions h3:first-child { margin-top: 6px; }
.mentions p { font-size: 0.98rem; color: var(--gris-s); }
.mentions a { color: var(--craie); }
.a-completer {
  border-bottom: 2px solid var(--ambre); color: var(--ambre); font-style: italic;
}

.pied-bas { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin: 32px 0 0; font-size: 0.95rem; color: var(--gris-p); }
.pied-bas a { text-decoration: none; }
.pied-bas a:hover { color: var(--craie); }

/* ---------- Apparition au défilement ---------- */

.anim { opacity: 0; transform: translateY(18px); }
.anim.vu { opacity: 1; transform: none;
  transition: opacity .65s ease, transform .65s cubic-bezier(.22,.7,.3,1); }

/* ============================================================
   Direction — d'après enorehab.fr

   Le site donné en référence dans le brief, dont le client a retenu
   la langue : crème, brun d'encre, aplats bleu barbeau, capitales
   douces à graisse normale, pilules et angles à 16 px, photographies
   virées sépia.

   Un seul écart, et il n'est pas négociable : chez la référence, le
   crème sur le bleu tombe à 3,16 : 1, sous le seuil de lecture. Ici
   le crème est réservé aux grands titres, où le seuil est plus bas,
   et le texte courant des aplats passe en brun — 4,77 : 1.
   ============================================================ */

body { font-size: 17px; font-weight: 400; line-height: 1.62; }
body::after { display: none; }

h1, h2, h3 { font-weight: 500; letter-spacing: 0; line-height: 0.95; }
h1 { font-size: clamp(2.9rem, 6.4vw, 5.5rem); }
h2 { font-size: clamp(2.1rem, 4vw, 2.9rem); }
h3 { font-size: 1.4rem; letter-spacing: 0; line-height: 1.3; }

.surtitre { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; color: var(--ambre); }
.surtitre::before { display: none; }
.marque-mot { font-weight: 600; font-size: 1.4rem; letter-spacing: -0.01em; }
.marque { color: var(--ambre); }

/* Pilules : c'est la forme la plus reconnaissable de la référence. */
.bouton { border-radius: 999px; font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.09em; padding: 16px 30px; }
.bouton-plein { background: var(--craie); color: var(--encre); }
.bouton-plein:hover { box-shadow: none; transform: translateY(-2px); }
.bouton-sombre { background: var(--encre); color: var(--craie); }
.lien-fleche { font-weight: 600; font-size: 0.92rem; letter-spacing: 0.09em;
  border-bottom-width: 1px; }
.nav a { font-weight: 500; font-size: 0.95rem; letter-spacing: 0.01em; text-transform: none; }

/* L'en-tête suit le fond dominant de la direction : écrit en dur, il
   restait crème sous les directions à fond sombre. Opaque plutôt que
   translucide — le flou d'arrière-plan coûte un repaint à chaque
   défilement et n'apporte rien sur un fond uni. */
.entete { background: var(--encre); backdrop-filter: none; }

/* Le hero : photographie plein cadre, voile brun, titre par-dessus. */
.hero { position: relative; background: #1c231f; }
.hero-inner { grid-template-columns: 1fr; padding-inline: max(var(--marge),
  calc((100vw - var(--serre)) / 2 + var(--marge))); }
.hero-visuel { position: absolute; inset: 0; min-height: 0; margin: 0; z-index: 0; }
.hero-visuel img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(.72) brightness(.42) contrast(1.03); }
/* Un voile en dégradé par-dessus la photo : sans lui, le titre en crème
   posé sur une salle chargée descend sous le seuil de lecture. */
.hero-visuel::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(28,35,31,.88) 0%, rgba(28,35,31,.72) 46%,
    rgba(28,35,31,.34) 100%); }
.hero-texte { position: relative; z-index: 1; max-width: 46rem;
  padding-block: clamp(80px, 11vw, 150px); }
.hero h1, .hero .hero-chapeau { color: #f5f4ec; }
.hero .surtitre { color: #cfe6d5; }
.hero-note { color: rgba(245, 244, 236, .82); }
/* Sur le voile brun, l'accent bleu foncé et le lien en brun disparaissent :
   ils repassent en bleu pâle et en crème. */
.hero .accent { color: #cfe6d5; }
.hero .lien-fleche { color: #f5f4ec; }

/* Cette direction inverse le sens des deux jetons de base : --encre y est
   clair et --craie sombre. Toutes les règles qui écrivaient du texte en
   --encre deviendraient donc crème sur crème. */
.clair { color: var(--craie); }
.situations h3 { color: var(--craie); }
.theo-mission { color: var(--craie) !important; }

/* Les sections « claires » de la structure deviennent l'aplat bleu. */
/* L'aplat était un bleu barbeau clair, il est désormais un vert pin
   sombre : tout ce qui s'écrivait dessus en brun doit s'éclaircir,
   sans quoi on tombe à 1,5 : 1. */
.sombre-alt, .preuve { background: var(--encre-2); }
.sombre-alt h2, .preuve-item strong { color: var(--aplat-titre); }
.sombre-alt p, .sombre-alt li, .preuve-item span,
.sombre-alt .suivi-tarif { color: var(--aplat-texte) !important; }
.sombre-alt .surtitre { color: var(--aplat-titre); }
.sombre-alt .inclus li::before { color: var(--aplat-titre); }
.sombre-alt .inclus, .sombre-alt .inclus li, .preuve-item + .preuve-item::before {
  border-color: var(--aplat-filet); background: transparent; }
.sombre-alt .bouton-plein { background: var(--aplat-titre); color: var(--encre-2); }
.bandeau { background: var(--craie); color: var(--encre); }
.bandeau h2, .bandeau p, .surtitre-bandeau { color: var(--encre); }
.bandeau .bouton-sombre { background: var(--encre); color: var(--craie); }

/* Angles adoucis sur les images, comme sur la référence. */
.methode-visuel img, .suivi-visuel img, .theo-portrait img {
  border-radius: var(--rayon); filter: saturate(.96);
}
.theo-portrait img { filter: saturate(.98); }

/* Le citron vert n'apparaît qu'ici, sur les quatre chiffres du bandeau :
   une seule couleur vive, à un seul endroit, pour qu'elle porte. */
.preuve-item strong { font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(2.1rem, 3.4vw, 2.9rem); }
.sombre-alt .preuve-item strong, .preuve .preuve-item strong { color: var(--aplat-chiffre, #b9e34a); }
.etape-num { -webkit-text-stroke: 0; color: var(--ambre); font-size: 1.15rem;
  font-weight: 600; letter-spacing: 0.08em; padding-top: 6px; }
.etape { grid-template-columns: 2.8rem minmax(0, 1fr); }
.methode-conclusion { font-weight: 500; letter-spacing: 0;
  font-size: clamp(1.4rem, 2.3vw, 1.9rem); line-height: 1.2;
  border-top-color: var(--ambre); }
.methode-conclusion strong { color: var(--ambre); }
.theo-titre { font-size: 1.02rem; letter-spacing: 0.11em; font-weight: 600; }
.theo-mission { font-weight: 500; letter-spacing: 0; font-size: 1.4rem; line-height: 1.25;
  border-top-color: var(--ambre); }
.theo-titre + p::first-letter { float: none; font-size: inherit; font-weight: inherit;
  line-height: inherit; padding: 0; color: inherit; }

.retour { background: #fff; border-radius: var(--rayon); padding: 26px 28px 22px; }
.retour p { font-style: normal; color: var(--craie); }
.retour blockquote::before { display: none; }
.retour figcaption { letter-spacing: 0.1em; font-size: 0.86rem; border-top-color: #e2e5da; }
.depliant > summary { font-weight: 500; font-size: 1.35rem; letter-spacing: 0; }
.contact-liens a { font-weight: 600; font-size: 1.06rem; letter-spacing: 0.01em;
  text-transform: none; }
.champ label, .consentement span { letter-spacing: 0.1em; font-size: 0.78rem; }
.champ input, .champ textarea { color: var(--craie); }
.formulaire { border-top-color: var(--ambre); }
.mentions h3 { letter-spacing: 0.14em; font-size: 0.82rem; }

/* Le pied de page est brun ; l'accent bleu foncé y tombait à 2,44 : 1,
   très en dessous du seuil de lecture. Titres des mentions, mentions
   « à compléter » et signe du dépliant repassent donc en bleu pâle,
   qui monte à 8,7 : 1 sur ce fond. */
.pied .mentions h3, .pied .a-completer,
.pied .depliant-pied > summary::after { color: var(--pied-accent); }
.pied .a-completer { border-bottom-color: var(--pied-accent); }

/* Le pied prend --craie, sombre dans toute direction à fond clair et
   clair dans les directions sombres, où les deux jetons s'inversent.
   L'aplat alterné ne convient pas : il est clair dans plusieurs
   variantes, et le texte du pied s'y effaçait. */
.pied { background: var(--pied-fond); color: var(--pied-texte); border-top: 0; }
.pied .marque-mot, .pied-nav a, .pied-bas, .depliant-pied > summary { color: var(--pied-texte); }
.pied .depliant, .pied .depliant:last-of-type, .pied-bas { border-color: var(--pied-doux); }
.mentions p { color: var(--pied-doux); }
.mentions a, .pied-bas a { color: var(--pied-texte); }

/* ============================================================
   Matière : formes et mouvement

   Rien de décoratif au sens strict. Chaque élément ci-dessous vient
   soit de la marque — la vertèbre, l'arc entaillé —, soit d'un geste
   qui rend la lecture plus lisible : une section qui glisse sur la
   précédente, un chiffre qui se compose, une photographie qui se
   dévoile par volet. Tout est neutralisé sous prefers-reduced-motion.
   ============================================================ */

/* --- Les sections colorées glissent par-dessus la précédente --------
   Une page faite de bandes empilées bord à bord est la silhouette la
   plus commune qui soit. Un recouvrement de quelques dizaines de
   pixels, et l'œil lit une superposition plutôt qu'un empilement. */
.preuve, .sombre-alt, .bandeau {
  position: relative; z-index: 1;
  border-radius: clamp(22px, 3.4vw, 46px) clamp(22px, 3.4vw, 46px) 0 0;
  margin-top: clamp(-46px, -3.4vw, -22px);
}
.hero, .clair { position: relative; }

/* --- Le filet vertébré ---------------------------------------------
   Le trait plein devient une suite de segments, repris du découpage
   du symbole. C'est la marque qui souligne, pas une bordure. */
.methode-conclusion, .theo-mission, .formulaire {
  border-top: 0;
  background-image: repeating-linear-gradient(to right,
    currentColor 0 18px, transparent 18px 25px);
  background-size: 100% 3px; background-repeat: no-repeat;
  background-position: top left;
}
.methode-conclusion, .theo-mission { color: var(--craie); }
.formulaire { color: var(--ambre); }

/* --- Le compteur ----------------------------------------------------
   Les chiffres du bandeau de preuve se composent au défilement. Le
   texte de repli reste dans le HTML : sans JavaScript, ils sont là. */
.preuve-item strong { font-variant-numeric: tabular-nums; }

/* --- Survols --------------------------------------------------------
   Une photographie qui respire légèrement au survol, un lien de
   navigation souligné par un trait qui se déploie. */
.methode-visuel, .suivi-visuel, .theo-portrait { overflow: hidden; border-radius: var(--rayon); }
.methode-visuel img, .suivi-visuel img, .theo-portrait img {
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
.methode-visuel:hover img, .suivi-visuel:hover img, .theo-portrait:hover img {
  transform: scale(1.035);
}
.nav a { position: relative; }
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px;
  background: currentColor; transition: right .28s cubic-bezier(.2, .7, .3, 1);
}
.nav a:hover::after { right: 0; }

/* --- Apparitions ----------------------------------------------------
   Les photographies se dévoilent par un volet vertical plutôt que par
   un fondu : le fondu est le mouvement par défaut de tout le monde.

   Le volet porte sur le cadre, jamais sur l'image. Clipper l'image
   elle-même la rend invisible aux yeux du navigateur : ni chargement
   différé, ni déclenchement de l'observateur — elle ne s'affiche
   jamais. C'est le cadre, non clippé, qui signale son entrée à
   l'écran, et l'image suit. */
.volet img { clip-path: inset(0 0 100% 0); }
.volet.vu img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s cubic-bezier(.22, .7, .25, 1);
}

/* Le symbole se dessine au chargement : le tracé est déjà en pointillé,
   il suffit de faire courir le décalage. */
@keyframes tracer-marque { from { stroke-dashoffset: 620; } to { stroke-dashoffset: 18; } }
.entete .marque .trace { animation: tracer-marque 1.15s cubic-bezier(.5, 0, .2, 1) .15s both; }

/* Parallaxe très courte sur la photographie d'accueil : douze pixels
   suffisent à décoller l'image du texte qui la recouvre. Le bloc est
   clippé, sinon l'agrandissement de 4,5 % qui l'accompagne déborde de
   la largeur de la fenêtre. */
.hero-visuel { overflow: hidden; }
.hero-visuel img { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .volet img, .volet.vu img { clip-path: none; }
  .entete .marque .trace { animation: none; }
  .methode-visuel:hover img, .suivi-visuel:hover img, .theo-portrait:hover img { transform: none; }
}

/* La légende sous la photographie du suivi est posée sur l'aplat bleu :
   le gris chaud des sections crème y tombe à 2,46 : 1. */
.sombre-alt .suivi-visuel figcaption,
.sombre-alt .methode-visuel figcaption { color: var(--aplat-texte);
  border-top-color: var(--aplat-filet); }

/* --- Densité de l'accueil sur téléphone -----------------------------
   Sept blocs empilés avant la première section : surtitre sur deux
   lignes, titre sur trois, chapeau sur quatre, bouton, lien secondaire,
   mention, étiquette. C'est trop pour un écran de téléphone, et aucun
   espacement ne rattrape un empilement trop long — il faut retirer des
   éléments, pas les écarter.

   L'étiquette part la première : elle redit ce que le titre dit déjà.
   Le surtitre et la mention se réduisent à leur moitié utile. On passe
   de sept blocs et quatorze lignes à cinq blocs et neuf lignes. */
@media (max-width: 640px) {
  .hors-mobile { display: none; }
  .hero-texte { padding-block: clamp(52px, 12vw, 84px) clamp(60px, 14vw, 92px); }
  .hero-chapeau { margin-bottom: 2em; }
  .hero-note { margin-top: 1.6em; }
}

/* --- Le bouton d'appel sur la photographie d'accueil ----------------
   En brun sur le voile brun de la photographie, il ne ressortait pas :
   deux valeurs voisines, aucune hiérarchie. Il s'inverse — crème plein,
   texte brun — et devient l'élément le plus clair de l'écran. C'est
   aussi ce que fait la référence sur son propre accueil. */
.hero .bouton-plein { background: var(--encre); color: var(--craie); }
.hero .bouton-plein:hover { box-shadow: 5px 5px 0 rgba(245, 244, 236, .3); }

/* Sur téléphone, il occupe toute la largeur : autant lui donner la
   présence qui va avec. */
@media (max-width: 640px) {
  /* Assez serré pour que « Réserver mon appel offert » tienne sur une
     ligne à 320 px, assez haut pour rester une cible confortable. */
  .hero .bouton-plein { padding: 21px 14px; font-size: 0.92rem; letter-spacing: 0.05em; }
}

@media (max-width: 359px) {
  /* Les écrans de 320 px n'ont plus que 240 px utiles entre les marges. */
  .hero .bouton-plein { padding: 20px 10px; font-size: 0.84rem; letter-spacing: 0.02em; }
}

/* ============================================================
   Respiration sur petit écran

   Les valeurs de gouttière et de rythme étaient calées sur le confort
   du bureau, où les colonnes sont étroites et les blancs latéraux
   nombreux. Sur un téléphone, tout est pleine largeur : il faut plus
   d'air vertical, pas moins, sinon la page se lit comme un bloc.
   ============================================================ */

@media (max-width: 900px) {
  :root {
    --marge: 26px;          /* 20 px collaient le texte au bord de l'écran */
    --section: 96px;        /* au lieu de 76 */
  }

  body { line-height: 1.7; }

  /* L'en-tête devient opaque : en translucide, les titres des sections
     défilaient en transparence derrière lui et paraissaient coupés. */
  .entete { background: var(--encre); backdrop-filter: none; }

  .surtitre { margin-bottom: 1.7em; }
  h2 { margin-bottom: 0.75em; }

  .hero-texte { padding-block: clamp(64px, 14vw, 104px) clamp(124px, 28vw, 164px); }
  .hero-chapeau { margin-bottom: 2.4em; }
  .hero-actions { gap: 22px 30px; }
  .hero-note { margin-top: 2em; }

  .preuve-item { padding: 36px 0; }
  .preuve-item strong { margin-bottom: 16px; }

  .situations li { padding: 38px 0; row-gap: 14px; }
  .situations li p { margin-top: 0.7em; }

  .etape { padding: 40px 0; }
  .etape h3 { margin-bottom: 0.7em; }

  .inclus li { padding: 20px 0; }
  .suivi-corps { gap: 44px; }

  .methode-conclusion { margin-top: 56px; padding-top: 40px; }
  .theo-mission { padding-top: 28px; margin-top: 2.2em; }
  .formations li { padding: 14px 0; }

  .retour { padding: 30px 28px 26px; margin-bottom: 32px; }
  .retours-note { margin-top: 30px; }

  .depliant > summary { padding: 30px 52px 28px 0; }
  .depliant > *:not(summary) { margin-bottom: 32px; }

  .champ { margin-bottom: 30px; }
  .consentement { margin: 34px 0; }
  .contact-liens { margin-top: 2.6em; }
  .contact-liens a { padding: 20px 0; }

  .avertissement { margin-top: 54px; padding-top: 28px; }
  .pied-haut { padding-bottom: 40px; }
  .pied-bas { margin-top: 40px; }
}

/* ============================================================
   Adaptations
   ============================================================ */

@media (max-width: 1080px) {
  .preuve-grille { grid-template-columns: repeat(2, 1fr); row-gap: 0; }
  .preuve-item:nth-child(3)::before { display: none; }
  .preuve-item:nth-child(odd) { padding-left: 0; }
  .preuve-item:nth-child(n+3) { border-top: 1px solid var(--trait-s); }
  .situations li { grid-template-columns: 2.8rem 46px minmax(0, 1fr); }
  .situations li h3 { grid-column: 3; }
  .situations li p { grid-column: 3; margin-top: 0.5em; }
  .retours-grille { columns: 1; max-width: 40em; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 66px; }

  .nav {
    position: fixed; inset: 60px 0 auto; flex-direction: column; gap: 0;
    background: var(--encre); border-bottom: 1px solid var(--trait-s);
    padding: 4px var(--marge) 20px; margin: 0;
    transform: translateY(-135%); transition: transform .3s cubic-bezier(.3,.8,.3,1);
  }
  .nav.ouvert { transform: none; }
  .nav a { padding: 15px 0; border-top: 1px solid var(--trait-s); font-size: 1.2rem; color: var(--craie); }

  .burger { display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 44px; height: 44px; padding: 0 9px;
    background: none; border: 0; cursor: pointer; }
  .burger span { display: block; height: 2px; background: var(--craie);
    transition: transform .25s ease, opacity .2s ease; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .entete-cta { display: none; }
  .entete-inner { min-height: 60px; }

  .hero-inner {
    grid-template-columns: 1fr; gap: 0;
    padding-left: var(--marge); padding-right: var(--marge);
  }
  /* L'accueil garde sa photographie plein cadre sur mobile : elle couvre
     tout le bloc, sans marge négative — la boîte est déjà en position
     absolue et un décalage la ferait déborder de la largeur de la marge. */
  .hero-visuel { min-height: 0; align-self: auto; margin: 0; }
  .hero-visuel img { position: absolute; inset: 0; height: 100%;
    object-position: 55% 45%; }
  /* La réserve du bas doit dépasser la hauteur de l'étiquette, sinon la
     mention sur l'appel offert passe dessous. */
  .hero-texte { padding-block: clamp(56px, 12vw, 96px) clamp(112px, 26vw, 150px); }

  .methode-grille, .suivi-inner, .theo-inner, .contact-inner { grid-template-columns: 1fr; }
  /* La photographie passe avant les quatre étapes : sinon on affronte
     quatre blocs de texte d'affilée avant le moindre repos pour l'œil. */
  .methode-visuel { position: static; max-width: 420px; order: -1; margin-bottom: 10px; }
  .suivi-visuel { max-width: 400px; }
  .theo-portrait { max-width: 360px; }
  .bandeau-inner { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 640px) {
  body { font-size: 17.5px; }
  .preuve-grille { grid-template-columns: 1fr; }
  .preuve-item { padding: 26px 0 !important; }
  .preuve-item + .preuve-item { border-top: 1px solid var(--trait-s); }
  .preuve-item + .preuve-item::before { display: none; }
  .etape { grid-template-columns: 1fr; gap: 10px; }
  .etape-num { font-size: 2.5rem; }
  .bouton { width: 100%; }
  .hero-actions .lien-fleche { width: auto; }
  /* À 320 px, les titres doivent pouvoir descendre plus bas que le plancher
     du clamp, sinon un mot de quinze lettres ne tient plus. */
  h1 { font-size: clamp(2.5rem, 12vw, 3.1rem); }
  h2 { font-size: clamp(1.9rem, 9vw, 2.3rem); }
}

/* ---------- Cibles tactiles ----------
   Sous 640 px, tout ce qui se touche doit faire au moins 44 px de haut :
   c'est la taille d'un doigt, et plusieurs liens du pied de page et du
   formulaire tombaient sous les 25. Les liens dans le corps d'une phrase
   (adresse e-mail des mentions légales) échappent à la règle : les
   agrandir casserait l'interligne du paragraphe. */

@media (max-width: 640px) {
  .hero-actions .lien-fleche { padding: 10px 0 9px; }
  .pied-nav { gap: 4px 26px; }
  .pied-nav a { display: block; padding: 11px 0; }
  .pied-bas { gap: 10px 18px; }
  .pied-bas a { display: inline-block; padding: 10px 0; }
  .marque-lien { padding: 7px 0; }
  .consentement { align-items: center; gap: 14px; }
  .consentement input { width: 28px; height: 28px; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .anim { opacity: 1; transform: none; }
}

/* ============================================================
   Cartes à faire défiler — mobile uniquement
   ------------------------------------------------------------
   Sur téléphone, quatre éléments empilés coûtent quatre hauteurs
   d'écran. La page atteignait seize écrans alors qu'elle ne compte
   que 813 mots : le problème n'était pas le texte, c'était la
   colonne. Les blocs répétitifs (preuve, situations, étapes,
   retours) deviennent des cartes qu'on fait défiler au doigt :
   une hauteur au lieu de quatre, et l'air reste dans la carte.
   ============================================================ */

@media (max-width: 900px) {

  /* Le mode de mise en page mobile. Le script lit ce jeton pour savoir
     quoi fabriquer ; une feuille de mobiles/ le redéfinit. */
  :root { --mobile-mode: cartes; }

  .glisse {
    display: grid;
    /* Indispensable : .preuve-grille, .situations li et .retours-grille
       portent déjà des colonnes ou des colonnes typographiques. Sans
       remise à zéro, les deux premiers éléments tombent dans l'ancienne
       grille et les suivants dans des colonnes implicites. */
    grid-template-columns: none;
    grid-template-rows: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--marge);
    /* On sort de la gouttière pour que la carte suivante affleure
       le bord de l'écran : c'est ce débord qui dit « ça glisse ». */
    margin-inline: calc(var(--marge) * -1);
    padding-inline: var(--marge);
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .glisse::-webkit-scrollbar { display: none; }
  .glisse > * { scroll-snap-align: start; min-width: 0; }

  /* La carte porte le fond et l'arrondi ; les filets qui séparaient
     les éléments empilés n'ont plus lieu d'être. */
  .glisse > *,
  .glisse > *:last-child {
    border: 1px solid var(--trait-s);
    border-radius: var(--rayon);
    padding: 26px 24px 24px;
    margin: 0;
  }
  .preuve-grille.glisse > *::before,
  .retours-grille.glisse > *::before { display: none !important; }

  /* ---- Compteur de position ---- */
  .glisse-jauge {
    display: flex; gap: 7px; justify-content: center;
    margin-top: 20px; list-style: none; padding: 0;
  }
  .glisse-jauge b {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; opacity: 0.22;
    transition: opacity .2s ease, transform .2s ease;
  }
  .glisse-jauge b.actif { opacity: 1; transform: scale(1.35); }

  /* ---- Preuve : deux cartes visibles, ce sont des chiffres ----
     Ce rail-ci porte aussi la classe .bloc, donc sa propre gouttière :
     la marge négative des autres rails la ramènerait à zéro et la
     première carte collerait au bord de l'écran. */
  .preuve-grille.glisse { grid-auto-columns: 62%; margin-inline: 0; }
  .preuve-item { padding: 22px 20px !important; text-align: left; }
  .preuve-item strong { margin-bottom: 10px; }

  /* ---- Situations : le numéro repasse au-dessus du titre, sinon il
     laisse une colonne vide d'un tiers de carte. ---- */
  .situations.glisse > li {
    display: block; padding: 24px 24px 26px;
    border: 1px solid var(--trait-s);
  }
  .situations.glisse > li::before {
    display: block !important; margin-bottom: 12px; font-size: 1.05rem;
  }
  .situations.glisse h3 { margin-bottom: 0.5em; }

  /* ---- Étapes : le numéro repasse au-dessus du titre ---- */
  .etapes.glisse > .etape { display: block; padding: 24px 24px 26px; }
  .etapes.glisse .etape-num { display: block; margin-bottom: 10px; font-size: 2.1rem; }

  /* ---- Retours ---- */
  .retours-grille.glisse { columns: auto; max-width: none; }
  .retours-grille.glisse > .retour { margin-bottom: 0; }

  /* ---- Ce qui est inclus : deux colonnes courtes ---- */
  .inclus {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 18px; border-top: 0;
  }
  .inclus li { padding: 12px 0 !important; font-size: 0.95rem; border-bottom: 0; }
}

/* Sous 400 px la carte prend presque tout l'écran, sinon le texte
   se retrouve dans un couloir de deux mots de large. */
@media (max-width: 400px) {
  .glisse { grid-auto-columns: 86%; }
  .preuve-grille.glisse { grid-auto-columns: 72%; }
  .inclus { grid-template-columns: 1fr; }
}

/* ============================================================
   Densité mobile
   ------------------------------------------------------------
   Une fois les cartes en place, ce qui reste de hauteur vient de
   trois postes : le rembourrage des sections, les photographies
   en portrait plein cadre, et les résumés de la FAQ.
   ============================================================ */

@media (max-width: 900px) {
  :root { --section: 74px; }

  /* Les portraits pleine largeur coûtaient un demi-écran chacun.
     On les recadre en paysage plutôt que de les rétrécir : le sujet
     reste à taille lisible, c'est le ciel et le sol qu'on retire.
     Le cadrage vertical est remonté pour garder les visages. */
  .methode-visuel img,
  .suivi-visuel img,
  .theo-portrait img {
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    object-position: 50% 26%;
  }
  .theo-portrait img { object-position: 50% 20%; }
  /* Sujet penché en avant. La photographie est un portrait 2:3 recadré
     en 4:3 : la fenêtre ne montre que la moitié de la hauteur, et le
     haut du dos tombait hors cadre. Elle est calée en haut, ce qui
     donne le dos entier, de la hanche à l'épaule — c'est le sujet de
     la photographie et de la page. Huit pour cent plutôt que zéro :
     calée tout en haut, la fenêtre coupait la tête en bas. */
  .suivi-visuel img { object-position: 50% 8%; }

  figcaption { margin-top: 10px; }

  /* Un résumé de FAQ tenait sur 104 px pour une ligne de texte. */
  .depliant > summary { padding: 20px 46px 19px 0; }
  .depliant > *:not(summary) { margin-bottom: 24px; }

  .methode-conclusion { margin-top: 40px; padding-top: 30px; }
  .contact-liens a { padding: 15px 0; }
  .avertissement { margin-top: 40px; padding-top: 24px; }
}

/* ============================================================
   Barre d'appel permanente — mobile
   ------------------------------------------------------------
   Une page longue se supporte si l'action reste à portée de pouce.
   La barre n'apparaît qu'une fois le bouton du hero sorti de
   l'écran, et s'efface dès que la section contact est visible :
   sinon elle recouvre le formulaire qu'elle sert à atteindre.
   ============================================================ */

.barre-appel { display: none; }

@media (max-width: 900px) {
  .barre-appel {
    position: fixed; z-index: 80; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 3px;
    padding: 9px var(--marge) calc(9px + env(safe-area-inset-bottom));
    /* Opaque, comme l'en-tête : le texte de la page qui défile derrière
       une barre translucide se lit mal, et le flou coûte un repaint à
       chaque image. Le filet suffit à détacher la barre du contenu. */
    background: var(--encre);
    border-top: 1px solid var(--trait-s);
    transform: translateY(110%);
    transition: transform .28s cubic-bezier(.3,.8,.3,1);
  }
  .barre-appel[hidden] { display: flex; }   /* l'attribut ne sert qu'au repli sans script */
  .barre-appel.vue { transform: none; }
  .barre-appel .bouton {
    width: 100%; text-align: center;
    padding-block: 13px; font-size: 0.94rem;
  }
  .barre-appel span {
    font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
    font-family: var(--titres); font-weight: 600;
    color: var(--gris-s); text-align: center;
  }
}

/* Sans script, pas de barre du tout : elle serait figée à l'écran
   par-dessus le pied de page. */
html:not(.js) .barre-appel { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .barre-appel { transition: none; }
}

/* ============================================================
   LA GRAMMAIRE DE LA RÉFÉRENCE, TENUE PAR UN DESSIN

   Le client a redemandé qu'on se rapproche d'enorehab.fr. On en
   reprend donc les dispositifs qui font sa signature — bandeau
   flottant en pilule, titre en triade ponctuée, bouton plein doublé
   d'un bouton fantôme, rangées à pastille cerclée séparées par des
   filets — et on les tient avec ce que la référence n'a pas : une
   échelle typographique, des pictogrammes dessinés dans la géométrie
   de la marque, une grille qui se voit, et une politique de contraste.
   ============================================================ */

/* ---------- 1. Le bandeau flotte ----------
   Chez la référence, l'en-tête est une pilule posée sur la photographie
   plutôt qu'une barre collée en haut de l'écran. C'est le premier
   signe qu'on lit, avant même le titre. */

/* Fixe et non collante : la pilule doit flotter par-dessus la
   photographie du hero dès le chargement, et non repousser la page
   d'une bande crème. Les sections défilent dessous. */
.entete {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: 0;
  padding: 14px 0;
  transition: padding .28s cubic-bezier(.3,.8,.3,1);
}
/* Le hero passe donc sous le bandeau : son texte redescend d'autant. */
.hero-texte { padding-block: clamp(140px, 15vw, 200px) clamp(80px, 11vw, 150px); }
/* La pilule prend --craie sur --encre, jamais l'aplat de section :
   --encre-2 est un bleu ou un beige clair dans plusieurs directions, et
   le texte y tombait à 3,16 : 1 — exactement le défaut de la référence.
   Ces deux jetons-ci sont contrastés par construction, dans les neuf. */
.entete-inner {
  background: var(--craie);
  border-radius: 999px;
  padding: 9px 12px 9px 24px;
  min-height: 62px;
  box-shadow: 0 1px 2px rgba(28,35,31,.06), 0 10px 30px -14px rgba(28,35,31,.3);
  transition: box-shadow .28s ease;
}
.entete .marque-mot { color: var(--encre); }
/* Sous 900 px, la navigation n'est plus dans la pilule mais dans un
   panneau déroulant posé sur le fond clair : ses liens y gardent
   l'encre sombre. La règle ne vaut donc qu'à partir du bureau. */
@media (min-width: 901px) { .entete .nav a { color: var(--encre); } }
.entete .marque { color: var(--bleu-pale); }
.entete .burger span { background: var(--encre); }
.entete .entete-cta { background: var(--encre); color: var(--craie); }

/* Une fois la photographie dépassée, la pilule se resserre et son ombre
   se creuse : le repère reste, l'encombrement diminue. */
.entete.defile { padding: 8px 0; }
.entete.defile .entete-inner {
  box-shadow: 0 1px 2px rgba(28,35,31,.1), 0 14px 34px -16px rgba(28,35,31,.5);
}

/* ---------- 2. Le titre en triade ----------
   Trois verbes, trois lignes, un point après chacun. C'est le geste
   le plus reconnaissable de la référence, et il tombe juste ici :
   comprendre, renforcer, reprendre sont exactement les trois temps
   de la méthode. */

.hero-triade {
  font-size: clamp(2.5rem, 8.6vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.028em;
  font-weight: 700;
  margin-bottom: 0.46em;
  text-wrap: nowrap;
}
/* Seuls les trois points prennent l'accent, pas les mots. C'est le
   détail qui distingue cette page de la référence : là-bas la couleur
   porte sur un mot entier, ici sur la ponctuation — le geste est plus
   petit, et il se remarque davantage. */
.hero-triade i {
  font-style: normal; color: var(--bleu-pale);
  /* Le point de cette graisse est carré : à cette taille il devient un
     signe à part entière, et non plus de la ponctuation. On l'agrandit
     un peu pour l'assumer. */
  font-size: 1.18em;
}


/* ---------- 3. Le bouton fantôme ----------
   Le second appel n'est pas un lien souligné mais une pilule vide.
   Deux pilules côte à côte, l'une pleine l'autre creuse : c'est la
   silhouette de la référence. */

.bouton-fantome {
  background: transparent;
  color: var(--encre);
  border: 1.5px solid rgba(245, 244, 236, .55);
  border-radius: 999px;
}
.bouton-fantome:hover {
  background: rgba(245, 244, 236, .12);
  border-color: var(--encre);
  transform: translateY(-2px); box-shadow: none;
}
.clair .bouton-fantome, .sombre-alt .bouton-fantome {
  color: var(--craie); border-color: rgba(28, 35, 31, .3);
}

/* ---------- 4. Les rangées à pastille ----------
   Un cercle fin, un pictogramme, un intitulé en petites capitales
   espacées, une ligne grise dessous, un filet pour séparer. La
   référence en fait son unité de base ; on la reprend, avec des
   pictogrammes dessinés plutôt qu'empruntés. */

.pastille {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid currentColor;
  /* Le cercle est ouvert en haut à droite, comme les entailles du
     symbole : la marque se retrouve jusque dans les pastilles. */
  mask-image: conic-gradient(from 24deg, transparent 0 26deg, #000 26deg);
  -webkit-mask-image: conic-gradient(from 24deg, transparent 0 26deg, #000 26deg);
}
.pastille svg { width: 25px; height: 25px; }

.reperes {
  list-style: none; margin: 2.4em 0 0; padding: 0;
  max-width: 30em;
}
.reperes li {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 0;
  border-top: 1px solid rgba(245, 244, 236, .22);
}
/* Chaque rangée porte désormais son propre filet, celle du haut
   comprise : elle garde donc son rembourrage, sinon le filet se pose
   directement sur la capitale. */
.reperes li:first-child { border-top: 0; }
.repere-texte { display: block; font-size: 0.95rem; line-height: 1.35; }
.repere-texte b {
  display: block; font-family: var(--titres); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 4px;
}

.hero .reperes { color: var(--encre); }
.hero .reperes .pastille { color: var(--bleu-pale); }
.hero .repere-texte { color: rgba(245, 244, 236, .78); }
.hero .repere-texte b { color: var(--encre); letter-spacing: 0.2em; }

/* Les situations reçoivent la même pastille, et la section se referme
   sur un bouton centré — le « oui, je me reconnais » de la référence. */
.situations .pastille { color: var(--ambre); grid-row: span 2; }
/* La section se referme sur un bouton centré — le « oui, je me
   reconnais » de la référence. Il ne fait pas toute la largeur : centré
   et calibré sur son texte, il se lit comme une réponse, pas comme une
   barre d'action de plus. */
.situations-fin { margin: 2.8em 0 0; text-align: center; }
.situations-fin .bouton { width: auto; }

/* ---------- 5. Ce que la référence n'a pas ----------
   Une marque qui produit le décor. Le symbole revient en très grand
   filigrane derrière un seul titre de la page, cadré par la grille et
   non posé au hasard. Une seule occurrence : deux, et c'est un motif. */

#methode { position: relative; overflow: hidden; }
#methode::before {
  content: ''; position: absolute; z-index: 0;
  top: 2%; right: -15%; width: min(38vw, 440px); aspect-ratio: 48.4 / 84;
  background: currentColor;
  mask: url('../img/logo/marque-verte.svg') no-repeat center / contain;
  -webkit-mask: url('../img/logo/marque-verte.svg') no-repeat center / contain;
  opacity: .06; pointer-events: none;
}
#methode > * { position: relative; z-index: 1; }
@media (max-width: 900px) { #methode::before { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .entete, .entete-inner, .bouton-fantome { transition: none; }
}

@media (max-width: 900px) {
  /* Empilée ou en carte, la pastille repasse au-dessus du titre : en
     ligne, elle mangerait un tiers de la largeur utile. */
  .situations.glisse > li .pastille { grid-row: auto; margin-bottom: 14px; }
  .reperes { margin-top: 2em; }
  .reperes li { padding: 13px 0; }
  .pastille { width: 42px; height: 42px; }
  .pastille svg { width: 22px; height: 22px; }
}

/* ============================================================
   L'ÉCART ASSUMÉ

   La page reprenait les dispositifs de la référence sans les
   redessiner. Ce qui suit change ce qui se voit d'abord : le
   caractère, la silhouette des formes, la grille des en-têtes de
   section. La palette, la chaleur et la structure ne bougent pas.
   ============================================================ */

/* ---------- 1. Le caractère porte la page ----------
   Big Shoulders Display est très étroite et très haute : à taille
   égale elle tient deux fois plus de signes qu'une géométrique, et
   les titres peuvent donc devenir énormes sans casser la ligne.
   C'est le contraire du registre de la référence. */

/* L'interlignage ne descend pas sous 0,9 : en capitales françaises il
   faut de la place pour la cédille du Ç et les accents de É, À, Ê. À
   0,84 la cédille de « ÇA DURE » venait mordre la ligne suivante. */
h1, h2, h3 {
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 0.92;
}
h1 { font-size: clamp(3.4rem, 10.4vw, 8.4rem); }
h2 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
h3 { font-size: 1.62rem; line-height: 1.02; letter-spacing: 0.01em; }

.hero-triade {
  /* Le plancher doit tenir compte de la direction la plus large : les
     variantes changent de caractère, et « COMPRENDRE. » en géométrique
     est un tiers plus long qu'en étroite. Un plancher haut sortait du
     cadre dès 393 px. */
  font-size: clamp(2.05rem, 11.4vw, 8.6rem);
  line-height: 0.92;
  letter-spacing: 0.004em;
  font-weight: 800;
  margin-bottom: 0.3em;
  text-wrap: nowrap;
}
/* Le point n'est plus carré dans cette graisse : il redevient un
   accent de ponctuation, posé sur la ligne de base. */
.hero-triade i { font-size: 1em; }

.marque-mot { font-family: var(--titres); font-weight: 800; font-size: 1.75rem;
  letter-spacing: 0.02em; }
.surtitre { font-family: var(--titres); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.26em; }
.bouton, .lien-fleche, .repere-texte b, .etape-num, .preuve-item strong,
.depliant > summary, .contact-liens a, .champ label, .consentement span,
.mentions h3, .theo-titre, .nav a, .glisse-jauge {
  font-family: var(--titres);
}
.bouton { font-size: 1.06rem; font-weight: 700; letter-spacing: 0.13em; }
.nav a { font-size: 1.06rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; }
.preuve-item strong { font-weight: 800; letter-spacing: 0.01em;
  font-size: clamp(2.6rem, 4.4vw, 3.8rem); }
.etape-num { font-weight: 800; font-size: 1.5rem; letter-spacing: 0.06em; }
.depliant > summary { font-weight: 700; font-size: 1.7rem; letter-spacing: 0.01em; }
.methode-conclusion, .theo-mission {
  font-family: var(--titres); font-weight: 700; letter-spacing: 0.01em;
  line-height: 1.06; font-size: clamp(1.9rem, 3.2vw, 2.9rem);
}

/* Le texte courant : grotesque neutre, un cran plus petit, plus aéré.
   C'est le contraste avec l'étroite qui fait la page, pas sa taille. */
body { font-family: var(--texte); font-size: 17px; line-height: 1.62; font-weight: 400; }
.hero-chapeau { font-size: clamp(1.06rem, 1.5vw, 1.2rem); line-height: 1.55; }

/* ---------- 2. L'entaille remplace la pilule ----------
   Un coin coupé en haut à droite, à l'angle des entailles du symbole.
   Appliqué au bouton, au bandeau, aux cartes et aux photographies, il
   suffit à changer la silhouette de la page entière. */

.bouton, .bouton-plein, .bouton-sombre, .bouton-fantome {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%);
}
/* Un contour ne survit pas au découpage : le bouton fantôme le
   redessine avec un fond dégradé conique, qui suit la coupe. */
.bouton-fantome {
  border: 0;
  background:
    linear-gradient(var(--encre), var(--encre)) padding-box,
    linear-gradient(var(--encre), var(--encre)) border-box;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(245, 244, 236, .5);
}
.bouton-fantome:hover { box-shadow: inset 0 0 0 1.5px var(--encre); background: rgba(245,244,236,.1); }
.clair .bouton-fantome, .sombre-alt .bouton-fantome {
  box-shadow: inset 0 0 0 1.5px rgba(28, 35, 31, .3);
}

.methode-visuel img, .suivi-visuel img, .theo-portrait img,
.methode-visuel, .suivi-visuel, .theo-portrait {
  border-radius: 0;
}
.methode-visuel, .suivi-visuel, .theo-portrait {
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}
.retour {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
/* Les sections colorées ne glissent plus par un arrondi mais par une
   arête franche : la même idée, dans l'autre langue. */
.preuve, .sombre-alt, .bandeau { border-radius: 0; }

/* ---------- 3. Le bandeau n'est plus une pilule ----------
   C'était l'élément le plus reconnaissable de la référence. Il devient
   un rail pleine largeur, transparent sur la photographie, souligné
   d'un filet vertébré — le découpage du symbole, étiré sur toute la
   largeur de l'écran. Ce filet est la seule signature graphique qui
   n'appartienne qu'à cette marque. */

.entete { padding: 0; }
.entete-inner {
  background: transparent;
  border-radius: 0;
  clip-path: none;
  box-shadow: none;
  padding: 0 var(--marge);
  min-height: 78px;
  position: relative;
}
/* Le filet vertébré sous le bandeau : des segments de 18 px espacés de
   7, exactement le rythme des entailles du symbole. */
.entete-inner::after {
  content: ''; position: absolute; left: var(--marge); right: var(--marge); bottom: 0;
  height: 2px;
  background-image: repeating-linear-gradient(to right,
    currentColor 0 18px, transparent 18px 25px);
  opacity: .32;
}
.entete .marque-mot, .entete .nav a, .entete .burger span { color: var(--encre); }
.entete .marque { color: var(--encre); }
.entete .burger span { background: var(--encre); }
.entete .entete-cta {
  background: var(--encre); color: var(--craie);
}
@media (min-width: 901px) { .entete .nav a { color: var(--encre); } }

/* Au défilement, le rail devient un aplat plein : le filet vertébré
   reste, il ne fait que changer de fond. */
.entete.defile {
  background: var(--craie);
  box-shadow: 0 10px 30px -18px rgba(28,35,31,.55);
}
/* Le bandeau n'est transparent que parce qu'un script lui rend son
   aplat dès le premier défilement. Sans script, il resterait crème sur
   crème une fois la photographie dépassée : il part donc plein. */
html:not(.js) .entete { background: var(--craie); }

/* ---------- 4. Les repères quittent leur pastille ----------
   Le pictogramme cerclé aligné en colonne est le deuxième dispositif
   le plus reconnaissable de la référence. Ici les trois repères
   deviennent un rail horizontal en bas du hero, sans cercle : le
   pictogramme s'aligne sur la ligne de base de l'intitulé, et un
   filet vertébré court sous chacun. */

.reperes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 48px);
  max-width: none; margin-top: 3em;
}
.reperes li {
  display: block; padding: 24px 0 4px; border-top: 0;
  position: relative;
}
.reperes li::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  /* Le filet appartient à la rangée du dessous : il se pose au bord du
     rembourrage, pas contre le texte. */
  background-image: repeating-linear-gradient(to right,
    currentColor 0 14px, transparent 14px 20px);
  opacity: .4;
}
.reperes .pastille {
  width: auto; height: auto; border: 0; border-radius: 0;
  mask-image: none; -webkit-mask-image: none;
  display: block; margin-bottom: 12px;
}
.reperes .pastille svg { width: 30px; height: 30px; }
.repere-texte b { font-size: 1rem; letter-spacing: 0.2em; margin-bottom: 5px; }
.repere-texte { font-size: 0.92rem; }

/* Sur la liste des situations, la pastille garde son cercle entaillé :
   là elle sert de repère de rangée, pas de vignette de rail. */

/* ---------- 5. Les en-têtes de section sont numérotés ----------
   Un chiffre, un intitulé, puis un filet qui court jusqu'au bord droit.
   C'est un système de repérage, pas un ornement : il dit au lecteur où
   il en est dans la page. */

main { counter-reset: sect; }
#pour-toi, #methode, #suivi, #theo, #retours, #questions, #contact {
  counter-increment: sect;
}
/* En flex et non en grille : le surtitre contient deux nœuds — le
   texte et un complément masqué sur mobile — qui occuperaient deux
   pistes et renverraient le filet à la ligne suivante. */
.surtitre {
  display: flex; align-items: center; gap: 13px; flex-wrap: nowrap;
}
.surtitre::before {
  content: counter(sect, decimal-leading-zero);
  flex: none; width: auto; height: auto; background: none;
  font-variant-numeric: tabular-nums; opacity: .55;
  padding-right: 3px;
}
.surtitre::after {
  content: ''; flex: 1 1 auto; min-width: 24px; height: 2px;
  background-image: repeating-linear-gradient(to right,
    currentColor 0 14px, transparent 14px 20px);
  opacity: .34;
}
/* Le hero et le bandeau formation ne portent pas de numéro : ils ne
   font pas partie du parcours numéroté. */
.hero .surtitre::before, .surtitre-bandeau::before { content: none; }

/* Sous 700 px, trois colonnes de repères donnent des couloirs de deux
   mots : le rail redevient une pile de rangées, pictogramme à gauche. */
@media (max-width: 700px) {
  .reperes { grid-template-columns: 1fr; gap: 0; margin-top: 2.4em; }
  /* La hauteur de capitale de l'étroite monte très haut : à 14 px du
     filet, « EXPERTISE » venait le toucher. Le pictogramme s'aligne sur
     le haut du texte plutôt qu'au centre du bloc, sinon il flotte. */
  .reperes li {
    display: grid; grid-template-columns: 32px minmax(0, 1fr);
    gap: 0 14px; align-items: start; padding: 22px 0 22px;
  }
  .reperes .pastille { margin-bottom: 0; padding-top: 1px; }
  .reperes .pastille svg { width: 26px; height: 26px; }
  .repere-texte { font-size: 0.95rem; }
  .repere-texte b { font-size: 0.95rem; }
}

/* Le mot le plus long de la triade tient sur une ligne dans les neuf
   directions : sous 360 px il faut descendre encore. */
@media (max-width: 360px) {
  .hero-triade { font-size: 9.8vw; }
}

/* Un chiffre de bandeau composé dans une géométrique large déborde de
   sa carte : il doit pouvoir se couper. */
.preuve-item strong { overflow-wrap: break-word; }
@media (max-width: 900px) {
  .preuve-item strong { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
  .etape-num { font-size: 1.3rem; }
}

/* ============================================================
   Corrections de cadrage mobile
   ------------------------------------------------------------
   Sur un vrai téléphone, deux défauts ressortaient que les captures
   d'écran automatiques ne montraient pas.
   ============================================================ */

@media (max-width: 900px) {

  /* 1. Le bandeau s'efface à la descente et revient à la montée.
     Un bandeau fixe de 78 px et une barre d'appel de 93 px, sur un
     écran de 852 px, mangeaient un cinquième de la hauteur utile en
     permanence — et le bandeau recouvrait le texte au repos, qui se
     lisait coupé au milieu d'une ligne. Le retirer purement le rendait
     inatteignable sur une page de douze écrans : il se retire donc
     pendant la lecture et se remet en place au premier geste vers le
     haut. */
  .entete {
    transition: transform .26s cubic-bezier(.3,.8,.3,1), background .2s ease;
    will-change: transform;
  }
  .entete.masque { transform: translateY(-102%); }
  .entete-inner { min-height: 64px; }
  html { scroll-padding-top: 72px; }

  /* Le texte du hero n'a plus à réserver la hauteur du bandeau, mais
     doit rester dégagé de la marque posée par-dessus. */
  .hero-texte { padding-block: clamp(112px, 24vw, 150px) clamp(56px, 12vw, 96px); }

  /* 2. Les repères ne sont pas des cartes à faire glisser.
     Quatre chiffres courts tenaient sur un rail : la deuxième carte se
     retrouvait tranchée en plein mot par le bord de l'écran, ce qui se
     lit comme un défaut et non comme une invitation à glisser. En deux
     colonnes, tout est visible d'un coup et rien n'est coupé. */
  .preuve-grille.glisse {
    display: grid !important;
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    /* Ce bloc porte aussi la classe .bloc : sa gouttière vient de là, et
       la remettre à zéro collait les chiffres au bord de l'écran. */
    padding-inline: var(--marge);
    column-gap: 20px; row-gap: 0;
  }
  .preuve-grille.glisse > * {
    border: 0 !important;
    padding: 20px 0 22px !important;
    border-bottom: 1px solid var(--aplat-filet) !important;
  }
  .preuve-grille.glisse > *:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .preuve-grille.glisse + .glisse-jauge { display: none !important; }
}

@media (max-width: 380px) {
  /* Sous 380 px, deux colonnes de chiffres redeviennent des couloirs. */
  .preuve-grille.glisse { grid-template-columns: 1fr; }
  .preuve-grille.glisse > *:nth-last-child(-n+2) { border-bottom: 1px solid var(--aplat-filet) !important; }
  .preuve-grille.glisse > *:last-child { border-bottom: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .entete { transition: none; }
}

/* Le prénom d'un retour, quand Théo en fournit un. L'emplacement est
   préparé mais vide : aucun nom n'est inventé, et la légende reste
   correcte tant qu'il n'y en a pas. */
.retour-nom {
  display: block; font-family: var(--titres); font-weight: 800;
  font-size: 1.15rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--craie); margin-bottom: 3px;
}
.sombre-alt .retour-nom, .preuve .retour-nom { color: var(--aplat-titre); }
.retour-contexte { display: block; }

/* La ligne de positionnement du hero ne tient pas sur une ligne à
   moins de 700 px : elle passe sur deux, et le filet qui la prolonge
   se retrouvait suspendu au bout de la première. Il s'efface, et
   l'interlettrage se resserre pour que les deux lignes fassent bloc. */
@media (max-width: 700px) {
  .hero .surtitre {
    display: block;
    letter-spacing: 0.17em;
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 20em;
  }
  .hero .surtitre::after { display: none; }
}

/* Sur le rail, toutes les cartes prennent la hauteur de la plus haute.
   Depuis que les retours n'ont plus la même longueur, la plus courte se
   retrouvait avec un grand vide sous sa légende. La légende descend
   donc au bas de la carte : le blanc se place entre la citation et
   elle, là où il tient lieu de respiration plutôt que de trou. */
.retour { display: flex; flex-direction: column; }
.retour blockquote { flex: 0 0 auto; }
.retour figcaption { margin-top: auto; }