/* Learn Room - feuille commune des maquettes de pages leadmagnet
   Couleurs, polices et logo : source unique learnroom-safe-data/chartes/learnroom.md
   Grille, rythme, composants, etats : webdesign-learnroom.md */

:root{
  /* couleurs, reprises de learnroom.md, jamais redefinies en litteral dans une page */
  --forest-deep:#03200E; --forest-dark:#06371F; --forest-mid:#0C7334; --forest-soft:#2D3A32;
  --mint-vif:#53D495; --mint-pastel:#86E7B8; --sage-clair:#E6F3EB; --sage-rule:#D8E4DC;
  --muted-sage:#6B7D72; --cream:#FEFBF0; --beige:#EFEBE0; --white:#F7F8F7; --paper:#FFFFFF;
  --gray:#6D6D6D; --blue-link:#1E6E79;

  /* tokens de mise en page */
  --maxw:1180px; --gut:20px; --radius-sm:12px; --radius:18px; --radius-lg:28px;
  --sec:clamp(56px,8vw,96px); --border:rgba(3,32,14,.10); --border-dark:rgba(255,255,255,.16);

  --f-title:"Bricolage Grotesque",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
}

/* INC-005 : jamais overflow-x:hidden sur html/body (sort le scroll du chemin composite
   WebKit et casse position:sticky). clip = clipping visuel sans conteneur de scroll. */
