/* ═══════════════════════════════════════════════════════════════════════════
   ATLAS AGROALIMENTAIRE — Design system v20
   Chargé APRÈS les styles historiques d'index.html : il les harmonise sans les
   supprimer (règle « ne rien casser »). Tous les nouveaux composants utilisent
   exclusivement les jetons ci-dessous.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons ─────────────────────────────────────────────────────────────── */
:root{
  /* Typographies : titres (Playfair), texte long (Crimson), interface (système) */
  --font-title:'Playfair Display',Georgia,serif;
  --font-body:'Crimson Pro',Georgia,serif;
  --font-ui:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Échelle typographique (base 16 px) */
  --fs-xs:.78rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem;

  /* Espacements (grille de 4 px) */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem;

  /* Rayons, ombres, transitions */
  --rad-sm:6px; --rad-md:10px; --rad-lg:16px; --rad-pill:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.25);
  --shadow-2:0 10px 40px rgba(0,0,0,.45);
  --ease:cubic-bezier(.22,1,.36,1); --dur:.18s;

  /* Tailles tactiles (WCAG 2.2 — 2.5.8 : ≥ 24 px, cible 44 px sur mobile) */
  --tap:44px;

  /* Couleurs sémantiques (thème sombre par défaut — identité historique conservée) */
  --dim:#b09a74;            /* était #7a6040 : contraste 3,4:1 → 6,9:1 sur --bg */
  --text-muted:var(--dim);
  --ok:#5cc46a; --warn:#e0a53a; --err:#e06a5a; --info:#6aa8e8;
  --focus:#ffd479;
  --header-bg:rgba(10,7,3,.92);
  --overlay:rgba(0,0,0,.62);
  --chip-bg:rgba(200,132,26,.10);
  --row-alt:rgba(255,255,255,.025);
  --kbd-bg:rgba(255,255,255,.08);
  color-scheme:dark;
}

/* ── 2. Thème clair (manuel ou automatique) ────────────────────────────────── */
:root[data-theme="light"]{
  --ink:#ffffff; --bg:#f7f3ea; --surface:#efe8d8; --card:#ffffff; --card-hi:#fbf7ee;
  --border:rgba(110,72,16,.22); --border-h:rgba(110,72,16,.5);
  --amber:#9a5c0a; --gold:#8a5600; --gold-l:#7a4a00; --aged:#4d3b21; --parch:#231a0c; --dim:#665033;
  --rouge:#b02a2a; --vert:#2f7d3a;
  --ok:#2f7d3a; --warn:#8a5a00; --err:#b02a2a; --info:#1f5fa8; --focus:#1f5fa8;
  --header-bg:rgba(247,243,234,.94); --overlay:rgba(30,20,5,.45);
  --chip-bg:rgba(154,92,10,.08); --row-alt:rgba(0,0,0,.025); --kbd-bg:rgba(0,0,0,.06);
  --sh:0 8px 30px rgba(60,40,10,.15); --shadow-1:0 1px 2px rgba(60,40,10,.08),0 2px 8px rgba(60,40,10,.08); --shadow-2:0 10px 40px rgba(60,40,10,.18);
  color-scheme:light;
}
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    --ink:#ffffff; --bg:#f7f3ea; --surface:#efe8d8; --card:#ffffff; --card-hi:#fbf7ee;
    --border:rgba(110,72,16,.22); --border-h:rgba(110,72,16,.5);
    --amber:#9a5c0a; --gold:#8a5600; --gold-l:#7a4a00; --aged:#4d3b21; --parch:#231a0c; --dim:#665033;
    --rouge:#b02a2a; --vert:#2f7d3a;
    --ok:#2f7d3a; --warn:#8a5a00; --err:#b02a2a; --info:#1f5fa8; --focus:#1f5fa8;
    --header-bg:rgba(247,243,234,.94); --overlay:rgba(30,20,5,.45);
    --chip-bg:rgba(154,92,10,.08); --row-alt:rgba(0,0,0,.025); --kbd-bg:rgba(0,0,0,.06);
    --sh:0 8px 30px rgba(60,40,10,.15); --shadow-1:0 1px 2px rgba(60,40,10,.08),0 2px 8px rgba(60,40,10,.08); --shadow-2:0 10px 40px rgba(60,40,10,.18);
    color-scheme:light;
  }
}

