/* Pages « aliments » : mêmes couleurs que l'application, sans dépendre de son code.
   Lecture en lignes : un libellé à gauche, la valeur alignée à droite, reliés par des points, chiffres en couleur. */
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 500; font-display: swap; src: url(/aliments/polices/barlow-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 600; font-display: swap; src: url(/aliments/polices/barlow-600.woff2) format('woff2'); }
:root {
  --fond: #f7f2ec;
  --carte: #fffdfa;
  --texte: #2b2521;
  --doux: #7a6f67;
  --ligne: #e6dccf;
  --accent: #852a3e;
  --accent-doux: #f3e1e5;
  --prot: #3f7d4f;
  --gluc: #a86f12;
  --lip: #6f5aa3;
  --titre: 'Barlow Semi Condensed', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #191614;
    --carte: #24201d;
    --texte: #f2ebe4;
    --doux: #a89d93;
    --ligne: #3a332e;
    --accent: #e08aa0;
    --accent-doux: #3b2629;
    --prot: #7cc08c;
    --gluc: #e2b45c;
    --lip: #b3a2dc;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
main { max-width: 680px; margin: 0 auto; padding: 20px 16px 48px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
a { color: var(--accent); }
.fil { font-size: 0.9rem; color: var(--doux); }
.fil a { color: var(--doux); }
h1, h2 { font-family: var(--titre); font-weight: 600; text-wrap: balance; }
h1 { font-size: 2.1rem; line-height: 1.1; margin: 12px 0 8px; color: var(--accent); }
h2 { font-size: 1.35rem; margin: 0 0 10px; }
section { margin: 28px 0; }
.chapo { font-size: 1.1rem; }
.note { color: var(--doux); font-size: 0.92rem; margin: 6px 0; }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; padding: 16px 18px; }
.repere p { margin: 0; }

.ligne { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 1.05rem; }
.ligne span:first-child { flex: none; }
.pointilles { flex: 1; min-width: 16px; border-bottom: 2px dotted var(--ligne); transform: translateY(-4px); }
.ligne strong { font-family: var(--titre); font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prot { color: var(--prot); }
.gluc { color: var(--gluc); }
.lip { color: var(--lip); }

.classement { list-style: none; counter-reset: rang; margin: 0; padding: 0; }
.classement li {
  counter-increment: rang;
  display: grid;
  grid-template-columns: 2.2em 1fr auto;
  column-gap: 8px;
  align-items: baseline;
  padding: 10px 4px;
  border-bottom: 1px solid var(--ligne);
}
.classement li::before { content: counter(rang); grid-row: span 2; color: var(--doux); font-family: var(--titre); font-weight: 600; font-size: 1.1rem; }
.classement li a { font-weight: 600; text-decoration: none; min-width: 0; }
.classement li a:hover, .classement li a:focus-visible { text-decoration: underline; }
.classement li strong { font-family: var(--titre); font-weight: 600; font-size: 1.25rem; white-space: nowrap; }
.classement li small { grid-column: 2 / 4; color: var(--doux); font-size: 0.88rem; }
.classement li.actuel { background: var(--accent-doux); border-radius: 10px; }
.classement li.actuel a { color: var(--texte); }

.calocia { margin: 40px 0 24px; background: var(--accent-doux); border-radius: 16px; padding: 18px; }
.calocia p { margin: 0 0 12px; }
.bouton {
  display: inline-block;
  background: var(--accent);
  color: var(--fond);
  text-decoration: none;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.15rem;
  padding: 10px 20px;
  border-radius: 12px;
}
.bouton:focus-visible { outline: 3px solid var(--texte); outline-offset: 2px; }
footer { color: var(--doux); font-size: 0.88rem; border-top: 1px solid var(--ligne); padding-top: 12px; }
footer a { color: var(--doux); }