/* ============================================================
   Escale DZ — Design tokens
   Thème Drapeau : vert #006233 · blanc · rouge #d21034
   ============================================================ */

/* — Polices auto-hébergées (variables, sous-ensemble latin = couvre le français, œ inclus).
   Extraites du bundle de design d'origine. font-display:swap → 0 blocage de rendu. — */
@font-face{font-family:'Geist';src:url("/assets/fonts/geist.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url("/assets/fonts/newsreader.woff2") format("woff2");font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url("/assets/fonts/geist-mono.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* symbols2 */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* symbols2 */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

:root {
  /* — Couleurs drapeau — */
  --dz-green-900: #002b16;
  --dz-green-800: #004d28;
  --dz-green-700: #006233;   /* primaire */
  --dz-green-600: #1a7a4a;
  --dz-green-100: #d8ebe0;
  --dz-green-50:  #ecf5ef;
  --dz-green-25:  #f5faf6;

  --dz-red-800:   #8a0a26;
  --dz-red-700:   #b00d2a;
  --dz-red-600:   #d21034;   /* accent */
  --dz-red-50:    #fbecee;

  /* — Encre / neutres — */
  --dz-ink-950:   #07120a;
  --dz-ink-900:   #0d1a12;
  --dz-ink-800:   #1f2a23;
  --dz-ink-700:   #2f3a33;
  --dz-ink-600:   #4a544d;
  --dz-ink-500:   #6a7570;   /* gris doux */
  --dz-ink-400:   #8d958f;
  --dz-ink-300:   #b9c2bd;
  --dz-ink-200:   #d7ddd9;
  --dz-ink-100:   #ebeeec;
  --dz-ink-50:    #f5f7f5;
  --dz-line:      #e4e8e5;
  --dz-line-soft: #eef1ee;
  --dz-bg:        #ffffff;
  --dz-bg-cream:  #faf8f3;
  --dz-bg-soft:   #f7f9f7;

  /* — Sémantique — */
  --dz-fg:          var(--dz-ink-900);
  --dz-fg-muted:    var(--dz-ink-600);   /* 2026-05-30 ink-500(4.78)→ink-600(7.88) : lisibilité texte secondaire (retour Mohamed) */
  --dz-fg-subtle:   var(--dz-ink-400);
  --dz-surface:     #ffffff;
  --dz-surface-2:   var(--dz-bg-soft);
  --dz-surface-3:   var(--dz-bg-cream);

  /* — Typo — */
  --dz-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --dz-serif: 'Newsreader', 'Source Serif Pro', Georgia, serif;
  --dz-mono: 'Geist Mono', ui-monospace, "SF Mono", monospace;
  --dz-display: var(--dz-serif);

  /* Pas de tailles : géré inline via clamp/scale par composant */

  /* — Espace / radius — */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* — Ombres — */
  --sh-soft:  0 1px 2px rgba(0, 38, 24, .04), 0 4px 14px rgba(0, 38, 24, .04);
  --sh-card:  0 1px 2px rgba(0, 38, 24, .05), 0 6px 22px rgba(0, 38, 24, .06);
  --sh-pop:   0 6px 18px rgba(0, 38, 24, .08), 0 24px 60px rgba(0, 38, 24, .12);
  --sh-focus: 0 0 0 3px rgba(0, 98, 51, .22);

  /* — Densité — (refonte premium 2026-05-30 : plus de respiration) — */
  --dens: 1;            /* 0.88 compact, 1 confortable */
  --pad-card: calc(22px * var(--dens));
  --pad-section: calc(66px * var(--dens));
  --gap-3: calc(10px * var(--dens));
  --gap-4: calc(14px * var(--dens));
  --gap-6: calc(20px * var(--dens));
  --gap-8: calc(28px * var(--dens));

  /* — Cards (variation par tweak) — */
  --card-bg: #ffffff;
  --card-border: 1px solid var(--dz-line);
  --card-shadow: none;
  --card-radius: var(--r-lg);

  color-scheme: light;
}

/* ─── Dark mode (institutionnel sombre) ─── */
[data-theme="dark"] {
  --dz-green-700: #2a9b63;
  --dz-green-600: #3eb077;
  --dz-green-100: #1e3b2c;
  --dz-green-50:  #142b1f;
  --dz-green-25:  #0e2017;

  --dz-red-600:   #ef3958;
  --dz-red-50:    #2a131a;

  --dz-fg:        #ecefed;
  --dz-fg-muted:  #98a39c;
  --dz-fg-subtle: #6b7670;
  --dz-surface:   #0e1611;
  --dz-surface-2: #131c16;
  --dz-surface-3: #182219;
  --dz-bg:        #0a120d;
  --dz-bg-cream:  #131c16;
  --dz-bg-soft:   #131c16;

  --dz-ink-900: #ecefed;
  --dz-ink-800: #d6dcd8;
  --dz-ink-700: #b8c0bb;
  --dz-ink-500: #98a39c;
  --dz-ink-400: #74807a;
  --dz-ink-300: #4e5853;
  --dz-ink-200: #2a3530;
  --dz-ink-100: #1d2620;
  --dz-ink-50:  #15201a;
  --dz-line:    #1f2a23;
  --dz-line-soft:#192219;

  --card-bg: var(--dz-surface);
  --card-border: 1px solid var(--dz-line);

  --sh-soft: 0 1px 2px rgba(0,0,0,.4);
  --sh-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --sh-pop:  0 12px 40px rgba(0,0,0,.5);

  color-scheme: dark;
}

/* ─── Card-style tweak variants ─── */
[data-card-style="flat"] {
  --card-bg: var(--dz-bg-soft);
  --card-border: 1px solid transparent;
  --card-shadow: none;
}
[data-card-style="shadow"] {
  --card-bg: var(--dz-surface);
  --card-border: 1px solid transparent;
  --card-shadow: var(--sh-card);
}
[data-card-style="outline"] {
  --card-bg: var(--dz-surface);
  --card-border: 1px solid var(--dz-line);
  --card-shadow: none;
}
[data-theme="dark"][data-card-style="flat"] {
  --card-bg: var(--dz-surface-2);
}

/* ─── Density ─── */
[data-density="compact"] { --dens: 0.85; }
[data-density="comfortable"] { --dens: 1; }

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 66px; } /* header flat ~54px (ex-84 pilule) */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--dz-sans);
  background: var(--dz-bg);
  color: var(--dz-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: 6px; }

