/* ═══════════════════════════════════════════════════════════════════════════
   ATLAS AGROALIMENTAIRE — couche v22 : densité, robustesse du texte, Explorer
   Chargée après atlas.css. Aucune règle ne masque un débordement par
   overflow:hidden : les textes passent à la ligne, les blocs s'agrandissent.
   Réglages (Paramètres → Affichage) posés sur <html> par theme-init.js :
     data-density="compact" (défaut) | "confort"
     data-fontscale="0..3"            (Normale, Grande, Très grande, Maximale)
     data-width="standard" (défaut) | "large" | "full"
     data-contrast="high"
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Taille de base × taille du texte (combinables, sans transform:scale) ── */
/* compacte (défaut) : texte et espacements à ≈ 81 % — l'équivalent de deux crans de zoom arrière (80 %) obtenu par les jetons
   de taille, la mise en page se recalculant sur la largeur réelle (plus de colonnes, pas de transform:scale) */
html{--fsb:81.25%;--fsm:1;--content-max:1440px;--dens:.72;font-size:calc(var(--fsb) * var(--fsm))}
html[data-density="confort"]{--fsb:100%;--dens:1}
html[data-fontscale="1"]{--fsm:1.0625;font-size:calc(var(--fsb) * var(--fsm))}
html[data-fontscale="2"]{--fsm:1.125;font-size:calc(var(--fsb) * var(--fsm))}
html[data-fontscale="3"]{--fsm:1.25;font-size:calc(var(--fsb) * var(--fsm))}
html[data-width="large"]{--content-max:1720px}
html[data-width="full"]{--content-max:100%}

