/* ═══════════════════════════════════════════════════════════════════════════
   aliments.css — feuille des fiches aliment programmatiques (SEO).
   Léo 🌱, 15/08/2026. Charge APRÈS /css/etal.css, mêmes jetons (--bg/--text/
   --accent/--border/...), aucune couleur nouvelle. CSP style-src 'self' : rien
   d'inline, rien de distant.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Filet de sécurité : la rangée de portions (.al-portions ci-dessous) est
   scrollable en interne, mais si un navigateur laisse malgré tout fuir son
   contenu (bug audité le 15/08 : scrollWidth 484px sur 375px), la page ne
   doit jamais suivre. `clip` plutôt que `hidden` : ne casse pas position:sticky
   du header (.al-nav). */
html{overflow-x:clip;max-width:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);margin:0;line-height:1.5;overflow-x:clip;max-width:100%}
a{color:var(--accent)}
.al-nav{border-bottom:1px solid var(--border);background:var(--surface)}
.al-nav .row{max-width:980px;margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;height:60px}
.al-brand{font-weight:800;font-size:1.2rem;color:var(--accent);text-decoration:none}
.al-nav .btn{background:var(--accent-aplat);color:var(--accent-sur)!important;padding:8px 16px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.92rem}
.al-wrap{max-width:820px;margin:0 auto;padding:0 22px}
.al-crumb{font-size:.85rem;color:var(--text-2);margin:18px 0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0}
.al-crumb a{color:var(--text-2);text-decoration:none}
.al-crumb a:hover{color:var(--accent)}
.al-crumb li:not(:last-child)::after{content:"›";margin-left:6px;color:var(--text-2)}
.al-h1{font-size:1.9rem;line-height:1.2;margin:.2em 0 .3em;letter-spacing:-.5px}
.al-badge{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;border-radius:999px;padding:6px 12px;margin-bottom:18px}
.al-badge.src-ciqual{background:var(--leaf-dim);color:var(--leaf)}
.al-badge.src-usda{background:var(--info-dim);color:var(--info)}
.al-badge.src-estimated{background:var(--warn-dim);color:var(--warn)}
/* La rangée peut être plus large que l'écran (3 portions, libellés longs) :
   le débordement reste CONTENU ICI (overflow-x:auto sur la rangée elle-même),
   jamais sur la page. `max-width:100%` empêche la rangée de repousser son
   conteneur ; le fondu à droite (dégradé vers --bg) signale qu'on peut
   glisser, sans tronquer brutalement le texte du dernier bouton. Fondu
   uniquement en mobile : au-delà, les 3 portions tiennent sans déborder. */
.al-portions{display:flex;gap:8px;overflow-x:auto;max-width:100%;margin:0 0 20px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.al-portions button{flex:0 0 auto;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:8px 14px;font-size:.88rem;font-weight:600;cursor:pointer;white-space:nowrap}
@media (max-width:640px){
  .al-portions{background:linear-gradient(to left,var(--bg),transparent 28px) right center/32px 100% no-repeat}
}
.al-portions button[aria-pressed="true"]{background:var(--accent-aplat);border-color:var(--accent-aplat);color:var(--accent-sur)}
.al-kcal{font-family:var(--grot);font-size:2.4rem;font-weight:800;color:var(--accent);margin:0}
.al-kcal small{font-size:1rem;color:var(--text-2);font-weight:600}
.al-table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.94rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.al-table th,.al-table td{padding:9px 13px;border-bottom:1px solid var(--border);text-align:left}
.al-table thead th{background:var(--surface-2);text-transform:uppercase;font-size:.72rem;letter-spacing:.4px;color:var(--text-2)}
.al-table tr:last-child td{border-bottom:none}
.al-table td.val{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.al-table tr.sub td:first-child{padding-left:26px;color:var(--text-2);font-size:.9rem}
.al-table td.na{color:var(--text-2);font-style:italic}
.al-note{background:var(--info-dim);border-left:3px solid var(--info);border-radius:var(--r-sm);padding:12px 15px;margin:16px 0;font-size:.88rem;color:var(--text-2)}
.al-cta{display:block;background:var(--accent-aplat);color:var(--accent-sur)!important;text-align:center;border-radius:var(--r-lg);padding:16px 20px;font-weight:800;font-size:1.05rem;text-decoration:none;margin:28px 0}
.al-related{margin:28px 0 40px}
.al-related h2{font-size:1.05rem;margin-bottom:10px}
.al-related ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.al-related a{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 13px;font-size:.88rem;text-decoration:none;color:var(--text)}
.al-related a:hover{border-color:var(--accent)}
.al-disc{font-size:.8rem;color:var(--text-2);font-style:italic;margin:20px 0}
/* 20/08/2026 — attribution de source (Jules 🌿). Obligation de la Licence Ouverte
   Etalab 2.0 (paternite : producteur + source + date), pas une finition de style.
   Deliberement lisible et non italique : c'est une mention legale, pas un aparte. */
.al-licence{font-size:.8rem;line-height:1.55;color:var(--text-2);margin:14px 0 24px;padding:12px 14px;border-left:3px solid var(--border);background:var(--surface-2,transparent);border-radius:0 6px 6px 0}
.al-licence a{color:var(--text-2);text-decoration:underline}
.al-licence strong{color:var(--text)}
footer.al-footer{border-top:1px solid var(--border);margin-top:40px;padding:22px 0;text-align:center;font-size:.86rem;color:var(--text-2)}
footer.al-footer a{color:var(--text-2)}

/* ---- index aliments/index.html ---- */
.al-stats{display:flex;flex-wrap:wrap;gap:14px;margin:20px 0 26px}
.al-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 16px;flex:1 1 140px}
.al-stat b{display:block;font-size:1.4rem;font-family:var(--grot)}
.al-stat span{font-size:.78rem;color:var(--text-2)}
.al-search{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--r-md);padding:13px 16px;font-size:1rem;margin:10px 0 24px}
.al-search:focus{border-color:var(--accent);outline:none}
.al-fam{margin:26px 0}
.al-fam h2{font-size:1.15rem;margin-bottom:6px}
.al-fam .cnt{color:var(--text-2);font-weight:500;font-size:.85rem}
.al-fam ul{list-style:none;padding:0;margin:10px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.al-fam a{text-decoration:none;color:var(--text);font-size:.9rem;padding:6px 0;border-bottom:1px solid transparent}
.al-fam a:hover{color:var(--accent);border-color:var(--accent)}
.al-nores{display:none;color:var(--text-2);padding:20px 0}
@media(max-width:640px){.al-h1{font-size:1.5rem}.al-kcal{font-size:1.9rem}}