/* — Typo helpers — */
.dz-serif { font-family: var(--dz-serif); font-weight: 400; letter-spacing: -0.01em; }
.dz-serif-italic { font-family: var(--dz-serif); font-style: italic; font-weight: 400; }
.dz-mono { font-family: var(--dz-mono); }
[data-serif-titles="false"] .dz-serif,
[data-serif-titles="false"] .dz-display { font-family: var(--dz-sans); font-weight: 600; letter-spacing: -0.02em; }
[data-serif-titles="false"] .dz-serif-italic { font-style: normal; }

/* ============================================================
   Composants
   ============================================================ */

/* — Bandeau drapeau (vert dominant + filet rouge fin, proportions algériennes) — */
.dz-tricolore {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.dz-tricolore > span:nth-child(1) { height: 3px; background: var(--dz-green-700); }
.dz-tricolore > span:nth-child(2) { display: none; }
.dz-tricolore > span:nth-child(3) { height: 1px; background: var(--dz-red-600); }

/* — Buttons — */
.dz-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  font-weight: 500; font-size: 14.5px; letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: default;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
  white-space: nowrap;
}
.dz-btn-primary {
  background: var(--dz-green-700); color: #fff;
}
.dz-btn-primary:hover { background: var(--dz-green-800); }
.dz-btn-secondary {
  background: var(--dz-surface); color: var(--dz-fg); border-color: var(--dz-line);
}
.dz-btn-secondary:hover { border-color: var(--dz-ink-300); }
.dz-btn-ghost {
  background: transparent; color: var(--dz-fg);
}
.dz-btn-ghost:hover { background: var(--dz-ink-50); }
.dz-btn-danger {
  background: var(--dz-red-600); color: #fff;
}
.dz-btn-sm { padding: 7px 12px; font-size: 13px; }
.dz-btn-lg { padding: 14px 24px; font-size: 16px; }

/* — Chips — */
.dz-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--dz-surface);
  border: 1px solid var(--dz-line);
  font-size: 13.5px; font-weight: 500;
  color: var(--dz-fg);
  transition: border-color .15s, background .15s, color .15s;
  cursor: default;
}
.dz-chip:hover { border-color: var(--dz-green-700); color: var(--dz-green-700); }
.dz-chip-solid { background: var(--dz-green-700); color: #fff; border-color: var(--dz-green-700); }
.dz-chip-solid:hover { background: var(--dz-green-800); color: #fff; }

/* — Badges — */
.dz-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px 4px 8px;
  border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--dz-green-50); color: var(--dz-green-800);
}
.dz-badge-verified { background: var(--dz-green-50); color: var(--dz-green-800); }
.dz-badge-updated  { background: var(--dz-green-50); color: var(--dz-green-800); }
.dz-badge-alert    { background: var(--dz-red-50);   color: var(--dz-red-700); }
.dz-badge-info     { background: var(--dz-ink-50);   color: var(--dz-ink-700); }
.dz-badge-new      { background: var(--dz-ink-900);  color: #fff; }
.dz-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* — Cards — */
.dz-card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.dz-card:hover {
  transform: translateY(-2px);
  border-color: var(--dz-green-700);
  box-shadow: var(--sh-card);
}
[data-card-style="outline"] .dz-card:hover { border-color: var(--dz-green-700); }
[data-card-style="shadow"]  .dz-card:hover { box-shadow: var(--sh-pop); }
[data-card-style="flat"]    .dz-card:hover { background: var(--dz-green-25); }
[data-theme="dark"][data-card-style="flat"] .dz-card:hover { background: var(--dz-surface-3); }

/* — Inputs — */
.dz-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--dz-line);
  background: var(--dz-surface);
  color: var(--dz-fg);
  font-size: 15px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.dz-input:focus { outline: none; border-color: var(--dz-green-700); box-shadow: var(--sh-focus); }
.dz-input::placeholder { color: var(--dz-fg-subtle); }
.dz-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236a7570' stroke-width='1.5' d='M3 5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; padding-right: 36px; }

/* — Search field big — */
.dz-search {
  display: flex; align-items: center; gap: 12px;
  background: var(--dz-surface);
  border: 1px solid var(--dz-line);
  border-radius: var(--r-pill);
  padding: 6px 6px 6px 22px;
  box-shadow: var(--sh-soft);
  transition: border-color .15s, box-shadow .15s;
}
.dz-search:focus-within { border-color: var(--dz-green-700); box-shadow: var(--sh-focus); }
.dz-search input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: 16px;
  padding: 12px 0;
  color: var(--dz-fg);
}
.dz-search input::placeholder { color: var(--dz-fg-subtle); }
.dz-search button { flex-shrink: 0; }

/* — Section header — */
.dz-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dz-green-700);
}
.dz-eyebrow::before {
  content: ""; width: 14px; height: 1px; background: var(--dz-green-700);
}

/* — Liens éditoriaux — */
.dz-link {
  color: var(--dz-green-700);
  border-bottom: 1px solid color-mix(in oklab, var(--dz-green-700) 30%, transparent);
  padding-bottom: 1px;
  transition: border-color .15s, color .15s;
}
.dz-link:hover { border-bottom-color: var(--dz-green-700); }

/* — Divider — */
.dz-hr { height: 1px; background: var(--dz-line); border: 0; margin: 0; }

/* — Filigrane croissant-étoile — */
.dz-watermark {
  position: absolute; pointer-events: none; opacity: 0.05;
  color: var(--dz-green-800);
}

/* — Tag liste — */
.dz-tag-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* — Layout — */
.dz-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.dz-container-narrow { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) {
  .dz-container, .dz-container-narrow { padding: 0 20px; }
}

/* — Scrollbar — */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--dz-ink-200); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--dz-ink-300); }

/* — Sélection — */
::selection { background: var(--dz-green-100); color: var(--dz-green-900); }

/* — Anim soft — */
@keyframes dz-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dz-fade-in { animation: dz-fade-in .4s ease both; }

/* — Print — */
@media print { .twk-panel, .dz-tricolore-print-hide { display: none !important; } }

