/* WiT? · Feuille de style unique des Fiches Descriptives (chantier Socle).
   Base : fiche Chinon v2 alignée à gauche (validée le 19 octobre 2026), puis préférences d'affichage :
   texte « Nouvelle version » (par défaut) ou « Version actuelle », et cinq thèmes
   (classique, sombre, daltonien rouge-vert, daltonien bleu-jaune, lecture facilitée).
   Le thème choisi est porté par data-wit-theme sur <html> ; sans choix, on suit le thème de l'appareil. */
/* Concept : des planches pédagogiques de révision. Chaque planche = une case illustrée, une question posée avant la réponse, puis la chaîne climat, vigne, vin. */
:root {
  --bg: #F1F0F4; --surface: #FFFFFF; --ink: #1E1B22; --muted: #625C6B; --line: #D5D1DA;
  --accent: #7A2433; --accent-ink: #FFFFFF; --good: #1F7A4D; --bad: #B3361B;
  --winter: #3F6285; --spring: #3F8046; --summer: #A8701A; --autumn: #A8412F; --neutral: #5B4B6B;
  --sky-w: #CCDAE9; --sky-sp: #DAEBD3; --sky-su: #F6E3B4; --sky-au: #EBC8B5; --sky-n: #E6E0EE;
  --hill: #A7B88F; --hill2: #8DA374; --leaf: #5E9A4A; --leaf2: #3F7A3A; --leafAu: #C9632B; --leafAu2: #A8412F;
  --wood: #6B4A32; --grape: #4E2458; --grapeG: #8FB45E; --bloom: #F3E9A8; --snow: #FFFFFF; --ice: #7DBBE6;
  --sun: #F2B134; --cloud: #FFFFFF; --storm: #6E6A78; --glass: #2B2A2E; --soil1: #C9B28A; --soil2: #A88C62; --soil3: #8C6E4A;
  --font-label: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-text: "Newsreader", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-wit-theme]) {
    --bg: #15131A; --surface: #211E28; --ink: #EDE9F2; --muted: #A59DB0; --line: #38333F;
    --accent: #D98A9A; --accent-ink: #1D0F14; --good: #5CC48C; --bad: #F08A70;
    --winter: #8DB1D6; --spring: #86C48D; --summer: #E3B45E; --autumn: #E58C78; --neutral: #B9A6CC;
    --sky-w: #2A3A4F; --sky-sp: #28392B; --sky-su: #4A3B1E; --sky-au: #4A2D26; --sky-n: #2D2838;
    --hill: #4A5C3B; --hill2: #3C4C30; --leaf: #6FAE5A; --leaf2: #4C8B46; --leafAu: #D9733A; --leafAu2: #B9503A;
    --wood: #A98667; --grape: #9A5AA6; --grapeG: #9DC46A; --bloom: #E8DE96; --snow: #EDEFF5; --ice: #7DBBE6;
    --sun: #E9B040; --cloud: #4A4656; --storm: #3A3745; --glass: #0E0D10; --soil1: #6B5A3E; --soil2: #5A4A32; --soil3: #483A28; color-scheme: dark;
  }
}
:root[data-theme="dark"]:not([data-wit-theme]), :root[data-wit-theme="sombre"] {
  --bg: #15131A; --surface: #211E28; --ink: #EDE9F2; --muted: #A59DB0; --line: #38333F;
  --accent: #D98A9A; --accent-ink: #1D0F14; --good: #5CC48C; --bad: #F08A70;
  --winter: #8DB1D6; --spring: #86C48D; --summer: #E3B45E; --autumn: #E58C78; --neutral: #B9A6CC;
  --sky-w: #2A3A4F; --sky-sp: #28392B; --sky-su: #4A3B1E; --sky-au: #4A2D26; --sky-n: #2D2838;
  --hill: #4A5C3B; --hill2: #3C4C30; --leaf: #6FAE5A; --leaf2: #4C8B46; --leafAu: #D9733A; --leafAu2: #B9503A;
  --wood: #A98667; --grape: #9A5AA6; --grapeG: #9DC46A; --bloom: #E8DE96; --snow: #EDEFF5; --ice: #7DBBE6;
  --sun: #E9B040; --cloud: #4A4656; --storm: #3A3745; --glass: #0E0D10; --soil1: #6B5A3E; --soil2: #5A4A32; --soil3: #483A28; color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: 17px; line-height: 1.5; }
.wrap { max-width: 980px; margin: 0 auto; padding-block: 24px 64px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-family: var(--font-label); font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; }
h2 { font-family: var(--font-label); font-weight: 700; font-size: 1.7rem; line-height: 1.05; text-transform: uppercase; }
h3 { font-family: var(--font-text); font-weight: 600; font-size: 1.1rem; }
.label { font-family: var(--font-label); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.back { display: inline-block; font-family: var(--font-label); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.06em; color: var(--accent); text-decoration: none; margin-bottom: 6px; }
.back:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, .slot label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 6px; padding: 9px 16px; font-family: var(--font-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 1rem; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.sm { padding: 5px 11px; font-size: 0.9rem; }
.btn.on { background: var(--good); color: #fff; border-color: var(--good); }
.btn.off { background: var(--bad); color: #fff; border-color: var(--bad); }
.head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.lede { max-width: 62ch; margin: 0; color: var(--muted); }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); padding-block: 8px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.nav-in { display: flex; gap: 6px; overflow-x: auto; align-items: center; }
.nav a { flex: none; font-family: var(--font-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9rem; color: var(--ink); text-decoration: none; border: 1.5px solid var(--line); border-radius: 999px; padding: 3px 11px; background: var(--surface); }
.nav a.done { border-color: var(--good); color: var(--good); }
.nav .tally { flex: none; margin-left: auto; padding-left: 10px; }
.planche { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 28px; border-top: 3px solid var(--ink); scroll-margin-top: 64px; }
.planche > * { min-width: 0; }
@media (min-width: 820px) { .planche.two { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; } }
.badge { display: inline-flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tone, var(--neutral)); }
.badge b { font-size: 1.05rem; }
.badge span { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.fig { display: flex; flex-direction: column; gap: 12px; }
.scene { display: block; width: 100%; height: auto; border: 3px solid var(--ink); border-radius: 4px; box-shadow: 5px 5px 0 var(--ink); background: var(--surface); }
.txt { display: flex; flex-direction: column; gap: 14px; }
.ask { border: 2px solid var(--ink); border-radius: 4px; padding: 12px 14px; background: var(--surface); }
.ask .label { color: var(--tone, var(--accent)); }
.ask p { margin: 4px 0 0; font-style: italic; }
.chain { display: grid; gap: 10px; }
.step { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; align-items: start; }
.step > .k { font-family: var(--font-label); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--tone, var(--neutral)); color: var(--surface); border-radius: 3px; padding: 3px 8px; text-align: center; }
.step > div { min-width: 0; }
.step p { margin: 0; }
@media (max-width: 520px) { .step { grid-template-columns: minmax(0, 1fr); gap: 4px; } .step > .k { justify-self: start; } }
.exam { border-left: 4px solid var(--accent); padding: 4px 0 4px 12px; background: transparent; }
.exam p { margin: 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.slot { border: 2px dashed var(--line); border-radius: 4px; padding: 10px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.slot .hint { font-size: 0.92rem; margin: 0; }
.slot .why { font-size: 0.88rem; margin: 0; color: var(--muted); }
.slot .why b { color: var(--ink); font-weight: 600; }
.slot img { display: block; width: 100%; max-height: 360px; object-fit: cover; border: 3px solid var(--ink); border-radius: 4px; }
.slot input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.slot label { cursor: pointer; }
.slot .pick { display: inline-block; font-family: var(--font-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9rem; border: 1.5px solid var(--ink); border-radius: 6px; padding: 4px 10px; }
.items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.item h3 { font-size: 1.02rem; }
.item p { margin: 0; font-size: 0.95rem; }
.hs { width: 100%; height: auto; display: block; border: 1.5px solid var(--line); border-radius: 8px; }
.item .hw { margin: 0; font-size: 0.95rem; }

.tl { display: grid; gap: 10px; counter-reset: s; }
.tl .st { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 10px; }
.tl .st::before { counter-increment: s; content: counter(s); font-family: var(--font-label); font-weight: 700; background: var(--ink); color: var(--surface); width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; }
.tl .st p { margin: 0; font-size: 0.95rem; }
.tl .st b { font-weight: 600; }
.tier { display: flex; flex-direction: column; gap: 12px; }
.tier + .tier { margin-top: 10px; }
.tierhead { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 4px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.wine { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; background: var(--surface); border: 2px solid var(--ink); border-radius: 4px; padding: 14px; }
.wine > div { min-width: 0; }
.wine svg { width: 64px; height: auto; display: block; }
.wine h3 { font-size: 1.1rem; }
.wine .meta { margin: 2px 0 6px; font-size: 0.9rem; color: var(--muted); }
.chip { display: inline-block; font-family: var(--font-label); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.85rem; border: 1.5px solid var(--ink); border-radius: 999px; padding: 1px 9px; margin: 0 4px 4px 0; }
.meters { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0; font-size: 0.9rem; }
.dots { letter-spacing: 3px; color: var(--accent); }
.wine p { margin: 6px 0; font-size: 0.95rem; }
.note { font-size: 0.86rem; color: var(--muted); margin: 0; }
.qa { display: flex; flex-direction: column; gap: 8px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.qa p { margin: 0; }
.src { font-size: 0.88rem; color: var(--muted); }
.src a { color: var(--accent); }
.cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.cmpcol { border: 2px solid var(--ink); border-radius: 4px; padding: 10px 12px; background: var(--surface); min-width: 0; }
.cmpcol p { margin: 4px 0 0; font-size: 0.95rem; }
.scroll { overflow-x: auto; }
.maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; align-items: start; }
.map { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.map.hide .lbl { visibility: hidden; }
table.clim { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.92rem; min-width: 720px; width: 100%; background: var(--surface); border: 2px solid var(--ink); }
table.clim th, table.clim td { padding: 6px 6px; text-align: right; border-bottom: 1px solid var(--line); }
table.clim thead th { font-family: var(--font-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; }
table.clim tbody th { text-align: left; font-weight: 600; white-space: nowrap; }
table.clim td.u { color: var(--muted); text-align: left; }
/* Tableau dans une planche (mentions Prädikat…) : colonnes chiffrées alignées à droite */
.tbox { display: flex; flex-direction: column; gap: 8px; }
.tbox .label { color: var(--tone, var(--accent)); }
table.pk { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.92rem; width: 100%; min-width: 520px; background: var(--surface); border: 2px solid var(--ink); }
table.pk.etroit { min-width: 0; }
table.pk th, table.pk td { padding: 6px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
table.pk thead th { font-family: var(--font-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.82rem; }
table.pk tbody th { font-weight: 600; white-space: nowrap; }
table.pk td.n { text-align: right; white-space: nowrap; }
@media (max-width: 600px) {
  table.pk { min-width: 0; border-width: 2px 0; }
  table.pk thead { display: none; }
  table.pk tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 8px 6px; border-bottom: 1px solid var(--line); }
  table.pk th, table.pk td { padding: 0; border: 0; }
  table.pk tbody th { flex: 1 0 100%; }
  table.pk td.n::before { content: attr(data-l) " · "; color: var(--muted); }
  table.pk td:not(.n) { flex: 1 0 100%; }
}
/* Deux dessins côte à côte dans une planche pleine largeur */
@media (min-width: 820px) { .planche:not(.two) > .fig:has(> svg + svg) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
[data-rev][hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
.vgroup { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.vgroup > h3 { font-size: 1.3rem; }
.growers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.grower { background: var(--surface); border: 2px solid var(--ink); border-radius: 4px; padding: 12px 14px; min-width: 0; }
.grower h4 { margin: 0; font-size: 1.05rem; }
.grower .meta { margin: 2px 0 6px; font-size: 0.9rem; color: var(--muted); }
.grower p { margin: 6px 0 0; }
.chip.acc { border-color: var(--good); color: var(--good); }
.grower.top { border-color: var(--accent); box-shadow: 4px 4px 0 var(--accent); }
.chip.top { border-color: var(--accent); color: var(--accent); }
/* ---------- Auto-évaluation (composant commun) ---------- */
.qhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.evbadge { font-family: var(--font-label); font-weight: 600; letter-spacing: 0.06em; font-size: 0.95rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.evbadge.has { color: var(--good); }
.ev ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.ev li label { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; cursor: pointer; padding: 5px 6px; border-radius: 6px; }
.ev li label:hover { background: var(--bg); }
.ev input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--good); }
.ev input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ev .pts { font-family: var(--font-label); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.ev li.ok .pts { color: var(--good); }
.evfoot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.evtot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-block: 14px 4px; }
.evtot .sum { font-family: var(--font-label); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.evtot .trace { color: var(--muted); font-size: 0.95rem; }
.evtot .act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.wow { margin-top: 18px; border: 2px solid var(--accent); border-radius: 12px; padding: 14px 16px 6px; }
.wow h2 { margin: 0 0 6px; font-size: 1.25rem; }
.wow h2 span { font-family: var(--font-label); color: var(--accent); letter-spacing: 0.04em; }
.wow ul { margin: 0; padding-left: 1.2em; }
.wow li { margin-bottom: 8px; }
/* ---------- Canevas Socle (16 sections) ---------- */
:root { --align: left; --hy: manual; }
.wrap { -webkit-hyphens: var(--hy); hyphens: var(--hy); }
h1, h2, h3, h4, .label, .badge, .btn, .chip, .nav, .k { -webkit-hyphens: manual; hyphens: manual; }
.txt p, .ask p, .step p, .cmpcol p, .item p, .wine p, .grower p, .exam p, .tl p, .wow p, .wow li, .note, .lede, .reperes li, .encbox p { text-align: var(--align); }
.head .lede { text-align: left; max-width: none; }
.phead { display: flex; flex-direction: column; gap: 8px; }
.planche.two > .phead, .planche.two > .full { grid-column: 1 / -1; }
.encgrid { display: grid; gap: 16px; }
@media (min-width: 820px) { .encgrid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: start; } }
.encbox { border: 2px solid var(--ink); border-radius: 4px; padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.encbox ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.see { margin: 0; font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.see a { color: var(--accent); }
.reperes { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.tl .st .inw { margin-top: 4px; font-size: 0.93rem; }
.tl .st .inw b { font-family: var(--font-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; color: var(--tone, var(--neutral)); margin-right: 6px; }
.item .label { color: var(--tone, var(--neutral)); }
.donut { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.donut svg { width: 150px; max-width: 100%; height: auto; flex: none; }
.encbox .dleg { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1 1 180px; min-width: 0; font-size: 0.92rem; }
.dleg li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; align-items: start; }
.dleg i { width: 14px; height: 14px; border-radius: 3px; margin-top: 4px; }

/* ---------- Texte « Nouvelle version » (réglage par défaut, décision de Jo du 20 octobre 2026) ---------- */
/* Encre brun gris sur papier : contraste 11:1 au lieu de 15 à 17:1 ; titres en Cormorant Garamond */
:root[data-texte="doux"] { --bg: #F5F1E9; --surface: #FBF8F2; --ink: #3B342D; --muted: #6B6258; --line: #DDD5C7; }
@media (prefers-color-scheme: dark) { :root[data-texte="doux"]:not([data-theme="light"]):not([data-wit-theme]) { --bg: #1B1915; --surface: #24211C; --ink: #DCD4C6; --muted: #A99F90; --line: #3A352D; } }
:root[data-texte="doux"][data-theme="dark"]:not([data-wit-theme]), :root[data-texte="doux"][data-wit-theme="sombre"] { --bg: #1B1915; --surface: #24211C; --ink: #DCD4C6; --muted: #A99F90; --line: #3A352D; }
:root[data-texte="doux"] h1, :root[data-texte="doux"] h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; text-transform: none; letter-spacing: 0; }
:root[data-texte="doux"] h1 { font-size: clamp(2.3rem, 6.4vw, 3.5rem); line-height: 1.02; }
:root[data-texte="doux"] h2 { font-size: 2rem; line-height: 1.08; }

/* ---------- Thèmes daltoniens (première version, à affiner avec C3) ----------
   Les couleurs qui portent un sens (bon ou mauvais, saisons, feuillage, raisin) passent sur des teintes
   qui restent distinctes ; le texte et le fond suivent le réglage « Texte ». */
:root[data-wit-theme="rouge-vert"] {
  --accent: #8A3B12; --good: #0072B2; --bad: #D55E00;
  --winter: #0072B2; --spring: #009E73; --summer: #B07A00; --autumn: #D55E00; --neutral: #5B4B6B;
  --sky-sp: #D3EAF2; --sky-au: #F6D9B8;
  --hill: #9FB7AE; --hill2: #7C9A90; --leaf: #3F9A84; --leaf2: #1F6F60; --leafAu: #E69F00; --leafAu2: #D55E00;
  --grapeG: #E8DC5A;
}
:root[data-wit-theme="bleu-jaune"] {
  --accent: #A3214A; --good: #007A5A; --bad: #CC3311;
  --winter: #4F5D75; --spring: #2F7A45; --summer: #A3214A; --autumn: #CC3311; --neutral: #5B4B6B;
  --sky-w: #D9DEE2; --sky-su: #F4D9CC; --ice: #A9CFE0; --sun: #E8A07A;
  --leaf: #4D8A5A; --leaf2: #2F5F3A; --leafAu: #D55E00; --leafAu2: #9A2F1F;
  --grapeG: #B9C98A;
}
/* ---------- Lecture facilitée : police très lisible, corps plus grand, interligne aéré, pas d'italique ---------- */
:root[data-wit-theme="facile"] body { font-family: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif; font-size: 18.5px; line-height: 1.65; letter-spacing: 0.01em; }
:root[data-wit-theme="facile"] h1, :root[data-wit-theme="facile"] h2 { font-family: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif; font-weight: 700; text-transform: none; letter-spacing: 0; }
:root[data-wit-theme="facile"] h1 { font-size: clamp(2rem, 5.6vw, 2.9rem); line-height: 1.1; }
:root[data-wit-theme="facile"] h2 { font-size: 1.6rem; line-height: 1.15; }
:root[data-wit-theme="facile"] h3 { font-family: inherit; }
:root[data-wit-theme="facile"] .ask p, :root[data-wit-theme="facile"] em, :root[data-wit-theme="facile"] i { font-style: normal; }
:root[data-wit-theme="facile"] .txt p, :root[data-wit-theme="facile"] .lede { max-width: 70ch; }
:root[data-wit-theme="facile"] .note { font-size: 0.95rem; }

/* ---------- En-tête : retour à l'atlas et préférences d'affichage ---------- */
.toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toprow .back { margin: 0; }
.prefs-btn { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); }
.prefs-btn:hover { border-color: var(--ink); }
.prefs { border: 2px solid var(--ink); border-radius: 6px; background: var(--surface); padding: 12px 14px; }
.prefs-in { display: flex; flex-direction: column; gap: 10px; }
.prefs-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.prefs fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.prefs legend { padding: 0; margin-bottom: 4px; width: 100%; }
.prefs .opt { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 8px; cursor: pointer; font-size: 0.95rem; }
.prefs .opt:has(input:checked) { border-color: var(--accent); color: var(--accent); }
.prefs .opt input { accent-color: var(--accent); margin: 0; }
.prefs .opt:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Gabarit unique : volets d'une même section, renvois, mots indexés, liste ---------- */
.planche.suite { border-top: 1.5px dashed var(--line); padding-top: 22px; }
a.ref { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
a.mot { color: inherit; text-decoration: underline dotted var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a.mot:hover { color: var(--accent); }
.flist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.flist a { display: block; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); text-decoration: none; }
.flist a:hover { border-color: var(--accent); color: var(--accent); }
.txt.full { grid-column: 1 / -1; }

/* ---------- C16 : dessins au lavis (charte graphique v1.0) ---------- */
svg.wit.scene, svg.wit.hs { border: 0; box-shadow: none; border-radius: 3px; }
.trains { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.wine svg.wit.bt { background: transparent; }
/* ---------- C8 : en bref, risques, profils, encépagement ---------- */
.bref { margin-top: 14px; border: 2px solid var(--ink); border-radius: 12px; padding: 14px 16px 10px; background: var(--surface); }
.bref h2 { margin: 0 0 10px; font-size: 1.25rem; }
.bref .blk { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px 22px; }
.bref .bl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bref .bl > div:last-child { display: flex; flex-direction: column; gap: 4px; }
.bref p { margin: 0; }
.bref .label { color: var(--accent); }
ul.fx, ul.rq, ul.hm { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 0.95rem; }
ul.hm { list-style: disc; padding-left: 1.1em; }
ul.fx li, ul.rq li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
ul.fx li > span:first-child, ul.rq li > span:first-child { flex: 1 1 140px; min-width: 0; }
.val { color: var(--muted); font-size: 0.9rem; }
a.voir { font-family: var(--font-label); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); text-decoration: none; margin-top: 2px; }
a.voir::before { content: "→ "; }
.risques { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.risques h3 { margin: 0 0 6px; font-size: 1.05rem; }
.risques ul.rq { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 4px 24px; margin: 8px 0 16px; }
.risques .proches { border: 1.5px dashed var(--line); border-radius: 8px; padding: 10px 12px; }
.profils { margin-top: 18px; }
table.prof { border-collapse: collapse; width: 100%; min-width: 320px; font-size: 0.92rem; }
table.prof th, table.prof td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; }
table.prof thead th { font-family: var(--font-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; color: var(--muted); }
.dleg .rang { font-family: var(--font-label); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; white-space: nowrap; }

/* C9 : Régions les plus proches */
.prl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.prl .pr { border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--surface); display: grid; gap: 4px; min-width: 0; }
.prl .pr-t a { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--accent); }
.prl .pr-t a:hover { color: var(--accent); }
.prl .pr-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.prl .pr-pc { font-size: 1.35rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.prl .pr-x { margin: 0; font-size: 0.9rem; color: var(--muted); }
.prl .tag { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; }

/* Une carte pour résumer : carte OpenStreetMap en tête de la section 1 (Jo, 29 octobre) */
.carte-osm { margin: 4px 0 0; border: 1px solid var(--line, #d8d0c0); border-radius: 8px; overflow: hidden; background: var(--bg); }
.carte-osm iframe { display: block; width: 100%; height: min(78vh, 760px); min-height: 460px; border: 0; }
@media (max-width: 760px) { .carte-osm iframe { height: 86vh; min-height: 520px; } }
.carte-osm-lien { margin: 8px 0 0; text-align: right; }
.carte-osm { position: relative; }
.carte-osm-fermer { display: none; }
.carte-osm:fullscreen, .carte-osm.agrandie { display: flex; flex-direction: column; margin: 0; border: 0; border-radius: 0; }
.carte-osm.agrandie { position: fixed; inset: 0; z-index: 2147483000; }
.carte-osm:fullscreen iframe, .carte-osm.agrandie iframe { flex: 1; height: auto; min-height: 0; }
.carte-osm:fullscreen .carte-osm-fermer, .carte-osm.agrandie .carte-osm-fermer { display: block; position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 2; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
html.carte-agrandie, html.carte-agrandie body { overflow: hidden; }

/* « Pour résumer » en sections (règle de Jo, 31 octobre 2026) : une ligne sautée entre sections, mots de tête en gras soulignés */
.exam.sections p.rs + p.rs { margin-top: .9em; }
.exam.sections b.tete { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }