/* ECO-DICO — fontes auto-hébergées (sous-ensembles latin + latin-ext).
   Aucune requête vers les serveurs de fontes de Google : FAIRĒKO est
   belge, les fontes restent chez FAIRĒKO. Fichiers woff2 dans fonts/,
   téléchargés une fois, servis par nous (RGPD). */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/dico-eco/fontes/ibm-plex-mono-latin-ext-400.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/dico-eco/fontes/ibm-plex-mono-latin-400.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/dico-eco/fontes/ibm-plex-mono-latin-ext-500.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/dico-eco/fontes/ibm-plex-mono-latin-500.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/dico-eco/fontes/ibm-plex-sans-latin-ext-400.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/dico-eco/fontes/ibm-plex-sans-latin-400.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/dico-eco/fontes/ibm-plex-sans-latin-ext-500.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/dico-eco/fontes/ibm-plex-sans-latin-500.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/dico-eco/fontes/ibm-plex-sans-latin-ext-600.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/dico-eco/fontes/ibm-plex-sans-latin-600.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/dico-eco/fontes/source-serif-4-latin-ext-400.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/dico-eco/fontes/source-serif-4-latin-400.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/dico-eco/fontes/source-serif-4-latin-ext-500.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/dico-eco/fontes/source-serif-4-latin-500.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/dico-eco/fontes/source-serif-4-latin-ext-600.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/dico-eco/fontes/source-serif-4-latin-600.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;
}

/* ═══════════════════════════════════════════════════════════════════
   ECO-DICO — la feuille des tokens. Une seule source pour les deux
   thèmes ; aucune couleur en dur dans les gabarits. Les valeurs
   viennent du handoff (design_handoff_eco_dico/README.md), qui fait
   foi sur l'apparence : on ne les « améliore » pas ici.

   Règles non négociables portées par cette feuille :
   · aucun arrondi nulle part — angles vifs ;
   · --terra est RÉSERVÉ au bloc « Erreur fréquente » et aux faux-amis,
     et n'apparaît dans aucun autre sélecteur (fait_dico.py le vérifie) ;
   · focus clavier : 2 px végétal décalé de 2 px, jamais l'outline
     navigateur ;
   · filets 2 px encre pour les séparations fortes, 1 px --line ailleurs.

   Le mode sombre bascule par data-theme="dark" posé sur <html>.
   ═══════════════════════════════════════════════════════════════════ */

#eco-dico {
  /* Marqueur d'authenticité. Inerte : aucune règle ne la lit. Elle
     survit à une reprise de la feuille de style, là où une variable
     JavaScript meurt. Voir marqueurs_dico.py. */
  --co-emp: "ED‑FR73990126906‑2026";
  /* fonds */
  --bg: #f4efe3;          /* papier chaux — jamais de blanc pur */
  --bg-raised: #faf6ea;   /* surfaces relevées : masthead, champs, infobulle */
  /* encres */
  --ink: #211d15;         /* texte principal, filets forts */
  --ink-soft: #5c5442;    /* gris chaud — texte secondaire */
  --line: #ddd3bc;        /* filets fins 1 px, bordures */
  --line-strong: #211d15; /* filets 2 px — têtes de tableau, séparations */
  /* végétal — structure, liens, bloc « chantier », facettes actives */
  --veg: #2e4636;
  --veg-deep: #22362a;    /* pressé / survol */
  --veg-tint: #e9ebdc;    /* fond du bloc chantier, facette active */
  /* terre cuite — UNIQUEMENT « Erreur fréquente » et Faux-amis */
  --terra: #a8481f;
  --terra-bg: #f2e3d4;
  --terra-line: #cf9770;
  /* fontes (auto-hébergées, voir fonts.css) */
  --sans: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --serif: 'Source Serif 4', Georgia, serif;
}

[data-theme="dark"] #eco-dico {
  --bg: #1c1913;
  --bg-raised: #26221a;
  --ink: #ece4d0;
  --ink-soft: #a89d84;
  --line: #3d3728;
  --line-strong: #ece4d0;
  --veg: #93b89d;
  --veg-deep: #aecab6;
  --veg-tint: #2a3229;
  --terra: #d98554;
  --terra-bg: #362417;
  --terra-line: #6e4327;
}

/* ── socle ──────────────────────────────────────────────────────── */

#eco-dico {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  min-height: 100vh;
}
#eco-dico *, #eco-dico *::before, #eco-dico *::after { box-sizing: border-box; }