/* ============================================================
   Bledz — Chrome partagé des pages internes (.bz-*)
   Header + hero + sommaire + prose + encadrés + cards + footer.
   Aligné visuellement sur la home (.b-*). Une seule source de vérité.
   ============================================================ */

.bz-skip{position:absolute;left:-9999px}
.bz-skip:focus{left:8px;top:8px;z-index:99;background:#fff;padding:8px 12px;border-radius:8px;box-shadow:var(--sh-pop)}

/* — Header enrichi (méga-menus + recherche) — */
/* Header FLAT éditorial : barre pleine largeur, fin filet bas, sticky (refonte 2026-05-30 — Mohamed « header pas premium », ex-pilule flottante).
   Pilule flottante archivée (réactivable) : top:12px;margin:12px auto 0;width:calc(100%-28px);max-width:1140px;border-radius:20px + ::before vert + .is-scrolled max-width:960. */
.bz-header{position:sticky;top:0;z-index:40;margin:0;width:100%;
  background:color-mix(in srgb,var(--dz-bg) 90%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--dz-line);
  transition:box-shadow .3s ease,background .3s ease,border-color .3s ease}
.bz-header.is-scrolled{background:color-mix(in srgb,var(--dz-bg) 96%,transparent);box-shadow:0 8px 24px -16px rgba(0,42,24,.20)}
.bz-headrow{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:11px 32px}
@media(max-width:720px){.bz-headrow{padding-left:20px;padding-right:20px}}
.bz-logo{display:inline-flex;align-items:center;flex-shrink:0}
.bz-logo img{height:28px;width:auto;display:block}
/* Logo = wordmark live-text (net, scalable, visible). Serif Newsreader.
   Jeu de mots Bled + DZ : « Ble » encre + « dz » VERT (= DZ, Algérie), « Bled » reste lisible (ADR-037). */
.bz-wordmark{font-family:var(--dz-serif);font-weight:500;font-size:28px;line-height:1;letter-spacing:-.016em;color:var(--dz-ink-900);display:block}
.bz-wordmark i{font-style:normal;color:var(--dz-green-700);font-weight:600}
.bz-header.is-scrolled .bz-wordmark{font-size:25px}
.bz-nav{display:flex;align-items:center;gap:2px;margin-left:6px}
.bz-nav>a,.bz-navitem>a{position:relative;display:inline-flex;align-items:center;gap:3px;font-size:14px;font-weight:500;color:var(--dz-ink-700);letter-spacing:-.005em;padding:7px 11px;border-radius:var(--r-sm);white-space:nowrap;transition:color .15s,background .15s}
.bz-nav>a::after,.bz-navitem>a::after{content:"";position:absolute;left:11px;right:calc(100% - 11px);bottom:2px;height:2px;background:var(--dz-green-700);transition:right .22s ease}
.bz-nav>a:hover,.bz-navitem>a:hover{color:var(--dz-green-800)}
.bz-nav>a:hover::after,.bz-navitem>a:hover::after,.bz-nav>a[aria-current]::after,.bz-navitem>a[aria-current]::after{right:11px}
.bz-nav>a[aria-current],.bz-navitem>a[aria-current]{color:var(--dz-green-800)}
.bz-navitem{position:relative}
.bz-caret{width:13px;height:13px;opacity:.6;transition:transform .2s ease}
.bz-navitem.open .bz-caret{transform:rotate(180deg)}
.bz-navitem.open>a{color:var(--dz-green-800);background:var(--dz-green-25)}
/* Lien phare « Mon dossier » (injecté par site.js) — texte vert + point, theme-safe */
.bz-navitem-feat>a{color:var(--dz-green-700);font-weight:600}
.bz-navitem-feat>a::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--dz-green-600);flex:0 0 auto}
.bz-navitem-feat>a::after{display:none}
/* Bloc CTA « Mon dossier » dans le drawer mobile */
.bz-drawer-feat{justify-content:flex-start!important;gap:10px!important;background:var(--dz-green-700)!important;color:#fff!important;border-radius:var(--r-md);font-weight:600;margin-bottom:6px}
.bz-drawer-feat svg{width:20px;height:20px;flex:0 0 auto}
.bz-drawer-feat span{font-weight:400;font-size:12.5px;opacity:.9;margin-left:auto}
.bz-drawer-feat:hover{background:var(--dz-green-800)!important}
/* Bloc partage (injecté par site.js après .bz-sign / sur [data-share-slot]) */
.bz-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:24px 0 0;padding:14px 16px;background:var(--dz-green-25);border:1px solid var(--dz-green-100);border-radius:var(--r-md)}
.bz-share-lbl{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--dz-ink-800);margin-right:2px}
.bz-share-lbl svg{width:17px;height:17px;color:var(--dz-green-700);flex:0 0 auto}
.bz-share-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--dz-green-600);background:var(--dz-surface);color:var(--dz-green-800);cursor:pointer;text-decoration:none;transition:background .15s,transform .15s,border-color .15s}
.bz-share-btn svg{width:15px;height:15px;flex:0 0 auto}
.bz-share-btn:hover{background:var(--dz-green-50);transform:translateY(-1px)}
.bz-share-btn:focus-visible{outline:none;box-shadow:var(--sh-focus)}
.bz-share-wa{background:var(--dz-green-700);color:#fff;border-color:var(--dz-green-700)}
.bz-share-wa:hover{background:var(--dz-green-800);color:#fff}
/* [data-share-slot] : réserve l'espace AVANT l'injection JS (site.js defer) → CLS=0 */
[data-share-slot]{margin-top:30px;min-height:84px}
[data-share-slot] .bz-share{margin-top:0}

/* — Méga-panneaux — */
.bz-mega{position:absolute;top:calc(100% + 10px);left:0;z-index:50;background:var(--dz-surface);border:1px solid var(--dz-line);border-radius:var(--r-lg);box-shadow:var(--sh-pop);padding:20px;animation:bz-pop .16s ease both}
.bz-navitem[data-menu="guides"] .bz-mega{width:min(620px,90vw)}
.bz-navitem[data-menu="outils"] .bz-mega{width:min(440px,90vw)}
.bz-navitem[data-menu="articles"] .bz-mega{width:min(560px,90vw)}
.bz-mega-arts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-bottom:8px}
.bz-mega-arts a{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r-sm);font-size:13px;line-height:1.3;color:var(--dz-ink-700);transition:background .14s,color .14s}
.bz-mega-arts a:hover{background:var(--dz-green-25);color:var(--dz-green-800)}
.bz-mega-arts .ic{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--dz-green-50);color:var(--dz-green-700);flex-shrink:0}
.bz-mega-arts .ic svg{width:13px;height:13px}
@keyframes bz-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.bz-mega-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}
.bz-mega-h{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dz-fg-subtle);margin-bottom:12px}
.bz-mega-hubgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.bz-mega-hub{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r-sm);font-size:13.5px;font-weight:500;color:var(--dz-ink-800);transition:background .14s,color .14s}
.bz-mega-hub:hover{background:var(--dz-green-25);color:var(--dz-green-800)}
.bz-mega-hub .ic{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--dz-green-50);color:var(--dz-green-700);flex-shrink:0}
.bz-mega-hub .ic svg{width:15px;height:15px}
.bz-mega-col{min-width:0}
.bz-mega-pop{display:flex;flex-direction:column;gap:2px}
.bz-mega-pop a{padding:6px 8px;border-radius:var(--r-sm);font-size:13.5px;color:var(--dz-ink-700);line-height:1.35;transition:background .14s,color .14s}
.bz-mega-pop a:hover{background:var(--dz-bg-soft);color:var(--dz-green-800)}
.bz-mega-all{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;font-weight:600;color:var(--dz-green-700)}
.bz-mega-all svg{width:15px;height:15px;transition:transform .15s}
.bz-mega-all:hover svg{transform:translateX(3px)}
.bz-mega-tools{display:flex;flex-direction:column;gap:3px}
.bz-mega-tool{display:flex;align-items:flex-start;gap:11px;padding:11px;border-radius:var(--r-md);transition:background .14s}
.bz-mega-tool:hover{background:var(--dz-bg-soft)}
.bz-mega-tool .ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--dz-green-50);color:var(--dz-green-700);flex-shrink:0}
.bz-mega-tool .ic svg{width:19px;height:19px}
.bz-mega-tool-t{display:block;font-weight:500;font-size:14px;color:var(--dz-ink-900)}
.bz-mega-tool-d{display:block;font-size:12.5px;color:var(--dz-fg-muted);line-height:1.4;margin-top:2px}

