/* App web : cadre, pages et mise en page. Jetons et briques communs : /static/base.css (public/base.css). Référence : DESIGN.md. */

/* ---------- cadre : grille fine, repères de coordonnées ---------- */
.page { position: relative; min-height: 100vh; padding-top: 22px; overflow: hidden;
  background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px);
  background-size: 32px 32px; background-position: 0 22px; }
.reperes { position: absolute; inset: 0; z-index: 0; pointer-events: none; font: 400 10px/1 var(--mono); color: var(--deco); letter-spacing: .08em; }
.reperes .cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.reperes .cols span { border-left: 1px dashed var(--filet); padding: 7px 0 0 7px; }
.reperes .cols span:first-child { border-left: 0; padding-left: 20px; }
.reperes .lignes span { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--filet); padding: 5px 0 0 20px; }
.reperes .lignes span:nth-child(1) { top: 22px; border-top: 0; } .reperes .lignes span:nth-child(2) { top: 30%; } .reperes .lignes span:nth-child(3) { top: 55%; } .reperes .lignes span:nth-child(4) { top: 80%; }
.barre, .contenu { position: relative; z-index: 1; }
/* Fond animé (public/fond.js, une recette par page : src/fonds.js) : fixe, invisible tant que le script n'a pas fini son calcul, puis en fondu de 400 ms (sans fondu si l'image
   vient d'être repeinte par la page précédente, ou si les animations sont réduites). Le canvas couvrirait la grille de .page : la grille passe sur .reperes, au-dessus. Sans canvas, rien ne change à l'œil. */
.fond-anime { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; image-rendering: pixelated; opacity: 0; transition: opacity 400ms linear; }
.fond-anime.pret { opacity: 1; }
.fond-anime.direct { transition: none; }
@media (prefers-reduced-motion: reduce) { .fond-anime { transition: none; } }
.page.avec-fond { background-image: none; }
.page.avec-fond .reperes { background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px); background-size: 32px 32px; background-position: 0 22px; }
/* Étiquette d'essai (carte 11) : dans la marge basse de la page (le contenu garde 72 px, 40 sur téléphone, sous lui), donc sur rien. Disparaît avec ETIQUETTE_ESSAI (src/fonds.js). */
.fond-etiquette { position: absolute; z-index: 1; bottom: 14px; right: 56px; margin: 0; font: 400 10px/1 var(--mono); letter-spacing: .1em; color: var(--texte-3); pointer-events: none; visibility: hidden; }
.fond-anime.pret + .fond-etiquette { visibility: visible; } /* l'étiquette n'annonce que le fond qui s'affiche vraiment : en cas de panne, rien */

.barre { display: flex; align-items: center; gap: 32px; height: 52px; padding: 0 56px; border-bottom: 1px solid var(--filet); background: rgba(18, 18, 18, .82); }
.marque { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .16em; color: var(--texte); }
.marque svg { display: block; }
.nav { display: flex; gap: 26px; font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.nav a { color: var(--texte-3); padding: 18px 0; }
.nav a:hover, .nav a[aria-current] { color: var(--texte); }
.nav a[aria-current]::before { content: "["; } .nav a[aria-current]::after { content: "]"; }
.nav .court { display: none; }
.barre form { margin: 0 0 0 auto; }
.barre .sortir { height: auto; padding: 18px 0; border: 0; font: 400 11px/1 var(--mono); letter-spacing: .08em; color: var(--texte-3); }
.barre .sortir:hover { color: var(--texte); }
.barre .sortir .court { display: none; }

.contenu { padding: 28px 56px 72px; max-width: 1280px; margin: 0 auto; }

/* ---------- onglets des jours ---------- */
.jours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--filet); background: var(--fond-2); margin-bottom: 28px; max-width: 520px; }
.jours a { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; padding: 0 12px; font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); border-left: 1px solid var(--filet); white-space: nowrap; }
.jours a:first-child { border-left: 0; }
.jours a[aria-current] { color: var(--texte); background: var(--fond-3); box-shadow: inset 0 1px 0 var(--texte); }
.jours a:hover { color: var(--texte); }
.pts { display: flex; gap: 3px; }
.pt { width: 6px; height: 6px; border: 1px solid var(--deco); }
.pt.v { background: var(--vert); border-color: var(--vert); }
.pt.a { border-color: var(--action); } /* contour : l'orange ne remplit rien d'autre que Valider */
.pt.c { border-color: var(--ambre); background: repeating-linear-gradient(135deg, var(--ambre) 0 1px, transparent 1px 3px); }
.pt.i { border-color: var(--texte-3); border-style: dashed; }