#eco-dico a {
  color: var(--veg);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--veg) 45%, transparent);
  text-underline-offset: 3px;
}
#eco-dico a:hover { color: var(--veg-deep); text-decoration-color: var(--veg); }

/* Posé sur le site, le thème d'Odoo impose SA fonte aux titres et aux
   textes (Poppins) : une règle qui vise h1 directement bat notre
   font-family héritée du conteneur. On la reprend en forçant l'héritage,
   avec une spécificité volontairement basse — (0,0,1), gagnée par
   l'ordre puisque notre feuille est chargée après celle du thème. Nos
   propres titres en sans ou en mono (facettes, bandeaux, replis) portent
   une classe, donc plus spécifique : ils gardent leur fonte. */
:where(#eco-dico) h1, :where(#eco-dico) h2, :where(#eco-dico) h3,
:where(#eco-dico) h4, :where(#eco-dico) p, :where(#eco-dico) li,
:where(#eco-dico) td, :where(#eco-dico) th, :where(#eco-dico) a,
:where(#eco-dico) span, :where(#eco-dico) strong, :where(#eco-dico) em,
:where(#eco-dico) summary, :where(#eco-dico) figcaption {
  font-family: inherit;
}

#eco-dico :focus-visible { outline: 2px solid var(--veg); outline-offset: 2px; }
#eco-dico ::selection { background: var(--veg-tint); }
#eco-dico button { font-family: var(--sans); }
#eco-dico sub { line-height: 0; }

/* ═══════════════════════════════════════════════════════════════════
   ECO-DICO — composants d'écran. Classes préfixées de- (le handoff
   l'exige : « classes sobres et prévisibles »). L'écran 2 (fiche
   desktop) d'abord : c'est lui qui valide la fidélité, tout le reste
   en découle. Chaque valeur (px, graisses, interlettrage) vient du
   prototype ECO-DICO.dc.html — ne pas arrondir, ne pas interpréter.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Masthead ECO-DICO — chaque page du dico porte le sien (patron
      maison : l'en-tête du thème Odoo est masqué à la pose) ───────── */
.de-masthead { border-bottom: 1px solid var(--line); background: var(--bg-raised); }
.de-masthead-int {
  max-width: 1160px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; gap: 28px; height: 64px;
}
.de-marque {
  font-family: var(--sans); font-weight: 600; letter-spacing: 0.14em;
  font-size: 15px; color: var(--ink); text-decoration: none;
}
#eco-dico a.de-marque { color: var(--ink); text-decoration: none; }
.de-nav { display: flex; gap: 20px; font-family: var(--sans); font-size: 13.5px; }
#eco-dico .de-nav a { color: var(--ink-soft); text-decoration: none; }
#eco-dico .de-nav a:hover { color: var(--ink); }
#eco-dico .de-nav a[aria-current="page"] {
  color: var(--ink); font-weight: 600;
  border-bottom: 2px solid var(--veg); padding-bottom: 2px;
}
.de-ressort { flex: 1; }
.de-terr { display: flex; border: 1px solid var(--ink); font-family: var(--sans); }
.de-terr button {
  border: none; cursor: pointer; padding: 5px 12px; font-size: 13px;
  background: transparent; color: var(--ink);
}
.de-terr button[aria-pressed="true"] {
  background: var(--ink); color: var(--bg); font-weight: 600;
}
.de-langues { font-family: var(--sans); font-size: 12px; color: var(--ink-soft); }

/* ── Gabarit de page ────────────────────────────────────────────── */
.de-page { max-width: 1160px; margin: 0 auto; padding: 40px 32px 96px; }
.de-fil { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); margin-bottom: 28px; }
#eco-dico .de-fil a { color: var(--ink-soft); }
.de-fil [aria-current="page"] { color: var(--ink); }

/* ── Fiche : colonne principale + latérale collante ─────────────── */
.de-fiche { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; }
.de-colonne { max-width: 680px; }

.de-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; font-family: var(--sans); }
.de-tag {
  font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--ink-soft); padding: 3px 9px;
}