/* ── 2. Robustesse du texte : jamais de débordement, jamais de coupure ── */
body{overflow-wrap:break-word}
:where(h1,h2,h3,h4,h5,.pc-title,.m-title,.sec-ttl,.subsec-h,.hub-label,.a20-page-hd h1,.metier-tl-event,.kpi-l){overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
/* éléments de grille / flex : autorisés à rétrécir, les longues chaînes (URL, identifiants, formules) se coupent si nécessaire */
:where(.pcard,.hub-card,.a20-card,.kpi,.param,.section-tile,.m-xref,.modal,.modal-header,.modal-body,.modal-section,.p21-field,.p21-sec,.p21-item,
  .a20-settings>*,.grid>*,.hubs-grid>*,.params-grid>*,.a20-mega section,.v22-tile,.dish-card,.metier-text-block,.metier-tl-content,.ms-content,.a20-res,.a20-alert>div){min-width:0;overflow-wrap:anywhere}
:where(.param-v,.pc-desc,.pc-title,.modal-text,.ms-content,.list-items li,.a20-table td,.p21-srcs li,.ref-item,.metier-tl-desc){overflow-wrap:anywhere}
/* aperçus de cartes : texte intégral (déjà borné à ~220 caractères par le moteur) au lieu d'une coupure CSS */
.pc-desc,.dish-card-desc{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
/* puces, résultats, créneaux de comparaison : retour à la ligne au lieu de l'ellipse */
.a20-chip{white-space:normal;overflow:visible;text-overflow:clip;height:auto;text-align:left}
.a20-res-n,.a20-res-m,.a20-cmp-slot span{white-space:normal;overflow:visible;text-overflow:clip}
.gbif-tn,.gbif-fn{white-space:normal;overflow:visible;text-overflow:clip}
.a20-table th[scope="row"]{white-space:normal;min-width:8em}
.hero-result-type{white-space:normal;min-width:0}
/* boutons : texte sur plusieurs lignes plutôt que hors du bouton (sauf barre d'en-tête compacte) */
.a20-btn{white-space:normal;text-align:center;max-width:100%;height:auto;line-height:1.2}
.a20-actions .a20-btn,.a20-nav button,.a20-nav>a{white-space:nowrap}
.a20-fiche-tools,.p21-actions,.a20-btn-row{display:flex;flex-wrap:wrap;gap:.45rem}
/* contrôles segmentés (thème, taille du texte…) : se replient dans leur carte */
.a20-seg{display:flex;flex-wrap:wrap;max-width:100%;width:fit-content}
.a20-seg button{flex:1 1 auto;min-width:0;white-space:normal;line-height:1.2;border-bottom:1px solid var(--border);margin-bottom:-1px}
/* tableaux larges : défilement horizontal dans leur cadre, jamais hors de la carte */
.a20-card table:not(.a20-table),.modal table{display:block;max-width:100%;overflow-x:auto}
.a20-table-wrap,.tw{max-width:100%;overflow-x:auto}
/* images, vidéos, iframes */
img,video,iframe,canvas{max-width:100%}
/* champs de formulaire : jamais plus larges que leur colonne */
input,select,textarea{max-width:100%;min-width:0}
/* hauteurs fixes historiques → hauteur minimale (le contenu peut grandir aux grandes tailles de texte) */
.hub-card{height:auto}
.kpi{height:auto}

/* ── 3. Densité : espacements et tailles réellement optimisés ── */
html:not([data-density="confort"]) #app-main>section:not(.a20-card){padding:calc(3.5rem * var(--dens)) clamp(.75rem,2.2vw,1.6rem)}
html:not([data-density="confort"]) .sec-hd{margin-bottom:calc(2.5rem * var(--dens))}
html:not([data-density="confort"]) .sec-ttl{font-size:clamp(1.45rem,2.6vw,2.15rem)}
html:not([data-density="confort"]) .sec-desc{margin-top:.5rem;line-height:1.5}
html:not([data-density="confort"]) .divdr{margin-top:.6rem}
html:not([data-density="confort"]) .hero{min-height:auto;padding:2.2rem 1.4rem 1.6rem}
html:not([data-density="confort"]) .hero-kpis{margin:1rem auto 1.2rem;gap:.6rem}
html:not([data-density="confort"]) .kpi{padding:.5rem .9rem}
html:not([data-density="confort"]) .grid{gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));max-width:var(--content-max)}
html:not([data-density="confort"]) .pcard{padding:.85rem .95rem}
html:not([data-density="confort"]) .pc-head{margin-bottom:.35rem}
html:not([data-density="confort"]) .pc-emoji{font-size:1.45rem}
html:not([data-density="confort"]) .pc-desc{margin-bottom:.45rem}
html:not([data-density="confort"]) .hubs-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,165px),1fr));gap:.6rem;max-width:var(--content-max)}
html:not([data-density="confort"]) .hub-card{min-height:104px;padding:.85rem .7rem}
html:not([data-density="confort"]) .hub-icon{font-size:1.55rem;margin-bottom:.3rem}
html:not([data-density="confort"]) .modal-bg{padding:1.1rem .8rem}
html:not([data-density="confort"]) .modal{max-width:min(1100px,100%);padding:1.1rem 1.3rem}
html:not([data-density="confort"]) .modal-header{padding:1.1rem 1.4rem .85rem}
html:not([data-density="confort"]) .modal-body{padding:.85rem 1.4rem 1.2rem}
html:not([data-density="confort"]) .modal-section{margin-top:1rem;padding-top:.75rem}
html:not([data-density="confort"]) .m-subtitle{margin-bottom:.7rem}
html:not([data-density="confort"]) .params-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:.5rem}
html:not([data-density="confort"]) .param{padding:.45rem .65rem}
html:not([data-density="confort"]) .subsec-h{font-size:1.22rem;margin:1.2rem 0 .6rem}
html:not([data-density="confort"]) .a20-page{max-width:var(--content-max);padding:.9rem clamp(.75rem,2.2vw,1.6rem) 1.8rem}
html:not([data-density="confort"]) .a20-page-hd{margin-bottom:.9rem}
html:not([data-density="confort"]) .a20-page-hd h1{font-size:clamp(1.55rem,2.8vw,2.1rem)}
html:not([data-density="confort"]) .a20-page-hd p{font-size:var(--fs-md)}
html:not([data-density="confort"]) .a20-card{padding:.95rem 1.05rem}
html:not([data-density="confort"]) .a20-settings>section.a20-card{padding:.95rem 1.05rem}
html:not([data-density="confort"]) .a20-settings{gap:.7rem}
html:not([data-density="confort"]) .breadcrumb{padding-top:.6rem;padding-bottom:.2rem}
html:not([data-density="confort"]) #mapview{height:min(560px,68vh)}
html:not([data-density="confort"]) .a21-hub{margin-top:.55rem}
html:not([data-density="confort"]) .metier-text-block{margin-bottom:.8rem}
html:not([data-density="confort"]) .atlas-footer{padding-top:1.4rem;padding-bottom:1.4rem}
html:not([data-density="confort"]) .a20-btn{min-height:36px}
html:not([data-density="confort"]) .a20-seg button{min-height:34px;padding:.35rem .75rem}
html:not([data-density="confort"]) .a20-input,html:not([data-density="confort"]) .a20-select{min-height:38px}
/* en-tête et accueil compacts (mêmes proportions qu'à 80 %) */
html:not([data-density="confort"]) #navbar{min-height:50px}
html:not([data-density="confort"]) .a20-bar{min-height:50px;padding-top:.4rem;padding-bottom:.4rem}
html:not([data-density="confort"]) #navbar .a20-btn,html:not([data-density="confort"]) #navbar .a20-menu-wrap>button{min-height:34px}
html:not([data-density="confort"]) #navbar .a20-btn--icon{width:34px}
html:not([data-density="confort"]) .a20-brand-mark{width:30px;height:30px}
html:not([data-density="confort"]) .hero-h1{max-width:13.5em}
html:not([data-density="confort"]) .hero-search{max-width:min(720px,100%)}
/* téléphones : la densité compacte garde un texte de lecture confortable (pas d'équivalent « zoom arrière » sur petit écran tactile) */
@media (max-width:600px){html:not([data-density="confort"]){--fsb:93.75%}}
/* largeur de contenu réglable pour les conteneurs historiques */
.grid,.hubs-grid,#mapview{max-width:var(--content-max)}
.a20-page{max-width:var(--content-max)}
html[data-density="confort"] .a20-page{max-width:max(1240px,min(var(--content-max),1240px))}
html[data-width="large"][data-density="confort"] .a20-page,html[data-width="full"][data-density="confort"] .a20-page{max-width:var(--content-max)}