html,body{overflow-x:hidden!important;overflow-x:clip!important}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--forest-deep);font-family:var(--f-body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* En production le header du site est sticky au-dessus de 991px (il occupe donc sa place
   dans le flux) et fixe en dessous, ou seule cette largeur reserve sa hauteur. */
/* --lhh est pose par le script du site a partir de la hauteur mesuree du header.
   Cette mesure est prise avant le rendu final des polices et sous-estime la hauteur
   de quelques pixels : max() garantit que le hero ne passe jamais sous le header. */
@media (max-width:991px){body{padding-top:max(var(--lhh,78px),78px)}}

h1,h2,h3{font-family:var(--f-title);margin:0}
h1{font-size:clamp(33px,5.5vw,56px);font-weight:800;line-height:1.05;letter-spacing:-.01em}
h2{font-size:clamp(26px,3.2vw,40px);font-weight:800;line-height:1.12;letter-spacing:-.013em}
h3{font-size:21px;font-weight:700;line-height:1.12}
p{margin:0 0 16px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.read{max-width:820px}
/* Le conteneur fait toute la largeur, mais une ligne de texte ne depasse jamais la
   mesure de lecture de la section de reference (« La procedure de verification »). */
.body>p,.body>div>p,.warn,.accbody>p{max-width:70ch}
ul.dots li,ol.steps li,.lrt-note,.lrt-privacy{max-width:78ch}
.lead-col{max-width:720px}
.sec{padding-block:var(--sec);position:relative}
/* separation des sections : alternance de fond, plus un filet quand deux sections
   consecutives partagent le meme fond */
/* Regle Ludovic du 2026-08-08 : une section est noire, beige ou blanche.
   Jamais de gris clair, jamais de vert clair. Deux sections qui se suivent se
   distinguent par leur fond, ou par des cartes qui contrastent avec ce fond. */
main>.sec{background:var(--paper)}
main>.sec.sec--dark{background:var(--forest-deep);color:var(--cream)}
main>.sec.sec--beige{background:var(--beige)}
main>.sec.sec--paper{background:var(--paper)}
.sec--dark h2,.sec--dark h3{color:var(--cream)}
.sec--dark .eyebrow{color:var(--mint-pastel)}
.sec--dark .chapo,.sec--dark .mesure{color:var(--mint-pastel)}
.sec--dark a{color:#85D5E0}
.mesure{max-width:46ch}

/* eyebrow de section : mono 12px, sans fond ni bordure (arbitrage 2026-07-26) */
.eyebrow{font-family:var(--f-mono);font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--forest-mid);margin:0}
.eyebrow+h1,.eyebrow+h2{margin-top:26px}
h1+.chapo,h2+.chapo{margin-top:20px}
.chapo{font-size:18px;color:var(--muted-sage);max-width:56ch}
h2+.body,h2+.grid,h2+.lrt{margin-top:44px}
@media (max-width:640px){h2+.body,h2+.grid,h2+.lrt{margin-top:30px}}

/* pastille informative : etiquette de categorie hors en-tete de section */
.pill{display:inline-block;background:var(--white);border:1px solid var(--border);
  border-radius:999px;padding:8px 16px;font-family:var(--f-mono);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:1.44px;color:var(--forest-deep)}

/* bouton : pilule unique */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;border-radius:999px;
  font-family:var(--f-body);font-size:15px;font-weight:700;padding:13px 24px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.2s ease}
.btn--main{background:var(--mint-vif);color:var(--forest-deep)}
.btn--main:hover{background:var(--mint-pastel)}
.btn--sec{background:transparent;border-color:var(--border);color:var(--forest-deep)}
.btn--sec:hover{border-color:var(--mint-vif)}
.btn--dark{background:var(--forest-deep);color:var(--cream)}
.btn--sec-dark{background:transparent;border-color:var(--border-dark);color:var(--cream)}
.btn--sec-dark:hover{border-color:var(--mint-vif)}
.btn--sm{min-height:36px;padding:8px 16px;font-size:14px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* focus clavier, regle bloquante, sans exception */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{outline:2px solid var(--mint-vif);outline-offset:3px}

a{color:var(--blue-link);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px}
a:hover{text-decoration-thickness:2px;color:var(--forest-deep)}
a.btn,a.navlink{text-decoration:none}

/* hero */
.hero{background:var(--forest-deep);color:var(--cream);
  padding-block:clamp(56px,7vw,92px) clamp(44px,6vw,68px)}
.hero h1{color:var(--cream)}
.hero .eyebrow{color:var(--mint-pastel)}
.hero .chapo{color:var(--mint-pastel)}
.hero .pill{background:transparent;border-color:var(--border-dark);color:var(--cream)}
.hero .meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

/* carte */
.card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;gap:14px}
@media (max-width:640px){.card{padding:18px}}
.card--dark{background:var(--forest-deep);color:var(--cream);border-color:transparent}
.card--dark a{color:#85D5E0}
.grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* liste a puces : puce ronde mint pour une enumeration neutre */
ul.dots{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:12px}
ul.dots li{position:relative;padding-left:20px}
ul.dots li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
  border-radius:50%;background:var(--mint-vif)}
ul.dots li b{display:block}
ul.dots li span{display:block;font-size:14px;color:var(--muted-sage)}
ol.steps{padding-left:20px;margin:0 0 16px;display:grid;gap:12px}

/* accordeon : details/summary natifs, jamais de JS pour ouvrir ou fermer */
details.acc{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:14px}
details.acc[open]{border-color:var(--mint-vif)}
details.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  justify-content:space-between;padding:16px 20px;min-height:44px;font-size:16px;font-weight:700}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--sage-clair);color:var(--forest-mid);display:grid;place-items:center;
  font-family:var(--f-mono);font-size:16px;font-weight:600}
details.acc[open] summary::after{content:"\2212";background:var(--mint-vif);color:var(--forest-deep)}
details.acc .accbody{padding:0 20px 20px;font-size:16px}

/* bloc de consigne a copier */
.snip{background:var(--forest-deep);color:var(--cream);border-radius:var(--radius);
  padding:20px;margin:0 0 16px;position:relative}
.snip pre{margin:0;font-family:var(--f-mono);font-size:13px;line-height:1.6;white-space:pre-wrap;
  word-break:break-word}
.snip .copy{position:absolute;top:12px;right:12px}

/* encart d'avertissement, place au-dessus de l'outil quand il y en a un */
.warn{background:var(--beige);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;margin:0 0 24px;font-size:15px}

.warn b{display:block;margin-bottom:6px;font-family:var(--f-mono);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--forest-mid)}

/* tableau de contenu : scrolle dans son propre conteneur, jamais la page */
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--paper)}
table.t{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
table.t th,table.t td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border);
  vertical-align:top}
table.t th{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--forest-mid);background:var(--beige)}
table.t tr:last-child td{border-bottom:0}