.de-titre {
  font-size: 46px; margin: 0 0 6px; font-weight: 600;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.de-annotation { font-family: var(--mono); font-size: 20px; color: var(--veg); font-weight: 400; }

/* bloc 1 — définition courte, dominante */
.de-definition { font-size: 24px; line-height: 1.45; margin: 20px 0 0; font-weight: 500; text-wrap: pretty; }
.de-citable { font-family: var(--sans); font-size: 12px; color: var(--ink-soft); margin: 10px 0 0; }

/* bloc 2 — explication */
.de-explication { font-size: 16.5px; line-height: 1.65; color: var(--ink); margin: 28px 0 0; max-width: 62ch; }

/* schéma de paroi en coupe — le seul visuel que le design admet
   (« seuls schémas de paroi en coupe et données sont admis »).
   SVG aux couleurs des tokens : il bascule avec le thème. */
.de-schema { margin: 32px 0 0; border: 1px solid var(--line); background: var(--bg-raised); padding: 20px; }
/* le cadre porte le défilement (mobile) et l'étiquette accessible ; il est
   focalisable pour qu'on puisse le faire défiler au clavier */
.de-schema-cadre { overflow-x: auto; }
/* Un schéma réduit à la largeur d'un téléphone est un timbre-poste : à
   340 px de large, son texte de 12 px tombe à 5 px. Il garde donc sa
   taille de dessin — celle de son viewBox, posée par la fabrique en
   --schema-large — et défile dans son cadre.
   Le plafond de 630 px tient sous la largeur utile de la colonne de
   fiche (680 px moins la bordure et les 2 × 20 px de padding = 638) :
   sans cette marge, un dessin trop large déborderait et le grand écran
   hériterait d'une barre de défilement pour rien. C'est une ceinture :
   la fabrique refuse déjà tout schéma de plus de 620 unités, largeur à
   laquelle le dessin tombe à 1:1 dans la colonne. */
.de-schema svg { display: block; width: 100%; height: auto;
  min-width: min(var(--schema-large, 0px), 630px); }
/* la ligne d'annonce ne s'affiche que si le cadre déborde vraiment —
   l'état est posé par le script, qui seul connaît la largeur rendue */
.de-schema-glisser { display: none; font-family: var(--sans); font-size: 12px; color: var(--ink-soft); margin: 0 0 10px; }
.de-schema[data-defile="oui"] .de-schema-glisser { display: block; }
.de-schema figcaption { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); margin-top: 12px; }

/* bloc 3 — « Ce que ça change en chantier », bloc signature :
   il doit se voir en vision périphérique */
.de-chantier { border: 2px solid var(--veg); margin: 36px 0 0; background: var(--veg-tint); }
.de-chantier-titre {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bg); background: var(--veg);
  margin: 0; padding: 9px 20px; font-weight: 600;
}
.de-chantier-corps { padding: 20px 20px 22px; font-size: 16.5px; line-height: 1.6; }
.de-chantier-corps p { margin: 0 0 12px; }
.de-chantier-corps p:last-child { margin: 0; }

/* bloc 4 — « Erreur fréquente », alerte : seul emploi de --terra
   avec les faux-amis */
.de-erreur { border-left: 4px solid var(--terra); background: var(--terra-bg); padding: 18px 22px; margin: 20px 0 0; }
.de-erreur-titre {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--terra); margin: 0 0 8px; font-weight: 600;
}
.de-erreur p { font-size: 16.5px; line-height: 1.6; margin: 0; }