/* — Barre de recherche — */
.bz-search{position:relative;display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;width:min(340px,40vw);background:var(--dz-bg-soft);border:1px solid var(--dz-line);border-radius:var(--r-pill);padding:0 12px 0 13px;transition:border-color .15s,box-shadow .15s,background .15s}
.bz-search:focus-within{background:var(--dz-surface);border-color:var(--dz-green-700);box-shadow:var(--sh-focus)}
.bz-search-ic{width:17px;height:17px;color:var(--dz-fg-subtle);flex-shrink:0}
.bz-search input{flex:1;min-width:0;border:0;background:none;outline:none;font-family:inherit;font-size:14px;color:var(--dz-fg);padding:6px 0}
.bz-search input::placeholder{color:var(--dz-fg-subtle)}
.bz-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.bz-kbd{flex-shrink:0;font-family:var(--dz-mono);font-size:11px;color:var(--dz-ink-600);background:var(--dz-surface);border:1px solid var(--dz-line);border-radius:5px;padding:1px 6px}
.bz-search:focus-within .bz-kbd{display:none}
.bz-results{position:absolute;top:calc(100% + 8px);right:0;left:0;z-index:50;background:var(--dz-surface);border:1px solid var(--dz-line);border-radius:var(--r-md);box-shadow:var(--sh-pop);padding:6px;max-height:min(70vh,460px);overflow-y:auto;animation:bz-pop .14s ease both}
.bz-res-head,.bz-res-empty{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dz-fg-subtle);padding:8px 10px 6px}
.bz-res-empty{text-transform:none;letter-spacing:0;font-weight:400;font-size:13.5px;color:var(--dz-fg-muted)}
.bz-result{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);transition:background .12s}
.bz-result:hover,.bz-result[aria-selected="true"]{background:var(--dz-green-25)}
.bz-result-ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--dz-green-50);color:var(--dz-green-700);flex-shrink:0}
.bz-result-ic svg{width:17px;height:17px}
.bz-result-txt{flex:1;min-width:0}
.bz-result-t{display:block;font-size:14px;font-weight:500;color:var(--dz-ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bz-result-m{display:block;font-size:12px;color:var(--dz-fg-muted)}
.bz-result-k{flex-shrink:0;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dz-green-700);background:var(--dz-green-50);border-radius:var(--r-pill);padding:3px 8px}

/* — Burger + drawer mobile — */
.bz-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:42px;height:38px;padding:0 10px;margin-left:auto;background:none;border:1px solid var(--dz-line);border-radius:var(--r-sm);cursor:pointer}
.bz-burger span{display:block;height:2px;border-radius:2px;background:var(--dz-ink-800);transition:transform .2s,opacity .2s}
.bz-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.bz-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.bz-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.bz-drawer{position:fixed;inset:0;z-index:60;background:rgba(7,18,10,.42);opacity:0;transition:opacity .22s ease}
.bz-drawer.open{opacity:1}
.bz-drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(360px,86vw);background:var(--dz-bg);box-shadow:var(--sh-pop);padding:18px 18px 32px;overflow-y:auto;transform:translateX(100%);transition:transform .24s ease}
.bz-drawer.open .bz-drawer-panel{transform:none}
.bz-drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.bz-drawer-brand{font-family:var(--dz-serif);font-size:21px;font-weight:600;color:var(--dz-ink-900)}
.bz-drawer-brand span{color:var(--dz-green-700)}
.bz-drawer-x{font-size:28px;line-height:1;background:none;border:0;color:var(--dz-ink-600);cursor:pointer;padding:0 6px}
.bz-search-m{width:100%;margin:0 0 14px}
.bz-drawer-nav{display:flex;flex-direction:column;gap:2px}
.bz-drawer-nav>a,.bz-drawer-nav summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 10px;border-radius:var(--r-sm);font-size:15.5px;font-weight:500;color:var(--dz-ink-800);cursor:pointer;list-style:none}
.bz-drawer-nav>a:hover,.bz-drawer-nav summary:hover{background:var(--dz-bg-soft)}
.bz-drawer-nav summary::-webkit-details-marker{display:none}
.bz-drawer-nav summary .bz-caret{width:15px;height:15px;opacity:.5;transition:transform .2s}
.bz-drawer-nav details[open] summary .bz-caret{transform:rotate(180deg)}
.bz-drawer-sub{display:flex;flex-direction:column;gap:1px;padding:2px 0 8px 6px}
.bz-drawer-sub a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);font-size:14px;color:var(--dz-ink-700)}
.bz-drawer-sub a:hover{background:var(--dz-green-25);color:var(--dz-green-800)}
.bz-drawer-sub .ic{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--dz-green-50);color:var(--dz-green-700);flex-shrink:0}
.bz-drawer-sub .ic svg{width:15px;height:15px}
.bz-drawer-all{font-weight:600;color:var(--dz-green-700)!important}
.bz-results-m{position:static;box-shadow:none;border:0;padding:4px 0 0;max-height:none;animation:none}
@media(prefers-reduced-motion:reduce){.bz-mega,.bz-results,.bz-drawer,.bz-drawer-panel,.bz-header{animation:none;transition:none}}
@media(max-width:1040px){
  .bz-nav{display:none}                 /* méga-menus → drawer (burger) */
  .bz-burger{display:flex}
  .bz-search{width:auto;flex:1;min-width:0;margin-left:12px}
  .bz-header,.bz-header.is-scrolled{max-width:none;width:calc(100% - 20px);margin-top:10px} /* pilule quasi pleine largeur, pas de resserrement */
}