/* Couleurs codées en dur dans le moteur historique : réalignées en thème clair */
html.theme-is-light body{background:var(--bg)}
html.theme-is-light [style*="color:#d4a017"],html.theme-is-light [style*="color: #d4a017"],
html.theme-is-light [style*="color:#c8841a"],html.theme-is-light [style*="color:#e8c060"],
html.theme-is-light [style*="color:#c8a84a"],html.theme-is-light [style*="color:#c89a3a"],
html.theme-is-light [style*="color:#e8a040"],html.theme-is-light [style*="color:#9a7a40"],
html.theme-is-light [style*="color:#e8dcbc"],html.theme-is-light [style*="color:#fff;"],
html.theme-is-light [style*="color:#b09858"]{color:var(--gold)!important}
html.theme-is-light [style*="color:#4cc25a"],html.theme-is-light [style*="color:#4ade80"],html.theme-is-light [style*="color:#7cc46a"]{color:var(--ok)!important}
html.theme-is-light [style*="color:#5b8fd4"]{color:var(--info)!important}
html.theme-is-light [style*="background:#0d0a05"],html.theme-is-light [style*="background:#000000"],
html.theme-is-light [style*="background:#161108"],html.theme-is-light [style*="background:#12100c"],
html.theme-is-light [style*="background: #1a1a12"],html.theme-is-light [style*="background:#24130f"]{background:var(--card)!important;color:var(--parch)!important}
html.theme-is-light [style*="background:rgba(0,0,0,"]{background:var(--row-alt)!important}
html.theme-is-light .hero::before,html.theme-is-light .hero::after{opacity:.35}
html.theme-is-light .modal-header{background:linear-gradient(180deg,var(--card-hi),var(--card))!important}
html.theme-is-light img{filter:none}
html.theme-is-light .leaflet-container{background:#dfe6ea}
html.theme-is-light ::-webkit-scrollbar-track{background:var(--surface)}

/* ── 3. Base & lisibilité ─────────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html[data-fontscale="1"]{font-size:106.25%} html[data-fontscale="2"]{font-size:112.5%} html[data-fontscale="3"]{font-size:125%}
body{background:var(--bg);color:var(--parch);min-height:100vh;display:flex;flex-direction:column}
#app-main{flex:1 0 auto;width:100%;min-width:0}
img{max-width:100%;height:auto}
table{max-width:100%}
.sec-desc,.hero-sub,.m-subtitle{color:var(--aged)}
/* Texte d'interface historique en Space Mono capitales espacées : lisibilité insuffisante (< 11 px, tracking 0,2 em) */
.kpi-l,.hub-count,.sec-lbl,.m-eyebrow,.breadcrumb,.dropdown-section-header,.m-catbadge,.hero-ornament{font-family:var(--font-ui)!important;letter-spacing:.06em!important}
.kpi-l,.hub-count{font-size:var(--fs-xs)!important}
.m-alias-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.m-alias-tag{display:inline-block;padding:.12rem .55rem;border:1px solid var(--border);border-radius:var(--rad-pill);font-size:var(--fs-xs);font-family:var(--font-ui);color:var(--aged);background:var(--chip-bg)}

/* Focus visible universel (WCAG 2.4.7 / 2.4.11) */
:focus-visible{outline:3px solid var(--focus)!important;outline-offset:2px!important;border-radius:4px}
.a20-clickable{cursor:pointer}
.skip-link{position:absolute;left:-9999px;top:0;z-index:10001;background:var(--gold);color:#1a1300;padding:.6rem 1rem;border-radius:0 0 8px 0;font:600 var(--fs-sm) var(--font-ui)}
.skip-link:focus{left:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion: reduce){
  *,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
html[data-motion="reduce"] *,html[data-motion="reduce"] ::before,html[data-motion="reduce"] ::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

/* ── 4. Composants de base ────────────────────────────────────────────────── */
.a20-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:40px;padding:.5rem 1rem;border-radius:var(--rad-md);
  border:1px solid var(--border-h);background:var(--card);color:var(--parch);font:600 var(--fs-sm)/1.2 var(--font-ui);cursor:pointer;text-decoration:none;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.a20-btn:hover{border-color:var(--gold);background:var(--card-hi)}
.a20-btn:active{transform:translateY(1px)}
.a20-btn[disabled],.a20-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.a20-btn--primary{background:var(--amber);border-color:var(--amber);color:#1a1100}
html.theme-is-light .a20-btn--primary{color:#fff}
.a20-btn--primary:hover{background:var(--gold);border-color:var(--gold)}
.a20-btn--ghost{background:transparent;border-color:transparent}
.a20-btn--ghost:hover{background:var(--chip-bg);border-color:var(--border)}
.a20-btn--sm{min-height:32px;padding:.3rem .65rem;font-size:var(--fs-xs)}
.a20-btn--icon{width:40px;padding:0}
.a20-btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:var(--chip-bg)}

.a20-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .6rem;border-radius:var(--rad-pill);border:1px solid var(--border);
  background:var(--chip-bg);color:var(--aged);font:500 var(--fs-xs)/1.4 var(--font-ui);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
a.a20-chip,button.a20-chip{cursor:pointer;text-decoration:none}
a.a20-chip:hover,button.a20-chip:hover{border-color:var(--gold);color:var(--gold)}
.a20-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .5rem;border-radius:var(--rad-sm);font:700 .7rem/1.4 var(--font-ui);letter-spacing:.03em;text-transform:uppercase;
  color:var(--gold);background:var(--chip-bg);border:1px solid var(--border)}
.a20-badge--ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.a20-badge--warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.a20-badge--err{color:var(--err);border-color:color-mix(in srgb,var(--err) 40%,transparent)}
.a20-card{background:var(--card);border:1px solid var(--border);border-radius:var(--rad-lg);padding:var(--sp-5);box-shadow:var(--shadow-1)}
.a20-input,.a20-select{width:100%;min-height:44px;padding:.55rem .8rem;border-radius:var(--rad-md);border:1px solid var(--border-h);background:var(--surface);color:var(--parch);font:400 var(--fs-md)/1.3 var(--font-ui)}
.a20-input::placeholder{color:var(--dim)}
.a20-input:focus,.a20-select:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 30%,transparent)}
.a20-label{display:block;font:600 var(--fs-xs)/1.3 var(--font-ui);color:var(--aged);margin:0 0 .3rem;letter-spacing:.02em}
.a20-alert{display:flex;gap:.7rem;align-items:flex-start;padding:.8rem 1rem;border-radius:var(--rad-md);border:1px solid var(--border);background:var(--chip-bg);color:var(--parch);font:400 var(--fs-sm)/1.5 var(--font-ui)}
.a20-alert--warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent)}
.a20-alert--err{border-color:color-mix(in srgb,var(--err) 45%,transparent);background:color-mix(in srgb,var(--err) 9%,transparent)}
.a20-alert--ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.a20-kbd{display:inline-block;min-width:1.4em;padding:.05rem .35rem;border-radius:4px;background:var(--kbd-bg);border:1px solid var(--border);font:600 .72rem/1.3 var(--font-mono);color:var(--aged);text-align:center}
.a20-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--rad-md);max-width:100%}
.a20-table{width:100%;border-collapse:collapse;font:400 var(--fs-sm)/1.45 var(--font-ui)}
.a20-table th,.a20-table td{padding:.6rem .75rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.a20-table thead th{position:sticky;top:0;background:var(--card-hi);color:var(--gold);font-weight:700;z-index:1}
.a20-table tbody tr:nth-child(even){background:var(--row-alt)}
.a20-table th[scope="row"]{color:var(--aged);font-weight:600;white-space:nowrap;position:sticky;left:0;background:var(--card);z-index:1}
.a20-page{max-width:1240px;margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-7)}
.a20-page-hd{margin:0 0 var(--sp-5)}
.a20-page-hd h1{font:700 var(--fs-3xl)/1.15 var(--font-title);color:var(--parch);margin:.2rem 0 .4rem}
.a20-page-hd p{color:var(--aged);font:400 var(--fs-lg)/1.5 var(--font-body);max-width:70ch}
.a20-eyebrow{font:700 var(--fs-xs)/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.a20-empty{padding:var(--sp-6);text-align:center;color:var(--aged);border:1px dashed var(--border-h);border-radius:var(--rad-lg);font:400 var(--fs-md)/1.5 var(--font-ui)}
.a20-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
@media (max-width:600px){.a20-page-hd h1{font-size:var(--fs-2xl)}}

/* Notifications (toasts) */
#a20-toasts{position:fixed;z-index:10050;left:50%;bottom:1rem;transform:translateX(-50%);display:flex;flex-direction:column;gap:.5rem;width:min(92vw,440px);pointer-events:none}
.a20-toast{pointer-events:auto;display:flex;gap:.8rem;align-items:center;justify-content:space-between;background:var(--card-hi);color:var(--parch);border:1px solid var(--border-h);border-radius:var(--rad-md);
  padding:.7rem .9rem;box-shadow:var(--shadow-2);font:500 var(--fs-sm)/1.4 var(--font-ui);animation:a20-in .25s var(--ease)}
@keyframes a20-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── 5. En-tête & navigation ─────────────────────────────────────────────── */
#navbar{min-height:61px;display:block}
#navbar.a20-header{position:sticky;top:0;z-index:1000;background:var(--header-bg);backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--border);padding:0}
.a20-bar{display:flex;align-items:center;gap:var(--sp-3);max-width:1440px;margin:0 auto;padding:.55rem var(--sp-4);min-height:60px}
.a20-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--parch);flex:none;min-width:0}
.a20-brand-mark{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--gold);color:var(--gold);font:900 1.05rem var(--font-title);flex:none;
  background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--amber) 35%,transparent),transparent 65%)}
