/* 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, les nuages sur toutes les pages) : 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; }

.barre { display: flex; align-items: center; gap: 32px; height: 52px; padding: 0 56px; border-bottom: 1px solid var(--filet); background: var(--barre-fond); }
.marque { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .16em; color: var(--texte); }
/* 32 px = la grille du ramen à l'échelle 1 (pas de demi-pixel). Marges négatives : la boîte garde la largeur de 24 px de l'ancien logo, donc POPOTE et la navigation ne bougent pas ; le dessin déborde de 4 px dans l'espace libre à droite. */
.marque img { display: block; width: 32px; height: 32px; margin: 0 -6px 0 -2px; image-rendering: pixelated; }
.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; white-space: nowrap; }
.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: var(--texte-3); user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--noir) 30%); mask-image: linear-gradient(90deg, transparent 0, var(--noir) 30%); }
/* En-tête de Menu du jour (carte 12) : la grille des panneaux (.repas-2 : 1fr 1fr, 20 px d'écart). Onglets en haut et titre en bas à gauche (colonne MIDI), le ramen tramé à droite
   (colonne SOIR), posé sur la ligne de base du titre. Sa hauteur est réservée par le rapport du canvas : rien ne saute à son arrivée. Sous 1100 px il ne tient plus : il disparaît. */
.entete-page { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; margin-bottom: 24px; }
.entete-page .gauche { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-width: 0; } /* 28 px au moins entre onglets et titre, même sans ramen */
.entete-page .jours { margin-bottom: 0; }
.entete-page .titre { min-height: 0; margin-bottom: 0; }
.entete-page .fig { position: relative; margin: 0; min-width: 0; align-self: end; pointer-events: none; user-select: none; }
.ramen-trame { display: block; width: 100%; aspect-ratio: 287 / 87; image-rendering: pixelated; pointer-events: none; }
@media (max-width: 1099px) { .entete-page { grid-template-columns: 1fr; } .entete-page .fig { display: none; } }
.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: var(--voile-2); }
.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(7, minmax(0, 1fr)); grid-template-rows: auto minmax(148px, auto) minmax(148px, auto) auto 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: var(--voile); grid-column: 1; }
.sgrille > .rh.tete { grid-row: 1; border-top: 0; }
.sgrille > .rh.midi { grid-row: 2; } .sgrille > .rh.soir { grid-row: 3; } .sgrille > .rh.autres { grid-row: 4; } .sgrille > .rh.total { grid-row: 5; }
.case { grid-row: 1 / span 5; 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: var(--voile); 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; display: block; white-space: nowrap; text-overflow: ellipsis; } /* une ligne coupée par « … » : un line-clamp laisse la 2e ligne rognée sous le chiffre (sloplint, règle 73) */
.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 .r60 { bottom: 25%; } .axe .r120 { bottom: 50%; } .axe .r180 { bottom: 75%; } .axe .r240 { bottom: 100%; }
.axe .gl { position: absolute; left: 0; right: 0; bottom: 75%; border-top: 1px dashed var(--texte-3); } /* repère : l'objectif du jour (180 g) */
.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(7, 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, var(--trame) 0 2px, var(--trame-pale) 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, var(--ambre-trame) 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(7, 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, var(--trame) 0 2px, var(--trame-pale) 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; }
.scene-vide { width: 200px; margin-bottom: 8px; pointer-events: none; user-select: none; } /* 100 × 40 cellules de 2 px : visible à 360 px, hauteur réservée */
.scene-vide .ramen-trame { aspect-ratio: 100 / 40; }
.vide a { color: var(--texte); text-decoration: underline; text-underline-offset: 2px; }
.vide a.btn { text-decoration: none; margin-top: 12px; } /* page introuvable (carte 34) : un bouton, pas un lien souligné */

/* ---------- 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 22px; border-bottom: 1px solid var(--filet); font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte); background: var(--voile); }
.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; overflow-wrap: break-word; min-width: 0; } /* carte 41 : le texte long d'un paragraphe passe à la ligne au lieu de sortir de l'écran à 390 px */
.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: var(--creux); 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: var(--creux); 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; }

/* iPad en portrait et fenêtres réduites (761 à 880 px) : logo, six libellés complets (« Menu du jour » compris, sur une ligne) et « Déconnexion » ne tiennent plus ensemble ;
   les écarts se resserrent et « Déconnexion » devient « Sortir ». Même police, aucun mot coupé. */
@media (min-width: 761px) and (max-width: 880px) {
  .barre { padding: 0 32px; gap: 20px; }
  .nav { gap: 18px; }
  .barre .sortir .long { display: none; } .barre .sortir .court { display: inline; }
}

/* ---------- 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; }
  .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; }
  .entete-page { margin-bottom: 14px; }
  .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; }
  .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 { padding: 0 14px; }
  .entete { padding: 0 14px; }
  .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); }

/* 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; }

/* ---------- Journal et Semaine sur 7 jours (carte 17) ---------- */
.sem-nav, .jour-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; }
.sem-nav .lib, .jour-nav .lib { color: var(--texte-2); text-align: center; flex: 1; white-space: nowrap; }
.sem-nav .btn { flex: none; }
@media (max-width: 420px) { .sem-nav { gap: 6px; } .sem-nav .btn { padding: 0 8px; } .sem-nav .lib { white-space: normal; min-width: 0; line-height: 1.25; } } /* 360 px : le libellé central passe sur deux lignes plutôt que de pousser « Suivante » hors de l'écran */
@media (max-width: 760px) { .jour-nav .lib { display: none; } .jour-nav { justify-content: space-between; } } /* la date est déjà dans le sous-titre */
.btn.inactif { visibility: hidden; }
.case > .autres { grid-row: 4; padding: 10px 14px; border-top: 1px solid var(--filet); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.case > .jt { grid-row: 5; margin: 0; padding: 10px 14px; border-top: 1px solid var(--filet); display: grid; gap: 4px; font: 400 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--texte-3); min-width: 0; }
.jt .tp b { font-weight: 500; font-size: 18px; color: var(--texte); font-variant-numeric: tabular-nums; }
.jt a { color: var(--texte-2); text-decoration: underline; text-underline-offset: 2px; }
.autres .el { margin: 0; display: flex; justify-content: space-between; gap: 6px; font: 400 12px/1.3 var(--mono); color: var(--texte-2); min-width: 0; }
.autres .el .lib { font-size: 10.5px; }
.autres .el.ecarte { color: var(--texte-3); text-decoration: line-through; }
.gr .barre-g.neant[class*="hj"] { height: 0; border: 0; border-bottom: 1px dashed var(--filet-2); }
.gr .barre-g[class*="hj"] { max-width: 40px; }