/* — Barre de thèmes (2e ligne, toujours visible) — */
.bz-themebar{border-top:1px solid var(--dz-line-soft);background:color-mix(in srgb,var(--dz-bg) 92%,transparent)}
.bz-themebar-inner{max-width:1280px;margin:0 auto;padding:2px 32px;display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.bz-themebar-inner::-webkit-scrollbar{display:none}
.bz-themebar-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dz-fg-subtle);margin-right:10px;flex-shrink:0}
.bz-themebar a{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:13px;line-height:1.25;font-weight:500;color:var(--dz-ink-700);white-space:nowrap;flex-shrink:0;transition:background .14s,color .14s}
.bz-themebar a:hover{background:var(--dz-green-25);color:var(--dz-green-800)}
.bz-themebar a svg{width:15px;height:15px;color:var(--dz-green-700)}
.bz-themebar a:hover svg{color:var(--dz-green-800)}
.bz-themebar-all{font-weight:600;color:var(--dz-ink-900)}
.bz-themebar-all[aria-current]{color:var(--dz-green-800);background:var(--dz-green-25)}
.bz-themebar-div{width:1px;height:18px;background:var(--dz-line);margin:0 7px;flex-shrink:0}
/* Zones secondaires (Outils + Articles) : défilent sous le header collant */
.bz-subnav{background:var(--dz-bg)}
.bz-subnav .bz-themebar{background:var(--dz-bg)}
@media(max-width:720px){.bz-themebar-inner{padding-left:20px;padding-right:20px}.bz-themebar-lbl{display:none}}

/* — Hero d'article (sobre, éditorial, crédible YMYL) — */
.bz-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--dz-line-soft);background:linear-gradient(180deg,var(--dz-green-25),var(--dz-bg) 62%)}
.bz-hero::after{content:"";position:absolute;top:-40px;right:-30px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 60% 40%,var(--dz-green-50),transparent 70%);opacity:.7;pointer-events:none}
/* Filigrane croissant (emblème national, ADR-003) — faible opacité, décoratif. PAS de tricolore (= Italie, cf. bugs.md). */
.bz-hero::before{content:"";position:absolute;top:50%;right:2%;width:300px;height:300px;transform:translateY(-50%);opacity:.055;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' fill='%23006233' d='M8 50a42 42 0 1 0 84 0 42 42 0 1 0-84 0zM34 50a28 28 0 1 0 56 0 28 28 0 1 0-56 0z'/%3E%3C/svg%3E") center/contain no-repeat}
.bz-herowrap{position:relative;max-width:1120px;margin:0 auto;padding:34px 32px 30px;z-index:1}
.bz-bc{font-size:13px;color:var(--dz-fg-muted);margin:0 0 16px;letter-spacing:-.005em}
.bz-bc a{color:var(--dz-fg-muted)}
.bz-bc a:hover{color:var(--dz-green-700)}
.bz-bc .sep{margin:0 7px;color:var(--dz-ink-300)}
.bz-bc span{color:var(--dz-fg-muted)}
.bz-h1{font-family:var(--dz-serif);font-weight:500;font-size:clamp(28px,4.4vw,44px);line-height:1.12;letter-spacing:-.022em;color:var(--dz-ink-900);margin:.18em 0 0;max-width:21ch;text-wrap:balance}
.bz-lede{font-size:clamp(15.5px,1.7vw,18px);line-height:1.6;color:var(--dz-fg-muted);max-width:60ch;margin:14px 0 0}
.bz-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:20px;font-size:13px;color:var(--dz-fg-muted)}
.bz-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--dz-ink-300)}
.bz-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:var(--r-pill);background:var(--dz-green-50);color:var(--dz-green-800);font-weight:600;font-size:12.5px}
.bz-pill svg{width:14px;height:14px}
.bz-meta .ic{display:inline-flex;align-items:center;gap:5px}
.bz-meta .ic svg{width:14px;height:14px;color:var(--dz-fg-subtle)}

/* — Hero "bandeau" pour index & outils (teinté) — */
.bz-band{background:linear-gradient(180deg,var(--dz-green-25),var(--dz-bg));border-bottom:1px solid var(--dz-line-soft)}
.bz-bandwrap{max-width:1120px;margin:0 auto;padding:40px 32px 34px}
.bz-band .bz-h1{max-width:24ch}