/* bloc 5 — ordres de grandeur */
.de-grandeurs { margin: 40px 0 0; }
.de-grandeurs h2 { font-size: 20px; margin: 0 0 4px; font-weight: 600; }
.de-cadre { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); margin: 0 0 14px; }
.de-grandeurs table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 14.5px; }
.de-grandeurs th { text-align: left; border-bottom: 2px solid var(--line-strong); padding: 8px 12px 8px 0; font-weight: 600; }
.de-grandeurs th.de-val { text-align: right; padding: 8px 0; }
.de-grandeurs th.de-role { padding: 8px 0 8px 24px; }
.de-grandeurs td { border-bottom: 1px solid var(--line); padding: 9px 12px 9px 0; }
.de-grandeurs td.de-val { padding: 9px 0; text-align: right; font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.de-grandeurs td.de-role { padding: 9px 0 9px 24px; color: var(--ink-soft); }
.de-grandeurs-note { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 0; }

/* bloc 6 — systèmes concernés : UN seul lien commercial, maximum */
.de-systemes { margin: 40px 0 0; border-top: 1px solid var(--line); padding-top: 24px; }
.de-systemes h2 { font-size: 20px; margin: 0 0 12px; font-weight: 600; }
.de-systemes ul { margin: 0; padding: 0 0 0 20px; font-size: 16px; line-height: 1.9; }
.de-systemes-liens { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 18px; font-family: var(--sans); font-size: 14px; }
.de-lien-calotra { font-weight: 600; }

/* bloc 7 — source normative */
.de-normes { margin: 36px 0 0; border-top: 1px solid var(--line); padding-top: 20px; }
.de-normes h2 {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; font-weight: 600;
}
.de-normes-chips { display: flex; gap: 10px; flex-wrap: wrap; font-family: var(--sans); font-size: 13px; }
.de-norme { border: 1px solid var(--line); padding: 5px 12px; color: var(--ink); }

/* latérale */
.de-laterale { border-left: 1px solid var(--line); padding-left: 28px; align-self: start; position: sticky; top: 24px; }
.de-laterale h2 {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 14px; font-weight: 600;
}
.de-lies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#eco-dico .de-lies a, .de-lie-avenir {
  display: block; font-size: 15.5px; padding: 7px 0;
  border-bottom: 1px solid var(--line); text-decoration: none;
}
.de-lie-avenir { color: var(--ink-soft); }
.de-lies .de-sym { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.de-laterale-note { margin-top: 24px; font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
.de-laterale-note strong { color: var(--ink); }

/* état vide explicite — un bloc ne disparaît jamais */
.de-vide { border: 1px solid var(--line); padding: 14px 16px; font-family: var(--sans); font-size: 13.5px; color: var(--ink-soft); }

/* pied */
.de-pied { border-top: 1px solid var(--line); font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); margin-top: 96px; }
.de-pied-int { max-width: 1160px; margin: 0 auto; padding: 20px 32px; display: flex; gap: 32px; flex-wrap: wrap; }
#eco-dico .de-pied a { color: var(--ink-soft); }

/* ── Bascule de territoire : les deux cadres vivent dans la page,
      l'attribut data-terr du conteneur choisit celui qu'on montre.
      Rien en stockage navigateur — un cookie, posé au clic. */
#eco-dico[data-terr="BE"] [data-terr-only="FR"] { display: none; }
#eco-dico[data-terr="FR"] [data-terr-only="BE"] { display: none; }

/* ── Écran 1 · l'accueil. La recherche domine ; l'index alphabétique
      n'est qu'un lien de pied — jamais une porte d'entrée. ──────────── */
.de-accueil { padding: 64px 32px 96px; }

/* Le héros : les mots à gauche, l'ouvrage à droite. Le livre n'est pas
   un décor — c'est l'objet dont la page parle, détouré, posé sans cadre
   ni ombre ajoutée. Il tient sur le papier chaux comme sur le fond
   sombre puisque son fond est transparent.

   La page se partage en deux moitiés : les mots à gauche, l'ouvrage
   centré dans la sienne. Il garde un plafond — il annonce l'objet,
   il ne dispute pas le titre.

   Et il se POSE sur la barre de recherche : aucune marge entre les
   deux, son pied touche le filet du champ. */
.de-hero { display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: end; margin-bottom: 0; }
.de-hero-mots { padding-bottom: 24px; }
.de-hero-mots > :last-child { margin-bottom: 0; }
.de-hero-livre { width: 100%; max-width: 344px; height: auto;
  display: block; margin-inline: auto; }

.de-kicker { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px; }
.de-grand-titre { font-size: 52px; line-height: 1.05; margin: 0 0 8px; font-weight: 600;
  max-width: 15ch; }
.de-sous-titre { font-size: 18px; color: var(--ink-soft); max-width: 52ch; margin: 0 0 40px; line-height: 1.5; }

/* Seulement sur téléphone l'ouvrage cède la colonne : il passe à côté du
   kicker, petit, pour que la recherche reste haute — c'est elle qu'on
   vient chercher. Réglé plus bas, dans le bloc des 560 px. */

/* le champ court jusqu'au même bord droit que la grille des familles */
.de-recherche { max-width: none; margin: 0 0 16px; }
.de-recherche-champ { display: flex; border: 2px solid var(--ink); background: var(--bg-raised); }
.de-recherche-champ input { flex: 1; border: none; background: transparent; font-family: var(--sans);
  font-size: 17px; padding: 16px 18px; color: var(--ink); outline: none; min-width: 0; }
.de-recherche-champ input::placeholder { color: var(--ink-soft); opacity: 1; }
.de-recherche-bouton { background: var(--veg); color: var(--bg); border: none;
  font-size: 15px; font-weight: 600; padding: 0 28px; cursor: pointer; }
.de-recherche-bouton:hover { background: var(--veg-deep); }
.de-recherche-note, .de-recherche-reponse { font-family: var(--sans); font-size: 12.5px;
  color: var(--ink-soft); margin: 8px 2px 0; }
.de-recherche-reponse { color: var(--ink); }

.de-problemes { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 64px; font-family: var(--sans); }
.de-problemes-label { font-size: 13px; color: var(--ink-soft); }
#eco-dico a.de-chip { font-size: 13.5px; border: 1px solid var(--line); color: var(--ink);
  padding: 6px 14px; text-decoration: none; }