/* ---------- outil interactif ---------- */
.lrt{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
  /* hauteur reservee : la page ne saute pas pendant que l'outil se construit */
  min-height:340px;position:relative}
.lrt-bar{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:14px 20px;background:var(--beige);border-bottom:1px solid var(--border);
  border-radius:var(--radius) var(--radius) 0 0}
.lrt-bar .lrt-name{font-family:var(--f-mono);font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--forest-mid);margin-right:auto}
.lrt-body{padding:20px}
.lrt-note{font-size:14px;color:var(--muted-sage);margin:0 0 16px}
.lrt-privacy{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--forest-mid);
  background:var(--beige);border-radius:var(--radius-sm);padding:12px 14px;margin:0 0 20px}
.lrt-state{font-size:12px;font-family:var(--f-mono);color:var(--muted-sage)}

.lrt-field{display:grid;gap:6px;margin-bottom:18px}
.lrt-field label{font-size:14px;font-weight:700}
.lrt-field .help{font-size:14px;color:var(--muted-sage)}
input[type=text],input[type=number],textarea,select{font-family:var(--f-body);font-size:15px;
  color:var(--forest-deep);background:var(--paper);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 12px;width:100%;min-height:44px}
textarea{min-height:96px;resize:vertical;line-height:1.6}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0}

.lrt-grid{width:100%;border-collapse:collapse}
/* chaque champ garde une largeur ou son libelle et sa saisie tiennent en entier ;
   le tableau defile dans son propre conteneur, jamais la page */
.lrt-grid td input,.lrt-grid td select{min-width:200px}
.lrt-grid td select{padding-right:34px}
.lrt-grid th{font-family:var(--f-mono);font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--forest-mid);text-align:left;padding:8px 8px 10px;
  border-bottom:1px solid var(--border);white-space:nowrap}
.lrt-grid td{padding:6px 8px;vertical-align:top}
.lrt-grid input,.lrt-grid select{min-height:40px}
.lrt-grid .num{font-family:var(--f-mono);font-size:14px;color:var(--muted-sage);padding-top:16px}
.lrt-score{font-family:var(--f-mono);font-weight:600;font-size:16px;padding-top:14px;
  white-space:nowrap}
.lrt-del{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);
  width:40px;height:40px;cursor:pointer;color:var(--gray);font-size:18px;line-height:1}
/* sous 900px le tableau devient une carte par ligne : le libelle passe au-dessus du
   champ, plus rien n'est coupe et il n'y a plus de defilement horizontal */
@media (max-width:899px){
  .lrt-grid,.lrt-grid tbody,.lrt-grid tr,.lrt-grid td{display:block;width:auto}
  .lrt-grid thead{display:none}
  .lrt-grid tr{border:1px solid var(--border);border-radius:var(--radius);padding:14px;
    margin-bottom:14px;position:relative}
  .lrt-grid td{padding:0 0 12px}
  .lrt-grid td.num{position:absolute;top:14px;right:52px;padding:0;font-size:12px}
  .lrt-grid td[data-lab]::before{content:attr(data-lab);display:block;font-size:13px;
    font-weight:700;margin-bottom:4px}
  .lrt-grid td input,.lrt-grid td select{min-width:0;width:100%}
  .lrt-grid td:last-child{padding:0;position:absolute;top:10px;right:10px}
  .lrt-grid .lrt-score{padding:0 0 4px;font-size:14px}
}
.lrt-del:hover{border-color:var(--forest-mid);color:var(--forest-deep)}

.lrt-check{display:grid;gap:10px;margin:0 0 20px;padding:0;list-style:none}
.lrt-check li{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--paper)}
.lrt-check label{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;cursor:pointer;
  min-height:44px}
.lrt-check input[type=checkbox]{width:20px;height:20px;min-height:20px;margin-top:2px;flex:none;
  accent-color:var(--mint-vif)}
.lrt-check .t{font-weight:700;font-size:15px}
.lrt-check .h{font-size:14px;color:var(--muted-sage);display:block;margin-top:2px}
.lrt-check li.done{background:var(--beige);border-color:var(--mint-vif)}

.lrt-out{background:var(--forest-deep);color:var(--cream);border-radius:var(--radius);padding:20px;
  margin-top:20px}