/* — Layout 2 colonnes : contenu + sommaire collant — */
.bz-layout{max-width:1120px;margin:0 auto;padding:8px 32px 8px;display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:56px;align-items:start}
.bz-toc{position:sticky;top:76px;margin:0;font-size:13.5px;border:0;background:none}
.bz-toc>summary{list-style:none;cursor:pointer;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dz-ink-600);padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--dz-line)}
.bz-toc>summary::-webkit-details-marker{display:none}
.bz-toc>summary::before{content:"";display:inline-block;width:12px;height:1px;background:var(--dz-green-700);vertical-align:middle;margin-right:7px}
.bz-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.bz-toc a{display:block;padding:5px 10px;border-left:2px solid transparent;color:var(--dz-fg-muted);line-height:1.4;border-radius:0 var(--r-xs) var(--r-xs) 0;transition:color .15s,border-color .15s,background .15s}
.bz-toc a:hover{color:var(--dz-green-800);background:var(--dz-green-25)}
.bz-toc a.is-active{color:var(--dz-green-800);border-left-color:var(--dz-green-700);font-weight:500;background:var(--dz-green-25)}

/* — Prose (corps d'article) — */
.bz-prose{font-size:17px;line-height:1.75;color:var(--dz-ink-800);max-width:70ch}
.bz-prose>*:first-child{margin-top:0}
.bz-prose h2{font-family:var(--dz-serif);font-weight:500;font-size:clamp(22px,2.6vw,27px);line-height:1.2;letter-spacing:-.015em;color:var(--dz-ink-900);margin:2em 0 .5em;padding-top:.9em;border-top:1px solid var(--dz-line-soft);scroll-margin-top:0}
.bz-prose h2:first-of-type{border-top:0;padding-top:0;margin-top:1.2em}
.bz-prose h3{font-family:var(--dz-serif);font-weight:600;font-size:19.5px;letter-spacing:-.01em;color:var(--dz-ink-900);margin:1.6em 0 .4em;scroll-margin-top:0}
.bz-prose p{margin:.85em 0}
.bz-prose a{color:var(--dz-green-700);border-bottom:1px solid color-mix(in oklab,var(--dz-green-700) 32%,transparent);transition:border-color .15s,color .15s}
.bz-prose a:hover{color:var(--dz-green-800);border-bottom-color:var(--dz-green-700)}
.bz-prose strong{color:var(--dz-ink-900);font-weight:600}
.bz-prose em{color:var(--dz-ink-700)}
.bz-prose ul,.bz-prose ol{padding-left:1.35em;margin:.85em 0}
.bz-prose li{margin:.4em 0;padding-left:.15em}
.bz-prose ul li::marker{color:var(--dz-green-600)}
.bz-prose hr{height:1px;background:var(--dz-line);border:0;margin:2.2em 0}
.bz-prose code{background:var(--dz-ink-50);padding:.12em .38em;border-radius:5px;font-size:.88em;font-family:var(--dz-mono);color:var(--dz-ink-800)}
.bz-prose img{border-radius:var(--r-md);margin:1.2em 0}

/* — Tableaux (conteneur arrondi, en-tête vert, zébrure) — */
.bz-tablewrap{margin:1.5em 0;border:1px solid var(--dz-line);border-radius:var(--r-md);overflow:hidden;overflow-x:auto}
.bz-prose table{border-collapse:collapse;width:100%;font-size:15px;margin:0}
.bz-prose thead th{background:var(--dz-green-50);color:var(--dz-green-900);font-weight:600;text-align:left}
.bz-prose th,.bz-prose td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--dz-line-soft)}
.bz-prose tbody tr:nth-child(even){background:var(--dz-bg-soft)}
.bz-prose tbody tr:last-child td{border-bottom:0}

/* — Encadrés (blockquotes typés par le générateur) — */
.bz-prose blockquote{margin:1.5em 0;padding:16px 18px 16px 20px;border-radius:var(--r-md);border:1px solid var(--dz-line);border-left:4px solid var(--dz-ink-300);background:var(--dz-bg-soft);color:var(--dz-ink-800)}
.bz-prose blockquote p{margin:.4em 0}
.bz-prose blockquote p:first-child{margin-top:0}
.bz-prose blockquote p:last-child{margin-bottom:0}
.bz-prose blockquote.bq-answer{border:1px solid var(--dz-green-100);border-left:4px solid var(--dz-green-700);background:var(--dz-green-25);padding-top:40px;position:relative}
.bz-prose blockquote.bq-answer::before{content:"En bref";position:absolute;top:13px;left:20px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dz-green-700)}
.bz-prose blockquote.bq-answer em{display:block;margin-top:.7em;font-size:13.5px;color:var(--dz-ink-600);font-style:normal}
.bz-prose blockquote.bq-warn{border-color:#f0d9bf;border-left-color:var(--dz-red-600);background:#fdf6ef}
.bz-prose blockquote.bq-tip{border-color:#cfe3f5;border-left-color:#2b7fb8;background:#f2f8fd}
.bz-prose blockquote.bq-example{border-color:var(--dz-line);border-left-color:var(--dz-ink-400);background:var(--dz-ink-50)}

/* — Signature de fin — */
.bz-sign{max-width:70ch;margin:2.4em 0 0;padding:16px 0 0;border-top:1px solid var(--dz-line);font-size:13.5px;color:var(--dz-fg-muted);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.bz-sign .pilllogo{font-family:var(--dz-serif);font-weight:600;color:var(--dz-ink-900)}
.bz-sign .pilllogo span{color:var(--dz-green-700)}

/* — Cards (index, "voir aussi") — */
.bz-cardgrid{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.bz-cardgrid.cols2{grid-template-columns:repeat(2,1fr)}
.bz-card{display:flex;flex-direction:column;padding:18px 18px 20px;background:var(--dz-surface);border:1px solid var(--dz-line);border-radius:var(--r-lg);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.bz-card:hover{transform:translateY(-2px);border-color:var(--dz-green-700);box-shadow:var(--sh-card)}
.bz-card .ic{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--dz-green-50);color:var(--dz-green-700);margin-bottom:13px;flex-shrink:0}
.bz-card .ic svg{width:21px;height:21px}
.bz-card h3{font-family:var(--dz-serif);font-weight:500;font-size:16.5px;line-height:1.25;letter-spacing:-.01em;color:var(--dz-ink-900);margin:0 0 5px}
.bz-card p{font-size:13px;line-height:1.5;color:var(--dz-fg-muted);margin:0}
.bz-card .tag{margin-top:auto;padding-top:12px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dz-green-700)}

/* — Sections (index groupé par hub) — */
.bz-section{padding:14px 0 30px}
.bz-section .bz-hubh{display:flex;align-items:center;gap:10px;margin:26px 0 14px}
.bz-section .bz-hubh h2{font-family:var(--dz-serif);font-weight:500;font-size:21px;letter-spacing:-.015em;color:var(--dz-ink-900);margin:0}
.bz-section .bz-hubh .ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--dz-green-50);color:var(--dz-green-700)}
.bz-section .bz-hubh .ic svg{width:17px;height:17px}

/* — Bloc "voir aussi" + zone outil — */
.bz-also{max-width:1120px;margin:36px auto 0;padding:0 32px}
.bz-also>h2{font-family:var(--dz-serif);font-weight:500;font-size:20px;letter-spacing:-.015em;color:var(--dz-ink-900);margin:0 0 14px;display:flex;align-items:center;gap:9px}
.bz-toolzone{max-width:760px;margin:0 auto;padding:4px 0}

/* — Footer (identique à la home) — */
.bz-footer{background:var(--dz-surface-3);border-top:1px solid var(--dz-line);padding:48px 0 32px;font-size:14px;margin-top:44px}
.bz-fw{max-width:1280px;margin:0 auto;padding:0 32px}
.bz-fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;margin-bottom:28px}
.bz-footer h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--dz-fg-muted);margin:0 0 12px}
.bz-footer a{color:var(--dz-ink-700)}
.bz-footer a:hover{color:var(--dz-green-700)}
.bz-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.bz-fbrand{font-family:var(--dz-serif);font-size:21px;color:var(--dz-ink-900)}
.bz-fbrand span{color:var(--dz-green-700)}
.bz-legal{font-size:12.5px;color:var(--dz-ink-700);line-height:1.7;border-top:1px solid var(--dz-line);padding-top:20px}
.bz-legal strong{color:var(--dz-fg)}
.bz-legal p{margin:.5em 0}