#eco-dico a.de-chip:hover { border-color: var(--veg); color: var(--veg); }

.de-familles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--line); border-top: 2px solid var(--line-strong); margin: 0 0 72px; }
#eco-dico a.de-famille { background: var(--bg); padding: 20px 16px 24px;
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
#eco-dico a.de-famille:hover { background: var(--bg-raised); }
.de-fam-num { font-family: var(--mono); font-size: 12px; color: var(--veg); }
.de-fam-nom { font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink); }
.de-fam-compte { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); }

.de-fauxamis { border: 1px solid var(--terra-line); background: var(--terra-bg);
  padding: 28px 32px; margin: 0 0 64px; }
.de-fauxamis-tete { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.de-fauxamis-tete h2 { font-size: 22px; margin: 0; color: var(--terra); font-weight: 600; }
.de-fauxamis-tete span { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }
.de-fauxamis-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; }
#eco-dico .de-fauxami { display: flex; align-items: baseline; gap: 10px; text-decoration: none;
  color: var(--ink); font-size: 16px; padding: 6px 0; border-bottom: 1px solid var(--terra-line); }
.de-fauxami strong { font-weight: 600; }
.de-fauxami .de-differe { font-family: var(--mono); color: var(--terra); font-size: 14px; }

.de-accueil-pied { display: flex; gap: 48px; font-family: var(--sans); font-size: 13.5px;
  border-top: 1px solid var(--line); padding-top: 20px; }
#eco-dico .de-accueil-pied a { color: var(--ink-soft); }
#eco-dico .de-accueil-pied a:hover { color: var(--veg); }

/* les libellés néerlandais gonflent d'environ 30 % : la grille des
   familles s'assouplit avant de tronquer */
@media (max-width: 900px) {
  .de-familles { grid-template-columns: 1fr 1fr; }
  .de-familles .de-famille:last-child { grid-column: 1 / -1; }
}

/* ── Écran 4 · résultats à facettes. Une LISTE séparée par filets,
      jamais une grille de cartes ; des mots dans les facettes, jamais
      d'icônes ; l'état dans l'URL, jamais dans le navigateur. ───────── */
.de-resultats { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; }
.de-facettes-corps h2 {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 16px; font-weight: 600;
}
.de-facette-groupe { margin-bottom: 22px; }
.de-facette-groupe h3 { font-family: var(--sans); font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.de-facette-options { display: flex; flex-direction: column; gap: 2px; }
.de-facette {
  text-align: left; border: none; cursor: pointer; padding: 6px 10px;
  display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--sans); font-size: 13.5px;
  background: transparent; color: var(--ink); border-left: 3px solid transparent;
}
.de-facette[aria-pressed="true"] {
  background: var(--veg-tint); color: var(--veg); font-weight: 600;
  border-left: 3px solid var(--veg);
}
.de-facette .de-fcompte { color: var(--ink-soft); font-weight: 400; }

.de-facettes-actives { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-family: var(--sans); }
/* l'attribut hidden doit gagner sur le display de classe */
#eco-dico [hidden] { display: none; }
.de-actives-label { font-size: 13px; color: var(--ink-soft); }
.de-actives-chips { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.de-chip-active {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--veg); color: var(--bg); border: none;
  font-size: 13px; padding: 6px 12px; cursor: pointer;
}
.de-chip-active:hover { background: var(--veg-deep); }
.de-chip-active .de-croix { font-size: 15px; line-height: 1; }
.de-tout-retirer {
  background: none; border: none; color: var(--ink-soft); font-size: 13px;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

.de-compte {
  font-family: var(--sans); font-size: 13.5px; font-weight: 400; color: var(--ink-soft);
  margin: 0 0 24px; border-bottom: 2px solid var(--line-strong); padding-bottom: 14px;
}
.de-liste-corps { display: flex; flex-direction: column; }
#eco-dico a.de-resultat { display: block; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); padding: 20px 0; }
#eco-dico a.de-resultat:hover { background: var(--bg-raised); }
.de-resultat-tete { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.de-res-nom { font-size: 20px; font-weight: 600; }
.de-res-sym { font-family: var(--mono); font-size: 13px; color: var(--veg); }
.de-res-fam { font-family: var(--sans); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-left: auto; }
.de-res-extrait { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); max-width: 68ch; }
.de-res-avenir { display: block; border-bottom: 1px solid var(--line); padding: 20px 0; color: var(--ink-soft); }
.de-res-avenir .de-res-sym { color: var(--ink-soft); }

.de-sugg-titre {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); margin: 28px 0 0; font-weight: 600;
}
.de-suggestions { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
#eco-dico a.de-suggestion {
  font-family: var(--serif); font-size: 16px; border: 1px solid var(--line);
  color: var(--ink); padding: 9px 18px; text-decoration: none;
}
#eco-dico a.de-suggestion:hover { border-color: var(--veg); color: var(--veg); }