/* ── 4. Explorer : grille de tuiles (toutes les catégories visibles sans défilement) ── */
.a20-mega.v22-mega.is-open{display:grid;columns:auto;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:.9rem 1.1rem;
  width:min(1180px,calc(100vw - 1.5rem));padding:.9rem 1rem 1rem;align-items:start}
.v22-mega section{margin:0;display:block;width:auto}
.v22-mega h3{margin:0 0 .45rem}
.v22-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.v22-tile a{display:flex;gap:.55rem;align-items:flex-start;height:100%;padding:.5rem .6rem;border:1px solid var(--border);border-radius:var(--rad-md);
  background:var(--surface);color:var(--parch);text-decoration:none;transition:border-color var(--dur),background var(--dur)}
.v22-tile a:hover,.v22-tile a:focus-visible{border-color:var(--gold);background:var(--chip-bg)}
.v22-tile .ic{font-size:1.25rem;line-height:1.2;flex:none;width:1.4em;text-align:center}
.v22-tile .tx{display:flex;flex-direction:column;min-width:0}
.v22-tile .lb{font:600 .88rem/1.25 var(--font-ui);color:var(--parch)}
.v22-tile .ds{font:400 .74rem/1.3 var(--font-ui);color:var(--dim);margin-top:.12rem}
.v22-tile a:hover .lb{color:var(--gold)}
.v22-mega .v22-more{display:flex;flex-wrap:wrap;align-content:flex-start;gap:.4rem}
.v22-mega .v22-more h3{flex:1 0 100%}
.v22-mega .v22-more a{font:600 .8rem/1.2 var(--font-ui);color:var(--aged);text-decoration:none;padding:.35rem .65rem;border:1px solid var(--border);border-radius:var(--rad-pill)}
.v22-mega .v22-more a:hover{color:var(--gold);border-color:var(--gold)}
@media (max-width:520px){.v22-tiles{grid-template-columns:minmax(0,1fr)}}
/* page « Toutes les catégories » plus dense */
html:not([data-density="confort"]) .coll-grid,html:not([data-density="confort"]) .cat-grid{gap:.6rem}