/* — Responsive — */
@media(max-width:980px){
  .bz-layout{grid-template-columns:1fr;gap:0;padding-top:0}
  .bz-toc{order:-1;position:static;top:auto;margin:8px 0 22px;border:1px solid var(--dz-line);border-radius:var(--r-md);padding:12px 14px;background:var(--dz-bg-soft)}
  .bz-toc>summary{margin-bottom:0;padding-bottom:0;border-bottom:0}
  .bz-toc[open]>summary{margin-bottom:8px;padding-bottom:10px;border-bottom:1px solid var(--dz-line)}
  .bz-cardgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .bz-headrow,.bz-herowrap,.bz-bandwrap,.bz-layout,.bz-fw,.bz-also{padding-left:20px;padding-right:20px}
  .bz-nav{gap:16px 18px}
  .bz-fcols{grid-template-columns:1fr;gap:24px}
  .bz-cardgrid,.bz-cardgrid.cols2{grid-template-columns:1fr}
  .bz-prose{font-size:16.5px}
  .bz-hero::before{display:none}            /* filigrane masqué sur mobile (lisibilité + perf) */
}

/* ============================================================
   Motion & polish 2026 — fraîcheur SANS surpoids.
   Règles d'or (recherche web, sources MDN / web.dev / Chrome dev / Smashing / DebugBear) :
   • on n'anime QUE transform + opacity → compositeur, hors thread principal (zéro jank) ;
   • tout est gardé sous @supports + prefers-reduced-motion → fallback = contenu visible/statique ;
   • JAMAIS d'animation sur l'élément LCP (titres de hero) ni sur des propriétés de mise en page.
   ⇒ 100/100 Lighthouse préservé : un run Lighthouse ne scrolle pas et ne navigue pas,
     donc reveal/progress/view-transition ne sont même pas mesurés ; aucune lib, aucun octet bloquant.
   ============================================================ */

/* — Transitions de page fluides (View Transitions API, cross-document).
     1 règle, active sur toutes les pages (styles.css est lié OU inliné partout).
     Chrome 126+ / Safari 18.2+. Firefox & anciens : navigation normale (no-op, rien ne casse). — */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root){ animation-duration:.26s }
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation-duration:.01ms !important }
}

/* — Barre de progression de lecture : pages d'article UNIQUEMENT (sélecteur :has),
     transform:scaleX (compositeur — PAS width). Zéro JS, zéro markup, zéro re-render. — */
@keyframes bz-progress{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    body:has(.bz-prose)::before{
      content:"";position:fixed;inset:0 0 auto 0;height:3px;z-index:70;
      transform-origin:0 50%;transform:scaleX(0);
      background:linear-gradient(90deg,var(--dz-green-700),var(--dz-green-600));
      animation:bz-progress linear both;animation-timeline:scroll(root block);
    }
  }
}

/* — Reveal au scroll : cartes & titres de hub SOUS la ligne de flottaison.
     view() = chaque élément s'anime à SON entrée dans le viewport → cascade naturelle, sans délai JS.
     animation-duration:1ms = filet Firefox (exige une durée non nulle) ; `both` garde l'état initial.
     .dz-card = home seulement ; .bz-* = pages internes seulement (séparation propre).
     ⚠️ Pas de fade opacity : les cartes au-dessus de la ligne de flottaison rendues mi-animation
        feraient chuter le contraste a11y (texte muted sur fond blanc). translateY seul → contraste
        toujours à 100% pendant la cascade. (Bug observé : Lighthouse a11y 96 → 100 après ce fix.) */
@keyframes bz-reveal{ from{ transform:translateY(14px) } to{ transform:none } }
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .dz-card,
    .bz-cardgrid > .bz-card,
    .bz-section .bz-hubh{
      animation:bz-reveal linear both;
      animation-duration:1ms;
      animation-timeline:view();
      animation-range:entry 4% cover 24%;
    }
  }
}

/* — Micro-interactions (transform/opacity uniquement) : l'icône de carte « pop » au survol. — */
.bz-card .ic, .b-cardic{ transition:transform .25s ease, background .2s ease, color .2s ease }
.bz-card:hover .ic, .b-card:hover .b-cardic{ transform:scale(1.08) }