.a20-brand-name{font:700 1.05rem/1.1 var(--font-title);color:var(--gold-l);white-space:nowrap}
.a20-brand-sub{font:500 .68rem/1.2 var(--font-ui);color:var(--dim);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.a20-nav{display:flex;align-items:center;gap:.15rem;margin-left:var(--sp-3);flex:1;min-width:0}
.a20-nav>a,.a20-nav>div>button{display:inline-flex;align-items:center;gap:.35rem;min-height:40px;padding:.4rem .7rem;border-radius:var(--rad-md);color:var(--parch);
  font:600 .9rem/1 var(--font-ui);text-decoration:none;background:none;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.a20-nav>a:hover,.a20-nav>div>button:hover,.a20-nav>div>button[aria-expanded="true"]{background:var(--chip-bg);border-color:var(--border)}
.a20-nav>a[aria-current="page"],.a20-nav>div>button.is-active{color:var(--gold);border-color:var(--border-h)}
.a20-caret{font-size:.7rem;opacity:.8;transition:transform var(--dur)}
button[aria-expanded="true"] .a20-caret{transform:rotate(180deg)}
.a20-menu-wrap{position:relative}
.a20-mega{position:absolute;top:calc(100% + 8px);left:0;z-index:1001;background:var(--card);border:1px solid var(--border-h);border-radius:var(--rad-lg);box-shadow:var(--shadow-2);
  padding:var(--sp-4);display:none;width:min(1080px,calc(100vw - 2rem));max-height:calc(100vh - 90px);overflow:auto}
.a20-mega.is-open{display:block;columns:4 220px;column-gap:var(--sp-5)}
.a20-mega section{break-inside:avoid;margin:0 0 var(--sp-4);display:inline-block;width:100%}
.a20-mega--small{width:300px}.a20-mega--small.is-open{columns:1}
.a20-mega--right{left:auto;right:0}
.a20-mega h3{font:700 .72rem/1.2 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 .45rem;padding-bottom:.35rem;border-bottom:1px solid var(--border)}
.a20-mega ul{list-style:none;margin:0;padding:0}
.a20-mega li a{display:flex;align-items:center;gap:.5rem;min-height:34px;padding:.3rem .45rem;border-radius:var(--rad-sm);color:var(--parch);text-decoration:none;font:500 .9rem/1.25 var(--font-ui)}
.a20-mega li a:hover,.a20-mega li a:focus-visible{background:var(--chip-bg);color:var(--gold)}
.a20-mega li a .ic{width:1.3em;text-align:center;flex:none}
.a20-actions{display:flex;align-items:center;gap:.35rem;margin-left:auto;flex:none}
.a20-search-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:.35rem .5rem .35rem .8rem;border-radius:var(--rad-md);border:1px solid var(--border-h);
  background:var(--surface);color:var(--aged);font:500 .88rem/1 var(--font-ui);cursor:pointer;min-width:190px}
.a20-search-btn:hover{border-color:var(--gold);color:var(--parch)}
.a20-search-btn .a20-kbd{margin-left:auto}
.a20-search-btn{min-width:44px;justify-content:center}
.a20-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--amber);color:#1a1100;font:700 .65rem/1 var(--font-ui)}
html.theme-is-light .a20-count{color:#fff}
.a20-burger{display:none}
.a20-drawer{position:fixed;inset:0;z-index:1100;display:none}
.a20-drawer.is-open{display:block}
.a20-drawer-bg{position:absolute;inset:0;background:var(--overlay)}
.a20-drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(88vw,380px);background:var(--card);border-left:1px solid var(--border-h);box-shadow:var(--shadow-2);
  display:flex;flex-direction:column;animation:a20-slide .22s var(--ease)}
@keyframes a20-slide{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
.a20-drawer-hd{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-bottom:1px solid var(--border)}
.a20-drawer-body{overflow:auto;padding:.5rem .6rem 2rem;flex:1}
.a20-drawer-body details{border-bottom:1px solid var(--border)}
.a20-drawer-body summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:var(--tap);padding:.4rem .5rem;cursor:pointer;font:600 1rem var(--font-ui);color:var(--parch)}
.a20-drawer-body summary::-webkit-details-marker{display:none}
.a20-drawer-body summary::after{content:'▾';color:var(--gold);transition:transform var(--dur)}
.a20-drawer-body details[open]>summary::after{transform:rotate(180deg)}
.a20-drawer-body .a20-dsec{padding:.2rem .3rem .7rem}
.a20-drawer-body .a20-dsec h3{font:700 .7rem var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:.7rem .4rem .3rem}
.a20-drawer-body a{display:flex;align-items:center;gap:.6rem;min-height:var(--tap);padding:.3rem .6rem;border-radius:var(--rad-sm);color:var(--parch);text-decoration:none;font:500 .98rem var(--font-ui)}
.a20-drawer-body a:hover{background:var(--chip-bg)}
.a20-drawer-body>a{font-weight:600;border-bottom:1px solid var(--border);border-radius:0}
@media (max-width:1180px){.a20-nav>a.opt,.a20-search-btn .lbl{display:none}.a20-search-btn{min-width:0}}
@media (max-width:980px){.a20-nav{display:none}.a20-burger{display:inline-flex}.a20-brand-sub{display:none}}
@media (max-width:420px){.a20-brand-name{font-size:.95rem}.a20-bar{gap:.4rem;padding:.45rem .6rem}}
/* v21 : favoris, comparateur, thème, paramètres passent dans le menu ☰ sur mobile (le bouton « + » reste visible) */
@media (max-width:640px){.a20-actions .a20-hide-xs{display:none}}
@media (max-width:360px){.a20-brand>span:not(.a20-brand-mark){display:none}}