.lrt-out h3{color:var(--cream);font-size:18px;margin-bottom:12px}
.lrt-out pre{margin:0 0 16px;font-family:var(--f-mono);font-size:13px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word}
.lrt-band{font-size:15px;font-weight:700;margin-top:16px;padding:14px 16px;border-radius:var(--radius-sm);
  background:var(--beige)}

/* bloc de suite */
.sec--fin{background:var(--paper)!important}
.next{width:70%;margin-inline:auto;background:var(--forest-deep);color:var(--cream);
  border-radius:var(--radius-lg);padding:clamp(28px,4vw,44px);
  display:grid;gap:clamp(24px,4vw,44px);align-items:center}
@media (min-width:900px){.next{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
@media (max-width:1199px){.next{width:100%}}
.next h2{color:var(--cream)}
.next .chapo{color:var(--mint-pastel)}
.next .btnrow{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:900px){.next .btnrow{justify-content:flex-end}}
.next-copy p:last-child{margin-bottom:0}

.foot{border-top:1px solid var(--sage-rule);padding-block:32px;font-size:14px;color:var(--muted-sage)}
.mockup{background:var(--beige);border-bottom:1px solid var(--sage-rule);padding:10px 0;
  font-family:var(--f-mono);font-size:12px;color:var(--forest-mid)}
.mockup b{color:var(--forest-deep)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}


/* ---------- menu d'ancres, construit depuis les h2 de la page ---------- */
.anav{position:sticky;top:var(--lhh,72px);z-index:20;background:var(--paper);
  border-bottom:1px solid var(--sage-rule);
  /* hauteur reservee : les items sont poses par JS, la page ne doit pas sauter */
  min-height:60px}
.anav-in{max-width:var(--maxw);margin-inline:auto;padding:8px var(--gut);
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;
  scroll-snap-type:x proximity}
.anav a{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:8px 16px;border-radius:999px;font-size:15px;font-weight:600;
  color:var(--forest-deep);text-decoration:none;white-space:nowrap;
  transition:.2s ease;scroll-snap-align:start}
.anav a:hover{background:rgba(83,212,149,.14)}
.anav a[aria-current="true"]{background:var(--sage-clair);font-weight:700}
.anav a[aria-current="true"]::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--mint-vif);flex:none}

/* ---------- illustrations, systeme du blog Learn Room ---------- */
/* Repris tel quel des articles de learnroom.fr : figure sur fond cream, pastille de
   concept, tige mint, grille de noeuds. Les valeurs litterales viennent du blog. */