.totaux-j { padding: 18px 22px 20px; margin-bottom: 16px; }
.tj-g { display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: flex-end; }
.tj-g .gros { font-size: 44px; } .tj-g .petit-gros { font-size: 30px; }
.tj-g .lib { margin: 8px 0 0; }
.tj-g > div { min-width: 0; }
.totaux-j p.gris { margin: 10px 0 0; font: 400 12px/1.4 var(--mono); }
.ajout .ajout-form { padding-bottom: 4px; }
.ajout .ajout-form .ligne { margin-top: 12px; }
.ajout .ajout-form > button { margin-top: 14px; }
.ajout .ajout-form .ligne label { flex: 1 1 140px; }
.annuler-bandeau { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; margin-bottom: 14px; border: 1px solid var(--filet-2); font: 400 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texte-2); }
.annuler-bandeau form { margin: 0; }
.entrees { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.entree { border: 1px solid var(--filet); padding: 14px 16px; display: grid; gap: 8px; min-width: 0; }
.entree.cible { border-color: var(--texte-3); }
.entree.ecarte .e-texte { color: var(--texte-3); text-decoration: line-through; }
.e-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.e-texte { margin: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.suppose { margin: 0; font: 400 12px/1.3 var(--mono); letter-spacing: .02em; color: var(--texte-3); }
.entree .avis { margin: 0; }
.e-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.e-actions form { margin: 0; display: contents; }
.corr summary, .autre summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; cursor: pointer; list-style: none; }
.corr summary::-webkit-details-marker, .autre summary::-webkit-details-marker { display: none; }
.corr summary { border-top: 1px solid var(--filet); font: 400 15px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.corr summary b { font-weight: 500; }
.corr summary .lib, .autre summary { color: var(--texte-3); }
.a-estimer { color: var(--ambre); }
.corr-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 8px 0 4px; }
.corr-form button { grid-column: 1 / -1; }
.autre { border-top: 1px solid var(--filet); }
.autres-plats { list-style: none; margin: 0; padding: 0; }
.autres-plats li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--filet); }
.autres-plats .plat-nom { display: block; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autres-plats .nb { font: 400 12px/1.3 var(--mono); color: var(--texte-2); white-space: nowrap; }
.autres-plats form { margin: 0; display: contents; }
.remplacer { display: grid; gap: 10px; padding: 6px 0 4px; }
.habituel-form .ligne { margin: 12px 0; }
.habituel-form textarea { min-height: 5rem; }

@media (max-width: 760px) {
  /* Cibles tactiles du journal : 44 px au moins sur iPhone. */
  .jour-nav .btn, .sem-nav .btn, .e-actions .btn, .e-actions button, .annuler-bandeau .btn, .autres-plats .btn, .entree button.primaire, .ajout button.primaire, .habituel-form button, .remplacer button { min-height: 44px; }
  .corr summary, .autre summary { min-height: 44px; }
  .e-actions { gap: 10px; }
  .gr .barre-g[class*="hj"] { max-width: 28px; }
  .gr .jr { padding: 0 2%; }
  .etiq { font-size: 9.5px; letter-spacing: .02em; }
  .totaux-j { padding: 14px; }
  .tj-g .gros { font-size: 36px; } .tj-g .petit-gros { font-size: 26px; }
  .tj-g { gap: 6px 14px; }
  .totaux-j .tj-g .petit-gros { font-size: 20px; } .totaux-j .tj-g .petit-gros .ref { font-size: 11px; }
  .entree { padding: 12px; }
}

/* Semaine à 7 colonnes : l'animation d'attente (jusqu'à 23 caractères) doit tenir dans une colonne étroite. */
.sgrille .ligne-repas.sans.double { padding: 10px; }
.sgrille .journal { font-size: 10px; }
.sgrille .journal .ligne { letter-spacing: -.02em; }

/* Hauteurs fixes : la ligne du total ne doit pas changer quand Geist Mono arrive (un <b> plus grand dans une ligne plus petite suit les métriques de la police). */
.jt .tp { display: block; height: 22px; line-height: 22px; white-space: nowrap; }
.jt .tp b { line-height: 22px; }
.jt .tk, .jt a { display: block; height: 16px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.autres .el { height: 16px; line-height: 16px; overflow: hidden; white-space: nowrap; }

/* En-tête de jour sur 7 colonnes : enseigne et prix tiennent sur une ligne (sinon leur retour à la ligne change avec la police et la page saute à l'arrivée de Geist). */
.sgrille .jh span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }

/* Barre à 5 liens (Menu, Semaine, Journal, Recettes de la carte 24, Réglages ; Poids est parti à la carte 35) + Sortir sur une ligne à 360 px.
   Sous 520 px (tous les iPhone, Plus et Pro Max compris) : corps et écarts resserrés ; sous 380 px le logo s'efface (il mène à la Semaine, comme le lien « Semaine » juste à côté). */
@media (max-width: 520px) {
  .barre { gap: 10px; }
  .nav { gap: 6px; font-size: 10.5px; letter-spacing: 0; }
  .barre .sortir { font-size: 10.5px; letter-spacing: 0; }
}
@media (max-width: 380px) { .barre .marque { display: none; } }
/* Sous 360 px (iPhone SE de première génération, 320 px) : marges et écarts resserrés pour que les cinq liens et « Sortir » tiennent dans la barre, même police. */
@media (max-width: 359px) { .barre { padding: 0 8px; gap: 3px; } .nav { gap: 3px; } }

/* ---------- Anciennes pesées (cartes 32 et 35) ---------- */
/* Le bouton secondaire, neutre, 44 px pour le doigt ; il passe à la ligne plutôt que de déborder à 360 px. */
.historique-p #telecharger-historique { min-height: 44px; height: auto; white-space: normal; text-align: center; }
.historique-p .gris { font: 400 12px/1.4 var(--mono); }

/* ---------- Budget et bilan (carte 19) ---------- */
.budget-sem { padding: 16px 22px 18px; margin-bottom: 16px; }
.budget-sem p.gris { margin: 10px 0 0; font: 400 12px/1.4 var(--mono); }
.budget-sem .approx { font-size: 16px; color: var(--texte-3); margin-right: 3px; }
.weekend-bandeau { display: flex; align-items: center; min-height: 48px; padding: 8px 16px; margin-bottom: 16px; border: 1px solid var(--filet-2); font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.weekend-bandeau b { font-weight: 500; color: var(--texte); }
.totaux-j .lib b { font-weight: 500; color: var(--texte); }
.totaux-j .a-estimer, .budget-sem .a-estimer { text-transform: none; letter-spacing: 0; }
.legende a { color: var(--texte-2); text-decoration: underline; text-underline-offset: 2px; }
.bilan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.bilan-md { margin: 0; padding: 14px; border: 1px solid var(--filet-2); background: var(--creux); font: 400 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 70vh; overflow: auto; }
@media (max-width: 760px) {
  .weekend-bandeau { min-height: 0; padding: 6px 10px; margin-bottom: 10px; font-size: 10.5px; letter-spacing: .02em; }
  .budget-sem { padding: 14px; }
  .bilan-actions .btn { min-height: 44px; flex: 1 1 auto; }
  .bilan-md { font-size: 11px; padding: 10px; }
}
.budget-sem .gros { height: 1.2em; overflow: hidden; } /* boîte fixe et rognée : le chiffre en police de secours puis en mono ne déborde pas, donc pas de saut de mise en page */
.budget-sem .lib { line-height: 14px; }
.budget-sem .tj-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 24px; align-items: end; } /* colonnes fixes : la largeur ne suit pas la police qui arrive */

/* « Estimé sur » (carte 20) : les ingrédients de l'estimation, repliés par défaut */
.estime-sur { margin-top: 10px; grid-column: 2 / -1; }
.plat > .estime-sur { grid-column: auto; }
.estime-sur summary { display: flex; align-items: center; gap: 8px; height: auto; min-height: 32px; font: 400 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.estime-sur summary:hover { color: var(--texte); }
.estime-sur summary:focus-visible { outline: 2px solid var(--texte); outline-offset: 2px; }
.estime-sur .ingredients { margin-top: 4px; font: 400 12px/1.5 var(--mono); color: var(--texte-2); }
.estime-sur .ingredients span { display: block; padding: 3px 0; border-top: 1px solid var(--filet); overflow-wrap: anywhere; }
@media (max-width: 640px) { .estime-sur summary { min-height: 44px; } }

/* Options des plats ezCater (carte 21) : quoi cocher, une ligne par groupe, sous le nom du plat. */
.options { list-style: none; margin: 8px 0 0; padding: 0; font: 400 13px/1.45 var(--mono); color: var(--texte); }
.options li { padding: 4px 0 4px 12px; border-left: 1px solid var(--action-filet, var(--filet-2)); overflow-wrap: anywhere; }
.options li + li { margin-top: 3px; }
.options-non-lues { margin: 6px 0 0; font: 400 12px/1.4 var(--mono); color: var(--texte-3); }
.alt .options, .alt .options-non-lues { grid-column: 2 / -1; }

/* Semaine de Pat (carte 23) : repas prévus dans la Semaine, bandeau d'erreur discret, ligne du bandeau du jeudi. */
.ligne-repas.pat { background: var(--fond-2); }
.ligne-repas.pat.ecarte .plat-nom { color: var(--texte-3); text-decoration: line-through; }
.ligne-repas.pat .note-pat { font-size: 10.5px; letter-spacing: .02em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ligne-repas.pat .plat-nom { overflow-wrap: anywhere; }
.pat-bandeau { margin: 0 0 16px; padding: 8px 14px; border: 1px solid var(--filet-2); font: 400 12px/1.5 var(--mono); letter-spacing: .02em; color: var(--texte-2); overflow-wrap: anywhere; }
#semaine-pat .pat-bandeau { margin: 12px 0; }
.pat-avert ul { margin: 8px 0 0; padding-left: 18px; font: 400 12px/1.5 var(--mono); color: var(--texte-2); overflow-wrap: anywhere; }
.pat-avert summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.weekend-bandeau { flex-wrap: wrap; column-gap: 24px; row-gap: 4px; }
#weekend-prevus { text-transform: none; letter-spacing: .02em; color: var(--texte-2); }
[data-pat-soir] li .gris { margin-left: 6px; }
@media (max-width: 760px) {
  #semaine-pat input[type=file] { width: 100%; }
}

/* ---------- Recettes et courses (carte 24) ---------- */
.lien-recette { color: inherit; text-decoration: underline; text-decoration-color: var(--filet-2); text-underline-offset: 3px; }
.lien-recette:hover { text-decoration-color: var(--texte-3); }
/* Semaine : le nom d'un repas prévu et les liens « Journal » se touchent sur 44 px de haut au moins (padding compensé par une marge négative : rien ne bouge). */
/* Le lien est la zone de toucher : 44 px de haut dans le flux (rien ne la rogne, rien ne passe dessus). Le nom long est coupé sur .nom-c, à l'intérieur du lien. */
.ligne-repas .plat-nom.avec-lien { display: block; overflow: visible; }
.ligne-repas .plat-nom .lien-recette { display: flex; align-items: center; min-height: 44px; }
.ligne-repas .plat-nom .nom-c { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.case > .jt a { display: flex; align-items: center; height: 44px; white-space: nowrap; }
.e-texte .lien-recette { display: inline-block; padding: 12px 0; margin: -12px 0; } /* cible de 44 px sans changer la mise en page */
.courses .lieu { margin-bottom: 18px; }
.courses .lieu h3 { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--filet); }
.courses h2 ~ .lieu { margin-left: 22px; margin-right: 22px; }
.courses .commande { color: var(--texte-2); text-transform: none; letter-spacing: .02em; }
.articles { list-style: none; margin: 0; padding: 0; }
.articles li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 0; min-height: 44px; border-top: 1px solid var(--filet); }
.articles li:first-child { border-top: 0; }
.articles .produit { font: 400 16px/1.3 var(--sans); color: var(--texte); padding: 12px 0; }
.articles a.produit { display: inline-flex; align-items: center; min-height: 44px; padding: 0; text-decoration: underline; text-decoration-color: var(--texte-3); text-underline-offset: 4px; }
.articles a.produit:hover { text-decoration-color: var(--texte); }
.articles .ext { color: var(--texte-3); margin-left: 4px; }
.articles .critere { font: 400 12px/1.3 var(--mono); letter-spacing: .02em; color: var(--texte-3); }
.liste-recettes { list-style: none; margin: 0; padding: 0; }
.liste-recettes li + li { border-top: 1px solid var(--filet); }
.carte-recette { display: grid; gap: 4px; min-height: 44px; padding: 14px 0; }
.carte-recette:hover .nom { text-decoration: underline; text-underline-offset: 3px; }
.carte-recette .nom { font: 400 21px/1.25 var(--sans); }
.carte-recette .chiffres-r { font: 400 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.carte-recette .quand { font: 400 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.retour { margin: 0 0 16px; }
.fiche-chiffres .tj-g { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 36px; }
.fiche-chiffres .tj-g .petit-gros { font-size: 30px; }
.fiche-chiffres .tj-g .ref { font-size: 15px; }
.ou-sert { margin: 14px 0 0; color: var(--texte-2); }
.ingredients-r { list-style: none; padding: 0; margin-top: 14px; }
.ingredients-r li { padding: 7px 0; border-top: 1px solid var(--filet); font-size: 16px; line-height: 1.4; }
.ingredients-r li:first-child { border-top: 0; }
.etapes { list-style: none; padding: 0; }
.etapes li { position: relative; padding: 14px 0 14px 46px; border-top: 1px solid var(--filet); font-size: 20px; line-height: 1.45; }
.etapes li:first-child { border-top: 0; }
.etapes .n { position: absolute; left: 0; top: 14px; width: 32px; font: 400 22px/1.3 var(--mono); color: var(--texte-3); }
#conservation p, #note p { font-size: 16px; line-height: 1.5; }
@media (max-width: 760px) {
  .retour .btn { min-height: 44px; }
  .courses h2 ~ .lieu { margin-left: 14px; margin-right: 14px; }
  .etapes li { font-size: 20px; }
}

/* ---------- Petits défauts (carte 25) ---------- */
/* Semaine, en-tête de jour sur 7 colonnes : l'enseigne se coupe (son nom complet est dans title), jamais le plafond du repas ; il passe à la ligne au besoin, « ≤ 25 $ » restant d'un bloc. */
.sgrille .jh .enseigne { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgrille .jh .plafond { white-space: normal; overflow: visible; text-overflow: clip; letter-spacing: .02em; }
/* Réglages, « Aliments à éviter » : le nom passe à la ligne, la pastille reste dans l'écran, le × garde 44 px de zone de toucher. */
.puces li { min-width: 0; max-width: 100%; }
.puces form { max-width: 100%; }
.puces .etiquette { height: auto; min-height: 20px; padding: 3px 7px; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.puces button.lien { flex: none; min-width: 44px; min-height: 44px; padding: 0; font-size: 18px; }
/* Message de Réglages (succès, refus) : plusieurs lignes à 320 px au lieu de sortir de l'écran. */
.etiquette.message { height: auto; padding: 8px 10px; white-space: normal; line-height: 1.4; margin-bottom: 12px; }
@media (max-width: 760px) {
  /* Total du jour : « incomplet » passe à la ligne dans sa colonne au lieu de passer sous « Journal » (de 320 à 364 px). */
}
.bouton.primaire { max-width: 100%; height: auto; min-height: 44px; white-space: normal; text-align: center; }
/* Réglages, jetons : un nom de 60 caractères sans espace passe à la ligne dans sa cellule au lieu d'élargir le tableau. */
td { overflow-wrap: anywhere; }

/* ---------- Semaine : 7 colonnes (carte 27) ---------- */
/* Le total du jour (« 275 kcal · incomplet ») passe à la ligne entre les mots, sur 2 lignes au plus ; l'en-tête garde la place de 2 lignes pour le plafond (« reste ≈ 1 375,22 $ »).
   Hauteurs minimales fixes : la page ne bouge pas quand Geist arrive, la ligne de secours étant plus large. */
.jt .tk { height: auto; min-height: 32px; white-space: normal; overflow: visible; text-overflow: clip; }
.sgrille .jh .plafond { min-height: 2.6em; }

/* ---------- Semaine : mise en page empilée (iPhone) jusqu'à 1 133 px ---------- */
/* La grille de 7 colonnes a besoin de 1 134 px : en dessous, des mots se coupent ou sortent de leur colonne (« 1 375,22 $ », « 275 kcal · incomplet », « Petit-déj »). La Semaine prend alors la mise en page de l'iPhone. */
@media (max-width: 1133px) {
  /* 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; }
  .sgrille > .rh.autres, .sgrille > .rh.total { display: none; }
  .case > .autres, .case > .jt { grid-row: auto; grid-column: 1 / -1; }
  .case > .autres { padding: 8px 8px 0; border-top: 1px solid var(--filet); }
  .case > .autres:empty { display: none; }
  .case > .jt { grid-template-columns: auto auto 1fr; align-items: baseline; gap: 10px; padding: 8px; border-top: 0; }
  .case > .jt a { justify-self: end; }
  .jt .tp b { font-size: 16px; }
  .ligne-repas.pat { min-height: 96px; }
  .case > .jt { grid-template-columns: auto minmax(0, 1fr) auto; }
  .jt .tk { height: auto; min-height: 16px; white-space: normal; overflow: visible; text-overflow: clip; }
  .sgrille .journal { font-size: .8rem; } .sgrille .journal .ligne { letter-spacing: 0; }
}

/* ---------- Bilan rendu (carte 29) : le Markdown de Pat, lisible. Tableau à partir de 761 px, liste de lignes en dessous ---------- */
.bilan-rendu { font-size: 14px; line-height: 1.5; color: var(--texte-2); overflow-wrap: anywhere; }
.bilan-rendu h3 { margin: 0 0 14px; font: 300 22px/1.2 var(--sans); letter-spacing: -.01em; color: var(--texte); }
.bilan-rendu h4 { margin: 26px 0 10px; font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.bilan-rendu strong { font-weight: 500; color: var(--texte); }
.bilan-rendu p { margin: 0 0 10px; }
.md-note { margin: 0 0 14px; padding: 10px 14px; border-left: 1px solid var(--filet-2); background: var(--fond-3); }
.md-note > strong { display: block; font: 500 11px/1.2 var(--mono); color: var(--texte-3); margin-bottom: 4px; }
.md-note p { margin: 0; }
.md-liste { margin: 0 0 10px; padding: 0; list-style: none; }
.md-liste li { padding: 6px 0 6px 14px; border-top: 1px solid var(--filet); position: relative; }
.md-liste li::before { content: ""; position: absolute; left: 0; top: 15px; width: 5px; height: 1px; background: var(--deco); }
.md-liste li:first-child { border-top: 0; }
.md-tableau { width: 100%; border-collapse: collapse; margin: 0 0 10px; font: 400 12px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.md-tableau th, .md-tableau td { padding: 7px 5px; border-top: 1px solid var(--filet); text-align: right; vertical-align: top; }
.md-tableau thead th { border-top: 0; border-bottom: 1px solid var(--filet-2); font-weight: 400; font-size: 11px; color: var(--texte-3); white-space: nowrap; }
.md-tableau th:first-child, .md-tableau td:first-child, .md-tableau td.md-txt { text-align: left; }
.md-tableau tbody th { font-weight: 400; color: var(--texte); white-space: nowrap; }
.md-tableau .md-vide { color: var(--texte-3); }
.md-defile { overflow-x: auto; margin: 0 0 10px; }
.md-defile .md-tableau { margin: 0; width: max-content; min-width: 100%; }
.md-tableau td.md-nb, .md-tableau td.md-vide { white-space: nowrap; }
@media (min-width: 1101px) { .md-defile .md-tableau { width: 100%; } .md-tableau thead th { white-space: normal; overflow-wrap: normal; vertical-align: bottom; } } /* ordinateur : les en-têtes passent à la ligne entre leurs mots pour que les 13 colonnes tiennent dans le cadre */
.md-tableau td.md-txt { min-width: 12ch; }
.bilan-vide { margin-top: 4px; }
.dessin-vide { width: 168px; height: 40px; max-width: 100%; color: var(--texte-3); margin-bottom: 8px; }
@media (max-width: 760px) {
  .md-defile .md-tableau { width: auto; }
  .md-tableau td.md-txt { min-width: 0; }
  .md-tableau td.md-nb, .md-tableau td.md-vide { white-space: normal; }
  .md-tableau, .md-tableau thead, .md-tableau tbody, .md-tableau tr, .md-tableau th, .md-tableau td { display: block; width: auto; }
  .md-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* les en-têtes restent lisibles par les lecteurs d'écran ; à l'œil, chaque cellule porte son libellé */
  .md-tableau tr { padding: 10px 0; border-top: 1px solid var(--filet); }
  .md-tableau tbody tr:first-child { border-top: 0; }
  .md-tableau th, .md-tableau td { padding: 2px 0; border: 0; text-align: left; }
  .md-tableau tbody th { font: 500 13px/1.3 var(--sans); padding-bottom: 4px; white-space: normal; }
  .md-tableau td { display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .md-tableau .md-lib { display: inline; text-align: left; color: var(--texte-3); font-size: 11px; }
  /* « — » : pas de ligne pour une valeur absente, à l'œil seulement ; la cellule reste dans l'arbre d'accessibilité, sinon les cellules suivantes changeraient d'en-tête */
  .md-tableau td.md-vide { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.md-lib { display: none; } /* tableau large : l'en-tête de colonne suffit */

/* ---------- Fondamentaux (carte 31) ---------- */
/* Pictogrammes SVG : celui d'un avis (triangle) s'aligne sur la ligne de texte ; celui d'un état vide se pose sous la scène, au-dessus du texte qui dit quoi faire. */
.picto { width: 18px; height: 18px; vertical-align: -4px; margin-right: 8px; flex: none; }
.picto-vide { display: block; width: 32px; height: 32px; margin: 2px auto 8px; color: var(--texte-2); }
.picto-ext { vertical-align: -1px; }
/* Un avis d'information n'est ni une alerte ni un état : neutre (l'ambre dit « attention »). */
.avis[data-etat="info"] { border-color: var(--bord-ctrl); background: var(--fond-3); color: var(--texte-2); }
/* Cadre de la page : rien ne sort de côté, même sur un contenu non prévu (nom long, nombre à cinq chiffres). */
html, body { overflow-x: clip; }
/* Le bouton calendrier d'un champ date reçoit le focus au clavier : même contour que les autres actions. */

/* ---------- Cibles de 44 px au pouce (carte 33) ---------- */
/* Sur téléphone, chaque action se touche sur 44 × 44 px au moins. Le texte garde sa taille : c'est la zone qui grandit (hauteur minimale, marges intérieures).
   Le contour du focus (base.css, :focus-visible) suit la boîte de l'élément, donc la nouvelle zone. */
@media (max-width: 760px) {
  .btn, button, a.bouton { min-height: 44px; min-width: 44px; }
  input:not([type=hidden]), select { min-height: 44px; }
  .alts summary { height: 44px; }
  .ajout .ajout-form .ligne { margin-top: 10px; } /* rend les 2 px que les champs ont pris : « Ajouter » reste dans le premier écran du Journal (carte 18) */
  /* Liens dans une phrase : la zone s'étend de 15 px au-dessus et au-dessous du texte, compensés par une marge négative (la ligne ne bouge pas).
     Pas sur les liens qui ont déjà leur zone de 44 px (nom d'une recette, « Journal » du total du jour : carte 24). */
  .contenu p a[href]:not(.lien-recette, .jt a, .liens a, .btn, .bouton) { display: inline-block; padding: 15px 0; margin: -15px 0; }
  /* Réglages, « Menus reçus… · Bilan de la semaine » : deux liens sur deux lignes auraient des zones qui se recouvrent ; ils tiennent sur une ligne de 44 px
     (lettres un peu moins espacées : .04em au lieu de .08em, même corps). Sous 370 px, deux lignes de 44 px. */
  .meta.liens { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; margin-top: 3px; letter-spacing: .04em; }
  .meta.liens a { display: flex; align-items: center; min-height: 44px; }
}
/* Semaine empilée (jusqu'à 1 133 px) : l'en-tête de chaque jour (« LUN. 19/10 ») se touche sur toute la largeur de sa colonne et 44 px de haut. */
@media (max-width: 1133px) { .jh h2 a { display: flex; align-items: center; min-height: 44px; margin: 0 -8px; padding: 0 8px; } }
/* La barre du haut de 360 à 520 px : logo, six liens et « Sortir » ont chacun 44 px de large au moins, sur une ligne. Les écarts entre libellés deviennent des marges
   intérieures (2 px de chaque côté : 4 px entre deux libellés), le logo et « Sortir » prennent la marge du bord dans leur zone. Il faut 386 px :
   le logo s'efface donc sous 390 px (et non plus 380 ; aucun téléphone courant entre les deux). Sous 360 px, la barre de la carte 25. */
@media (min-width: 360px) and (max-width: 520px) {
  .barre { padding: 0; gap: 0; }
  .barre .marque { align-self: stretch; min-width: 44px; padding-left: 14px; }
  .nav { gap: 0; }
  .nav a { min-width: 44px; padding: 18px 2px; text-align: center; }
  .barre .sortir { min-width: 44px; padding: 18px 10px 18px 2px; justify-content: flex-end; }
}
@media (max-width: 520px) { .barre a:focus-visible, .barre button:focus-visible { outline-offset: -2px; } } /* le contour reste dans l'écran et dans la barre, autour de la zone de 44 px */
@media (max-width: 389px) { .barre .marque { display: none; } }
@media (min-width: 360px) and (max-width: 389px) { .nav { padding-left: 12px; } }
@media (max-width: 359px) { .barre .sortir { min-width: 0; } }

/* Bilan, tableau « Par jour » entre 761 et 1 100 px : quand des colonnes sont hors du cadre, un bord dégradé marque le côté caché
   et une ligne dit de faire glisser (app.js pose data-cache et retire hidden). */
.md-cadre { position: relative; margin: 0 0 10px; }
.md-cadre .md-defile { margin: 0; }
.md-cadre::before, .md-cadre::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; opacity: 0; transition: opacity .15s; }
.md-cadre::before { left: 0; background: linear-gradient(to right, var(--fond-2), transparent); }
.md-cadre::after { right: 0; background: linear-gradient(to left, var(--fond-2), transparent); }
.md-cadre[data-cache~="gauche"]::before, .md-cadre[data-cache~="droite"]::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .md-cadre::before, .md-cadre::after { transition: none; } }
.md-glisser { margin: -2px 0 12px; font: 400 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); }
.md-glisser[hidden] { display: none; }

/* Carte 38 : « Pas au bureau » (jour férié, télétravail) et l'avertissement « whey » sous les réglages. Toute action fait 44 px au moins à 390 px. */
.pas-bureau { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 14px; }
.pas-bureau .gris { flex: 1 1 200px; margin: 0; font-size: 12px; line-height: 1.4; }
.entree .etiquette[data-suppose] { white-space: nowrap; }
@media (max-width: 760px) { .pas-bureau .btn, .pas-bureau button { min-height: 44px; } }

/* Carte 39 : le total de la journée en tête de Menu du jour (« 4,10 $ de ta poche » / « dans tes 25 $ »), et le repère sous 50 g d'une alternative. */
.poche { margin: 0 0 10px; font: 400 13px/1.4 var(--mono); color: var(--texte-2); }
.poche b { font-weight: 400; color: var(--texte); }
.poche .de-ma-poche { font-weight: 500; } /* l'orange reste aux actions : la part de la poche se lit au poids, pas à la couleur */
.sous-repere { font: 400 11px/1.3 var(--mono); color: var(--texte-3); }
.ligne-repas.suppose { background: var(--fond-2); }

/* Carte 40 : l'étiquette PAT (une entrée venue des écarts notés par Pat) prend le style des autres états du Journal ; le contenu du fichier de Pat n'est jamais interprété (texte échappé). */
.entree .etiquette[data-pat] { white-space: nowrap; }

/* ---------- Valeurs longues (kit garde-fous) ----------
   Un nom ou un libellé de 120 caractères, ou un mot collé de 40, passe à la ligne au lieu de sortir de l'écran. Un prix ou un total ne se coupe pas : c'est sa ligne qui s'adapte
   (les espaces d'un montant sont insécables). Une valeur courte garde exactement sa mise en page d'avant. */
.lib, .etiquette, .gris, .v, .l, .critere, .commande, .produit, .vide p, .avis, .notice li, .notice code, .avis b, #ou-sert,
.e-tete, .carte-recette .nom, .carte-recette .chiffres-r, .plats li > span:first-child, .jt .tk, .jt a, .ref, .valeur, .approx, .gros { overflow-wrap: anywhere; }
.plats li > span:first-child, .autres .el, .e-tete > *, .jt .tp, .jt .tk { min-width: 0; }
.gros { white-space: normal; }
.jt .tp { overflow: hidden; text-overflow: ellipsis; } /* un total calculé (« 100 / 180 G ») garde sa ligne de 22 px */
.autres .el { height: auto; min-height: 16px; white-space: normal; }
.autres .el .v { text-align: right; }
.case > .jt a { height: auto; min-height: 44px; white-space: normal; }
.jt .tk, .jt a { height: auto; }
.budget-sem .gros { height: auto; min-height: 1.2em; }
.fiche-chiffres .tj-g { display: flex; flex-wrap: wrap; }
.sr td, .sr th { white-space: normal; }
.etiquette, .entree .etiquette[data-suppose], .entree .etiquette[data-pat] { height: auto; min-height: 20px; max-width: 100%; white-space: normal; text-align: left; }
.etiquette { padding-block: 0; line-height: 1; }
.etiq { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.etiq span { overflow-wrap: anywhere; }
h1, h2, h3, .ingredients-r li, .etapes li, .liste-recettes li, .puces li { overflow-wrap: anywhere; } /* le titre d'une fiche : un mot collé de 40 caractères passe à la ligne */

/* ---------- Mots courts (kit garde-fous, carte 3) ----------
   Un mot court ou un nombre garde sa place quand son voisin est très long : c'est le voisin qui passe à la ligne. */
.autres .el .lib { flex: 0 1 auto; min-width: 8ch; }
.autres .el .v { flex: none; max-width: 55%; }
.courses h2 > span:first-child, .md-tableau .md-val.md-n { flex: none; max-width: 55%; }
.jt .tk { min-width: 10ch; }
.sr td { min-width: 8ch; }
.ligne-repas .g { overflow-wrap: anywhere; }

/* ---------- Carte 41 : jours sans bureau ---------- */
/* Semaine : la phrase « Férié · … · pas de commande » est dans l'en-tête de la case sur ordinateur, sur sa propre ligne sous le jour sur téléphone (la grille y est empilée). */
.case.sans-bureau .jh .sb-phrase { white-space: normal; overflow: visible; text-overflow: clip; color: var(--texte-2); }
.sb-bandeau { display: none; margin: 0; padding: 8px 10px; border-top: 1px solid var(--filet); font: 400 11px/1.35 var(--mono); letter-spacing: .04em; color: var(--texte-2); overflow-wrap: anywhere; }
@media (max-width: 1133px) {
  .case.sans-bureau .jh .sb-phrase { display: none; }
  /* la phrase prend la ligne 1 sur toute la largeur ; le jour, le midi et le soir restent sur la ligne 2, dans leurs colonnes (58 px, 1fr, 1fr) */
  .sb-bandeau { display: block; grid-column: 1 / -1; grid-row: 1; border-top: 0; }
  .case.sans-bureau > .jh { grid-column: 1; grid-row: 2; }
  .case.sans-bureau > .ligne-repas[data-repas="midi"] { grid-column: 2; grid-row: 2; }
  .case.sans-bureau > .ligne-repas[data-repas="soir"] { grid-column: 3; grid-row: 2; }
  .case.sans-bureau > .ligne-repas.double { grid-column: 2 / -1; grid-row: 2; }
}
/* Menu du jour : l'onglet d'un jour sans bureau porte un filet en pointillé sous son nom (les deux pastilles sont déjà « hors bureau »). */
.jours a[data-sans-bureau] > span:first-child { text-decoration: underline dotted var(--texte-3); text-underline-offset: 4px; }
/* Réglages → Jours sans bureau : une ligne par jour, l'interrupteur et « Retirer » à 44 px sous 761 px. */
.sb-liste { list-style: none; padding: 0; margin: 12px 0; border-top: 1px solid var(--filet); }
.sb-ligne { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto auto; align-items: center; gap: 8px 14px; padding: 8px 0; border-bottom: 1px solid var(--filet); }
.sb-ligne form { margin: 0; }
.sb-ligne .sb-date { font: 400 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--texte-2); }
.sb-ligne .sb-raison { overflow-wrap: anywhere; }
.sb-ligne.inactif .sb-raison { color: var(--texte-3); text-decoration: line-through; }
.interrupteur { min-width: 88px; height: 32px; padding: 0 8px; } /* un bouton secondaire neutre ; l'état est l'étiquette qu'il porte (vert = actif) */
.sb-ajout { margin-top: 16px; }
.sb-ajout .sb-ajout-titre { flex: 1 0 100%; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); }
@media (max-width: 760px) {
  .sb-ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .sb-ligne .sb-date { grid-column: 1 / -1; }
  .interrupteur, .sb-ligne .btn.petit { min-height: 44px; }
  .sb-ajout button { width: 100%; min-height: 44px; }
}
.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%}
.barre-g.hj0{height:0%}
.barre-g.hj1{height:0.42%}
.barre-g.hj2{height:0.83%}
.barre-g.hj3{height:1.25%}
.barre-g.hj4{height:1.67%}
.barre-g.hj5{height:2.08%}
.barre-g.hj6{height:2.5%}
.barre-g.hj7{height:2.92%}
.barre-g.hj8{height:3.33%}
.barre-g.hj9{height:3.75%}
.barre-g.hj10{height:4.17%}
.barre-g.hj11{height:4.58%}
.barre-g.hj12{height:5%}
.barre-g.hj13{height:5.42%}
.barre-g.hj14{height:5.83%}
.barre-g.hj15{height:6.25%}
.barre-g.hj16{height:6.67%}
.barre-g.hj17{height:7.08%}
.barre-g.hj18{height:7.5%}
.barre-g.hj19{height:7.92%}
.barre-g.hj20{height:8.33%}
.barre-g.hj21{height:8.75%}
.barre-g.hj22{height:9.17%}
.barre-g.hj23{height:9.58%}
.barre-g.hj24{height:10%}
.barre-g.hj25{height:10.42%}
.barre-g.hj26{height:10.83%}
.barre-g.hj27{height:11.25%}
.barre-g.hj28{height:11.67%}
.barre-g.hj29{height:12.08%}
.barre-g.hj30{height:12.5%}
.barre-g.hj31{height:12.92%}
.barre-g.hj32{height:13.33%}
.barre-g.hj33{height:13.75%}
.barre-g.hj34{height:14.17%}
.barre-g.hj35{height:14.58%}
.barre-g.hj36{height:15%}
.barre-g.hj37{height:15.42%}
.barre-g.hj38{height:15.83%}
.barre-g.hj39{height:16.25%}
.barre-g.hj40{height:16.67%}
.barre-g.hj41{height:17.08%}
.barre-g.hj42{height:17.5%}
.barre-g.hj43{height:17.92%}
.barre-g.hj44{height:18.33%}
.barre-g.hj45{height:18.75%}
.barre-g.hj46{height:19.17%}
.barre-g.hj47{height:19.58%}
.barre-g.hj48{height:20%}
.barre-g.hj49{height:20.42%}
.barre-g.hj50{height:20.83%}
.barre-g.hj51{height:21.25%}
.barre-g.hj52{height:21.67%}
.barre-g.hj53{height:22.08%}
.barre-g.hj54{height:22.5%}
.barre-g.hj55{height:22.92%}
.barre-g.hj56{height:23.33%}
.barre-g.hj57{height:23.75%}
.barre-g.hj58{height:24.17%}
.barre-g.hj59{height:24.58%}
.barre-g.hj60{height:25%}
.barre-g.hj61{height:25.42%}
.barre-g.hj62{height:25.83%}
.barre-g.hj63{height:26.25%}
.barre-g.hj64{height:26.67%}
.barre-g.hj65{height:27.08%}
.barre-g.hj66{height:27.5%}
.barre-g.hj67{height:27.92%}
.barre-g.hj68{height:28.33%}
.barre-g.hj69{height:28.75%}
.barre-g.hj70{height:29.17%}
.barre-g.hj71{height:29.58%}
.barre-g.hj72{height:30%}
.barre-g.hj73{height:30.42%}
.barre-g.hj74{height:30.83%}
.barre-g.hj75{height:31.25%}
.barre-g.hj76{height:31.67%}
.barre-g.hj77{height:32.08%}
.barre-g.hj78{height:32.5%}
.barre-g.hj79{height:32.92%}
.barre-g.hj80{height:33.33%}
.barre-g.hj81{height:33.75%}
.barre-g.hj82{height:34.17%}
.barre-g.hj83{height:34.58%}
.barre-g.hj84{height:35%}
.barre-g.hj85{height:35.42%}
.barre-g.hj86{height:35.83%}
.barre-g.hj87{height:36.25%}
.barre-g.hj88{height:36.67%}
.barre-g.hj89{height:37.08%}
.barre-g.hj90{height:37.5%}
.barre-g.hj91{height:37.92%}
.barre-g.hj92{height:38.33%}
.barre-g.hj93{height:38.75%}
.barre-g.hj94{height:39.17%}
.barre-g.hj95{height:39.58%}
.barre-g.hj96{height:40%}
.barre-g.hj97{height:40.42%}
.barre-g.hj98{height:40.83%}
.barre-g.hj99{height:41.25%}
.barre-g.hj100{height:41.67%}
.barre-g.hj101{height:42.08%}
.barre-g.hj102{height:42.5%}
.barre-g.hj103{height:42.92%}
.barre-g.hj104{height:43.33%}
.barre-g.hj105{height:43.75%}
.barre-g.hj106{height:44.17%}
.barre-g.hj107{height:44.58%}
.barre-g.hj108{height:45%}
.barre-g.hj109{height:45.42%}
.barre-g.hj110{height:45.83%}
.barre-g.hj111{height:46.25%}
.barre-g.hj112{height:46.67%}
.barre-g.hj113{height:47.08%}
.barre-g.hj114{height:47.5%}
.barre-g.hj115{height:47.92%}
.barre-g.hj116{height:48.33%}
.barre-g.hj117{height:48.75%}
.barre-g.hj118{height:49.17%}
.barre-g.hj119{height:49.58%}
.barre-g.hj120{height:50%}
.barre-g.hj121{height:50.42%}
.barre-g.hj122{height:50.83%}
.barre-g.hj123{height:51.25%}
.barre-g.hj124{height:51.67%}
.barre-g.hj125{height:52.08%}
.barre-g.hj126{height:52.5%}
.barre-g.hj127{height:52.92%}
.barre-g.hj128{height:53.33%}
.barre-g.hj129{height:53.75%}
.barre-g.hj130{height:54.17%}
.barre-g.hj131{height:54.58%}
.barre-g.hj132{height:55%}
.barre-g.hj133{height:55.42%}
.barre-g.hj134{height:55.83%}
.barre-g.hj135{height:56.25%}
.barre-g.hj136{height:56.67%}
.barre-g.hj137{height:57.08%}
.barre-g.hj138{height:57.5%}
.barre-g.hj139{height:57.92%}
.barre-g.hj140{height:58.33%}
.barre-g.hj141{height:58.75%}
.barre-g.hj142{height:59.17%}
.barre-g.hj143{height:59.58%}
.barre-g.hj144{height:60%}
.barre-g.hj145{height:60.42%}
.barre-g.hj146{height:60.83%}
.barre-g.hj147{height:61.25%}
.barre-g.hj148{height:61.67%}
.barre-g.hj149{height:62.08%}
.barre-g.hj150{height:62.5%}
.barre-g.hj151{height:62.92%}
.barre-g.hj152{height:63.33%}
.barre-g.hj153{height:63.75%}
.barre-g.hj154{height:64.17%}
.barre-g.hj155{height:64.58%}
.barre-g.hj156{height:65%}
.barre-g.hj157{height:65.42%}
.barre-g.hj158{height:65.83%}
.barre-g.hj159{height:66.25%}
.barre-g.hj160{height:66.67%}
.barre-g.hj161{height:67.08%}
.barre-g.hj162{height:67.5%}
.barre-g.hj163{height:67.92%}
.barre-g.hj164{height:68.33%}
.barre-g.hj165{height:68.75%}
.barre-g.hj166{height:69.17%}
.barre-g.hj167{height:69.58%}
.barre-g.hj168{height:70%}
.barre-g.hj169{height:70.42%}
.barre-g.hj170{height:70.83%}
.barre-g.hj171{height:71.25%}
.barre-g.hj172{height:71.67%}
.barre-g.hj173{height:72.08%}
.barre-g.hj174{height:72.5%}
.barre-g.hj175{height:72.92%}
.barre-g.hj176{height:73.33%}
.barre-g.hj177{height:73.75%}
.barre-g.hj178{height:74.17%}
.barre-g.hj179{height:74.58%}
.barre-g.hj180{height:75%}
.barre-g.hj181{height:75.42%}
.barre-g.hj182{height:75.83%}
.barre-g.hj183{height:76.25%}
.barre-g.hj184{height:76.67%}
.barre-g.hj185{height:77.08%}
.barre-g.hj186{height:77.5%}
.barre-g.hj187{height:77.92%}
.barre-g.hj188{height:78.33%}
.barre-g.hj189{height:78.75%}
.barre-g.hj190{height:79.17%}
.barre-g.hj191{height:79.58%}
.barre-g.hj192{height:80%}
.barre-g.hj193{height:80.42%}
.barre-g.hj194{height:80.83%}
.barre-g.hj195{height:81.25%}
.barre-g.hj196{height:81.67%}
.barre-g.hj197{height:82.08%}
.barre-g.hj198{height:82.5%}
.barre-g.hj199{height:82.92%}
.barre-g.hj200{height:83.33%}
.barre-g.hj201{height:83.75%}
.barre-g.hj202{height:84.17%}
.barre-g.hj203{height:84.58%}
.barre-g.hj204{height:85%}
.barre-g.hj205{height:85.42%}
.barre-g.hj206{height:85.83%}
.barre-g.hj207{height:86.25%}
.barre-g.hj208{height:86.67%}
.barre-g.hj209{height:87.08%}
.barre-g.hj210{height:87.5%}
.barre-g.hj211{height:87.92%}
.barre-g.hj212{height:88.33%}
.barre-g.hj213{height:88.75%}
.barre-g.hj214{height:89.17%}
.barre-g.hj215{height:89.58%}
.barre-g.hj216{height:90%}
.barre-g.hj217{height:90.42%}
.barre-g.hj218{height:90.83%}
.barre-g.hj219{height:91.25%}
.barre-g.hj220{height:91.67%}
.barre-g.hj221{height:92.08%}
.barre-g.hj222{height:92.5%}
.barre-g.hj223{height:92.92%}
.barre-g.hj224{height:93.33%}
.barre-g.hj225{height:93.75%}
.barre-g.hj226{height:94.17%}
.barre-g.hj227{height:94.58%}
.barre-g.hj228{height:95%}
.barre-g.hj229{height:95.42%}
.barre-g.hj230{height:95.83%}
.barre-g.hj231{height:96.25%}
.barre-g.hj232{height:96.67%}
.barre-g.hj233{height:97.08%}
.barre-g.hj234{height:97.5%}
.barre-g.hj235{height:97.92%}
.barre-g.hj236{height:98.33%}
.barre-g.hj237{height:98.75%}
.barre-g.hj238{height:99.17%}
.barre-g.hj239{height:99.58%}
.barre-g.hj240{height:100%}