/* ── 6. Palette de recherche (Ctrl+K) ────────────────────────────────────── */
.a20-palette{position:fixed;inset:0;z-index:10020;display:none}
.a20-palette.is-open{display:block}
.a20-palette-bg{position:absolute;inset:0;background:var(--overlay)}
.a20-palette-box{position:relative;margin:8vh auto 0;width:min(760px,calc(100vw - 1.5rem));background:var(--card);border:1px solid var(--border-h);border-radius:var(--rad-lg);box-shadow:var(--shadow-2);overflow:hidden;display:flex;flex-direction:column;max-height:80vh}
.a20-palette-in{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--border)}
.a20-palette-in input{flex:1;border:0;background:transparent;color:var(--parch);font:500 1.1rem var(--font-ui);outline:none;min-height:40px}
.a20-palette-in input::placeholder{color:var(--dim)}
.a20-palette-res{overflow:auto;padding:.4rem}
.a20-palette-ft{display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;padding:.5rem 1rem;border-top:1px solid var(--border);color:var(--dim);font:500 .75rem var(--font-ui)}
.a20-res{display:grid;grid-template-columns:auto 1fr auto;gap:.2rem .8rem;align-items:center;padding:.55rem .7rem;border-radius:var(--rad-md);cursor:pointer;color:var(--parch);text-decoration:none;border:1px solid transparent}
.a20-res[aria-selected="true"],.a20-res:hover{background:var(--chip-bg);border-color:var(--border)}
.a20-res-ic{font-size:1.15rem;width:1.6rem;text-align:center;grid-row:span 2}
.a20-res-n{font:600 .98rem/1.3 var(--font-ui);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a20-res-m{font:400 .8rem/1.3 var(--font-ui);color:var(--aged);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;grid-column:2}
.a20-res-t{grid-row:span 2;align-self:center}
.a20-res mark,.a20-hit mark{background:color-mix(in srgb,var(--gold) 28%,transparent);color:inherit;border-radius:2px;padding:0 1px}
.a20-palette-sec{font:700 .68rem var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);padding:.6rem .7rem .3rem}

/* ── 7. Page de recherche & filtres ──────────────────────────────────────── */
.a20-search-layout{display:grid;grid-template-columns:280px 1fr;gap:var(--sp-5);align-items:start}
.a20-filters{position:sticky;top:76px;background:var(--card);border:1px solid var(--border);border-radius:var(--rad-lg);padding:var(--sp-4);max-height:calc(100vh - 96px);overflow:auto}
.a20-filters fieldset{border:0;margin:0 0 var(--sp-4);padding:0}
.a20-filters legend{font:700 .75rem var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.a20-facet{display:flex;align-items:center;gap:.5rem;min-height:32px;font:400 .88rem/1.25 var(--font-ui);color:var(--parch);cursor:pointer;padding:.1rem .2rem;border-radius:4px}
.a20-facet:hover{background:var(--chip-bg)}
.a20-facet input{accent-color:var(--amber);width:18px;height:18px;flex:none}
.a20-facet .n{margin-left:auto;color:var(--dim);font-size:.78rem;font-variant-numeric:tabular-nums}
.a20-facet-more{background:none;border:0;color:var(--gold);font:600 .8rem var(--font-ui);cursor:pointer;padding:.3rem .2rem;min-height:32px}
.a20-search-top{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:var(--sp-4)}
.a20-search-top .a20-input{flex:1 1 320px;font-size:1.05rem}
.a20-active-filters{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 var(--sp-3)}
.a20-hits{display:flex;flex-direction:column;gap:.6rem}
.a20-hit{display:grid;grid-template-columns:auto 1fr auto;gap:.3rem .9rem;padding:.9rem 1rem;background:var(--card);border:1px solid var(--border);border-radius:var(--rad-md);transition:border-color var(--dur)}
.a20-hit:hover{border-color:var(--border-h)}
.a20-hit-ic{font-size:1.4rem;width:2rem;text-align:center}
.a20-hit-title{font:700 1.08rem/1.3 var(--font-ui);color:var(--parch);text-decoration:none;cursor:pointer;background:none;border:0;padding:0;text-align:left}
.a20-hit-title:hover{color:var(--gold);text-decoration:underline}
.a20-hit-meta{display:flex;gap:.35rem;flex-wrap:wrap;margin:.3rem 0}
.a20-hit-ex{font:400 .95rem/1.5 var(--font-body);color:var(--aged);margin:0}
.a20-hit-side{display:flex;flex-direction:column;gap:.35rem;align-items:flex-end}
.a20-rel{width:64px;height:5px;border-radius:3px;background:var(--row-alt);overflow:hidden;border:1px solid var(--border)}
.a20-rel>span{display:block;height:100%;background:var(--amber)}
.a20-filters-toggle{display:none}
@media (max-width:900px){
  .a20-search-layout{grid-template-columns:1fr}
  .a20-filters{position:fixed;inset:auto 0 0 0;top:auto;max-height:82vh;z-index:1200;border-radius:var(--rad-lg) var(--rad-lg) 0 0;display:none;box-shadow:var(--shadow-2)}
  .a20-filters.is-open{display:block}
  .a20-filters-toggle{display:inline-flex}
  .a20-hit{grid-template-columns:1fr}.a20-hit-ic{display:none}.a20-hit-side{flex-direction:row;align-items:center;justify-content:flex-start}
}

/* ── 8. Fiche : barre d'outils, sommaire, alertes ─────────────────────────── */
.a20-fiche-tools{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin:.9rem 0 0}
.a20-fiche-meta{display:flex;gap:.5rem 1rem;flex-wrap:wrap;margin:.6rem 0 0;font:500 .78rem var(--font-ui);color:var(--dim)}
.a20-toc{display:flex;gap:.35rem;flex-wrap:wrap;margin:.8rem 0 .2rem;padding:.6rem;border:1px solid var(--border);border-radius:var(--rad-md);background:var(--row-alt)}
.a20-toc-title{font:700 .7rem var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);width:100%;margin-bottom:.1rem}
.a20-related{margin:1rem 0;padding:1rem;border:1px solid var(--border);border-radius:var(--rad-md);background:var(--card)}
.a20-related h3{font:700 .95rem var(--font-ui);color:var(--gold);margin:0 0 .6rem}
.a20-related-grp{margin:.5rem 0}
.a20-related-grp>div:first-child{font:600 .72rem var(--font-ui);color:var(--aged);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.3rem}
.a20-related-grp .items{display:flex;gap:.35rem;flex-wrap:wrap}
.a20-loading-fiche{display:flex;align-items:center;gap:.8rem;padding:2rem;color:var(--aged);font:500 1rem var(--font-ui)}
.a20-spinner{width:22px;height:22px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--gold);animation:a20-spin .8s linear infinite;flex:none}
@keyframes a20-spin{to{transform:rotate(360deg)}}
.modal-bg .modal{outline:none}
@media (max-width:640px){
  .modal-bg{padding:0!important}
  .modal-bg .modal{width:100vw!important;max-width:100vw!important;min-height:100vh;border-radius:0!important;margin:0!important;border-left:0!important;border-right:0!important}
  .modal-close{position:sticky!important;top:.5rem;margin-left:auto;display:grid;place-items:center;width:44px;height:44px;z-index:5}
}