figure.lr-map{display:block;width:100%;max-width:100%;margin:30px 0;background:var(--cream);
  border:1px solid #ece7d8;border-radius:14px;padding:26px 24px}
.lr-map-core{display:block;width:max-content;max-width:100%;margin:0 auto;
  background:var(--forest-deep);color:var(--cream);font-weight:700;font-size:1.125rem;
  padding:12px 24px;border-radius:999px;text-align:center}
.lr-map-stem{display:block;width:2px;height:20px;background:var(--mint-vif);margin:6px auto 14px}
.lr-map-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lr-map-node{background:var(--paper);border:1px solid #dfe7e2;border-left:4px solid var(--mint-vif);
  border-radius:12px;padding:13px 15px;font-size:1.0625rem;color:#191a1f}
.lr-map-node strong{display:block;color:var(--forest-deep);margin-bottom:3px;font-size:1.0625rem}
.lr-map-node span{display:block;font-size:1rem;color:#2f4a3c;line-height:1.5}
@media (max-width:640px){.lr-map{padding:18px 14px}.lr-map-grid{grid-template-columns:1fr}}

/* arcs concentriques : decor de l'encart de fin d'article du blog */
.arcs{position:absolute;pointer-events:none;width:520px;height:520px;opacity:.9}
.arcs circle{stroke:var(--mint-vif)}
.arcs circle.a4{stroke:var(--mint-pastel)}
.hero{position:relative;overflow:hidden}
.hero>.arcs{position:absolute;right:-140px;top:-160px}
.hero>.wrap{position:relative;z-index:1}
.next{position:relative;overflow:hidden}
.next .arcs{right:-170px;bottom:-230px}
.next>.arcs{position:absolute}
.next>*:not(.arcs){position:relative;z-index:1}

/* ---------- bloc Passeport, sous les appels a l'action, sans appel a l'action ---------- */
.pass{grid-column:1/-1;margin-top:8px;padding-top:32px;border-top:1px solid var(--border-dark);
  display:grid;gap:24px;align-items:start}
@media (min-width:640px){.pass{grid-template-columns:150px minmax(0,1fr)}}
.pass img{width:100%;max-width:150px;height:auto;border-radius:var(--radius-sm);display:block}
.pass h3{color:var(--cream);font-size:21px;margin-bottom:10px}
.pass p{color:var(--mint-pastel);font-size:15px;margin-bottom:12px}
.pass ul{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:8px}
.pass ul li{position:relative;padding-left:18px;font-size:15px;color:var(--cream)}
.pass ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--mint-vif)}
.pass .rappel{font-size:14px;color:var(--mint-pastel);margin:0}

/* =====================================================================
   Variante « v2 », essai de design sur deux pages (01 et 06).
   Portee par body.v2 pour rester comparable aux sept autres.
   Aucune couleur, police ni composant hors charte : la variante ne fait
   que se servir plus franchement de ce qui existe deja.
   ===================================================================== */

/* 1. Le chapo etait en gris-vert atenue sur blanc : lisible, mais delave.
      Il passe sur un vert sombre de la charte, le contraste double. */
.v2 .chapo{color:var(--forest-soft)}
.v2 .sec--dark .chapo,.v2 .hero .chapo{color:var(--mint-pastel)}

/* 2. Equilibrage des lignes de titre et des paragraphes longs. */
.v2 h1,.v2 h2,.v2 h3{text-wrap:balance}
.v2 p,.v2 li{text-wrap:pretty}

/* 3. L'outil est la raison d'etre de la page : sa barre devient sombre,
      il cesse d'etre un bloc pale parmi d'autres. */
.v2 .lrt{border-color:var(--forest-deep);box-shadow:0 1px 0 var(--forest-deep)}
.v2 .lrt-bar{background:var(--forest-deep);border-bottom-color:transparent}
.v2 .lrt-bar .lrt-name{color:var(--mint-pastel)}
.v2 .lrt-bar .lrt-state{color:var(--mint-pastel)}
.v2 .lrt-bar .btn--sec{border-color:var(--border-dark);color:var(--cream)}
.v2 .lrt-bar .btn--sec:hover{border-color:var(--mint-vif)}

/* 4. Une bande sombre par page, sur la section qui porte la methode.
      Elle donne le seul vrai temps fort du defilement, et elle differencie
      d'un coup les sections voisines sans recourir a un aplat gris. */
.v2 main>.sec.sec--dark{background:var(--forest-deep);color:var(--cream);
  padding-block:clamp(72px,10vw,124px)}
.v2 .sec--dark .warn{background:rgba(255,255,255,.06);border-color:var(--border-dark)}
.v2 .sec--dark .warn b{color:var(--mint-pastel)}
.v2 .sec--dark details.acc{background:rgba(255,255,255,.05);border-color:var(--border-dark)}
.v2 .sec--dark details.acc[open]{border-color:var(--mint-vif)}
.v2 .sec--dark details.acc summary{color:var(--cream)}
.v2 .sec--dark details.acc summary::after{background:rgba(255,255,255,.10);color:var(--mint-pastel)}
.v2 .sec--dark details.acc[open] summary::after{background:var(--mint-vif);color:var(--forest-deep)}
.v2 .sec--dark ul.dots li span{color:var(--mint-pastel)}
.v2 .sec--dark .tablewrap{background:transparent;border-color:var(--border-dark)}
.v2 .sec--dark table.t th{background:rgba(255,255,255,.06);color:var(--mint-pastel)}
.v2 .sec--dark table.t th,.v2 .sec--dark table.t td{border-bottom-color:var(--border-dark)}

/* 5. Numerotation visible la ou le contenu EST une sequence, nulle part ailleurs.
      Chiffre en mono, aligne sur la marge, il donne le rythme de lecture. */
.v2 ol.steps{list-style:none;padding-left:0;counter-reset:et;gap:22px}
.v2 ol.steps>li{counter-increment:et;position:relative;padding-left:60px;min-height:34px}
.v2 ol.steps>li::before{content:counter(et,decimal-leading-zero);position:absolute;left:0;top:2px;
  width:44px;font-family:var(--f-mono);font-size:15px;font-weight:600;color:var(--forest-mid);
  border-top:2px solid var(--mint-vif);padding-top:8px}
.v2 .sec--dark ol.steps>li::before{color:var(--mint-pastel)}

/* 6. Respiration : la premiere section apres le hero respire plus large,
      les sections d'explication se resserrent. Le rythme cesse d'etre plat. */
.v2 main>.sec:first-of-type{padding-block:clamp(64px,9vw,112px) clamp(56px,8vw,96px)}
.v2 main>.sec+.sec{padding-block:clamp(48px,6vw,76px)}
.v2 main>.sec.sec--fin{padding-block:clamp(72px,10vw,120px)}

/* 7. Le hero : les arcs prennent leur place au lieu de se deviner. */
.v2 .hero>.arcs{width:680px;height:680px;right:-190px;top:-210px;opacity:1}
.v2 .hero .meta{margin-top:32px}

/* --- Corrections issues du controle de contraste et de visibilite du 8 aout --- */

/* 1. Le chapo de la carte de fin heritait du vert sombre pose pour le fond blanc :
      1,45:1 sur le noir Learn Room, illisible. */
.v2 .next .chapo{color:var(--mint-pastel)}

/* 2. Un bloc de consigne est deja en noir Learn Room : sur une section sombre il
      disparaissait. Il devient un voile clair borde. */
.v2 .sec--dark .snip{background:rgba(255,255,255,.06);border:1px solid var(--border-dark)}

/* 3. Une carte claire posee sur une section sombre heritait de la couleur de texte
      creme : creme sur blanc, 1,04:1. Le texte y reprend la couleur des fonds clairs. */
.v2 .sec--dark .lrt,.v2 .sec--dark .card,.v2 .sec--dark figure.lr-map{color:var(--forest-deep)}
.v2 .sec--dark .lrt h3,.v2 .sec--dark .card h3{color:var(--forest-deep)}
.v2 .sec--dark .lrt .lrt-check .t,.v2 .sec--dark .lrt label{color:var(--forest-deep)}
.v2 .sec--dark .lrt-bar .lrt-name,.v2 .sec--dark .lrt-bar .lrt-state{color:var(--mint-pastel)}
.v2 .sec--dark .lr-map-node span{color:#2f4a3c}

/* 4. Le gris-vert atenue plafonnait a 4,37:1 sur blanc, sous le seuil de 4,5.
      Tout le texte courant qui l'utilisait passe sur le vert sombre de la charte. */
.v2 .lrt-note,.v2 .mesure,.v2 ul.dots li span,.v2 .lrt-grid .num,
.v2 .lrt-check .h,.v2 .lrt-field .help{color:var(--forest-soft)}
.v2 .sec--dark .lrt-note,.v2 .sec--dark .lrt-check .h,.v2 .sec--dark .lrt-field .help{color:var(--forest-soft)}
.v2 .sec--dark ul.dots li span,.v2 .sec--dark .mesure{color:var(--mint-pastel)}

/* 5. Carte et accordeon sur fond blanc : un filet a 10 % ne se voit pas. Il se resserre,
      sans passer par un aplat de couleur. */
.v2 details.acc,.v2 .card{border-color:rgba(3,32,14,.20)}
.v2 .sec--dark details.acc,.v2 .sec--dark .card{border-color:var(--border-dark)}

/* 6. Sur une section sombre, une barre d'outil sombre se detache de sa carte et les
      boutons semblent flotter. Elle repasse en beige, la carte redevient un objet. */
.v2 .sec--dark .lrt-bar{background:var(--beige);border-bottom:1px solid var(--border)}
.v2 .sec--dark .lrt-bar .lrt-name,.v2 .sec--dark .lrt-bar .lrt-state{color:var(--forest-mid)}
.v2 .sec--dark .lrt-bar .btn--sec{border-color:var(--border);color:var(--forest-deep)}