/* ─── Affordances hover enrichies (tous éléments cliquables, transform/opacity uniquement) ─── */

/* (1) Items de méga-menus : nudge horizontal à droite au survol (signal « click pour aller »). */
.bz-mega-hub, .bz-mega-pop a, .bz-mega-tool, .bz-mega-arts a{ transition:background .14s, color .14s, transform .2s ease }
.bz-mega-hub:hover, .bz-mega-hub:focus-visible,
.bz-mega-pop a:hover, .bz-mega-pop a:focus-visible,
.bz-mega-tool:hover, .bz-mega-tool:focus-visible,
.bz-mega-arts a:hover, .bz-mega-arts a:focus-visible{ transform:translateX(3px) }

/* (2) Liens du sommaire (TOC) : nudge en plus du fond vert clair déjà présent. */
.bz-toc a{ transition:color .15s, border-color .15s, background .15s, transform .18s ease }
.bz-toc a:hover, .bz-toc a:focus-visible{ transform:translateX(3px) }

/* (3) Breadcrumb : underline animée scaleX (gauche au hover, retracte par la droite au leave) + couleur. */
.bz-bc a{ position:relative; display:inline-block }
.bz-bc a::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--dz-green-700); transform:scaleX(0); transform-origin:right; transition:transform .25s ease }
.bz-bc a:hover::after, .bz-bc a:focus-visible::after{ transform:scaleX(1); transform-origin:left }

/* (4) Liens du footer (interne + home) : même pattern underline animée. */
.bz-footer ul a, .b-footer ul a{ position:relative; display:inline-block }
.bz-footer ul a::after, .b-footer ul a::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--dz-green-700); transform:scaleX(0); transform-origin:right; transition:transform .22s ease }
.bz-footer ul a:hover::after, .bz-footer ul a:focus-visible::after,
.b-footer ul a:hover::after, .b-footer ul a:focus-visible::after{ transform:scaleX(1); transform-origin:left }

/* (5) Drawer mobile : nudge sur tous les items de navigation. */
.bz-drawer-nav>a, .bz-drawer-sub a{ transition:background .14s, color .14s, transform .18s ease }
.bz-drawer-nav>a:hover, .bz-drawer-nav>a:focus-visible,
.bz-drawer-sub a:hover, .bz-drawer-sub a:focus-visible{ transform:translateX(3px) }

/* (6) Résultats de recherche : icône grandit (comme sur les cartes). */
.bz-result .bz-result-ic{ transition:transform .2s ease }
.bz-result:hover .bz-result-ic, .bz-result[aria-selected="true"] .bz-result-ic{ transform:scale(1.1) }

/* (7) Boutons (toutes variantes) + chips : soulèvement -1px. */
.dz-btn-secondary:hover, .dz-btn-ghost:hover, .dz-btn-danger:hover{ transform:translateY(-1px) }
.dz-chip{ transition:background .15s, border-color .15s, color .15s, transform .18s ease }
.dz-chip:hover, .dz-chip:focus-visible{ transform:translateY(-1px) }

/* (8) Flèche « → » qui apparaît sur les cartes au survol — signal premium « cliquable ».
       Interne : sur le `.tag` (label thème) en bas. Home `.b-card` : flèche bottom-right en `::after`. */
.bz-card .tag{ transition:color .2s ease }
.bz-card .tag::after{ content:" →"; display:inline-block; opacity:0; transform:translateX(-4px); transition:opacity .22s ease, transform .22s ease; font-weight:500 }
.bz-card:hover .tag, .bz-card:focus-visible .tag{ color:var(--dz-green-800) }
.bz-card:hover .tag::after, .bz-card:focus-visible .tag::after{ opacity:1; transform:none }

.b-card{ position:relative }
.b-card::after{ content:"→"; position:absolute; bottom:18px; right:18px; color:var(--dz-green-700); font-size:18px; font-weight:500; line-height:1; opacity:0; transform:translateX(-6px); transition:opacity .25s ease, transform .25s ease }
.b-card:hover::after, .b-card:focus-visible::after{ opacity:1; transform:none }

/* — Typo éditoriale : titres équilibrés (balance) + paragraphes sans veuves (pretty, prose only). — */
.b-h2, .bz-prose h2, .bz-prose h3, .bz-card h3, .b-card h3, .bz-hubh h2, .bz-mega-tool-t{ text-wrap:balance }
.bz-prose p, .bz-lede, .b-lead{ text-wrap:pretty }

/* — Pilule eyebrow sur heros internes (inspiration qualiodocs : ancre la thématique avec présence).
     Override scopé .bz-hero/.bz-band uniquement → les eyebrows de section .dz-eyebrow gardent
     leur style éditorial filet+capitales sur la home et ailleurs. CSS-only, zéro re-render. — */
.bz-hero .dz-eyebrow, .bz-band .dz-eyebrow{
  padding:5px 12px 5px 11px;
  border-radius:var(--r-pill);
  background:var(--dz-green-50);
  color:var(--dz-green-800);
  font-weight:600;
  letter-spacing:.06em;
  margin-bottom:6px;
}
.bz-hero .dz-eyebrow::before, .bz-band .dz-eyebrow::before{display:none}

/* Bandeau de consentement (mesure d'audience) */
.bz-consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;max-width:540px;margin:0 auto;background:var(--dz-surface);border:1px solid var(--dz-line);border-radius:var(--r-md);box-shadow:var(--sh-card);padding:14px 16px;font-size:13.5px;line-height:1.5;color:var(--dz-fg)}
.bz-consent p{margin:0 0 10px}
.bz-consent-row{display:flex;gap:8px;justify-content:flex-end}
.bz-consent button{font:inherit;font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:var(--r-pill);cursor:pointer;border:1px solid var(--dz-ink-200);transition:background .15s}
.bz-consent-no{background:var(--dz-bg);color:var(--dz-fg)}
.bz-consent-no:hover{background:var(--dz-bg-soft)}
.bz-consent-yes{background:var(--dz-green-700);color:#fff;border-color:var(--dz-green-700)}
.bz-consent-yes:hover{background:var(--dz-green-800)}
@media(prefers-reduced-motion:no-preference){.bz-consent{animation:bz-consent-in .3s ease}}
@keyframes bz-consent-in{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}