/* ── 9. Comparateur ───────────────────────────────────────────────────────── */
.a20-cmp-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:.6rem;margin:0 0 var(--sp-4)}
.a20-cmp-slot{display:flex;align-items:center;gap:.5rem;justify-content:space-between;padding:.6rem .8rem;border:1px solid var(--border-h);border-radius:var(--rad-md);background:var(--card);font:600 .9rem var(--font-ui);min-width:0}
.a20-cmp-slot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a20-cmp-slot--empty{border-style:dashed;color:var(--dim);font-weight:500;justify-content:center}
.a20-cmp-diff td.is-diff{background:color-mix(in srgb,var(--gold) 7%,transparent)}
.a20-cmp-grp th{background:var(--surface)!important;color:var(--gold)!important;font:700 .72rem var(--font-ui);letter-spacing:.08em;text-transform:uppercase}
.a20-cmp-tray{position:fixed;z-index:1050;right:1rem;bottom:1rem;display:none;align-items:center;gap:.6rem;background:var(--card-hi);border:1px solid var(--border-h);border-radius:var(--rad-pill);padding:.35rem .4rem .35rem 1rem;box-shadow:var(--shadow-2);font:600 .85rem var(--font-ui)}
.a20-cmp-tray.is-visible{display:flex}

/* ── 10. Favoris, paramètres, applications ───────────────────────────────── */
.a20-fav-item{display:grid;grid-template-columns:auto 1fr auto;gap:.2rem .8rem;align-items:center;padding:.7rem .9rem;background:var(--card);border:1px solid var(--border);border-radius:var(--rad-md)}
.a20-fav-item .t{font:700 1rem var(--font-ui);color:var(--parch);background:none;border:0;padding:0;text-align:left;cursor:pointer}
.a20-fav-item .t:hover{color:var(--gold);text-decoration:underline}
.a20-fav-item .m{grid-column:2;font:400 .8rem var(--font-ui);color:var(--aged)}
.a20-fav-item .acts{grid-row:span 2;display:flex;gap:.3rem;align-items:center}
.a20-settings{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.a20-seg{display:inline-flex;border:1px solid var(--border-h);border-radius:var(--rad-md);overflow:hidden}
.a20-seg button{min-height:40px;padding:.4rem .9rem;background:var(--surface);color:var(--parch);border:0;border-right:1px solid var(--border);font:600 .85rem var(--font-ui);cursor:pointer}
.a20-seg button:last-child{border-right:0}
.a20-seg button[aria-pressed="true"]{background:var(--amber);color:#1a1100}
html.theme-is-light .a20-seg button[aria-pressed="true"]{color:#fff}
.a20-dl-group{margin:0 0 var(--sp-5)}
.a20-dl-group h2{font:700 1.2rem var(--font-ui);color:var(--parch);margin:0 0 .7rem;display:flex;gap:.5rem;align-items:center}
.a20-dl{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;align-items:center;padding:1rem;border:1px solid var(--border);border-radius:var(--rad-md);background:var(--card);margin-bottom:.6rem}
.a20-dl h3{font:700 1rem var(--font-ui);color:var(--parch);margin:0}
.a20-dl .spec{font:400 .82rem/1.5 var(--font-ui);color:var(--aged);grid-column:1}
.a20-dl .act{grid-row:span 2;display:flex;flex-direction:column;gap:.35rem;align-items:flex-end}
.a20-dl code{font:400 .72rem var(--font-mono);color:var(--dim);word-break:break-all}
@media (max-width:600px){.a20-dl{grid-template-columns:1fr}.a20-dl .act{grid-row:auto;align-items:stretch}}

/* ── 11. Pied de page ────────────────────────────────────────────────────── */
.atlas-footer{margin-top:auto}
.a20-footer-links{display:flex;gap:.3rem 1.2rem;flex-wrap:wrap;justify-content:center;margin:.8rem 0 0;font:500 .82rem var(--font-ui)}
.a20-footer-links a{color:var(--gold);text-decoration:none}
.a20-footer-links a:hover{text-decoration:underline}
.a20-footer-ver{font:500 .75rem var(--font-ui);color:var(--dim);margin-top:.6rem}

/* ── 12. Écran de chargement ─────────────────────────────────────────────── */
#loader{position:static!important;inset:auto!important;z-index:auto!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:transparent!important;color:var(--parch);margin:2rem auto 0;width:auto!important;height:auto!important}
#loader.gone{opacity:0;visibility:hidden;pointer-events:none}
.ld-brand{display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center;padding:0 1rem}
.ld-mark{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--gold);color:var(--gold);font:900 1.8rem var(--font-title);
  background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--amber) 35%,transparent),transparent 65%)}