/* ── Écrans 5 et 6 · les index. Des pages entièrement servies, sans
      script : l'index n'est qu'un index — jamais une porte d'entrée. ── */
.de-titre-ecran { font-size: 36px; margin: 0 0 6px; font-weight: 600; }
.de-sous-ecran { font-family: var(--sans); font-size: 14px; color: var(--ink-soft);
  margin: 0 0 32px; max-width: 60ch; line-height: 1.6; }

.de-lettres { display: flex; gap: 2px; flex-wrap: wrap; font-family: var(--sans); font-size: 13px;
  margin-bottom: 40px; border-bottom: 2px solid var(--line-strong); padding-bottom: 16px; }
#eco-dico .de-lettres a { padding: 5px 9px; min-width: 20px; text-align: center;
  text-decoration: none; color: var(--veg); font-weight: 600; }
.de-lettres span { padding: 5px 9px; min-width: 20px; text-align: center; color: var(--line); }

.de-colonnes { column-count: 3; column-gap: 56px; }
.de-groupe-lettre { break-inside: avoid; margin-bottom: 32px; }
.de-groupe-lettre h2 { font-size: 26px; margin: 0 0 10px; color: var(--veg);
  border-bottom: 1px solid var(--line); padding-bottom: 6px; font-weight: 600; }
.de-groupe-lettre ul { list-style: none; margin: 0; padding: 0; }
#eco-dico .de-groupe-lettre a { display: block; font-size: 15.5px; padding: 5px 0;
  text-decoration: none; color: var(--ink); }
#eco-dico .de-groupe-lettre a:hover { color: var(--veg); }
.de-groupe-lettre .de-lie-avenir { display: block; font-size: 15.5px; padding: 5px 0; border-bottom: none; }
.de-groupe-lettre .de-sym { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }

.de-defile { overflow-x: auto; }
.de-table-symboles { width: 100%; border-collapse: collapse; font-family: var(--sans);
  font-size: 15px; min-width: 560px; }
.de-table-symboles th { text-align: left; border-bottom: 2px solid var(--line-strong);
  padding: 10px 16px 10px 0; font-weight: 600; }