/* ---------- titre de page ---------- */
.contenu { position: relative; }
.titre { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; min-height: 100px; }
.titre.court { min-height: 0; }
.titre h1 { font: 300 34px/1.1 var(--sans); letter-spacing: -.02em; }
.meta { margin: 12px 0 0; font: 400 11px/1.6 var(--mono); letter-spacing: .08em; color: var(--texte-3); text-transform: uppercase; }
.meta b { font-weight: 400; color: var(--texte-2); }
.ascii { margin: 0; font: 400 9px/9px var(--mono); letter-spacing: 0; white-space: pre; color: #8a8a8a; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
.ascii-grand { position: absolute; right: 56px; top: 14px; font-size: 11px; line-height: 11px; z-index: 0; -webkit-mask-image: none; mask-image: none; } /* pas de dégradé : le bol reste symétrique */
@media (max-width: 860px) { .ascii-grand { display: none; } } /* en dessous, il ne tient plus à côté des onglets et du titre : il disparaît au lieu de se tasser */
.legende-jour { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin: 0 0 14px; font: 400 11px/1.4 var(--mono); letter-spacing: .06em; color: var(--texte-3); text-transform: uppercase; }
.legende-jour b { font-weight: 400; color: var(--texte-2); }
.contenu > .legende { margin-bottom: 14px; }

/* ---------- menu du jour : midi et soir côte à côte ---------- */
.repas-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.panneau.repas .vide-c { padding: 6px 0 0; }
.repas .rien { color: var(--texte-2); }

/* budget du jour : un panneau repliable, ouvert sur grand écran */
.budget { margin-top: 20px; }
.budget summary.entete { min-height: 44px; }
.budget summary .reste { color: var(--texte); }
.budget summary .plus { margin-left: 10px; }
.budget-g { display: grid; grid-template-columns: repeat(var(--nb, 5), 1fr); margin: 0; }
.budget-g > div { padding: 20px 22px 22px; border-left: 1px solid var(--filet); }
.budget-g > div:first-child { border-left: 0; }
.budget-g dd { margin: 0; font: 400 30px/1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.budget-g dd .u { font-size: 16px; color: var(--texte-3); margin-left: 3px; letter-spacing: 0; }
.budget-g dd .approx { font-size: 17px; color: var(--texte-3); margin-right: 4px; }
.budget-g dt { margin-top: 10px; color: var(--texte-2); font-size: 13px; order: 2; text-transform: none; }
.budget-g > div { display: flex; flex-direction: column; }
.budget-g .reste { background: rgba(255, 255, 255, .025); }
.budget .note { padding: 0 22px 18px; font-size: 13px; color: var(--texte-3); }

/* ---------- semaine ---------- */
.attente-bandeau { display: flex; align-items: center; gap: 16px; padding: 0 16px; min-height: 48px; margin-bottom: 20px; border: 1px solid var(--action-filet); font: 400 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.attente-bandeau .btn { margin-left: auto; }
.attente-bandeau b { font-weight: 500; color: var(--action-fort); }
.sgrille { display: grid; grid-template-columns: 76px repeat(4, minmax(0, 1fr)); grid-template-rows: auto minmax(148px, auto) minmax(148px, auto); }
.sgrille > .rh { border-top: 1px solid var(--filet); padding: 14px 12px; font: 400 11px/1 var(--mono); letter-spacing: .1em; color: var(--texte-3); text-transform: uppercase; background: rgba(255, 255, 255, .015); grid-column: 1; }
.sgrille > .rh.tete { grid-row: 1; border-top: 0; }
.sgrille > .rh.midi { grid-row: 2; } .sgrille > .rh.soir { grid-row: 3; }
.case { grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; border-left: 1px solid var(--filet); min-width: 0; }
.jh { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; background: rgba(255, 255, 255, .015); min-width: 0; }
.jh h2 { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); }
.jh h2 a:hover { color: var(--texte); }
.jh span { font: 400 11px/1.3 var(--mono); letter-spacing: .06em; color: var(--texte-3); text-transform: uppercase; overflow-wrap: anywhere; }
.jh.cur h2 { color: var(--texte); }
.ligne-repas { padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; border-top: 1px solid var(--filet); }
.ligne-repas .tete { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.ligne-repas .tete .lib { font: 400 11px/1 var(--mono); letter-spacing: .1em; color: var(--texte-3); text-transform: uppercase; display: none; }
.ligne-repas .plat-nom { font: 400 15px/1.3 var(--sans); }
.ligne-repas .fr { margin-top: -4px; font-size: 12px; -webkit-line-clamp: 1; }
.ligne-repas .g { font: 400 22px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ligne-repas .g .approx { font-size: 13px; color: var(--texte-3); margin-right: 3px; }
.ligne-repas .g .u { font-size: 12px; color: var(--texte-3); margin-left: 4px; letter-spacing: 0; }
.ligne-repas .pr { font: 400 11px/1.3 var(--mono); color: var(--texte-3); letter-spacing: .04em; }
.ligne-repas .jauge { height: 10px; margin-top: 0; gap: 1px; }
.ligne-repas.attend { box-shadow: inset 0 0 0 1px var(--action-filet); }
.ligne-repas.sans { background: repeating-linear-gradient(135deg, var(--filet) 0 1px, transparent 1px 6px); }
.ligne-repas.sans .plat-nom, .ligne-repas.sans .pr { color: var(--texte-2); }
.ligne-repas.double { grid-row: 2 / span 2; }
.ligne-repas p { margin: 0; }
.ligne-repas .journal { margin: 0; }
.ligne-repas a { color: var(--texte-2); text-decoration: underline; text-underline-offset: 2px; }

.bas-semaine { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.graph { padding: 18px 22px 20px; }
.graph .jauge-lib { margin: 0 0 14px; }
.axe { position: relative; height: 168px; margin-left: 30px; border-left: 1px solid var(--filet-2); border-bottom: 1px solid var(--filet-2); }
.axe .rep { position: absolute; left: -30px; width: 26px; text-align: right; font: 400 10px/1 var(--mono); color: var(--texte-3); transform: translateY(50%); }
.axe .r0 { bottom: 0; } .axe .r25 { bottom: 35.71%; } .axe .r50 { bottom: 71.43%; } .axe .r70 { bottom: 100%; }
.axe .gl { position: absolute; left: 0; right: 0; bottom: 35.71%; border-top: 1px dashed var(--filet); }
.axe .bande { position: absolute; left: 0; right: 0; bottom: 71.43%; height: 14.29%; background: var(--hachure); opacity: .9; border-top: 1px dashed var(--filet-2); border-bottom: 1px dashed var(--filet-2); }
.gr { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.gr .jr { height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding: 0 10%; }
.barre-g { position: relative; flex: 1; max-width: 54px; height: 0; background: var(--vert); }
.barre-g.prop { background: repeating-linear-gradient(135deg, rgba(176, 176, 176, .75) 0 2px, rgba(176, 176, 176, .12) 2px 5px); outline: 1px solid var(--texte-3); outline-offset: -1px; }
.gr .barre-g.neant { background: none; border: 1px dashed var(--filet-2); height: 24%; }
.gr .barre-g.cours { background: repeating-linear-gradient(135deg, rgba(226, 179, 64, .35) 0 1px, transparent 1px 4px); border: 1px dashed var(--ambre); height: 30%; opacity: .8; }
.barre-g .val { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); font: 400 11px/1 var(--mono); color: var(--texte); }
.barre-g.neant .val, .barre-g.cours .val { color: var(--texte-3); }
.etiq { display: grid; grid-template-columns: repeat(4, 1fr); margin: 8px 0 0 30px; font: 400 10.5px/1.3 var(--mono); letter-spacing: .08em; color: var(--texte-3); text-align: center; text-transform: uppercase; }
.leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font: 400 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--texte-3); text-transform: uppercase; }
.leg span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -1px; background: var(--vert); }
.leg .p::before { background: repeating-linear-gradient(135deg, rgba(176, 176, 176, .85) 0 2px, rgba(176, 176, 176, .15) 2px 4px); outline: 1px solid var(--texte-3); outline-offset: -1px; }
.leg .e::before { background: none; border: 1px dashed var(--ambre); }
.leg .o::before { background: none; border: 1px dashed var(--filet-2); }
.stats { display: grid; grid-template-rows: 1fr 1fr; }
.stat { padding: 20px 22px; border-top: 1px solid var(--filet); }
.stat:first-child { border-top: 0; }
.stat .gros { font-size: 38px; }
.stat .gros .ref { font-size: 17px; }
.stat .l { margin-top: 8px; color: var(--texte-2); font-size: 13px; }
.stat .jauge { height: 8px; }

/* ---------- état vide : le bol qui fume ---------- */
.vide { display: grid; justify-items: center; gap: 4px; padding: 28px 16px; border: 1px dashed var(--filet-2); text-align: center; color: var(--texte-2); }
.vide p { max-width: 46ch; }
.vide a { color: var(--texte); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Réglages, Menus reçus, connexion ---------- */

.contenu .panneau { margin-bottom: 20px; }
.contenu .panneau > h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; padding: 0 14px; border-bottom: 1px solid var(--filet); font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte); background: rgba(255, 255, 255, .015); }
.contenu .panneau > h2 ~ * { margin-left: 22px; margin-right: 22px; }
.contenu .panneau > h2 ~ * + * { margin-top: 14px; }
.contenu .panneau > h2 ~ table { width: calc(100% - 44px); }
.contenu .panneau > h2 + * { margin-top: 20px; }
.contenu .panneau > h2 ~ :last-child { margin-bottom: 22px; }
.sous { color: var(--texte-2); font-size: 13.5px; max-width: 70ch; }
.sous.meta { margin-top: 12px; }
.ligne { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; }
.ligne label { flex: 1 1 220px; }
.coller { display: grid; gap: 16px; }
.coller > button, .coller .attente { justify-self: start; }
.puces { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.puces form { display: flex; align-items: center; gap: 4px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--filet); vertical-align: middle; }
th { font: 400 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
td { font: 400 13px/1.4 var(--mono); }
.jeton { display: block; padding: 12px; border: 1px solid var(--filet-2); background: #101010; font-family: var(--mono); word-break: break-all; user-select: all; }
.notice { padding-left: 1.4em; color: var(--texte-2); } .notice li { margin-bottom: 8px; }
.notice code { color: var(--texte); background: #101010; padding: 1px 4px; }
.connexion { position: relative; z-index: 1; max-width: 400px; margin: 0 auto; padding: 14vh 24px 0; }
.connexion .marque { margin-bottom: 28px; }
.connexion h1 { font: 300 34px/1.1 var(--sans); letter-spacing: -.02em; margin-bottom: 20px; }
.connexion button { width: 100%; margin-top: 16px; }
.connexion .etiquette { height: auto; padding: 8px 10px; white-space: normal; line-height: 1.4; margin-bottom: 12px; }

details.menu { margin-bottom: 12px; }
details.menu > summary { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; min-height: 44px; padding: 8px 14px; font: 400 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texte-2); }
details.menu > summary b { color: var(--texte); font-weight: 500; }
details.menu > summary .plus { margin-left: auto; }
details.menu[open] > summary { border-bottom: 1px solid var(--filet); }
details.menu > :not(summary) { margin: 0 14px; }
details.menu h3 { margin-top: 16px; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
details.menu > :last-child { margin-bottom: 14px; }
.plats { list-style: none; padding: 0; }
.plats li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--filet); }
.plats li > span:last-child { font-family: var(--mono); white-space: nowrap; }
.plats .fr, .plats .gris { margin-top: 2px; font-size: 12.5px; }
.gris { color: var(--texte-3); }
.idees { padding-left: 1.2em; } .idees li { margin-bottom: 8px; }
.enseigne { font-weight: 500; }

/* ---------- iPhone 390 px, et tout ce qui est plus étroit que 760 px ---------- */
@media (max-width: 760px) {
  .page { padding-top: 18px; background-position: 0 18px; }
  .reperes .cols span:nth-child(n+5), .reperes .lignes { display: none; }
  .reperes .cols { grid-template-columns: repeat(4, 1fr); }
  .reperes .cols span { padding-top: 5px; } .reperes .cols span:first-child { padding-left: 16px; }
  .barre { padding: 0 16px; gap: 14px; height: 48px; }
  .marque .mot { display: none; }
  .nav { gap: 13px; font-size: 11.5px; letter-spacing: .04em; }
  .nav .long, .barre .sortir .long { display: none; } .nav .court, .barre .sortir .court { display: inline; }
  .barre .sortir { font-size: 11.5px; letter-spacing: .04em; }
  .contenu { padding: 14px 16px 40px; }
  .fond-etiquette { right: 16px; bottom: 12px; }
  .jours { max-width: none; margin-bottom: 16px; }
  .jours a { flex-direction: column; align-items: flex-start; justify-content: center; height: 50px; padding: 0 6px 0 8px; gap: 7px; letter-spacing: .02em; font-size: 11.5px; }
  .pt { width: 5px; height: 5px; }
  .titre { min-height: 0; margin-bottom: 14px; display: block; }
  .titre h1 { font-size: 24px; }
  .meta { margin-top: 8px; font-size: 10.5px; }
  .ascii-grand { display: none; }
  .legende-jour { margin-bottom: 12px; font-size: 10.5px; }
  .cat-pd { display: none; }
  .repas-2 { grid-template-columns: 1fr; gap: 12px; }
  .corps { padding: 14px; }
  .plat-nom { font-size: 17px; }
  .fr { -webkit-line-clamp: 1; font-size: 13px; }
  .chiffres { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
  .gros { font-size: 44px; } .gros .approx { font-size: 20px; } .gros .ref { font-size: 17px; }
  .cd { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; font-size: 11.5px; }
  .cd div { display: block; padding: 0; border: 0; }
  .cd dt { margin-bottom: 5px; }
  .cd dd { text-align: left; }
  .jauge { height: 12px; margin-top: 6px; }
  .jauge-lib { margin-top: 12px; }
  .raison { margin-top: 12px; font-size: 13px; }
  .actions { margin-top: 14px; }
  .actions .btn.action, .actions button.action { flex: 1; height: 44px; }
  .alts { margin-top: 10px; } .alts summary { height: 38px; }
  .alt { grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-areas: "n nom btn" ". nb nb"; row-gap: 6px; }
  .alt .btn, .alt button { height: 36px; }
  .alt .raison { grid-column: 2 / -1; grid-row: 3; }
  .budget { margin-top: 12px; }
  .budget-g { grid-template-columns: 1fr; padding: 12px 14px 14px; gap: 8px; }
  .budget-g > div { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 0; border: 0; gap: 12px; background: none; }
  .budget-g dt { order: 0; margin: 0; font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
  .budget-g dd { font-size: 12px; letter-spacing: 0; }
  .budget-g dd .u, .budget-g dd .approx { font-size: 12px; }
  .budget-g .reste dd { font-size: 15px; color: var(--texte); }
  .budget .note { padding: 0 14px 14px; }
  .attente-bandeau { padding: 10px 12px; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; font-size: 11px; }
  .attente-bandeau .btn { margin-left: 0; width: 100%; height: 40px; }
  /* semaine : une ligne par jour, deux colonnes (midi, soir) */
  .sgrille { grid-template-columns: 58px repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .sgrille > .rh { display: none; }
  .sgrille > .rh.tete { display: block; grid-column: 1; grid-row: 1; border-top: 0; padding: 9px 10px; }
  .sgrille > .rh.midi, .sgrille > .rh.soir { display: block; grid-row: 1; border-top: 0; padding: 9px 10px; border-left: 1px solid var(--filet); }
  .sgrille > .rh.midi { grid-column: 2; } .sgrille > .rh.soir { grid-column: 3; }
  .case { grid-column: 1 / -1; grid-row: auto; grid-template-columns: subgrid; grid-template-rows: none; border-left: 0; border-top: 1px solid var(--filet); }
  .jh { padding: 10px 8px; justify-content: center; }
  .jh span { display: none; }
  .ligne-repas { padding: 9px; min-height: 112px; gap: 6px; border-top: 0; border-left: 1px solid var(--filet); }
  .ligne-repas.double { grid-row: auto; grid-column: 2 / -1; }
  .ligne-repas .pr .kc { display: none; }
  .ligne-repas .fr { display: none; }
  .ligne-repas .plat-nom { font-size: 12.5px; }
  .ligne-repas .g { font-size: 20px; }
  .bas-semaine { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
  .graph { padding: 14px 14px 16px; }
  .axe { height: 132px; margin-left: 26px; }
  .axe .rep { left: -26px; width: 22px; }
  .gr .jr { gap: 4px; padding: 0 6%; }
  .etiq { margin-left: 26px; }
  .stats { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .stat { border-top: 0; border-left: 1px solid var(--filet); padding: 14px; } .stat:first-child { border-left: 0; }
  .stat .gros { font-size: 30px; } .stat .gros .approx { font-size: 15px; } .stat .gros .ref { font-size: 14px; }
  .stat .l { font-size: 12px; }
  .contenu .panneau > h2 ~ * { margin-left: 14px; margin-right: 14px; }
  .contenu .panneau > h2 ~ :last-child { margin-bottom: 16px; }
  .contenu .panneau > h2 + * { margin-top: 14px; }
  .contenu .panneau > h2 ~ table { width: calc(100% - 28px); }
  .coller button, .ligne button { width: 100%; }
}

/* Animations ASCII (extension/ascii.css, partagé avec le panneau) restylées pour l'app : l'orange reste réservé à Valider. */
.journal .barre, .balayage { color: var(--texte-2); }
.gros .valeur.masque::after { color: var(--texte); }
pre.bol { color: var(--texte-3); }

/* Coût du mois : le libellé passe à la ligne au lieu de sortir du panneau à 390 et 360 px. */
#cout .gros { white-space: normal; overflow-wrap: anywhere; }
#cout .gros .lib { display: inline-block; font: 400 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }

/* « À valider » n'est pas « validé » : segments gris, pas verts. */
.jauge.neutre i.on { background: var(--texte-2); }

/* Portion supposée de la protéine principale (carte 7) : une ligne grise sous le grand chiffre. */
.chiffres .portion { margin: 6px 0 0; font: 400 12px/1.3 var(--mono); letter-spacing: .02em; color: var(--texte-3); overflow-wrap: anywhere; }
.barre-g.h0{height:0%}
.barre-g.h1{height:1.43%}
.barre-g.h2{height:2.86%}
.barre-g.h3{height:4.29%}
.barre-g.h4{height:5.71%}
.barre-g.h5{height:7.14%}
.barre-g.h6{height:8.57%}
.barre-g.h7{height:10%}
.barre-g.h8{height:11.43%}
.barre-g.h9{height:12.86%}
.barre-g.h10{height:14.29%}
.barre-g.h11{height:15.71%}
.barre-g.h12{height:17.14%}
.barre-g.h13{height:18.57%}
.barre-g.h14{height:20%}
.barre-g.h15{height:21.43%}
.barre-g.h16{height:22.86%}
.barre-g.h17{height:24.29%}
.barre-g.h18{height:25.71%}
.barre-g.h19{height:27.14%}
.barre-g.h20{height:28.57%}
.barre-g.h21{height:30%}
.barre-g.h22{height:31.43%}
.barre-g.h23{height:32.86%}
.barre-g.h24{height:34.29%}
.barre-g.h25{height:35.71%}
.barre-g.h26{height:37.14%}
.barre-g.h27{height:38.57%}
.barre-g.h28{height:40%}
.barre-g.h29{height:41.43%}
.barre-g.h30{height:42.86%}
.barre-g.h31{height:44.29%}
.barre-g.h32{height:45.71%}
.barre-g.h33{height:47.14%}
.barre-g.h34{height:48.57%}
.barre-g.h35{height:50%}
.barre-g.h36{height:51.43%}
.barre-g.h37{height:52.86%}
.barre-g.h38{height:54.29%}
.barre-g.h39{height:55.71%}
.barre-g.h40{height:57.14%}
.barre-g.h41{height:58.57%}
.barre-g.h42{height:60%}
.barre-g.h43{height:61.43%}
.barre-g.h44{height:62.86%}
.barre-g.h45{height:64.29%}
.barre-g.h46{height:65.71%}
.barre-g.h47{height:67.14%}
.barre-g.h48{height:68.57%}
.barre-g.h49{height:70%}
.barre-g.h50{height:71.43%}
.barre-g.h51{height:72.86%}
.barre-g.h52{height:74.29%}
.barre-g.h53{height:75.71%}
.barre-g.h54{height:77.14%}
.barre-g.h55{height:78.57%}
.barre-g.h56{height:80%}
.barre-g.h57{height:81.43%}
.barre-g.h58{height:82.86%}
.barre-g.h59{height:84.29%}
.barre-g.h60{height:85.71%}
.barre-g.h61{height:87.14%}
.barre-g.h62{height:88.57%}
.barre-g.h63{height:90%}
.barre-g.h64{height:91.43%}
.barre-g.h65{height:92.86%}
.barre-g.h66{height:94.29%}
.barre-g.h67{height:95.71%}
.barre-g.h68{height:97.14%}
.barre-g.h69{height:98.57%}
.barre-g.h70{height:100%}