/* WiT? · Charte de lecture (chantier C19), version 0.1 du 21 octobre 2026.
   Complète la charte des dessins (C3b, v1.0) sans la contredire : mêmes polices de titre, même encre sur papier.
   Chargée APRÈS fiche.css sur toutes les pages. Fichier produit par c19/outils/construire-charte.py
   à partir de charte.src.css (les pictogrammes y sont écrits en clair).
   Règles en bref :
   1. Trois polices, trois rôles : titres (Cormorant Garamond), texte (Newsreader), repères (Barlow Condensed).
   2. Une échelle de six tailles, rien sous 14 px.
   3. Capitales seulement pour les étiquettes courtes ; titres, boutons et sommaire en minuscules.
   4. Dans le texte, une couleur = un rôle : action (lie-de-vin) ou type de contenu (cinq teintes).
      Les saisons restent dans les dessins. Chaque type a aussi sa forme et son pictogramme (jamais la couleur seule).
   5. Repères : numéro de section dans une pastille, partout le même (sommaire, titres, renvois). */

/* ---------- 1. Jetons : tailles, interlignes, espacements ---------- */
:root {
  --fs-xs: 0.875rem;    /* 14 px : étiquettes, sources, légendes (minimum absolu) */
  --fs-s: 0.9375rem;    /* 15 px : notes, tableaux, texte des cartes */
  --fs-m: 1.0625rem;    /* 17 px : texte courant (18 px sur grand écran) */
  --fs-l: 1.3125rem;    /* 21 px : intertitre (h3) */
  --fs-xl: 1.875rem;    /* 30 px : titre de planche (h2) */
  --fs-xxl: 2.375rem;   /* 38 px : titre de page (h1) */
  --lh-texte: 1.6; --lh-court: 1.45; --lh-titre: 1.15;
  --mesure: 68ch;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --font-titre: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-text: "Newsreader", Georgia, "Times New Roman", serif;
  --font-label: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  /* Types de contenu (thème clair) */
  --c-question: #35597A;  /* bleu ardoise : « Selon vous », question posée */
  --c-retenir: #855C0E;   /* ocre : « Pour résumer », « Ce qui les rapproche » */
  --c-wit: #7A2433;       /* lie-de-vin : l'effet WiT?, ce qui est remarquable */
  --c-conseil: #3B6A4C;   /* vert sauge : conseil d'achat, de service, vin accessible */
  --c-risque: #A13A1C;    /* terre cuite : risque, menace, attention */
  --fond-teinte: 7%;      /* part de la teinte dans le fond d'un encadré */
}
@media (min-width: 820px) { :root { --fs-m: 1.125rem; --fs-xl: 2.125rem; --fs-xxl: 3rem; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-wit-theme]) { --c-question: #93B5D3; --c-retenir: #DDB25E; --c-wit: #DE96A4; --c-conseil: #8CC39F; --c-risque: #EE9277; --fond-teinte: 12%; }
}
:root[data-theme="dark"]:not([data-wit-theme]), :root[data-wit-theme="sombre"] { --c-question: #93B5D3; --c-retenir: #DDB25E; --c-wit: #DE96A4; --c-conseil: #8CC39F; --c-risque: #EE9277; --fond-teinte: 12%; }
/* Daltoniens : teintes de la palette Okabe-Ito, assombries pour le texte ; les cinq types restent distincts par la clarté, la forme et le pictogramme */
:root[data-wit-theme="rouge-vert"] { --c-question: #005A9C; --c-retenir: #8A5D00; --c-wit: #8A3B12; --c-conseil: #00705A; --c-risque: #A84400; }
:root[data-wit-theme="bleu-jaune"] { --c-question: #23395B; --c-retenir: #8F4A00; --c-wit: #A3214A; --c-conseil: #3D7346; --c-risque: #C2300E; }

/* ---------- 2. Texte courant ---------- */
:root[data-charte] body { font-family: var(--font-text); font-size: var(--fs-m); line-height: var(--lh-texte); }
:root[data-charte] .txt p, :root[data-charte] .lede { max-width: var(--mesure); }
:root[data-charte] .head .lede { max-width: var(--mesure); }
:root[data-charte] .lede { color: var(--ink); }
:root[data-charte] .head .lede { color: var(--muted); }
:root[data-charte] b, :root[data-charte] strong { font-weight: 600; }

/* ---------- 3. Titrage : quatre niveaux fixes, jamais tout en capitales ---------- */
:root[data-charte] h1, :root[data-charte] h2 { font-family: var(--font-titre); font-weight: 600; text-transform: none; letter-spacing: 0; line-height: var(--lh-titre); }
:root[data-charte] h1 { font-size: var(--fs-xxl); line-height: 1.05; }
:root[data-charte] h2 { font-size: var(--fs-xl); }
:root[data-charte] h3 { font-family: var(--font-text); font-weight: 600; font-size: var(--fs-l); line-height: 1.3; }
:root[data-charte] h4, :root[data-charte] h5 { margin: 0; font-family: var(--font-text); font-weight: 600; font-size: var(--fs-m); line-height: 1.35; }

/* Étiquette : le seul texte en capitales (quatre mots au plus), toujours 14 px, espacé */
:root[data-charte] .label, :root[data-charte] .evbadge, :root[data-charte] .ev .pts { font-family: var(--font-label); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
:root[data-charte] .evbadge, :root[data-charte] .ev .pts { text-transform: none; letter-spacing: 0.02em; }

/* Boutons, puces, sommaire : minuscules (capitale initiale), plus faciles à lire */
:root[data-charte] .btn, :root[data-charte] .slot .pick, :root[data-charte] .chip, :root[data-charte] .nav a, :root[data-charte] a.voir, :root[data-charte] .back { text-transform: none; letter-spacing: 0.02em; }
:root[data-charte] .btn { font-size: var(--fs-m); font-weight: 600; padding: 7px 16px; border-radius: 6px; }
:root[data-charte] .btn.sm, :root[data-charte] .slot .pick { font-size: var(--fs-s); padding: 4px 12px; }
:root[data-charte] .btn.ghost { border-width: 1.5px; border-color: var(--muted); }
:root[data-charte] .btn.ghost:hover { border-color: var(--ink); }
:root[data-charte] .chip { font-size: var(--fs-xs); font-weight: 600; padding: 1px 10px; border-width: 1.5px; }
:root[data-charte] .back { font-size: var(--fs-s); }
:root[data-charte] a.voir { font-size: var(--fs-s); }

/* ---------- 4. Indexation : la pastille de section ---------- */
/* Comme un numéro de station : le même numéro, dans la même pastille, au sommaire, en tête de planche et dans les renvois */
/* Retour de Jo (27 octobre, 20 h 36) : à droite de la pastille, le nom de la planche calé sur le haut de la pastille,
   la précision grise dessous, les deux alignés à gauche ; l'ensemble ne dépasse pas la hauteur de la pastille */
:root[data-charte] .badge { --b-nom: clamp(1.5rem, 1.1rem + 2vw, var(--fs-xl)); --b-sous: var(--fs-s); --b-h: calc(var(--b-nom) * 1.05 + var(--b-sous) * 1.3 + 2px);
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: start; color: var(--ink); letter-spacing: 0; text-transform: none; }
:root[data-charte] .badge:not(:has(.sous)) { --b-h: calc(var(--b-nom) * 1.3); align-items: center; }
/* Retour de Jo (27 octobre, 20 h 50) : pastille ronde, centrée sur la ligne du nom quand il n'y a pas d'annotation */
:root[data-charte] .badge:not(:has(.sous)) .num { grid-row: 1; align-self: center; }
:root[data-charte] .badge:not(:has(.sous)) .nom { align-self: center; margin-top: 0; }
:root[data-charte] .badge .num { grid-row: 1 / span 2; align-self: start; display: inline-grid; place-items: center; min-width: var(--b-h); height: var(--b-h); padding: 0 8px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 700 calc(var(--b-h) * 0.5)/1 var(--font-label); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
:root[data-charte] .badge .nom { grid-column: 2; align-self: start; margin-top: -0.06em; font: 700 var(--b-nom)/1.05 var(--font-label); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); }
/* Retour de Jo (27 octobre, 20 h 27) : titre de planche en gras et en capitales, seule exception à la règle des titres en minuscules */
/* Retour de Jo (27 octobre) : le nom de la planche est le titre, au moins aussi gros que la phrase qui suit ; la phrase devient le sous-titre */
:root[data-charte] .planche h2 { font-size: clamp(1.5rem, 1.1rem + 2vw, var(--fs-xl)); font-weight: 400; line-height: 1.2; }
/* Retour de Jo (27 octobre, 20 h 30) : sous-titre de planche à la même taille que le titre, sans gras (Cormorant 400) */
:root[data-charte][data-wit-theme="facile"] .planche h2 { font-weight: 400; }
:root[data-charte] .planche > .txt > h2, :root[data-charte] .planche > .phead > h2 { margin-top: calc(-1 * var(--e1)); }
:root[data-charte] .badge .sous { grid-column: 2; font: italic 400 var(--b-sous)/1.3 var(--font-text); letter-spacing: 0; text-transform: none; color: var(--muted); }
/* Planche : un filet fort et la pastille, comme le bandeau des brochures de parcs ; rien d'autre ne trace un trait aussi épais */
:root[data-charte] .planche { border-top: 2px solid var(--ink); padding-block: var(--e6); gap: var(--e5); }
:root[data-charte] .planche.suite { border-top: 1px dashed var(--line); padding-top: var(--e5); }
:root[data-charte] .phead, :root[data-charte] .txt { gap: var(--e3); }
/* Sommaire collant : numéro en gras, section en cours en encre pleine, section acquise cochée */
:root[data-charte] .nav { padding-block: var(--e2); }
:root[data-charte] .nav-in { gap: var(--e2); scrollbar-width: thin; }
:root[data-charte] .nav a { font-size: var(--fs-s); font-weight: 500; padding: 3px 12px 3px 4px; border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 6px; }
:root[data-charte] .nav a b { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--bg); font-weight: 700; font-variant-numeric: tabular-nums; }
:root[data-charte] .nav a[aria-current="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
:root[data-charte] .nav a[aria-current="true"] b { background: var(--bg); color: var(--ink); }
:root[data-charte] .nav a.done { color: var(--ink); border-color: var(--c-conseil); }
:root[data-charte] .nav a.done::after { content: "✓"; color: var(--c-conseil); font-weight: 700; }
:root[data-charte] .nav a[aria-current="true"].done::after { color: inherit; }
:root[data-charte] .nav .tally { font-size: var(--fs-xs); }
/* Renvoi vers une section : la pastille en petit, dans le texte */
:root[data-charte] a.ref { display: inline-grid; place-items: center; min-width: 1.45em; height: 1.45em; padding: 0 0.3em; margin: 0 1px; border-radius: 999px; border: 1.5px solid var(--accent); color: var(--accent); font: 700 0.8em/1 var(--font-label); text-decoration: none; vertical-align: 0.1em; }
:root[data-charte] a.ref:hover { background: var(--accent); color: var(--accent-ink); }
:root[data-charte] .see { font-size: var(--fs-s); gap: var(--e1) var(--e3); }
:root[data-charte] .see .label::before { content: "→ "; }
:root[data-charte] .see a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---------- 5. Les types de contenu : couleur + forme + pictogramme + étiquette ---------- */
/* Pictogramme : une icône en masque, qui prend la couleur du type */
:root[data-charte] .t-ico::before, :root[data-charte] .ask > .label::before, :root[data-charte] .retenir > p > .label::before, :root[data-charte] .wow > h2::before, :root[data-charte] .bref > h2::before, :root[data-charte] .risques > h3:first-child::before, :root[data-charte] .t-conseil::before, :root[data-charte] .t-risque::before {
  content: ""; display: inline-block; width: 1.15em; height: 1.15em; margin-right: 0.4em; vertical-align: -0.18em; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}

/* 5.1 Question (« Selon vous ») : cadre fin, fond teinté, point d'interrogation, texte en italique */
:root[data-charte] .ask { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M9.2 9.3a2.9 2.9 0 1 1 4 2.7c-.8.4-1.2 1-1.2 1.8v.6'/%3E%3Ccircle cx='12' cy='17.4' r='.9' fill='black' stroke='none'/%3E%3C/svg%3E"); border: 1.5px solid var(--c-question); border-radius: 8px; padding: var(--e3) var(--e4); background: color-mix(in srgb, var(--c-question) var(--fond-teinte), var(--surface)); }
:root[data-charte] .ask > .label { color: var(--c-question); }
:root[data-charte] .ask p { font-style: italic; margin-top: var(--e1); }

/* 5.2 À retenir (« Pour résumer », « Ce qui les rapproche ») : filet épais à gauche, fond teinté, signet */
:root[data-charte] .retenir { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h10v17l-5-3.6-5 3.6z'/%3E%3C/svg%3E"); border-left: 5px solid var(--c-retenir); border-radius: 0 8px 8px 0; padding: var(--e3) var(--e4); background: color-mix(in srgb, var(--c-retenir) var(--fond-teinte), var(--surface)); }
:root[data-charte] .retenir > p > .label { color: var(--c-retenir); }

/* 5.3 L'effet WiT? (le remarquable) : double cadre arrondi, étincelle */
:root[data-charte] .wow { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8c.9 4.9 2.6 6.6 7.4 7.4-4.8.8-6.5 2.5-7.4 7.4-.9-4.9-2.6-6.6-7.4-7.4 4.8-.8 6.5-2.5 7.4-7.4z' fill='black'/%3E%3Cpath d='M19 16.5v4M17 18.5h4'/%3E%3C/svg%3E"); border: 4px double var(--c-wit); border-radius: 12px; padding: var(--e4) var(--e5) var(--e2); background: var(--surface); }
:root[data-charte] .wow > h2 { font-size: var(--fs-l); color: var(--c-wit); margin-bottom: var(--e2); }
:root[data-charte] .wow > h2 span { font-family: var(--font-label); color: var(--c-wit); letter-spacing: 0.02em; }
:root[data-charte] .wow li { margin-bottom: var(--e2); }
:root[data-charte] .wow li::marker { color: var(--c-wit); }

/* 5.4 Repères et données (« En bref », tableaux, encépagement) : neutre, cadre fin, chiffres alignés */
:root[data-charte] .bref { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='1.5'/%3E%3Cpath d='M3.5 9.5h17M9.5 9.5v10'/%3E%3C/svg%3E"); border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); }
:root[data-charte] .bref > h2 { font-size: var(--fs-l); }
:root[data-charte] .bref .label { color: var(--muted); }
:root[data-charte] .encbox, :root[data-charte] .cmpcol, :root[data-charte] .slot { border-width: 1.5px; border-color: var(--line); border-radius: 8px; }
:root[data-charte] .cmpcol > .label { color: var(--ink); }
:root[data-charte] .encbox > .label { color: var(--ink); }
:root[data-charte] table.clim, :root[data-charte] table.prof { font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
:root[data-charte] table.clim { border: 1.5px solid var(--line); }
:root[data-charte] table.clim thead th, :root[data-charte] table.prof thead th { font-size: var(--fs-xs); }
:root[data-charte] .meters, :root[data-charte] ul.fx, :root[data-charte] ul.rq, :root[data-charte] .dleg { font-variant-numeric: tabular-nums; }
:root[data-charte] .dleg, :root[data-charte] ul.fx, :root[data-charte] ul.rq { font-size: var(--fs-s); }
:root[data-charte] .dleg .rang { font-size: var(--fs-xs); }
:root[data-charte] .dots { color: var(--ink); letter-spacing: 2px; }

/* 5.5 Conseil (pour commencer, vin phare, accessible) : vert sauge, ampoule */
:root[data-charte] .t-conseil { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5M10.5 21h3M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); color: var(--c-conseil); font-weight: 600; }
:root[data-charte] .chip.acc { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5M10.5 21h3M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); border-color: var(--c-conseil); color: var(--c-conseil); }
:root[data-charte] .chip.acc::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.3em; vertical-align: -0.15em; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }

/* 5.6 Risque et attention : terre cuite, triangle */
:root[data-charte] .risques { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20h-19z'/%3E%3Cpath d='M12 10v4.4'/%3E%3Ccircle cx='12' cy='17.2' r='.9' fill='black' stroke='none'/%3E%3C/svg%3E"); }
:root[data-charte] .risques > h3:first-child { color: var(--c-risque); }
:root[data-charte] .t-risque { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20h-19z'/%3E%3Cpath d='M12 10v4.4'/%3E%3Ccircle cx='12' cy='17.2' r='.9' fill='black' stroke='none'/%3E%3C/svg%3E"); color: var(--c-risque); }
:root[data-charte] .bref .bl.t-risque-bl > .label { color: var(--c-risque); }
:root[data-charte] .bref .bl.t-risque-bl > .label::before { content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: 0.35em; vertical-align: -0.2em; background: currentColor; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20h-19z'/%3E%3Cpath d='M12 10v4.4'/%3E%3Ccircle cx='12' cy='17.2' r='.9' fill='black' stroke='none'/%3E%3C/svg%3E"); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }

/* 5.7 Note, légende, source : petit, gris, jamais encadré */
:root[data-charte] .note, :root[data-charte] .src, :root[data-charte] .slot .why, :root[data-charte] .wine .meta, :root[data-charte] .grower .meta { font-size: var(--fs-s); line-height: var(--lh-court); }
:root[data-charte] .src { font-size: var(--fs-xs); }
:root[data-charte] .map figcaption { font-size: var(--fs-s); }

/* 5.8 Mot du lexique : souligné en pointillé, livre ouvert au survol (inchangé, rappel de la règle) */
:root[data-charte] a.mot { text-decoration: underline dotted var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* 5.9 Réponse du test : filet neutre, la correction se coche */
:root[data-charte] .reponse { border-left: 3px solid var(--muted); padding: var(--e1) 0 var(--e1) var(--e3); }

/* ---------- 6. Chaîne climat, vigne, vin : étiquettes en encre, plus de pavés de couleur ---------- */
:root[data-charte] .step > .k { background: none; color: var(--ink); text-align: left; border-left: 3px solid var(--ink); border-radius: 0; padding: 2px 0 2px 8px; font-size: var(--fs-xs); letter-spacing: 0.08em; line-height: 1.3; }
:root[data-charte] .tl .st .inw b { color: var(--ink); font-size: var(--fs-xs); }
:root[data-charte] .item .label { color: var(--muted); }
:root[data-charte] .tl .st::before { font-size: var(--fs-s); }

/* ---------- 7. Cartes de vins et de vignerons : filet fin, la mise en avant par la couleur d'action ---------- */
:root[data-charte] .wine, :root[data-charte] .grower { border: 1.5px solid var(--line); border-radius: 8px; }
:root[data-charte] .grower.top { border: 2px solid var(--accent); box-shadow: none; }
:root[data-charte] .chip.top { border-color: var(--accent); color: var(--accent); }
:root[data-charte] .tierhead { border-bottom: 1.5px solid var(--ink); gap: var(--e3); }
:root[data-charte] .tierhead h3 { font-size: var(--fs-l); }
:root[data-charte] .vgroup > h3 { font-family: var(--font-titre); font-size: 1.6rem; }
:root[data-charte] .wine p, :root[data-charte] .grower p, :root[data-charte] .item p, :root[data-charte] .cmpcol p, :root[data-charte] .tl .st p { font-size: var(--fs-s); line-height: var(--lh-court); }
:root[data-charte] .scene:not(svg.wit) { border-width: 1.5px; border-color: var(--line); box-shadow: none; border-radius: 6px; }

/* ---------- 8. Lecture facilitée : mêmes règles, une seule police très lisible, corps plus grand ---------- */
:root[data-charte][data-wit-theme="facile"] { --fs-m: 1.1875rem; --fs-s: 1.0625rem; --fs-xs: 0.9375rem; --lh-texte: 1.7; --mesure: 64ch; --font-titre: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif; --font-text: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif; --font-label: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif; }
:root[data-charte][data-wit-theme="facile"] body { font-family: var(--font-text); font-size: var(--fs-m); line-height: var(--lh-texte); }
:root[data-charte][data-wit-theme="facile"] h1, :root[data-charte][data-wit-theme="facile"] h2 { font-family: var(--font-titre); font-weight: 700; }
:root[data-charte][data-wit-theme="facile"] .label, :root[data-charte][data-wit-theme="facile"] .step > .k { letter-spacing: 0.04em; }
:root[data-charte][data-wit-theme="facile"] .ask p, :root[data-charte][data-wit-theme="facile"] .badge .sous { font-style: normal; }

/* ---------- 9. Accueil et pages de l'application (cartes d'entrée) ---------- */
:root[data-charte] .home .sec > .label { font-size: var(--fs-xs); }
/* Accueil (Jo, 27 octobre, 23 h 23 : « même format ») : chaque rubrique porte sa pastille numérotée et son nom en capitales grasses,
   comme les planches des Fiches Descriptives ; le réglage « Affichage » garde une simple étiquette */
:root[data-charte] .home { counter-reset: rubrique; }
:root[data-charte] .home .sec:not(#affichage) > .label { counter-increment: rubrique; display: flex; align-items: center; gap: 12px; margin-bottom: var(--e4);
  font: 700 clamp(1.25rem, 1rem + 1vw, 1.5rem)/1.05 var(--font-label); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); }
:root[data-charte] .home .sec:not(#affichage) > .label::before { content: counter(rubrique); flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; padding: 0;
  border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 0.8em; letter-spacing: 0; }
:root[data-charte] .card { border: 1.5px solid var(--line); border-radius: 8px; padding: var(--e4) var(--e5); }
:root[data-charte] .card:hover, :root[data-charte] .card:focus-visible { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
:root[data-charte] .card h2 { font-size: var(--fs-l); font-family: var(--font-titre); font-size: 1.6rem; }
:root[data-charte] .card .go { text-transform: none; letter-spacing: 0.02em; font-size: var(--fs-s); }
:root[data-charte] .btn-retour, :root[data-charte] .wp-btn, :root[data-charte] .wp-h { text-transform: none !important; letter-spacing: 0.02em !important; }
:root[data-charte] .wp legend { font-size: var(--fs-xs) !important; }
:root[data-charte] .wp, :root[data-charte] .prefs { border: 1.5px solid var(--line) !important; border-radius: 8px !important; }