/* ── 5. Paramètres v22 : navigation par catégories ── */
.v22-set{display:grid;grid-template-columns:minmax(170px,220px) minmax(0,1fr);gap:1rem;align-items:start}
.v22-set-nav{position:sticky;top:76px;display:flex;flex-direction:column;gap:.25rem}
.v22-set-nav button{display:flex;gap:.5rem;align-items:center;text-align:left;padding:.5rem .7rem;border-radius:var(--rad-md);border:1px solid transparent;background:none;color:var(--parch);font:600 .9rem/1.25 var(--font-ui);cursor:pointer}
.v22-set-nav button[aria-selected="true"]{background:var(--chip-bg);border-color:var(--border-h);color:var(--gold)}
.v22-set-nav button:hover{border-color:var(--border)}
.v22-set-body{display:grid;gap:.75rem;min-width:0}
.v22-set-body>section{min-width:0}
.v22-set-body h2{font:700 1.05rem/1.25 var(--font-ui);margin:0 0 .7rem;color:var(--parch)}
.v22-set-body h3{font:700 .8rem/1.2 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin:1rem 0 .4rem}
.v22-row{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between;padding:.55rem 0;border-bottom:1px solid var(--border)}
.v22-row:last-child{border-bottom:0}
.v22-row>.l{min-width:0;flex:1 1 220px}
.v22-row>.l strong{display:block;font:600 .92rem/1.3 var(--font-ui);color:var(--parch)}
.v22-row>.l small{display:block;font:400 .8rem/1.4 var(--font-ui);color:var(--dim)}
.v22-row>.c{flex:0 1 auto;min-width:0;max-width:100%}
.v22-kv{display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr);gap:.35rem 1rem;font:400 .9rem/1.45 var(--font-ui)}
.v22-kv dt{color:var(--aged);font-weight:600}.v22-kv dd{margin:0;color:var(--parch);overflow-wrap:anywhere}
.v22-diag{width:100%;border-collapse:collapse;font:400 .88rem/1.4 var(--font-ui)}
.v22-diag th,.v22-diag td{padding:.5rem .55rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.v22-diag th{color:var(--gold);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.v22-diag td:nth-child(3),.v22-diag td:nth-child(4){white-space:nowrap}
.v22-ok{color:var(--ok);font-weight:700}.v22-ko{color:var(--err);font-weight:700}.v22-wait{color:var(--dim)}.v22-warn{color:var(--warn);font-weight:700}
.v22-code{font:600 .75rem/1.3 var(--font-mono);color:var(--dim)}
.v22-log{max-height:320px;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--rad-md);padding:.6rem .75rem;font:400 .78rem/1.5 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--aged)}
.v22-q{display:grid;gap:.5rem;margin:.5rem 0}
.v22-q li{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:center;justify-content:space-between;padding:.5rem .7rem;border:1px solid var(--border);border-radius:var(--rad-md);background:var(--surface)}
.v22-q ul{padding:0;margin:0}
@media (max-width:760px){.v22-set{grid-template-columns:minmax(0,1fr)}.v22-set-nav{position:static;flex-direction:row;flex-wrap:wrap}.v22-kv{grid-template-columns:minmax(0,1fr)}}

/* ── 6. Messages d'erreur utilisateur (codes) ── */
.v22-err{display:flex;flex-direction:column;gap:.4rem}
.v22-err .v22-code{margin-top:.2rem}