.ld-title{font:700 1.5rem/1.2 var(--font-title);color:var(--gold-l);letter-spacing:.02em}
.ld-sub{font:500 .8rem var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ld-panel{width:min(420px,86vw);display:flex;flex-direction:column;gap:.5rem}
.ld-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font:500 .9rem var(--font-ui);color:var(--aged)}
.ld-row strong{color:var(--gold);font-variant-numeric:tabular-nums}
.ld-bar{height:8px;border-radius:4px;background:var(--row-alt);border:1px solid var(--border);overflow:hidden}
.ld-bar>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--gold-l));transition:width .25s var(--ease)}
.ld-err{display:none;width:min(480px,90vw);text-align:left}
#loader.has-error .ld-err{display:flex}
#loader.has-error .ld-bar>span{background:var(--err)}
.ld-hint{font:400 .78rem var(--font-ui);color:var(--dim);text-align:center;max-width:420px;padding:0 1rem}

/* Boutons historiques de l'accueil : typographie d'interface lisible */
.btn-p,.btn-o{font-family:var(--font-ui)!important;letter-spacing:.04em!important;font-size:.85rem!important;font-weight:700!important;border-radius:var(--rad-md)!important;min-height:44px;display:inline-flex!important;align-items:center}
.kpi-total .kpi-l span{display:none}
/* Neutralise la règle historique « section{padding:3.5rem 2rem;border-bottom} » dans les composants v20 */
.a20-mega section,.a20-dl-group,.a20-related,.a20-card section,.a20-page section,.a20-settings>section,.a20-search-layout>section{padding:0;border-bottom:0}
.a20-settings>section.a20-card{padding:var(--sp-5)}
.a20-related{padding:1rem!important;border-bottom:1px solid var(--border)!important}
.map-layer-btn{font-size:.75rem!important;font-family:var(--font-ui)!important;letter-spacing:.03em!important;min-height:32px}
html.theme-is-light .map-layer-btn.on{color:var(--gold-l)!important}
/* Cartes « Cuisines du monde » : couleurs historiques conçues pour le fond sombre */
.dish-card-origin{color:rgba(255,255,255,.66)}.dish-card-desc{color:rgba(255,255,255,.74)}.dish-meta-item{color:rgba(255,255,255,.7)}
html.theme-is-light .dish-card-title{color:var(--parch)}
html.theme-is-light .dish-card-origin,html.theme-is-light .dish-card-desc,html.theme-is-light .dish-meta-item{color:var(--aged)}
html.theme-is-light .dish-meta-item{background:var(--row-alt)}
html.theme-is-light .diet-badge.vege,html.theme-is-light .diet-badge.vegan{color:#1d6b33}
html.theme-is-light .diet-badge.gf{color:#7a4a00}
html.theme-is-light .diet-badge.halal{color:#1f4f96}
html.theme-is-light .dish-filter-tab{color:var(--parch)}
html.theme-is-light [style*="#199e70"]{color:#0b6b4a!important}
html.theme-is-light [style*="#3987e5"]{color:#1f5fa8!important}
html.theme-is-light [style*="#d95926"]{color:#a8401a!important}
html.theme-is-light [style*="#c98500"]{color:#8a5600!important}
html.theme-is-light [style*="#7aa84f"]{color:#3f6b1f!important}
#app-main p a,.modal p a{text-decoration:underline;text-underline-offset:2px}
.dish-card-link{color:var(--gold-l)!important;font-weight:700}
.dishes-stats-bar span,.dishes-stats-bar>span{color:var(--aged)!important}
#app-main a:not([class]):not([style*="text-decoration:none"]){text-decoration:underline;text-underline-offset:2px}
body:not(.a20-ready) .atlas-footer{visibility:hidden}
/* Comparateur sur téléphone : colonne des critères étroite, colonnes de valeurs lisibles, défilement horizontal */
@media (max-width:700px){
  .a20-cmp-diff{min-width:calc(120px + var(--cmp-cols,3) * 150px);table-layout:fixed}
  .a20-cmp-diff thead th:first-child{width:120px}
  .a20-cmp-diff th[scope="row"]{white-space:normal;width:120px;min-width:120px;max-width:120px;font-size:.8rem}
  .a20-cmp-diff td,.a20-cmp-diff thead th{min-width:150px;font-size:.85rem}
}

/* ═══ v21 — plateforme collaborative (formulaire, suivi, communauté, données, fiche en sections) ═══ */
[hidden]{display:none!important}
.a20-add-btn{white-space:nowrap}
@media (max-width:720px){.a20-add-btn .lbl{display:none}.a20-add-btn{min-width:44px;padding-inline:.6rem;font-size:1.2rem}}
.p21-form{display:grid;gap:var(--sp-4)}
.p21-sec{display:grid;gap:var(--sp-3)}
.p21-sec>h2{font:700 var(--fs-lg)/1.3 var(--font-ui);margin:0;color:var(--parch)}
.p21-opt{font-weight:400;color:var(--dim);font-size:var(--fs-sm)}
.p21-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--sp-3) var(--sp-4)}
.p21-field{display:grid;gap:.15rem;min-width:0}
.p21-field--wide{grid-column:1/-1}
.p21-ta{min-height:6rem;resize:vertical;line-height:1.5}
.p21-req{color:var(--err)}
.p21-range{font-weight:400;color:var(--dim)}
.p21-help{font:400 var(--fs-xs)/1.45 var(--font-ui);color:var(--dim);margin:0}
.p21-err{font:600 var(--fs-xs)/1.4 var(--font-ui);color:var(--err);min-height:0}
.p21-err:empty{display:none}
[aria-invalid="true"]{border-color:var(--err)!important}
.p21-unit{display:flex;align-items:center;gap:.4rem}.p21-unit span{font:400 var(--fs-sm) var(--font-ui);color:var(--aged);white-space:nowrap}
.p21-source{border:1px solid var(--border);border-radius:var(--rad-md);padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-3);display:grid;gap:var(--sp-3);min-width:0}
.p21-source legend{font:700 var(--fs-xs) var(--font-ui);color:var(--gold);padding:0 .3rem}
.p21-source .a20-btn{justify-self:start}
.p21-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.p21-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.p21-status{font:400 var(--fs-xs) var(--font-ui);color:var(--dim)}
.p21-similar ul{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.35rem}
.p21-similar li{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.p21-done{display:grid;gap:var(--sp-4)}
.p21-done-lead{font:400 var(--fs-lg)/1.5 var(--font-ui);margin:0}
.p21-code-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.p21-code-row .a20-input{flex:1 1 240px;font-family:var(--font-mono);font-size:var(--fs-sm)}
.p21-mine{display:grid;gap:var(--sp-3);margin:var(--sp-4) 0}
.p21-item{display:grid;gap:.5rem}.p21-item h2{font:700 var(--fs-md) var(--font-ui);margin:0}
.p21-item-hd{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between}
.p21-focus{outline:2px solid var(--gold);outline-offset:2px}
.p21-hist summary{cursor:pointer;font:600 var(--fs-xs) var(--font-ui);color:var(--aged)}
.p21-hist ul{margin:.4rem 0 0;padding-left:1.1rem;font:400 var(--fs-sm)/1.5 var(--font-ui)}
.p21-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--sp-3)}
.p21-ccard{display:grid;gap:.35rem;text-align:left;cursor:pointer;color:var(--parch);font:400 var(--fs-sm)/1.4 var(--font-ui)}
.p21-ccard:hover{border-color:var(--gold)}
.p21-ccat{font:700 .7rem var(--font-ui);text-transform:uppercase;letter-spacing:.05em;color:var(--gold)}
.p21-list{margin:0;padding-left:1.2rem;font:400 var(--fs-sm)/1.6 var(--font-ui)}
.p21-dls{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.p21-data{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.p21-data code,.p21-list code{word-break:break-all}
.p21-home{max-width:1100px;margin:var(--sp-5) auto;padding:0 var(--sp-4);display:grid;gap:var(--sp-3)}
.p21-home-card{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between}
.p21-home-card>div:first-child{flex:1 1 380px}
.p21-home-card h2{font:700 var(--fs-xl)/1.3 var(--font-title);margin:0 0 .3rem}
.p21-home-card p{margin:0;font:400 var(--fs-sm)/1.55 var(--font-ui);color:var(--aged)}
.p21-recent h3{font:600 var(--fs-sm) var(--font-ui);margin:0 0 .4rem;color:var(--aged)}
.p21-chips{display:flex;flex-wrap:wrap;gap:.4rem}
/* Fiche : groupes repliables */
.p21-grp{border:1px solid var(--border);border-radius:var(--rad-md);margin:0 0 var(--sp-3);background:color-mix(in srgb,var(--card) 60%,transparent)}
.p21-grp>summary{cursor:pointer;list-style:none;padding:.7rem 1rem;display:flex;align-items:center;gap:.5rem}
.p21-grp>summary::-webkit-details-marker{display:none}
.p21-grp>summary::before{content:'▸';color:var(--gold);transition:transform var(--dur) var(--ease)}
.p21-grp[open]>summary::before{transform:rotate(90deg)}
.p21-grp>summary h3,.p21-grp-t{margin:0;font:700 var(--fs-md) var(--font-ui);color:var(--parch)}
.p21-n{font:600 .72rem var(--font-ui);color:var(--dim);margin-left:.3rem}
.p21-grp-body{padding:0 1rem 1rem}
.p21-dl{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:.3rem 1rem;margin:0 0 .6rem;font:400 var(--fs-sm)/1.5 var(--font-ui)}
.p21-dl dt{color:var(--dim);font-weight:600}.p21-dl dd{margin:0}
.p21-prose{font:400 var(--fs-md)/1.6 var(--font-body);white-space:pre-line}
.p21-srcs{margin:0;padding-left:1.2rem;font:400 var(--fs-sm)/1.5 var(--font-ui)}.p21-srcs a{word-break:break-all}
.p21-corr{border-left:3px solid var(--gold);padding:.3rem .8rem;margin:.6rem 0}
.p21-histo h4{font:700 var(--fs-sm) var(--font-ui);margin:.8rem 0 .3rem}
.p21-switch{display:flex;flex-wrap:wrap;gap:.5rem;max-width:1200px;margin:1rem auto 0;padding:0 var(--sp-4)}
/* ═══ v21.1 — Quiz ═══ */
.q21-hero{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:1rem}
.q21-hero h2,.q21-opts h2,.q21-h{font:700 var(--fs-lg) var(--font-ui);margin:0 0 .3rem}
.q21-hero p{margin:0;font:400 var(--fs-sm)/1.5 var(--font-ui);color:var(--aged)}
.q21-opts{display:grid;gap:.8rem;margin-bottom:1.2rem}
.q21-seg{display:flex;flex-wrap:wrap;gap:.35rem}
.q21-seg button{min-height:40px;padding:.35rem .8rem;border-radius:var(--rad-pill);border:1px solid var(--border-h);background:var(--surface);color:var(--parch);font:600 var(--fs-sm) var(--font-ui);cursor:pointer}
.q21-seg button[aria-checked="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.q21-h{margin:1.2rem 0 .6rem;display:flex;gap:.6rem;align-items:baseline}
.q21-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:.8rem}
.q21-theme{display:grid;gap:.3rem;text-align:left;cursor:pointer;color:var(--parch);font:400 var(--fs-sm)/1.4 var(--font-ui)}
.q21-theme:hover,.q21-theme:focus-visible{border-color:var(--gold)}
.q21-ic{font-size:1.6rem}
.q21-best{font:700 var(--fs-xs) var(--font-ui);color:var(--ok)}
.q21-note{margin-top:1rem}
.q21-play{max-width:820px}
.q21-top{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.q21-meta{font:600 var(--fs-xs) var(--font-ui);color:var(--dim)}
.q21-bar{height:6px;border-radius:6px;background:var(--border);overflow:hidden;margin-bottom:1rem}.q21-bar span{display:block;height:100%;background:var(--gold);transition:width var(--dur) var(--ease)}
.q21-card h2{font:700 var(--fs-xl)/1.35 var(--font-ui);margin:0 0 1rem}
.q21-choices{display:grid;gap:.5rem}
.q21-choice{display:flex;gap:.7rem;align-items:center;text-align:left;min-height:48px;padding:.6rem .9rem;border-radius:var(--rad-md);border:1px solid var(--border-h);background:var(--surface);color:var(--parch);font:500 var(--fs-md)/1.35 var(--font-ui);cursor:pointer}
.q21-choice:hover:not([disabled]){border-color:var(--gold)}
.q21-choice[disabled]{cursor:default}
.q21-k{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--border-h);font:700 .8rem var(--font-ui)}
.q21-choice.is-ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--surface))}
.q21-choice.is-ko{border-color:var(--err);background:color-mix(in srgb,var(--err) 14%,var(--surface))}
.q21-choice.is-sel{border-color:var(--gold)}
.q21-fb{margin-top:1rem;font:400 var(--fs-md)/1.55 var(--font-ui)}.q21-fb p{margin:.3rem 0}
.q21-ok{color:var(--ok)}.q21-ko{color:var(--err)}
.q21-src{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.q21-res{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center}
.q21-score{font:800 3.2rem/1 var(--font-title);color:var(--gold)}.q21-score small{font-size:1.4rem}
.q21-review{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.q21-review li{font:400 var(--fs-sm)/1.5 var(--font-ui)}.q21-review li p{margin:.2rem 0}
.q21-review li.is-ok{border-left:4px solid var(--ok)}.q21-review li.is-ko{border-left:4px solid var(--err)}
.q21-card,.q21-res,.q21-hero,.q21-opts,.q21-review li{padding:1.1rem 1.3rem}
.p21-nut{max-width:420px}.p21-nut th{text-align:left;font-weight:600;padding:.25rem .6rem .25rem 0}.p21-nut td{padding:.25rem 0}

/* v21.3 — barre d'onglets des pôles (fusion des rubriques du menu) */
.a21-hub{max-width:1200px;margin:.9rem auto 0;padding:0 var(--sp-4);display:flex;flex-direction:column;gap:.45rem}
.a21-hub-t{font:600 .78rem/1.2 var(--font-ui, system-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.a21-hub-tabs{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:thin;padding-bottom:.35rem;border-bottom:1px solid var(--border)}
.a21-hub-tabs a{text-decoration:none!important;flex:0 0 auto;padding:.42rem .8rem;border-radius:999px;border:1px solid var(--border);text-decoration:none;color:var(--parch);font:500 .86rem/1.2 var(--font-ui, system-ui);background:var(--surface)}
.a21-hub-tabs a:hover{border-color:var(--gold, #a0621a)}
.a21-hub-tabs a.is-on{background:var(--parch);border-color:var(--parch);color:var(--bg);font-weight:700}
.a21-hub-tabs a:focus-visible{outline:3px solid var(--focus, #1a5fb4);outline-offset:2px}
@media (max-width:640px){.a21-hub{padding:0 16px}}
.p21-gen-note{font-style:italic;margin:.1rem 0 .4rem}.p21-general .ms-content,.p21-general .list-items{opacity:.85}

/* v21.3 — fond de carte sombre obtenu par filtre (aucun fond sombre public sans clé) */
.a21-tiles-dark{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9)}
.p21-todo{border:1px dashed var(--border-h);border-radius:10px;padding:.7rem .9rem;margin:.2rem 0 .8rem;background:var(--chip-bg);color:var(--parch);line-height:1.5}.p21-todo .a20-btn{margin-left:.4rem}

/* Impression d'une fiche : isole la modale et la laisse s'étendre sur autant de pages que nécessaire. */
@page { size: A4; margin: 12mm 14mm 14mm; }
@media print {
  html:has(#modal-bg.open),
  body:has(#modal-bg.open) {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    color: #161616 !important;
  }

  html[data-theme]:has(#modal-bg.open) {
    color-scheme: light !important;
    --ink: #161616 !important;
    --bg: #fff !important;
    --surface: #fff !important;
    --card: #fff !important;
    --card-hi: #f7f5f0 !important;
    --border: #d6d0c5 !important;
    --border-h: #a89b84 !important;
    --amber: #754900 !important;
    --gold: #634515 !important;
    --gold-l: #634515 !important;
    --aged: #4a4032 !important;
    --parch: #1b1915 !important;
    --dim: #554d42 !important;
    --sh: none !important;
    --shadow-1: none !important;
    --shadow-2: none !important;
  }

  body:has(#modal-bg.open) { margin: 0 !important; }
  body:has(#modal-bg.open) > :not(#modal-bg) { display: none !important; }

  #modal-bg.open {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  #modal-bg.open > .modal {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #161616 !important;
  }

  #modal-bg.open .modal-header {
    padding: 0 0 6mm !important;
    background: #fff !important;
    border-bottom: 1px solid #b8b1a4 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #modal-bg.open .modal-body { padding: 0 !important; }
  #modal-bg.open .modal-close,
  #modal-bg.open .a20-fiche-tools,
  #modal-bg.open .a20-toc { display: none !important; }

  /* Les contenus normalement défilants ou repliés doivent rester lisibles sur papier. */
  #modal-bg.open .modal,
  #modal-bg.open .modal * {
    max-height: none !important;
    overflow: visible !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }
  #modal-bg.open details:not([open]) > :not(summary) { display: block !important; }

  #modal-bg.open h1,
  #modal-bg.open h2,
  #modal-bg.open h3,
  #modal-bg.open h4,
  #modal-bg.open .ms-ttl,
  #modal-bg.open summary { break-after: avoid; page-break-after: avoid; }
  #modal-bg.open p,
  #modal-bg.open li { orphans: 3; widows: 3; }
  #modal-bg.open .param,
  #modal-bg.open tr,
  #modal-bg.open .structured-row,
  #modal-bg.open figure,
  #modal-bg.open img,
  #modal-bg.open svg,
  #modal-bg.open canvas { break-inside: avoid; page-break-inside: avoid; }
  #modal-bg.open img,
  #modal-bg.open svg,
  #modal-bg.open canvas { max-width: 100% !important; height: auto !important; }
  #modal-bg.open table { width: 100% !important; border-collapse: collapse; }
  #modal-bg.open .relgraph-box svg { background: #fff !important; }
  #modal-bg.open .relgraph-box svg g > rect[rx="14"] { fill: #fff !important; }
  #modal-bg.open .relgraph-box svg g > rect[rx="19"] { fill: #fff5d9 !important; }
  #modal-bg.open .relgraph-box svg g > text { fill: #463b27 !important; }
  #modal-bg.open .relgraph-box svg g > text[font-size="13.5"] { fill: #3d2b00 !important; }
  #modal-bg.open a { color: inherit !important; text-decoration: none !important; }
}