.de-col-sym { width: 90px; }
.de-col-unite { width: 120px; }
.de-table-symboles td { border-bottom: 1px solid var(--line); padding: 13px 16px 13px 0; }
.de-tsym { font-family: var(--mono); font-size: 17px; color: var(--veg); }
.de-tunite { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
#eco-dico .de-tnom a { text-decoration: none; color: var(--ink); font-weight: 600; }
#eco-dico .de-tnom a:hover { color: var(--veg); }
.de-tnom .de-lie-avenir { border-bottom: none; display: inline; padding: 0; font-weight: 600; }
.de-tdit { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }

/* ── Écran 8 · l'état sans résultat de la recherche : la page se
      resserre, le champ revient, la proposition s'ouvre ─────────────── */
.de-recherche-encart { margin: 0 0 36px; max-width: none; }
.de-recherche-encart input { padding: 14px 18px; }
.de-resultats.de-etat-vide { display: block; max-width: 720px; }
.de-etat-vide .de-facettes { display: none; }
.de-compte-grand { font-family: var(--serif); font-size: 30px; font-weight: 600;
  color: var(--ink); border-bottom: none; padding-bottom: 0; margin: 0 0 10px; }
.de-vide-explication { font-size: 16px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 28px; }
.de-proposer { border-top: 2px solid var(--line-strong); padding-top: 24px; margin-top: 44px; }
.de-proposer h2 { font-size: 20px; margin: 0 0 8px; font-weight: 600; }
.de-proposer p { font-family: var(--sans); font-size: 14px; color: var(--ink-soft);
  margin: 0 0 16px; line-height: 1.6; }
.de-proposer-ligne { display: flex; gap: 10px; flex-wrap: wrap; }
.de-proposer-ligne input { border: 1px solid var(--line); background: var(--bg-raised);
  font-family: var(--sans); font-size: 14.5px; padding: 10px 14px; color: var(--ink);
  flex: 1; min-width: 200px; }
.de-proposer-bouton { background: var(--veg); color: var(--bg); border: none;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600; padding: 10px 24px; cursor: pointer; }
.de-proposer-bouton:hover { background: var(--veg-deep); }
.de-proposer-bouton:disabled { cursor: default; }
.de-proposer-note { font-family: var(--sans); font-size: 13px; color: var(--ink); margin: 10px 0 0; }

/* ── Chrome propre à l'écran 3 : invisible sur grand écran ─────────── */
.de-marque-dico, .de-cherche, .de-formule { display: none; }
.de-repli { margin: 0; }
.de-repli > .de-repli-titre { display: none; }

/* ── Écrans intermédiaires : une colonne, latérale sous l'article ──── */
@media (max-width: 980px) {
  /* minmax(0, 1fr) et non 1fr : un « 1fr » a pour minimum le min-content
     de son contenu, donc le schéma qui garde sa largeur de dessin
     étirerait la colonne et ferait défiler la PAGE de côté. Avec le
     minimum à 0, le cadre du schéma reprend son rôle : c'est lui qui
     défile, pas la page. */
  .de-fiche { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .de-laterale { border-left: none; border-top: 2px solid var(--line-strong); padding-left: 0; padding-top: 24px; position: static; }
  .de-titre { font-size: 34px; }
  .de-masthead-int { height: auto; padding: 12px 20px; flex-wrap: wrap; gap: 12px 20px; }
  .de-page { padding: 28px 20px 64px; }
  .de-colonnes { column-count: 2; }
}

/* ── Écran 3 · la fiche mobile (≤ 560 px). L'inverse d'un article de
      blog : le pro sur chantier veut la décision d'abord — définition,
      « ce que ça change », erreur — et le contexte replié derrière des
      cibles d'au moins 44 px. Même page, même URL : rien n'est dupliqué,
      l'ordre vient du flex, les replis du JS (sans JS, tout est déplié). */
@media (max-width: 560px) {
  /* l'en-tête compact : la marque du dico, la bascule, la recherche */
  .de-marque, .de-nav, .de-langues { display: none; }
  .de-marque-dico { display: block; font-size: 12px; letter-spacing: 0.1em; }
  #eco-dico a.de-cherche { display: flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; border: 1px solid var(--line);
    color: var(--ink); text-decoration: none; font-size: 15px; }
  .de-masthead-int { padding: 4px 16px; gap: 12px; }
  .de-terr button { font-size: 11px; padding: 4px 10px; min-height: 44px; min-width: 44px; }

  .de-page { padding: 20px 18px 32px; }
  .de-fil, .de-tags, .de-annotation, .de-citable { display: none; }

  /* la hiérarchie stricte, par l'ordre flex — tout enfant non nommé suit
     l'ordre du texte, après les blocs nommés */
  .de-fiche { display: block; }
  .de-colonne { display: flex; flex-direction: column; max-width: none; }
  .de-colonne > * { order: 10; }
  .de-colonne > .de-titre { order: 1; font-size: 30px; margin: 0 0 4px; }
  .de-colonne > .de-formule { order: 2; display: block; font-family: var(--mono);
    font-size: 13px; color: var(--veg); margin: 0 0 16px; }
  .de-colonne > .de-definition { order: 3; font-size: 18.5px; margin: 0; }
  .de-colonne > .de-chantier { order: 4; margin: 20px 0 0; }
  .de-colonne > .de-erreur { order: 5; margin: 12px 0 0; padding: 12px 14px; }
  .de-colonne > .de-repli-explication { order: 6; margin-top: 20px; }
  .de-colonne > .de-schema { order: 7; padding: 14px; }
  .de-colonne > .de-repli-grandeurs { order: 8; }


  /* les replis : un filet, une cible de 44 px, le marqueur végétal */
  .de-repli { border-top: 1px solid var(--line); }
  /* display: list-item — pas flex : le flex mangerait le triangle natif
     et les espaces entre nœuds de texte */
  .de-repli > .de-repli-titre { display: list-item; min-height: 44px; box-sizing: border-box;
    font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink);
    padding: 13px 0; cursor: pointer; }
  .de-repli-titre::marker { color: var(--veg); }
  .de-repli h2, .de-repli .de-cadre { display: none; }
  .de-repli .de-explication { margin: 0 0 14px; font-size: 15px; }

  /* les blocs signature, resserrés comme sur le prototype */
  .de-chantier-titre { font-size: 11.5px; letter-spacing: 0.1em; padding: 8px 14px; }
  .de-chantier-corps { padding: 14px; font-size: 14.5px; line-height: 1.55; }
  .de-chantier-corps p { margin: 0 0 8px; }
  .de-erreur-titre { font-size: 11.5px; letter-spacing: 0.1em; margin: 0 0 6px; }
  .de-erreur p { font-size: 14.5px; line-height: 1.55; }

  /* le tableau à deux colonnes : la couche et sa valeur (le rôle attend
     le grand écran, comme sur le prototype) */
  .de-grandeurs, .de-systemes, .de-normes { margin: 0 0 14px; border-top: none; padding-top: 0; }
  .de-grandeurs table { font-size: 13px; }
  .de-grandeurs th { padding: 6px 8px 6px 0; }
  .de-grandeurs td { padding: 7px 8px 7px 0; }
  .de-grandeurs td.de-val { font-size: 12px; }
  .de-grandeurs th.de-role, .de-grandeurs td.de-role { display: none; }
  .de-systemes ul { font-size: 14.5px; line-height: 1.7; padding-left: 18px; }
  .de-systemes-liens { margin-top: 10px; flex-direction: column; gap: 0; }
  .de-systemes-liens a { display: flex; align-items: center; min-height: 44px; }
  .de-normes-chips { font-size: 12px; }

  /* la latérale devient un repli comme les autres, fermé par un filet */
  .de-laterale { border-top: none; padding-top: 0; }
  .de-laterale .de-repli { border-bottom: 1px solid var(--line); }
  #eco-dico .de-lies a, .de-lie-avenir { min-height: 44px; display: flex; align-items: center; }
  .de-laterale-note { margin: 4px 0 14px; }

  .de-pied { margin-top: 48px; }
  .de-pied-int { padding: 16px 18px; gap: 12px 24px; }

  /* les résultats sur téléphone : « Affiner » replié au-dessus de la liste */
  .de-resultats { display: block; }
  .de-facettes .de-repli { border-bottom: 1px solid var(--line); margin-bottom: 20px; }
  .de-facette { min-height: 44px; align-items: center; }
  .de-chip-active { min-height: 40px; }
  .de-tout-retirer { min-height: 40px; }
  .de-res-nom { font-size: 18px; }

  /* les index sur téléphone */
  .de-titre-ecran { font-size: 28px; }
  .de-colonnes { column-count: 1; }
  #eco-dico .de-lettres a { min-width: 36px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; }
  .de-lettres span { min-width: 36px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; }
  #eco-dico .de-groupe-lettre a, .de-groupe-lettre .de-lie-avenir { min-height: 44px;
    display: flex; align-items: center; }
  .de-proposer-bouton { min-height: 44px; }

  /* l'accueil sur téléphone : l'ouvrage garde sa colonne, étroite —
     il annonce l'objet sans repousser la recherche vers le bas */
  .de-accueil { padding: 32px 18px 48px; }
  .de-hero { grid-template-columns: minmax(0, 1fr) 110px; gap: 16px; margin-bottom: 28px; }
  .de-hero-livre { max-width: 110px; }
  .de-grand-titre { font-size: 34px; }
  .de-sous-titre { font-size: 16px; margin-bottom: 28px; }
  .de-recherche-champ input { font-size: 16px; padding: 13px 14px; }
  .de-recherche-bouton { padding: 0 18px; }
  .de-problemes { margin-bottom: 40px; }
  #eco-dico a.de-chip { min-height: 44px; display: inline-flex; align-items: center; }
  .de-familles { margin-bottom: 48px; }
  #eco-dico a.de-famille { min-height: 44px; }
  .de-fauxamis { padding: 20px 18px; margin-bottom: 40px; }
  .de-fauxamis-grille { grid-template-columns: 1fr; gap: 4px; }
  #eco-dico .de-fauxami { min-height: 44px; align-items: center; }
  .de-accueil-pied { flex-direction: column; gap: 0; }
  #eco-dico .de-accueil-pied a { min-height: 44px; display: flex; align-items: center; }
}