/* ── 7. Contraste élevé ── */
html[data-contrast="high"]{--aged:#f1e3c4;--dim:#e2cfa6;--parch:#fffaf0;--border:rgba(255,214,140,.55);--border-h:rgba(255,214,140,.9);--gold:#ffc34d;--gold-l:#ffd479;--card:#0c0904;--bg:#000;--surface:#15100a}
html[data-contrast="high"].theme-is-light{--aged:#1d1406;--dim:#2c200c;--parch:#000;--border:rgba(60,35,0,.6);--border-h:rgba(60,35,0,.95);--gold:#5a3500;--gold-l:#4a2c00;--card:#fff;--bg:#fff;--surface:#f4ecd8}
html[data-contrast="high"] a{text-decoration-thickness:2px}
html[data-contrast="high"] :focus-visible{outline:3px solid var(--focus)!important;outline-offset:2px}

/* ── 8. Focus clavier visible partout ── */
:where(a,button,[role="button"],[tabindex],input,select,textarea,summary):focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ── 9. Impression : pas de navigation ni de barre d'état ── */
@media print{.v22-set-nav,#a21-hub,.a20-header,#navbar{display:none!important}}

/* ═══ v22.1 — bords de l'écran : rien n'est coupé ni collé au bord ═════════════════════════════════════════
   Les barres d'onglets des pôles et la barre alphabétique défilaient horizontalement : le dernier onglet visible
   était tranché net par le bord (« Produits laitiers & fromages », « Par cuisine natio… »). Elles passent à la ligne.
   Les vues sans conteneur propre (répertoire des plats, fermentations, cuisines) touchaient les bords de la fenêtre. */
.a21-hub-tabs{flex-wrap:wrap;overflow-x:visible;row-gap:.4rem}
.alpha-bar{flex-wrap:wrap!important;overflow-x:visible!important;justify-content:flex-start!important;row-gap:.3rem}
#app-main>div:not([class]){padding-left:clamp(12px,2.6vw,28px);padding-right:clamp(12px,2.6vw,28px);box-sizing:border-box}
@media (max-width:640px){.a21-hub-tabs a{padding:.34rem .62rem;font-size:.8rem}}
/* bouton de recherche de l'en-tête : sans son libellé (≤ 1180 px), même gabarit que les autres boutons-icônes */
@media (max-width:1180px){.a20-search-btn{min-width:34px;width:34px;min-height:34px;height:34px;padding:0;justify-content:center}}
/* fil d'Ariane : même retrait que le contenu (il était à 6 px du bord) */
.breadcrumb{padding-left:clamp(.8rem,2.2vw,1.6rem)!important;padding-right:clamp(.8rem,2.2vw,1.6rem)!important;box-sizing:border-box}
/* tableaux larges (critères microbiologiques, limites de contaminants, table nutritionnelle, emballages) : sur petit écran
   ils défilent DANS leur cadre au lieu d'élargir toute la page (qui débordait de 30 à 180 px à 320–390 px) */
@media (max-width:760px){#app-main table,.modal table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}
/* classification biologique : rangs profonds sans débordement sur téléphone */
.phylo-node{flex-wrap:wrap;min-width:0}.phylo-name{min-width:0;overflow-wrap:anywhere}
@media (max-width:480px){.phylo-rank{min-width:64px}.phylo-tree{padding:.7rem .75rem}}

/* ═══ v22.1 — téléphones et tablettes (iOS, Android) : même interface que sur ordinateur ═══════════════════════
   Même en-tête (marque, « Ajouter une fiche », recherche), même navigation (Accueil · Explorer · Ressources) sur une
   2e ligne, mêmes menus en tuiles (affichés en feuille sous l'en-tête), mêmes actions de fiche dans le même ordre.
   Zones sûres : encoche et barre d'état iOS, barres système Android en bord à bord (Capacitor : --safe-area-inset-*). */
:root{--sa-t:var(--safe-area-inset-top,env(safe-area-inset-top,0px));--sa-b:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));
  --sa-l:var(--safe-area-inset-left,env(safe-area-inset-left,0px));--sa-r:var(--safe-area-inset-right,env(safe-area-inset-right,0px))}
#navbar.a20-header{padding-top:var(--sa-t)}
.a20-bar{padding-left:max(var(--sp-4),var(--sa-l));padding-right:max(var(--sp-4),var(--sa-r))}
.a20-drawer-panel{padding-top:var(--sa-t);padding-bottom:var(--sa-b);padding-right:var(--sa-r)}
.modal-bg{padding-top:max(2.5rem,calc(var(--sa-t) + 1rem));padding-bottom:max(2.5rem,calc(var(--sa-b) + 1rem));padding-left:max(1rem,var(--sa-l));padding-right:max(1rem,var(--sa-r))}
#a20-toasts{bottom:calc(1rem + var(--sa-b))}
.a20-cmp-tray{bottom:calc(1rem + var(--sa-b));right:max(1rem,var(--sa-r))}
.atlas-footer{padding-bottom:calc(1.4rem + var(--sa-b))}
.a20-palette-box{margin-top:max(8vh,calc(var(--sa-t) + .75rem))}
/* raccourcis de la 2e ligne (téléphone) : masqués sur ordinateur et tablette, où ils sont dans la barre d'outils */
.a20-nav>a.a22-nav-ic,.a22-nav-ic{display:none}
/* libellés courts des actions de fiche (téléphone) : masqués sur ordinateur */
.a22-lbs{display:none}
.a20-fiche-tools .a20-btn{display:inline-flex;align-items:center;gap:.35rem}
/* listes de choix : même police d'interface partout (le tri « A → Z » était en italique serif) */
select,.flt-select,.atlas-filters select{font-family:var(--font-ui)}
/* cuisines du monde : nombre de plats par cuisine, bouton « Toutes les cuisines » (téléphone uniquement) */
.dft-n{display:inline-block;margin-left:.15rem;font:600 .72em/1 var(--font-ui);opacity:.65}
.dish-filter-more{display:none}
/* cartes « Cuisines du monde » en thème clair : l'étiquette de cuisine était blanche sur fond pâle (illisible) */
html.theme-is-light .dish-cuisine-badge{color:var(--aged);background:var(--chip-bg);border:1px solid var(--border)}
.dishes-stats-bar{flex-wrap:wrap;row-gap:.25rem}
.dishes-stats-bar>span{flex:0 1 auto;white-space:nowrap}

@media (max-width:980px){
  /* en-tête sur deux lignes : 1) marque + actions, 2) navigation PC */
  .a20-bar{flex-wrap:wrap;row-gap:0}
  .a20-nav{display:flex;order:3;flex:1 0 100%;margin:0;padding:.1rem 0 .3rem;gap:.2rem;border-top:1px solid var(--border);min-width:0}
  .a20-nav>a.opt{display:inline-flex}
  .a20-nav>a,.a20-nav>div>button{min-height:36px;padding:.3rem .6rem;font-size:.9rem}
  html:not([data-density="confort"]) #navbar .a20-menu-wrap>button{min-height:34px}
  .a20-burger{display:inline-flex}
  /* menus Explorer / Ressources : feuille pleine largeur sous l'en-tête (tuiles identiques au PC) */
  .a20-menu-wrap{position:static}
  .a20-mega,.a20-mega.v22-mega.is-open,.a20-mega--small{position:fixed;top:var(--a22-top,calc(var(--a22-hdr-h,96px) + 4px));left:max(8px,var(--sa-l))!important;right:max(8px,var(--sa-r));
    width:auto;max-height:calc(100dvh - var(--a22-top,calc(var(--a22-hdr-h,96px) + 4px)) - 10px - var(--sa-b));overflow:auto;overscroll-behavior:contain;z-index:1101}
  .a20-mega.v22-mega.is-open{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
  .a20-mega--small.is-open{columns:2 200px}
  /* menu ☰ : tuiles d'Explorer comme sur PC (1 colonne) */
  .a22-drawer-tiles{grid-template-columns:minmax(0,1fr);gap:.35rem;margin:.2rem .2rem .5rem}
  .a20-drawer-body .a22-drawer-tiles a{min-height:var(--tap);border-bottom:1px solid var(--border);border-radius:var(--rad-md);font-weight:500}
  /* barre d'onglets des pôles : même style que le PC, retours à la ligne réguliers */
  .a21-hub{padding-left:max(.8rem,var(--sa-l));padding-right:max(.8rem,var(--sa-r))}
}
/* paysage sur téléphone (hauteur < 520 px) : l'en-tête ne reste pas collé en haut (il prendrait ¼ de l'écran) */
@media (max-width:980px) and (max-height:520px){#navbar.a20-header{position:relative}}

/* tablette : chiffres clés sur une ligne de 6 et boutons sur une ligne de 4, comme sur PC */
@media (min-width:641px) and (max-width:980px){
  .hero-kpis{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:.45rem!important;width:100%;max-width:900px}
  .hero-kpis .kpi{min-width:0;padding:.6rem .35rem!important;text-align:center}
  .hero-kpis .kpi-l{display:block;line-height:1.3;letter-spacing:.06em;overflow-wrap:anywhere}
  .hero-btns{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem!important;width:100%;max-width:900px;margin-left:auto;margin-right:auto}
  .hero-btns>*{min-width:0;justify-content:center;text-align:center;white-space:normal;padding:.75rem .5rem!important}
}
@media (max-width:640px){
  .a20-nav>a.a22-nav-ic,.a22-nav-ic{display:inline-flex;align-items:center;justify-content:center;position:relative;min-width:36px;min-height:36px;padding:0 .35rem;border-radius:var(--rad-md);
    color:var(--parch);text-decoration:none;font:600 1rem/1 var(--font-ui);border:1px solid transparent}
  .a20-nav .a22-nav-ic:not(.a22-nav-ic2){margin-left:auto}
  .a22-nav-ic[aria-current="page"],.a22-nav-ic.is-on{color:var(--gold);border-color:var(--border-h)}
  .a22-nav-ic .a20-count{position:absolute;top:-2px;right:-3px}
  .a20-nav>a,.a20-nav>div>button{padding:.3rem .5rem}
  /* accueil : chiffres clés en grille régulière 3 × 2 (une seule ligne de 6 sur PC), boutons en 2 × 2 */
  .hero-kpis{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem!important;width:100%;max-width:520px}
  .hero-kpis .kpi{min-width:0;padding:.55rem .3rem!important;text-align:center}
  .hero-kpis .kpi-n{font-size:1.45rem}.hero-kpis .kpi-total .kpi-n{font-size:1.6rem}
  .hero-kpis .kpi-l{display:block;font-size:.56rem;line-height:1.3;letter-spacing:.05em;margin-top:.35rem;overflow-wrap:anywhere;hyphens:auto}
  .hero-btns{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem!important;width:100%;max-width:520px;margin-left:auto;margin-right:auto}
  .hero-btns>*{min-width:0;padding:.75rem .5rem!important;justify-content:center;text-align:center;white-space:normal;line-height:1.25}
  /* fiche : les 5 actions du PC sur une ligne, icône + libellé court */
  .a20-fiche-tools{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:.3rem!important}
  .a20-fiche-tools .a20-btn{flex-direction:column;gap:.15rem;padding:.4rem .15rem;min-height:52px;font-size:.7rem;line-height:1.1}
  .a20-fiche-tools .a22-ic{font-size:1.05rem;line-height:1}
  .a20-fiche-tools .a22-lb{display:none}.a20-fiche-tools .a22-lbs{display:block;overflow-wrap:normal;word-break:keep-all;hyphens:none;letter-spacing:-.01em}
  .modal-close{position:sticky;top:.25rem;float:right;margin:-.3rem -.4rem .2rem .4rem;width:40px;height:40px;background:var(--card);box-shadow:var(--shadow-1,0 1px 4px rgba(0,0,0,.2))}
  html:not([data-density="confort"]) .modal-bg{padding-left:max(.4rem,var(--sa-l));padding-right:max(.4rem,var(--sa-r))}
  html:not([data-density="confort"]) .modal{padding:.8rem .75rem}
  html:not([data-density="confort"]) .modal-header{padding:.8rem .85rem .7rem}
  html:not([data-density="confort"]) .modal-body{padding:.6rem .7rem 1rem}
  /* cuisines du monde : 11 cuisines les plus fournies + la cuisine choisie ; « Toutes les cuisines » déplie le reste */
  .dish-filter-tabs.is-collapsed .dish-filter-tab:nth-child(n+13):not(.active){display:none}
  .dish-filter-more{display:inline-flex;align-items:center;margin:.5rem 0 0;padding:.45rem .8rem;border-radius:var(--rad-pill);border:1px solid var(--border-h);
    background:var(--surface);color:var(--gold);font:600 .82rem/1.2 var(--font-ui);cursor:pointer;min-height:40px}
  .dishes-controls{padding:.9rem max(.8rem,var(--sa-l)) .4rem max(.8rem,var(--sa-r))}
  .dishes-controls .flt-select{width:100%;margin:.4rem 0}
  /* carte mondiale : calques en 2 colonnes, filtres en grille pleine largeur */
  .atlas-layers{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}
  .atlas-layers .map-layer-btn{min-width:0;white-space:normal;text-align:left;min-height:40px}
  .atlas-filters{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch!important}
  .atlas-filters select,.atlas-filters input{width:100%;min-width:0!important}
  .atlas-filters input,.atlas-filters select:nth-of-type(3){grid-column:1/-1}
  .dishes-stats-bar{padding:.4rem max(.9rem,var(--sa-l))}
  /* zones de toucher : 40 px minimum pour les petits boutons d'action */
  .a20-btn--sm{min-height:40px}
}
@media (max-width:340px){.a20-nav>a.a22-nav-ic{display:none}}
@media (max-width:374px){.a20-nav>a.a22-nav-ic2{display:none}.a20-fiche-tools .a20-btn{font-size:.64rem;padding:.4rem .05rem}.a20-nav>a,.a20-nav>div>button{font-size:.85rem;padding:.3rem .4rem}}
/* iOS agrandit la page quand un champ de moins de 16 px reçoit le focus : 16 px minimum sur écran tactile */
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:max(16px,1em)}}
@media print{.a22-nav-ic,.dish-filter-more{display:none!important}}
/* recette traduite : provenance en note discrète */
.recipe-note{margin:.55rem 0 0;font:italic 400 .8rem/1.45 var(--font-ui);color:var(--dim)}
.recipe-meta{margin:.1rem 0 .5rem;font:600 .82rem/1.45 var(--font-ui);color:var(--aged)}