/* app.css — feuille principale, chargée sans bloquer (spec §7.4) ; le CSS critique (jetons, coquille, connexion)
   est en ligne dans index.html. Sections v1 reprises telles quelles (vues refondues en T9 / T10).

   ===== Identité D-21, refaite en T13 (regard du 25/10) : étiquette de bocal sur papier chaud =====
   Jetons à réutiliser partout (parcours.css compris) ; ils remplacent ceux d'index.html dès que cette feuille arrive.
   Couleurs
     --bg          fond de page, papier chaud           --paper     cartes, feuilles, barres (étiquette)
     --ink         texte                                --ink-2     texte secondaire (AA sur --bg et --paper)
     --line        bordure d'un élément qui se touche   --line-soft filets, séparations, cartes au repos
     --steel       piste des segments, notes, fonds neutres
     --accent      action principale, état choisi       --accent-soft fond d'un état choisi ; --accent-ink texte sur --accent
     --label       liseré chaud des étiquettes (filet des titres de section) — jamais pour du texte courant
     --ap-multicuiseur, --ap-four, --ap-gaz, --ap-rice, --ap-robot, --ap-plan : couleur d'appareil ; la classe .ap-<appareil> pose --ap
                   (bord gauche de carte, pastille .ap-badge, repères du mode cuisine et du planning)
     --g-leger, --g-zone, --g-copieux : jauges ; --m1…--m4 (+ -soft) : membres par position ; --warn-soft/--warn-ink
     --seg-on-bg, --seg-on-ring : segment actif (en sombre : fond --accent-soft et bord --accent, lisible)
   Formes : une par rôle (regard T12a)
     bouton   .btn          rayon --r-btn (10 px), 44 px, gras ; primaire plein --accent ; .btn-block pleine largeur
     puce     .chip, .fchip, .fbtn   rayon --r-pill, filtre ou choix à bascule (aria-pressed), 44 px au toucher
     tag      .tag, .card-tags        texte simple --ink-2, sans bordure
     segment  .seg          piste --steel, choix unique
     carte    .card, .jar   rayon --r-card, bord gauche 4 px var(--ap) si un appareil est connu
   Typographie : texte et chiffres en --f-text (chiffres tabulaires : .mono ne passe plus au Mono, dont le zéro barré
   se lisait « Ø ») ; --f-title (Zilla Slab) pour les titres et les grands totaux (.big-n) ; --f-mono (600) réservé
   aux étiquettes en capitales : .ticket-h, .sec-h, .facts dt, .label-h.
   Espacements : --gutter-l/r (16 px), --tap (44 px), --tb-h (hauteur de la barre du haut, posée par le catalogue). */
:root {
  --bg: #f3f0ea; --paper: #fdfcf9; --ink: #1d2329; --ink-2: #545b63; --line: #cfc8bc; --line-soft: #e4dfd5;
  --steel: #e8e3d9; --accent: #1c6a56; --accent-ink: #ffffff; --accent-soft: #d5e9df; --label: #a0753a;
  --seg-on-bg: var(--paper); --seg-on-ring: var(--line);
  --r-btn: 10px; --r-pill: 999px; --r-card: 8px;
  --shadow-bar: 0 -2px 10px rgba(60, 45, 20, .10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14181c; --paper: #1d2228; --ink: #e8e6e1; --ink-2: #a8aeb4; --line: #3b434c; --line-soft: #2a3037;
    --steel: #272d34; --accent: #6cc9a8; --accent-ink: #0c201a; --accent-soft: #1b3b32; --label: #c9a46a;
    --seg-on-bg: var(--accent-soft); --seg-on-ring: var(--accent); --shade: rgba(0, 0, 0, .6);
    --shadow-bar: 0 -2px 10px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --bg: #14181c; --paper: #1d2228; --ink: #e8e6e1; --ink-2: #a8aeb4; --line: #3b434c; --line-soft: #2a3037;
  --steel: #272d34; --accent: #6cc9a8; --accent-ink: #0c201a; --accent-soft: #1b3b32; --label: #c9a46a;
  --seg-on-bg: var(--accent-soft); --seg-on-ring: var(--accent); --shade: rgba(0, 0, 0, .6);
  --shadow-bar: 0 -2px 10px rgba(0, 0, 0, .45);
}
.mono { font-family: var(--f-text); font-variant-numeric: tabular-nums; }
.big-n { font-family: var(--f-title); font-weight: 700; font-size: var(--s-2xl); line-height: 1.1; white-space: nowrap; }

/* Barre du haut ≤ 96 px au repos (regard T12a : 112 px) : rangée de 44 px + recherche de 44 px, filet en ombre. */
.tb { border-bottom: 0; box-shadow: 0 1px 0 var(--line-soft); }
.tb-in { padding-block: 2px; row-gap: 4px; }
.tb .search { border: 0; box-shadow: inset 0 0 0 1px var(--line); background: var(--bg); }
.tb .search:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.tb .search input { height: var(--tap); }
.brand { min-width: var(--tap); }
.brand-mark.brand-jar, .brand-jar {
  display: grid; place-items: center; width: 36px; height: 36px; border: 0; box-shadow: none; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
}
@media (min-width: 768px) { .tb-in { padding-block: 8px; } }
.cnx-brand { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--f-title); font-weight: 700; font-size: var(--s-lg); }
.ck-step.ck-none { min-height: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--paper); padding: 10px 14px; border-radius: var(--r); }
.skip:focus { top: 8px; }
.ico { flex: none; }

/* ---------- Coquille ---------- */
.hdr {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.hdr-in {
  display: flex; align-items: center; gap: 12px; max-width: 1240px; margin: 0 auto;
  padding-block: 10px; padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: var(--tap); }
.brand-mark {
  display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 50%;
  font-family: var(--f-title); font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3.5px var(--ink);
}
.brand-name { display: none; font-family: var(--f-title); font-weight: 700; font-size: var(--s-lg); white-space: nowrap; }
.search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: var(--tap);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px 0 14px; color: var(--ink-2);
}
.search:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.search input {
  flex: 1; min-width: 0; border: 0; background: transparent; height: 42px; color: var(--ink); font-size: 1rem; outline: none;
}
.search input::-webkit-search-cancel-button { display: none; }
.search-clear, .icon-btn {
  display: grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; background: transparent;
  border-radius: 50%; cursor: pointer; color: var(--ink-2); flex: none;
}
.search-clear:hover, .icon-btn:hover { background: var(--steel); color: var(--ink); }
.nav-top { display: none; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--paper); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tabbar-h);
  text-decoration: none; color: var(--ink-2); font-size: .75rem; letter-spacing: .01em; position: relative;
}
.tab[aria-current="page"] { color: var(--accent); font-weight: 700; }
.tab[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent);
}
.main { display: block; outline: none; padding-bottom: calc(var(--tabbar-h) + 24px); }
.main-cooking { padding-bottom: 24px; }

.page {
  max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px;
  padding-block: 20px 8px; padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}
.page-title { font-family: var(--f-title); font-weight: 700; font-size: var(--s-2xl); line-height: 1.15; }
.eyebrow { font-size: var(--s-xs); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); font-weight: 700; }
.hint { font-size: var(--s-sm); color: var(--ink-2); }
.note { font-size: var(--s-sm); background: var(--steel); border-radius: var(--r); padding: 10px 12px; }
.colophon { font-size: var(--s-xs); color: var(--ink-2); padding-top: 8px; border-top: 1px dashed var(--line); }
.boot { min-height: 60vh; justify-content: center; }
/* Coquille statique avant les données : accueil par défaut, écran de chargement pour une autre vue. */
/* Les classes vivent sur <html> et sont retirées au premier rendu : un nœud de la coquille réutilisé par Preact
   (qui garde ses anciens attributs class) n'est plus jamais masqué. */
html:not(.boot-other) .boot-gen, html:not(.boot-week) .boot-wk { display: none; }
html.boot-other .boot-home { display: none; }
html.boot-week .boot-noweek { display: none; }
.boot-wk { order: -1; }
/* « Bonjour / prénom » n'est plus coupé en deux lignes (regard T12a : 40 px perdus, a l'air d'un bug). */

/* ---------- Boutons, champs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 16px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: var(--r-btn); cursor: pointer;
  text-decoration: none; font-weight: 700; font-size: var(--s-sm); white-space: nowrap;
}
.btn:hover { border-color: var(--ink-2); }
.btn-block { display: flex; width: 100%; white-space: normal; text-align: center; min-height: 48px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { border-color: var(--ink); }
.btn-sm { min-height: var(--tap); padding: 0 14px; }
.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-2); font-weight: 400; }
.btn-quiet:hover { border-color: var(--line); color: var(--ink); }
.btn.is-on { background: var(--m2-soft); border-color: var(--m2); color: var(--ink); }
.btn.is-on .ico path { fill: var(--m2); stroke: var(--m2); }
.btn-more { align-self: center; margin-top: 4px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* T38-I1 (QE I-1, LC I-1) : un libellé long passe à la ligne au lieu d'élargir la carte (390 px) */
.row-actions .btn { white-space: normal; max-width: 100%; text-align: center; }
.linkish {
  border: 0; background: none; color: var(--accent); text-decoration: underline; text-underline-offset: .18em;
  cursor: pointer; min-height: var(--tap); padding: 0 6px; font-size: var(--s-sm);
}
.badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.field { display: flex; flex-direction: column; gap: 4px; font-size: var(--s-sm); color: var(--ink-2); flex: 1 1 220px; min-width: 0; }
.field input {
  min-height: var(--tap); border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 0 12px; color: var(--ink);
}
.select { position: relative; display: inline-flex; }
.select select {
  appearance: none; -webkit-appearance: none; min-height: var(--tap); border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); padding: 0 36px 0 14px; font-size: var(--s-sm); cursor: pointer; max-width: 100%;
}
.select::after {
  content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; margin-top: -6px; pointer-events: none;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg);
}

/* Segments (choix unique) : piste grise à coins de 12 px, la seule forme de ce genre (≠ puce, ≠ bouton). */
.seg { display: flex; padding: 3px; gap: 3px; background: var(--steel); border-radius: 12px; width: fit-content; max-width: 100%; }
.seg button {
  min-height: var(--tap); padding: 0 14px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  font-weight: 700; font-size: var(--s-sm); color: var(--ink-2); white-space: nowrap;
}
.seg button[aria-pressed="true"] {
  background: var(--seg-on-bg); color: var(--ink); box-shadow: 0 0 0 1px var(--seg-on-ring), 0 1px 2px rgba(0, 0, 0, .08);
}
.seg-sm button { padding: 0 14px; }
.wk-reg .seg { flex-wrap: wrap; } /* T42 : quatre appareils à 390 px */

/* ---------- Puces (filtres, raccourcis, choix à bascule) : pilule bordée, texte normal, 44 px ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.chips-more { font-size: var(--s-xs); color: var(--ink-2); align-self: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: var(--s-sm); cursor: pointer;
  text-decoration: none; white-space: nowrap; position: relative; z-index: 1;
}
.chip:hover { border-color: var(--ink-2); }
.chip[aria-pressed="true"], .chip-on { background: var(--accent-soft); border-color: var(--accent); font-weight: 700; }
.chip-note { cursor: default; background: var(--steel); border-style: dashed; min-height: 32px; }
.chip-shortcut { background: var(--paper); }
.chip-link { border-style: dashed; color: var(--accent); }
.chip-switch span { font-weight: 700; color: var(--accent); }
.shortcuts { list-style: none; margin-block: 0; }
.shortcuts > li { flex: none; display: flex; }

/* Tags : du texte, sans bordure ; touchés, ils filtrent le catalogue. */
.tags { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; color: var(--ink-2); }
.tags > li { display: inline-flex; align-items: center; }
.tags > li + li::before { content: "·"; margin: 0 6px; color: var(--ink-2); }
.tag {
  min-height: var(--tap); min-width: var(--tap); padding: 0 2px; border: 0; background: none; color: var(--ink-2); font-size: var(--s-sm);
  cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em;
}
.tag:hover { color: var(--ink); text-decoration-color: currentColor; }
.tag-static { cursor: default; text-decoration: none; display: inline-flex; align-items: center; }

.fchip {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: var(--s-sm); color: var(--ink);
}
.fchip .n { font-size: var(--s-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fchip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); font-weight: 700; }
.fchip.is-empty { opacity: .45; cursor: default; border-style: dashed; }

.who {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 4px;
  font-size: var(--s-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid currentColor;
}
.who-sm { min-height: 22px; padding: 0 7px; font-size: .6875rem; }
.who-commun { color: var(--commun); background: var(--commun-soft); }

.plate { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 0; font-size: var(--s-sm); color: var(--ink-2); }
.dot { display: inline-flex; align-items: center; gap: 6px; }
.dot-mark { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); }
.dot.is-on { color: var(--ink); }
.dot.is-on .dot-mark { background: var(--g-zone); border-color: var(--g-zone); }

/* ---------- Catalogue ---------- */
.cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; min-width: 0; }
.count {
  font-size: var(--s-sm); color: var(--ink-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums; line-height: 1.5; height: 1.5em;
}
/* Une seule ligne collante sous la barre du haut : segment « Pour qui » et « Filtres (n) ». */
.cat-bar {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--tb-h, 96px)); z-index: 8; display: flex;
  align-items: center; justify-content: space-between; gap: 8px; margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r));
  padding: 6px var(--gutter-r) 6px var(--gutter-l); background: var(--bg);
}
.cat-bar .seg { flex: 0 1 auto; min-width: 0; }
.cat-bar .seg button { padding: 0 10px; }
.cat-bar .fbtn { flex: none; padding: 0 12px; gap: 6px; min-width: var(--tap); justify-content: center; }
/* Téléphone : le segment entier et « Filtres (n) » tiennent sur la ligne ; sous 380 px, l'icône seule et son badge
   (le nom accessible reste « Filtres, n actifs »). */
@media (max-width: 420px) {
  .cat-bar { gap: 6px; }
  .cat-bar .seg button { padding: 0 8px; }
  .cat-bar .fbtn { padding: 0 10px; }
  .cat-bar .fbtn .ico { display: none; }
}
@media (max-width: 380px) {
  .cat-bar .fbtn .ico { display: block; }
  .cat-bar .fbtn .fbtn-t { display: none; }
}
.facet-order { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 0; }
.facet-order .field { flex: 1 1 140px; }
.facet-order .select, .facet-order select { width: 100%; }
.facets > .hint { padding: 4px 0 6px; }
.shortcuts {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r));
  padding-inline: var(--gutter-l) var(--gutter-r); padding-block: 2px;
}
.shortcuts::-webkit-scrollbar { display: none; }
.home .shortcuts { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
.cat-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.cat-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* Carte de recette : étiquette de bocal, bord gauche à la couleur de l'appareil. Hors écran, son rendu est différé
   (content-visibility) : 24 cartes rendues d'un coup coûtaient au premier affichage (Lighthouse de Recettes). */
.card {
  --ap: var(--line); position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 12px 14px 12px 16px; background: var(--paper); border: 1px solid var(--line-soft);
  border-left: 4px solid var(--ap); border-radius: var(--r-card);
  content-visibility: auto; contain-intrinsic-size: auto 190px;
}
.card:hover { border-color: var(--line); border-left-color: var(--ap); }
.card:focus-within { border-color: var(--accent); border-left-color: var(--ap); }
.card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 28px; }
.card-top .mangeurs { margin-left: auto; }
.ap-badge {
  display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 9px 0 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--ap) 14%, var(--paper)); color: var(--ink); font-size: var(--s-xs); font-weight: 700;
}
.ap-badge .ico { color: var(--ap); }
.cx-badge {
  display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 9px; border-radius: 6px;
  border: 1px solid var(--line); color: var(--ink); font-size: var(--s-xs); font-weight: 700;
}
.cx-dots { letter-spacing: 1px; font-size: 10px; color: var(--ink-2); }
.cx-3 { border-color: var(--ink-2); }
.card-pas { display: inline-flex; align-items: center; gap: 4px; font-size: var(--s-xs); color: var(--accent); font-weight: 700; }
.card-title { font-family: var(--f-title); font-weight: 600; font-size: var(--s-lg); line-height: 1.25; overflow-wrap: anywhere; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.card-title a:focus-visible { outline: none; }
/* Anneau dedans : content-visibility contient la peinture, un anneau décalé vers l'extérieur serait rogné. */
.card-title a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
.card-meta { display: flex; flex-wrap: wrap; font-size: var(--s-sm); color: var(--ink); font-variant-numeric: tabular-nums; margin: 0; }
.card-meta > span { white-space: nowrap; }
.card-meta > span + span::before { content: "·"; margin: 0 .45em; color: var(--ink-2); }
.card-tags { margin: 0; font-size: var(--s-sm); color: var(--ink-2); }
.card-adapt { margin: 0; font-size: var(--s-xs); color: var(--ink-2); font-style: italic; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 2px; }
.card-rate { font-size: var(--s-xs); color: var(--ink); font-variant-numeric: tabular-nums; }
.card-sel, .card .fav-qui { position: relative; z-index: 2; }
.card-sel { margin-left: auto; font-weight: 700; }
.card-sel.is-on { background: var(--accent-soft); border-color: var(--accent); }
.card-compact { padding: 10px 12px 10px 14px; gap: 4px; contain-intrinsic-size: auto 120px; }
.card-compact .card-title { font-size: var(--s-md); }
/* Rappel de la sélection, collé en bas de l'écran dans le catalogue et la fiche. */
.selbar {
  position: sticky; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 6; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; padding: 6px 6px 6px 14px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-bar); font-size: var(--s-sm); font-weight: 700;
}
.selbar-t { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; font-weight: 600; }
.selbar-t .ico { color: var(--accent); }
.group { display: flex; flex-direction: column; gap: 10px; }
.group-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 6px;
  font-family: var(--f-title); font-size: var(--s-lg); border-bottom: 2px solid var(--ink);
}
.group-h .mono { font-size: var(--s-sm); color: var(--ink-2); font-weight: 400; }
.empty { padding: 28px 16px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r); display: grid; gap: 6px; color: var(--ink-2); }
.empty-title { font-family: var(--f-title); font-size: var(--s-lg); color: var(--ink); }

/* Facettes */
.facets { display: flex; flex-direction: column; }
.facet-switches { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.switch { display: flex; align-items: center; gap: 12px; min-height: var(--tap); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui {
  flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--line); transition: background .15s;
}
.switch-ui::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper);
  transition: transform .15s; box-shadow: 0 1px 2px var(--shade);
}
.switch input:checked + .switch-ui { background: var(--accent); }
.switch input:checked + .switch-ui::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-ui { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch-text { display: flex; flex-direction: column; font-size: var(--s-sm); line-height: 1.3; }
.switch-text small { color: var(--ink-2); font-size: var(--s-xs); }
.facet { border-bottom: 1px solid var(--line-soft); }
.facet summary {
  display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; font-weight: 700; list-style: none;
}
.facet summary::-webkit-details-marker { display: none; }
.facet summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg); margin-right: 6px; transition: transform .15s;
}
.facet[open] summary::after { transform: rotate(-135deg); }
.facet-vals { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 14px; }

/* Bottom sheet */
.sheet-back { position: fixed; inset: 0; z-index: 40; background: var(--shade); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; display: flex; flex-direction: column; max-height: 88vh; max-height: 88dvh;
  background: var(--paper); border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px var(--shade); outline: none;
  animation: sheet-in .2s ease-out;
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: .6; } }
.sheet-h {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-block: 14px 6px; padding-left: var(--gutter-l); padding-right: max(8px, env(safe-area-inset-right, 0px));
  border-bottom: 1px solid var(--line-soft);
}
.sheet-h h2 { font-family: var(--f-title); font-size: var(--s-xl); }
.sheet-grip { position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--line); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding-block: 8px; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.sheet-foot {
  display: flex; gap: 10px; justify-content: space-between; border-top: 1px solid var(--line-soft);
  padding-block: 12px calc(12px + env(safe-area-inset-bottom, 0px)); padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}
.sheet-foot .btn-primary { flex: 1; }

/* ---------- Fiche ---------- */
.back { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); width: fit-content; text-decoration: none; font-weight: 700; }
.jar {
  display: flex; flex-direction: column; gap: 14px; padding: 18px 16px; background: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--line);
}
/* En-tête de fiche : même étiquette que la carte, bord gauche à la couleur de l'appareil. */
.jar.jar-ap { border: 1px solid var(--line); border-left: 4px solid var(--ap); border-radius: var(--r-card); box-shadow: none; }
.jar-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--s-xs); color: var(--ink-2); }
.jar-top .cx-badge { margin-right: auto; } /* T35-C : collée à l’appareil, mangeurs à droite */
.jar-head { display: flex; align-items: flex-start; gap: 8px; }
.jar-head .jar-title { flex: 1; min-width: 0; }
.jar-icons { flex: none; display: flex; gap: 2px; margin: -6px -8px 0 0; }
.icon-toggle { color: var(--ink-2); }
.icon-toggle.is-on { background: var(--accent-soft); color: var(--accent); }
.icon-toggle.is-on .ico path { fill: var(--accent); stroke: var(--accent); }
.jar-line { margin: 0; font-size: var(--s-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.jar-line .muted { font-weight: 400; font-size: var(--s-sm); }
.jar-title { font-family: var(--f-title); font-weight: 700; font-size: var(--s-2xl); line-height: 1.12; overflow-wrap: anywhere; }
/* Grille de faits : deux colonnes à filets pleins ; un dernier fait seul prend toute la largeur. */
.facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0;
  border: 1px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden;
}
.facts div { padding: 8px 12px; min-width: 0; border-bottom: 1px solid var(--line-soft); }
.facts div:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.facts div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.facts div:last-child, .facts div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.facts dt {
  font-family: var(--f-mono); font-weight: 600; font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2);
}
.facts dd { margin: 0; font-family: var(--f-text); font-variant-numeric: tabular-nums; font-size: var(--s-md); font-weight: 600; }
.tag-rows { margin: 0; display: grid; gap: 10px; }
.tag-rows > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; align-items: baseline; }
.tag-rows dt { font-size: var(--s-sm); color: var(--ink-2); font-weight: 600; }
.tag-rows dd { margin: 0; min-width: 0; }
.avis { margin: 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.actions-label { font-size: var(--s-sm); color: var(--ink-2); margin-left: 4px; }
.sec { display: flex; flex-direction: column; gap: 12px; }
/* Titres de section en étiquette (D-21) : Mono 600 en capitales, filet couleur étiquette ; les titres Zilla restent
   au titre de page, à la fiche et aux grands totaux. */
.sec-h {
  font-family: var(--f-mono); font-weight: 600; font-size: var(--s-sm); line-height: 1.3; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink);
}
.sec > .sec-h, .sec > .sec-row { padding-bottom: 6px; border-bottom: 2px solid var(--label); }
.sec-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.persons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.person {
  display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--r); background: var(--paper);
  border: 1px solid var(--line); min-width: 0;
}
.person-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.person-lines li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 4px; border-bottom: 1px dotted var(--line); }
.person-lines li span:last-child { text-align: right; }
.kcal { display: flex; align-items: baseline; gap: 8px; }
.kcal { flex-wrap: wrap; column-gap: 8px; row-gap: 2px; }
.kcal .mono { font-family: var(--f-title); font-size: var(--s-xl); font-weight: 700; white-space: nowrap; }
.stepper { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.stepper .icon-btn { font-size: 1.4rem; color: var(--ink); }
.stepper .icon-btn:disabled { opacity: .35; }
.stepper output { min-width: 96px; text-align: center; font-size: var(--s-sm); }
.ing { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.ing li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.ing .q { text-align: right; color: var(--ink); font-weight: 600; }
.subs { list-style: none; margin: 0; padding: 10px 12px; background: var(--accent-soft); border-radius: var(--r); font-size: var(--s-sm); display: grid; gap: 4px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; }
.steps li {
  counter-increment: step; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); column-gap: 10px; row-gap: 2px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.steps li::before {
  content: counter(step); grid-row: span 2; font-family: var(--f-title); font-weight: 700; font-size: var(--s-lg); color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.step-meta { font-size: var(--s-xs); color: var(--ink-2); }
.macros { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 0 14px; }
.macros summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.macros[open] { padding-bottom: 14px; }
.macros .facts { margin-bottom: 8px; }
.source { font-size: var(--s-sm); display: grid; gap: 4px; overflow-wrap: anywhere; }

/* ---------- Accueil, tickets ---------- */
.ticket {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 4px; position: relative;
  background-image: radial-gradient(circle at 8px 0, var(--bg) 5px, transparent 5.5px);
  background-size: 16px 8px; background-repeat: repeat-x; background-position: 0 -1px; padding-top: 20px;
}
.ticket-h { font-family: var(--f-mono); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: var(--s-sm); }
.tickets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sessions-wait { min-height: 60vh; }
.ticket-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--s-sm); }
.ticket-lines li { padding-bottom: 4px; border-bottom: 1px dotted var(--line); }
.steaks-entry {
  display: grid; gap: 2px; padding: 16px; text-decoration: none; color: var(--ink); border-radius: var(--r);
  border: 1.5px dashed var(--m2); background: var(--m2-soft);
}
.steaks-title { font-family: var(--f-title); font-weight: 700; font-size: var(--s-xl); }
.coming .ticket { max-width: 640px; }

/* ---------- Grand écran ---------- */
@media (min-width: 560px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .persons { grid-template-columns: repeat(auto-fill, minmax(260px, 420px)); }
  .tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .brand-name { display: inline; }
  .tabbar { display: none; }
  .main { padding-bottom: 40px; }
  .search { max-width: 420px; }
  .nav-top { display: flex; gap: 2px; margin-left: auto; }
  .nav-link {
    display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 10px; border-radius: 999px;
    text-decoration: none; color: var(--ink-2); font-weight: 700; font-size: var(--s-sm);
  }
  .nav-link .ico { display: none; }
  .nav-link:hover { background: var(--steel); color: var(--ink); }
  .nav-link[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
  .cat-grid { grid-template-columns: 272px minmax(0, 1fr); }
  .cat-side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 80px); max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 6px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .shortcuts { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .page { padding-block: 28px 8px; }
  .fiche { max-width: 880px; }
  .jar { padding: 24px; }
  .jar-title { font-size: 2.25rem; }
}
@media (min-width: 1100px) {
  .nav-link .ico { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* T3.5-B : semaine (étiquettes de boîte par personne, plats, courses) et Nos repères. */
.wk-head { display: flex; flex-direction: column; gap: 10px; }
.wk-why { font-size: var(--s-sm); max-width: 70ch; }
.wk-presence { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.wk-presence .mono { font-family: var(--f-title); font-size: var(--s-2xl); font-weight: 700; line-height: 1.1; }
.wk-alert { font-size: var(--s-sm); background: var(--steel); border-left: 4px solid var(--g-copieux); border-radius: var(--r); padding: 8px 12px; }
.wk-alert-net { font-weight: 700; }
.wk-session { max-width: 720px; }
.wk-dishes, .wk-days, .wk-label-lines, .wk-alt-list, .wk-shop-lines { list-style: none; margin: 0; padding: 0; }
.wk-dishes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.wk-dish {
  display: flex; flex-direction: column; gap: 8px; padding: 14px; min-width: 0; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
}
.wk-dish-fish { border: 1.5px solid var(--m2); }
.wk-role { font-size: var(--s-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.wk-role span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.wk-dish-t { font-family: var(--f-title); font-weight: 700; font-size: var(--s-lg); line-height: 1.2; overflow-wrap: anywhere; }
.wk-dish-t a, .wk-line-t a, .wk-alt-t a { color: var(--ink); text-decoration: none; }
.wk-dish-t a:hover, .wk-line-t a:hover, .wk-alt-t a:hover { text-decoration: underline; }
.wk-dish .chip { white-space: normal; min-height: 28px; padding-block: 3px; font-size: var(--s-xs); }
.wk-fish { border-color: var(--m2); color: var(--ink); background: var(--m2-soft); }
.wk-dish .btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
/* T35-C3 (relecture C, m-1) : « Plus simple » activé, dans la feuille Remplacer */
.wk-alt-niveau .btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); font-weight: 700; }
.wk-alts { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line); padding-top: 10px; }
.wk-alt-list { display: grid; gap: 8px; }
.wk-alt-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px dotted var(--line); }
.wk-alt-t { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; font-size: var(--s-sm); }
.wk-alt-t small, .wk-line-t small { font-size: var(--s-xs); }
.wk-alts .linkish { align-self: flex-start; }
.wk-days { display: grid; gap: 22px; }
.wk-day { display: flex; flex-direction: column; gap: 10px; }
.wk-day-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.wk-day-t { font-family: var(--f-title); font-weight: 700; font-size: var(--s-xl); }
.wk-minute { border-color: var(--ap-four); white-space: normal; }
.wk-labels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.wk-label {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; min-width: 0; background: var(--paper);
  border: 1.5px solid var(--commun); border-radius: 8px; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--line-soft);
}
.wk-label-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.wk-label-top .mono { font-size: var(--s-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.wk-label-lines { display: grid; gap: 6px; font-size: var(--s-sm); }
.wk-label-lines li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px dotted var(--line); }
.wk-label-lines li > span:last-child { text-align: right; }
.wk-line-t { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.wk-line-t small { font-weight: 400; }
.wk-where {
  flex: none; font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  padding: 1px 7px; border: 1.5px solid currentColor; border-radius: 4px;
}
.wk-where-frigo { color: var(--g-leger); }
.wk-where-congel { color: var(--ap-multicuiseur); }
.wk-where-soir { color: var(--ap-four); }
.wk-thaw { font-size: var(--s-sm); font-weight: 700; color: var(--ap-multicuiseur); }
.wk-eve { font-size: var(--s-sm); color: var(--ink-2); border-left: 3px solid var(--ap-multicuiseur); padding-left: 10px; }
.wk-shop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wk-rayon { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; min-width: 0; }
.wk-rayon-h { font-family: var(--f-mono); font-weight: 600; font-size: var(--s-sm); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.wk-shop-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dotted var(--line); font-size: var(--s-sm); }
.wk-shop-lines li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.wk-shop-lines .mono { flex: none; text-align: right; }
.wk-copy { display: flex; flex-direction: column; gap: 6px; }
.wk-copy textarea {
  width: 100%; font-family: var(--f-text); font-variant-numeric: tabular-nums; font-size: var(--s-sm); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r); padding: 10px;
}
.wk-hist li { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.rp-person { gap: 14px; }
.rp-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.rp-fields .field { flex: 1 1 140px; }
.rp-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--s-sm); }
.rp-share-l { flex: 1 0 100%; color: var(--ink-2); }
.rp-share select:disabled { opacity: .5; cursor: default; }
.rp-zone { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; padding: 10px 12px; background: var(--steel); border-radius: var(--r); }
.rp-zone .mono { font-size: var(--s-lg); font-weight: 600; }
.rp-desserts { display: flex; flex-direction: column; gap: 8px; }
.rp-sub { font-weight: 700; font-size: var(--s-sm); }
.rp-desserts .chip { min-height: var(--tap); white-space: normal; text-align: left; }
.rp-home { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; max-width: 860px; }
.rp-rows { display: grid; }
.rp-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-bottom: 1px dotted var(--line); }
.rp-row-l { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; font-weight: 700; font-size: var(--s-sm); }
.rp-row-l small { font-weight: 400; font-size: var(--s-xs); }
.rp-row-c { max-width: 100%; }
@media (min-width: 560px) {
  .wk-labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .wk-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-persons { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }
}
@media (min-width: 1100px) {
  .wk-dishes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wk-shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wk-days { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
}

/* T3.5-A : mode cuisine (gros texte, boutons en bas), batch (présence, leviers, plats), planning en ticket A / B,
   steaks végé. Couleur d'appareil portée par --ap ; alertes en ambre, jamais de rouge. */
.ap-multicuiseur { --ap: var(--ap-multicuiseur); } .ap-four { --ap: var(--ap-four); } .ap-gaz { --ap: var(--ap-gaz); }
.ap-rice { --ap: var(--ap-rice); } .ap-plan { --ap: var(--ap-plan); } .ap-repos { --ap: var(--m1); } .ap-robot { --ap: var(--ap-robot); }
.ap-batchcooker { --ap: var(--ap-multicuiseur); }

/* Mode cuisine */
.cuisine { max-width: 760px; gap: 16px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.ck-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ck-count { font-size: var(--s-lg); font-weight: 600; color: var(--ink-2); }
.ck-title { font-family: var(--f-title); font-weight: 700; font-size: var(--s-xl); line-height: 1.2; }
.ck-progress { display: flex; gap: 4px; }
.ck-progress span { flex: 1; height: 6px; border-radius: 3px; background: var(--line-soft); }
.ck-progress .is-done { background: var(--accent-soft); }
.ck-progress .is-now { background: var(--accent); }
.ck-minute { font-size: var(--s-md); padding: 10px 14px; border-radius: var(--r); border: 1.5px dashed var(--m2); background: var(--m2-soft); }
.ck-ing { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 0 14px; }
.ck-ing summary { min-height: 52px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; font-size: var(--s-lg); }
.ck-ing[open] { padding-bottom: 8px; }
.ck-ing .ing li { font-size: var(--s-lg); }
.ck-step {
  display: flex; flex-direction: column; gap: 18px; padding: 22px 18px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 4px; outline: none; min-height: 40vh;
}
.ck-step:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ck-text { font-size: max(28px, 1.75rem); line-height: 1.35; font-weight: 400; color: var(--ink); max-width: 30ch; text-wrap: pretty; }
.ck-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ck-none p { font-size: var(--s-lg); line-height: 1.45; margin: 0; }
.ck-facts li {
  display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums;
  font-size: var(--s-lg); font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: var(--steel); color: var(--ink);
}
.ck-facts .ck-ap { background: var(--paper); border: 2px solid var(--ap); }
.ck-src { font-size: var(--s-lg); overflow-wrap: anywhere; }
.ck-done { min-height: 0; }
.ck-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px;
  padding: 10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
  background: var(--paper); border-top: 1px solid var(--line);
}
.ck-btn { min-height: 60px; font-size: var(--s-lg); }

/* Batch : résumé et leviers */
.bt-head, .st-head { display: grid; gap: 6px; }
.bt-sum {
  display: grid; gap: 10px; padding: 18px; border-radius: var(--r); background: var(--paper); border: 1.5px solid var(--accent);
}
.bt-sum.lvl-doux { border-color: var(--g-copieux); }
.bt-sum.lvl-net, .bt-sum.lvl-rejet { border-color: var(--g-copieux); background: color-mix(in srgb, var(--g-copieux) 12%, var(--paper)); }
.bt-verdict { font-size: var(--s-xs); text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--accent); }
.lvl-doux .bt-verdict, .lvl-net .bt-verdict, .lvl-rejet .bt-verdict { color: var(--ink); }
.bt-presence { font-family: var(--f-title); font-weight: 700; font-size: var(--s-xl); line-height: 1.2; }
.bt-presence .mono { font-family: var(--f-title); font-size: 2.25rem; font-weight: 700; display: block; line-height: 1.1; }
.bt-total { color: var(--ink-2); }
.bt-text { font-weight: 700; }
.tl-loads { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tl-loads li { display: flex; align-items: baseline; gap: 8px; }
.tl-who {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--steel);
  font-weight: 700; font-size: var(--s-sm);
}
.bt-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding-top: 6px; border-top: 1px dashed var(--line); }
.bt-lever-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bt-lever-list li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
}
.bt-lever-list li > span:first-child { flex: 1 1 220px; min-width: 0; }

/* Batch : plats */
.bt-dishes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.bt-dish {
  display: grid; gap: 8px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); min-width: 0;
}
.bt-dish.is-locked { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.bt-dish-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bt-who { display: inline-flex; align-items: center; gap: 8px; font-size: var(--s-xs); }
.bt-role { font-size: var(--s-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-2); }
.bt-dish-title { font-weight: 700; font-size: var(--s-lg); line-height: 1.3; overflow-wrap: anywhere; }
.bt-dish-title a { color: var(--ink); }
.bt-dish-meta, .bt-dish-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bt-dish-meta .stepper output { min-width: 88px; }
.bt-check { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); font-size: var(--s-sm); }
.bt-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.btn.is-lock { background: var(--accent-soft); border-color: var(--accent); }
.bt-minute { display: grid; gap: 6px; padding: 12px 14px; border: 1.5px dashed var(--m2); border-radius: var(--r); background: var(--m2-soft); }
.bt-minute li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.bt-start { display: inline-flex; align-items: center; gap: 8px; font-size: var(--s-sm); color: var(--ink-2); }
.bt-start input {
  min-height: var(--tap); padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  font-family: var(--f-text); font-variant-numeric: tabular-nums;
}
.bt-save { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.bt-save .field input { min-height: var(--tap); }
.bt-save .hint { flex-basis: 100%; }
.bt-src-h { font-size: var(--s-md); font-weight: 700; color: var(--ink-2); }
.bt-src .hint { overflow-wrap: anywhere; }
.pk { display: grid; gap: 12px; }
.pk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pk-item {
  width: 100%; display: grid; gap: 4px; text-align: left; padding: 10px 12px; min-height: var(--tap); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
}
.pk-item:hover { border-color: var(--ink-2); }
.pk-title { font-weight: 700; }
.pk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--s-xs); color: var(--ink-2); }

/* Planning en ticket : heure | A | B, appareils sous la ligne */
.tl-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--s-xs); color: var(--ink-2); }
.tl-legend li { display: flex; align-items: center; gap: 6px; }
.tl-machine { display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: baseline; gap: 2px 8px; }
.tl-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ap); }
.tl {
  display: grid; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px 10px;
  background-image: radial-gradient(circle at 8px 0, var(--bg) 5px, transparent 5.5px);
  background-size: 16px 8px; background-repeat: repeat-x; background-position: 0 -1px; padding-top: 14px;
}
.tl-row, .tl-free, .tl-end {
  display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; row-gap: 6px;
  padding: 8px 0; border-bottom: 1px dotted var(--line);
}
.tl-solo .tl-row, .tl-solo .tl-free, .tl-solo .tl-end { grid-template-columns: 4.4rem minmax(0, 1fr); }
.tl-head { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); padding: 6px 0; }
.tl-time, .tl-free > .mono, .tl-end > .mono { font-size: var(--s-sm); font-weight: 600; padding-top: 4px; white-space: nowrap; }
.tl-cell, .tl-under { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; min-width: 0; }
.tl-op {
  display: grid; gap: 2px; padding: 6px 8px; border-left: 4px solid var(--ap); background: var(--bg); border-radius: 0 4px 4px 0;
  font-size: var(--s-sm); line-height: 1.3; overflow-wrap: anywhere;
}
.tl-op.is-light { background: transparent; border-left-style: dashed; color: var(--ink-2); }
.tl-dur { font-size: var(--s-xs); color: var(--ink-2); }
.tl-under { grid-column: 2 / -1; }
.tl-machine { font-size: var(--s-xs); color: var(--ink-2); }
.tl-machine strong { color: var(--ink); }
.tl-machine .tl-dur { grid-column: 2; }
.tl-machine .tl-dot { align-self: center; }
.tl-note { font-size: var(--s-xs); padding: 4px 8px; border-radius: 4px; background: var(--steel); color: var(--ink); }
.tl-free { background: var(--accent-soft); border-radius: 4px; border-bottom: 0; margin: 4px 0; padding-inline: 0 8px; }
.tl-free p { grid-column: 2 / -1; font-size: var(--s-sm); padding: 2px 0; }
.tl-end span:last-child { grid-column: 2 / -1; font-size: var(--s-sm); color: var(--ink-2); padding-top: 4px; }
.tl-etapes { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--s-sm); font-weight: 600; }
/* Batch en cours (R-13) : frise d'abord, résumé replié dessous ; au téléphone, une seule colonne (bascule). */
.bt-plan.is-en-cours { display: grid; gap: 14px; }
.bt-resume > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.bt-resume[open] { display: grid; gap: 12px; }
@media (min-width: 600px) { .bt-colonne { display: none; } }
@media (max-width: 599.98px) {
  .tl.tl-une-A .tl-col-B, .tl.tl-une-B .tl-col-A { display: none; }
  .tl.tl-une-A .tl-row:not(.tl-head):not(:has(.tl-col-A > li, .tl-under > li)),
  .tl.tl-une-B .tl-row:not(.tl-head):not(:has(.tl-col-B > li, .tl-under > li)) { display: none; }
  .tl.tl-une-A :is(.tl-row, .tl-free, .tl-end), .tl.tl-une-B :is(.tl-row, .tl-free, .tl-end) {
    grid-template-columns: 4.4rem minmax(0, 1fr);
  }
}

/* Steaks végé */
.st-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.st-side { display: grid; gap: 16px; min-width: 0; }
.st-method > summary { min-height: 44px; box-sizing: border-box; padding-block: 10px; cursor: pointer; } /* T33-L7c : cible tactile ≥ 44 px, triangle gardé */
.st-steps { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.st-steps li::marker { font-weight: 700; color: var(--accent); }
.st-atelier { border-color: var(--m2); }
.st-atelier .btn { width: fit-content; }
.st-total { font-size: var(--s-xl); font-weight: 600; }
.st-stock-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.st-stock-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.st-stock-list .stepper output { min-width: 48px; }
.st-stock > .btn { align-self: flex-start; justify-self: start; }
.st-filters { display: grid; gap: 10px; }
.st-filter { display: grid; gap: 6px; }
.st-filter-h { font-size: var(--s-xs); text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--ink-2); }
.st-more summary { min-height: var(--tap); display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; }
.st-more .st-filter-h { display: none; }
.st-instock { font-size: var(--s-xs); color: var(--m2); font-weight: 600; }
.st-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.st-card { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 768px) {
  .bt-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .batch .bt-sum { max-width: 760px; }
  .tl-row, .tl-free, .tl-end { grid-template-columns: 4.4rem minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
  .tl-solo .tl-row, .tl-solo .tl-free, .tl-solo .tl-end { grid-template-columns: 4.4rem minmax(0, 1fr); }
  .tl { padding-inline: 16px; }
  .ck-nav { position: sticky; bottom: env(safe-area-inset-bottom, 0px); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; }
  .cuisine { padding-bottom: 24px; }
}
@media (min-width: 960px) {
  .st-top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .batch { max-width: 1080px; }
}

/* ==================== v2 (T8) : coquille à menu, feuilles, profil, foyer ==================== */
/* Ces règles viennent après les sections v1 : elles l'emportent (la barre d'onglets v1 n'existe plus). */
.main { padding-bottom: 40px; }
.tabbar, .nav-top { display: none; }
.icon-btn:hover, .search-clear:hover { background: var(--steel); color: var(--ink); }
.search:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.search input::-webkit-search-cancel-button { display: none; }
.tb-me:hover { background: var(--steel); }
.bandeau-maj { max-width: 1240px; margin: 12px auto 0; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.bandeau-a { display: flex; gap: 8px; }

/* En-tête de page */
.page-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.page-h-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Feuille : <dialog> modal, bas (bottom sheet ; panneau centré dès 768 px) ou droite (tiroir du menu) */
.feuille { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: none; max-height: none; overflow: visible; }
.feuille::backdrop { background: var(--shade); }
.feuille-in { background: var(--paper); display: flex; flex-direction: column; min-height: 0; }
.feuille-bas { margin: auto auto 0; width: 100%; }
.feuille-bas .feuille-in { border-radius: 16px 16px 0 0; max-height: 88vh; padding-bottom: env(safe-area-inset-bottom, 0px); }
.feuille-droite { margin: 0 0 0 auto; height: 100%; max-height: 100dvh; width: min(320px, 88vw); }
.feuille-droite .feuille-in { height: 100%; border-left: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.feuille-h {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line-soft);
}
.feuille-h h2 { font-family: var(--f-title); font-size: var(--s-lg); }
.feuille-b { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 24px; }
.feuille-p { border-top: 1px solid var(--line-soft); padding: 12px 16px; display: flex; gap: 10px; justify-content: flex-end; }
@media (min-width: 768px) {
  .feuille-bas { margin: auto; width: min(560px, 92vw); }
  .feuille-bas .feuille-in { border-radius: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .feuille-droite[open] .feuille-in { animation: tiroir-in .18s ease-out; }
  .feuille-bas[open] .feuille-in { animation: feuille-in .18s ease-out; }
}
@keyframes tiroir-in { from { transform: translateX(24px); opacity: .6; } }
@keyframes feuille-in { from { transform: translateY(24px); opacity: .6; } }

/* Menu (latéral et tiroir) */
.mn-me { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.mn-me-n { font-family: var(--f-title); font-weight: 700; font-size: var(--s-lg); line-height: 1.2; }
.mn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mn-link {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--tap); padding: 0 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--s-sm); cursor: pointer; text-align: left;
}
.mn-link .ico { color: var(--ink-2); }
.mn-link:hover { background: var(--steel); }
.mn-link[aria-current="page"] { background: var(--accent-soft); }
.mn-link[aria-current="page"] .ico { color: var(--accent); }
.mn-link .badge { margin-left: auto; }
.mn-sep { border: 0; border-top: 1px solid var(--line-soft); margin: 10px 0; }
.mn-theme { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.mn-theme-h { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: var(--s-sm); }
.mn-theme-h .ico { color: var(--ink-2); }
.mn-out { margin-top: 4px; color: var(--ink-2); }

/* Formulaires du profil et du foyer */
.pf { display: flex; flex-direction: column; gap: 20px; }
.pf-box {
  margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.pf-box > legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; }
.pf-box > legend + * { clear: both; }
.pf-h { font-family: var(--f-title); font-weight: 700; font-size: var(--s-lg); margin: 0; }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pf-repas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pf-rp { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.pf-rp-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pf-rp-n { font-weight: 700; }
.pf-rp-b { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; }
.pf-rp-b .hint { flex: 1 1 180px; padding-bottom: 10px; }
.field-kcal { flex: 0 1 170px; }
.pf-sum { font-size: var(--s-sm); background: var(--steel); border-radius: var(--r); padding: 10px 12px; }
.pf-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; }
.check { display: flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); }
.btn.is-sel { background: var(--accent-soft); border-color: var(--accent); }
.pf-save {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  background: var(--bg); padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-soft);
}
.pf-msg { min-height: 1.5em; font-size: var(--s-sm); color: var(--ink-2); }
.pf-msg.is-err { color: var(--warn-ink); font-weight: 700; }
.pf-who { display: flex; align-items: center; gap: 12px; }
.pf-who-n { font-family: var(--f-title); font-weight: 700; font-size: var(--s-xl); }
.fy-membres { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.fy-membres li { display: flex; align-items: center; gap: 8px; }
.fy-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.fy-row-t { display: flex; flex-direction: column; }
.fy-row-n { font-weight: 700; }
.pf .seg { flex-wrap: wrap; }
@media (min-width: 560px) {
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .pf, .pf-who, .fy-membres { max-width: 760px; }
  .cnx-tiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
.page > .pf-box { max-width: 760px; }
/* Les boutons-icônes v1 (.icon-btn en grille) ne doivent pas réafficher la loupe ni le burger masqués. */
.tb-search-btn { display: none; }
.tb-compact .tb-search-btn { display: grid; }
@media (min-width: 768px) { .tb-compact .tb-search-btn { display: none; } }
/* T33-L2b : « Plus » reste à toutes les tailles (le menu latéral ne contient plus que les 5 entrées) ; libellé dès 1024 px. */
.tb-burger-l { display: none; }
@media (min-width: 1024px) {
  .tb-burger { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 14px 0 10px; border-radius: 999px; font-weight: 600; color: var(--ink); }
  .tb-burger-l { display: inline; }
}
.mn-theme .seg { width: 100%; }
.mn-theme .seg button { flex: 1 1 0; padding: 0 6px; }

/* T19 */
/* Journée (#journee), Composer (#composer), repas du profil — révision 1 §12.4 (D-109). */
.jr-qui { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.jr-qui .hint { display: inline-flex; align-items: center; gap: 6px; }
.jr-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.jr-bilan, .cp-total {
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 16px;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.jr-kcal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 0; }
.jr-kcal-n { font-family: var(--f-title); font-size: var(--s-2xl); font-weight: 700; line-height: 1; }
.jr-zone {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px;
  font-size: var(--s-xs); font-weight: 700; color: var(--paper); align-self: center;
}
.jr-zone-leger { background: var(--g-leger); }
.jr-zone-zone { background: var(--g-zone); }
.jr-zone-copieux { background: var(--g-copieux); }
.jr-bar { display: block; height: 8px; border-radius: 999px; background: var(--steel); overflow: hidden; }
.jr-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ink-2); }
.jr-bar-leger > span { background: var(--g-leger); }
.jr-bar-zone > span { background: var(--g-zone); }
.jr-bar-copieux > span { background: var(--g-copieux); }
.jr-macros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 16px; margin: 0; }
.jr-macro { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jr-macro dt { font-size: var(--s-xs); color: var(--ink-2); }
.jr-macro dd { margin: 0; font-size: var(--s-sm); }
.jr-repas { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.jr-rp {
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.jr-rp-aucun, .jr-rp-vide { background: transparent; border-style: dashed; }
.jr-rp-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.jr-rp-n { font-family: var(--f-title); font-weight: 700; font-size: var(--s-lg); margin: 0; }
.jr-rp-k, .jr-rp-s, .jr-rp-plat { margin: 0; font-size: var(--s-sm); }
.jr-rp-s { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-2); }
.jr-rp-plat { overflow-wrap: anywhere; }
.jr-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--s-sm); }
.jr-lignes li { display: flex; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.jr-lignes .mono { flex: none; min-width: 5.5em; color: var(--ink-2); }
.jr-resume { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 16px; }
.jr-resume-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--s-sm); }
.jr-resume-l li { display: grid; grid-template-columns: 9em minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.jr-resume-n { font-weight: 700; }
.jr-resume-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.jr-resume .btn { align-self: flex-start; }

.cp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cp-compo, .cp-ajout, .cp-types { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cp-types { margin-top: 24px; }
.cp-h3 { font-weight: 700; font-size: var(--s-md); margin: 8px 0 0; }
.cp-macros { margin: 0; font-size: var(--s-sm); color: var(--ink-2); }
.cp-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cp-l {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n x" "q k"; gap: 6px 10px;
  align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft);
}
.cp-l-n { grid-area: n; font-weight: 700; overflow-wrap: anywhere; }
.cp-l-q { grid-area: q; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.cp-l-q input {
  width: 5.5em; min-height: var(--tap); border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  color: var(--ink); padding: 0 8px; font-family: var(--f-text); font-variant-numeric: tabular-nums;
}
.cp-l-q .select { max-width: 100%; }
.cp-l-q .select select { max-width: 14em; }
.cp-l-u { font-size: var(--s-sm); color: var(--ink-2); }
.cp-l-k { grid-area: k; font-size: var(--s-sm); text-align: right; }
.cp-l-x { grid-area: x; min-width: var(--tap); padding: 0; }
.cp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.cp-nomtype { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; width: 100%; }
.cp-ajout .seg { width: 100%; }
.cp-ajout .seg button { flex: 1 1 0; padding: 0 6px; }
.cp-cherche, .cp-perso { display: flex; flex-direction: column; gap: 10px; }
.cp-cherche .field input, .cp-off .field input, .cp-etiq .field input { width: 100%; }
.cp-cherche > .field, .cp-compo > .field, .pf-type > .field { flex: none; }
.cp-rayons { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-chip { min-height: var(--tap); }
.cp-res { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cp-res-i {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--line-soft); min-width: 0;
}
.cp-res-t { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.cp-res-n { font-weight: 700; }
.cp-res-i .row-actions { flex: none; gap: 6px; }
.cp-etiq, .cp-off {
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.cp-etiq-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px 12px; }
.cp-etiq-g .field { flex: none; }
.cp-etiq-g .field:first-child { grid-column: 1 / -1; }
.cp-off-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.cp-off-row .field { flex: 1 1 200px; }

.pf-jours { display: flex; flex-wrap: wrap; gap: 4px; }
.pf-jour {
  min-width: var(--tap); min-height: var(--tap); padding: 0 6px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink-2); font-size: var(--s-sm); cursor: pointer; text-transform: capitalize;
}
.pf-jour[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 700; }
.pf-type { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 0; }
.pf-type .select, .pf-type select { max-width: 100%; }
.pf-type .select select { width: 100%; }
.pf-type .hint { flex: none; padding-bottom: 0; }

@media (min-width: 768px) {
  .jr-repas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-l { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "n q k x"; }
}
@media (min-width: 1200px) {
  .cp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* T9 */
/* Vues recettes v2 : accueil, catalogue, fiche, mode cuisine, favoris (spec §7.3). */
.skip { min-height: var(--tap); display: inline-flex; align-items: center; }
.btn.is-on { background: var(--accent-soft); border-color: var(--accent); }
.btn.is-on .ico path { fill: var(--accent); stroke: var(--accent); }
/* Mangeurs (pastilles des membres) */
.mangeurs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.mangeurs-aucun { font-size: var(--s-xs); color: var(--ink-2); }
.card-adapt { margin: 0; }
/* Catalogue : la première carte tient sous 300 px (en-tête 96 + titre + ligne collante + raccourcis). */
.cat { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.cat .page-title { font-size: var(--s-xl); }
.fbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--s-sm);
  font-weight: 700; cursor: pointer; white-space: nowrap;
}
.fbtn:hover { border-color: var(--ink-2); }
.fbtn.is-on { background: var(--accent-soft); border-color: var(--accent); }
.cat .cat-main { gap: 14px; }
@media (min-width: 768px) { .cat .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .cat .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Fiche */
.jar-src { margin: 0; font-size: var(--s-sm); overflow-wrap: anywhere; }
.fiche-actions { flex-direction: column; align-items: stretch; gap: 10px; }
.fiche-actions .row-actions { align-items: center; }
.fiche-actions .btn { min-height: var(--tap); }
.pas-pour { display: flex; align-items: center; gap: 8px; }
.subs li { display: flex; align-items: flex-start; gap: 8px; }
.adapt-box { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--paper); }
.adapt-h { margin: 0; }
.adapt-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--s-sm); }
.adapt-note { padding: 8px 10px; border-radius: 8px; background: var(--steel); }
.adapt-note > a { display: inline-flex; align-items: center; min-height: var(--tap); }
.adapt-securite { background: var(--warn-soft); }
.sub-h { font-family: var(--f-title); font-size: var(--s-md); margin: 6px 0 0; }
@media (min-width: 768px) { .fiche .persons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Favoris */
.fav-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  position: relative; z-index: 2; }
.fav-qui { display: inline-flex; gap: 4px; margin: 0; }
.fav-sel { min-height: var(--tap); }
.favoris .cards { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .favoris .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.favoris .ticket-h { display: flex; align-items: center; gap: 8px; }
/* Accueil */
.jour-membres { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.jour-membre { min-width: 0; }
.jour-qui { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; }
.home-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.home-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.home-card p { margin: 0; }
.ticket.is-trop { opacity: .75; border-style: dashed; }
.home .cards-compact .fav-qui { position: relative; z-index: 2; }
@media (min-width: 768px) {
  .jour-membres, .home-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mode cuisine */
.ck-secu summary { font-weight: 700; }

/* T10 — vues semaine : sélection, semaine, batch, courses, congélateur, steaks, repères */
.sel-list, .wk-plats, .wk-mbs, .wk-alts, .crs-list, .cg-list, .bt-types, .bt-dishes, .rp-list { list-style: none; margin: 0; padding: 0; }
.sel-list, .cg-list, .bt-types { display: grid; gap: 8px; margin-top: 12px; }
.sel-item, .cg-row, .bt-type { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--paper); }
.sel-txt { min-width: 0; flex: 1 1 200px; }
.sel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.sel-t, .cg-t, .wk-plat-t { font-weight: 700; overflow-wrap: anywhere; }
.sel-t, .cg-t { min-height: 44px; display: inline-flex; align-items: center; }
/* Congélateur : titre sur 2 lignes au plus, le bouton toujours à droite (grille 1fr auto, regard du 25/10). */
.cg-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; padding-block: 10px; }
.cg-ctl .btn { min-width: var(--tap); }
.sel-qui, .wk-plat-m, .st-qui { display: inline-flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 0; }
.wk-reg { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--paper); margin-bottom: 16px; }
.wk-reg-l { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wk-cases { border-collapse: collapse; width: 100%; max-width: 520px; }
.wk-cases th, .wk-cases td { padding: 4px 6px; text-align: left; vertical-align: middle; }
.wk-case { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; cursor: pointer; }
.wk-case input, .crs-it input { width: 22px; height: 22px; accent-color: var(--accent); margin: 0; }
.wk-case span { font-size: var(--s-xs); color: var(--ink-2); }
.wk-res { display: grid; gap: 12px; }
.wk-exc summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.wk-exc-l { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.wk-exc-l li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.wk-exc-f { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wk-exc-r { min-height: var(--tap); padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink); font: inherit; width: 9em; max-width: 100%; }
.wk-alleger-c { display: grid; gap: 8px; } /* T46-L3b : contenu du volet « Alléger » */
.wk-sortis .bt-consignes p { margin: 0; }
.bt-lv-l { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bt-lv-l li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bt-lv { text-align: left; white-space: normal; }
.jar-cocotte { margin: 4px 0; }
.pf-etat { min-height: 1.4em; margin: 4px 0 0; }
.wk-res[aria-busy="true"] { opacity: .6; }
.wk-resume { margin: 0; padding-left: 1.2em; color: var(--ink-2); font-size: var(--s-sm); }
.wk-rejets summary, .wk-raisons summary, .bt-levers summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.wk-grille { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .wk-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .wk-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wk-jour { border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--paper); padding: 10px 12px; min-width: 0; }
.wk-jour-h { font-family: var(--f-title, inherit); font-size: var(--s-lg); margin: 0 0 6px; }
.wk-repas + .wk-repas { border-top: 1px dashed var(--line-soft); margin-top: 8px; padding-top: 8px; }
.wk-repas-h { margin: 0 0 4px; font-size: var(--s-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); font-weight: 700; }
.wk-mbs { display: grid; gap: 8px; }
.wk-mb { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; }
.wk-hors { color: var(--ink-2); background: var(--bg); border: 1px dashed var(--line); border-radius: 6px; padding: 4px 8px; margin: 6px 0 0; font-style: italic; } /* midis hors batch, grisés (D-141.7) */
.wk-mb-t p { margin: 0; overflow-wrap: anywhere; }
.wk-jauge { display: grid; gap: 2px; margin-top: 4px; }
.wk-jauge-bar { position: relative; height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.wk-jauge-v { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--accent); }
.wk-jauge-v.wk-z-leger { background: var(--m1); }
.wk-jauge-v.wk-z-copieux { background: var(--warn-ink); }
.wk-jauge-c { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: .5; }
.wk-kcal { font-size: var(--s-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wk-plats { display: grid; gap: 10px; }
@media (min-width: 768px) { .wk-plats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wk-plat { border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--paper); padding: 10px 12px; min-width: 0; }
.wk-plat .hint { margin: 2px 0; }
.wk-plat-h { display: flex; gap: 8px; justify-content: space-between; align-items: flex-start; }
.wk-raisons ul { margin: 0 0 6px; padding-left: 1.2em; font-size: var(--s-sm); }
.wk-save { margin-top: 4px; }
.wk-alts { display: grid; gap: 8px; }
.wk-alt { width: 100%; display: grid; justify-items: start; text-align: left; gap: 2px; min-height: 56px; height: auto; padding: 8px 12px; white-space: normal; }
.crs-rayon { margin-top: 12px; }
.crs-list { display: grid; gap: 2px; }
.crs-it { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 2px 4px; cursor: pointer; }
.crs-it.is-done .crs-n { text-decoration: line-through; color: var(--ink-2); }
.crs-n { overflow-wrap: anywhere; }
.crs-q { color: var(--ink-2); font-size: var(--s-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* T33-L6 : « On l'a » (déjà à la maison) et articles ajoutés à la main */
.crs-li { display: flex; align-items: center; gap: 6px; }
.crs-li > .crs-it { flex: 1 1 auto; min-width: 0; }
.crs-deja, .crs-del { min-height: 44px; min-width: 44px; flex: none; }
.crs-deja[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.crs-li.is-deja .crs-n { color: var(--ink-2); }
.crs-ajout { display: flex; align-items: flex-end; gap: 8px; margin: 8px 0 12px; }
.crs-ajout .btn { min-height: 44px; }
.cg-ctl { display: inline-flex; align-items: center; gap: 8px; }
.cg-n { min-width: 2ch; text-align: center; font-weight: 700; }
.bt-type-t { margin: 0; font-weight: 700; }
.bt-type .hint { margin: 2px 0 0; }
.bt-plan { display: grid; gap: 12px; margin-top: 12px; }
.bt-dishes { display: grid; gap: 4px; }
.bt-dishes li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.bt-start { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
/* T46-L8a (N6) : « Début » : le champ prend la largeur de la boîte du sélecteur, qui porte sa flèche ; lisible. */
.bt-start .field { flex: 0 0 auto; }
.bt-start .select select { min-width: 9.5em; }
/* T33-L4 (D-164) : boîtes par plat, sécurité repliée, étape « Refroidir », « Batch terminé » */
.bt-boites { flex-basis: 100%; margin: 0; font-size: var(--s-sm); }
.bt-plat-act { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.bt-secu > summary, .bt-etiq > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-size: var(--s-sm); font-weight: 600; }
.bt-secu .adapt-notes { margin: 0 0 6px; }
.bt-etiq ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tl-froid { font-size: var(--s-xs); }
.cg-batch .cg-t { display: grid; gap: 2px; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.cg-sub { font-size: var(--s-xs); font-weight: 400; color: var(--ink-2); display: block; }
/* T33-L4b : boîte frigo à jeter (garde passée) ; « Congeler cru » à cocher pendant le batch. */
.cg-jeter .cg-sub { color: var(--label); font-weight: 600; }
.bt-cru-case { display: flex; gap: 8px; align-items: flex-start; min-height: var(--tap); }
.rp-membres { display: grid; gap: 12px; margin: 12px 0; }
@media (min-width: 768px) { .rp-membres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rp-card { border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--paper); padding: 12px 14px; min-width: 0; }
.rp-card-h { margin: 0 0 4px; font-size: var(--s-lg); }
.rp-zones { width: 100%; border-collapse: collapse; font-size: var(--s-sm); }
.rp-zones th, .rp-zones td { text-align: left; padding: 6px 4px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.rp-zones thead th { border-top: 0; color: var(--ink-2); font-size: var(--s-xs); }
.rp-list { display: grid; gap: 6px; padding-left: 1.1em; list-style: disc; }

/* ---------- T24b : fiche (kcal et unité, base partagée), steaks par type, batch (féculents, à part, en cours) ---------- */
.jar-kcal { font-weight: 700; }
.person-resume { font-weight: 700; margin: 0 0 6px; }
.fiche-base { display: grid; gap: 6px; margin: 4px 0 12px; }
.fiche-base p { margin: 0; }
.fiche-bouillon, .fiche-base-note strong { color: var(--ink); }
.fiche-bouillon { border-left: 4px solid var(--label); padding-left: 8px; }
.fiche-base-note { margin-bottom: 10px; }
.st-ateliers { align-items: start; }
.st-at { display: flex; flex-direction: column; gap: 10px; }
.st-at .card-title { margin: 0; }
.st-at-n { flex: none; }
.st-at-n .select, .st-at-n select { width: 100%; }
.st-at-temps, .st-at-congel { margin: 0; font-size: var(--s-sm); }
.st-at-rec { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st-at-rec li { display: grid; gap: 2px; }
.st-at-rec li > a { display: inline-flex; align-items: center; min-height: var(--tap, 44px); }
.st-at-ing summary { min-height: var(--tap, 44px); display: flex; align-items: center; cursor: pointer; font-size: var(--s-sm);
  color: var(--accent); font-weight: 600; }
.st-at .btn { margin-top: auto; }
.bt-bloc { display: grid; gap: 6px; margin: 4px 0; }
.bt-consignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bt-consignes li { background: var(--bg); border-left: 4px solid var(--line); border-radius: 0 4px 4px 0; padding: 8px 10px; display: grid; gap: 2px; }
.bt-consignes p { margin: 0; }
.bt-consignes a { display: inline-flex; align-items: center; min-height: var(--tap, 44px); }
.bt-encours { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between;
  background: var(--accent-soft); border-radius: var(--r); padding: 10px 12px; }
.bt-encours p { margin: 0; font-size: var(--s-sm); flex: 1 1 16rem; }
.tl-now { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); column-gap: 8px; align-items: center;
  border-top: 2px solid var(--accent); color: var(--accent); font-weight: 700; font-size: var(--s-sm); padding: 4px 0; }
.tl-row.is-past .tl-time { color: var(--ink-2); }
.tl-check { display: flex; gap: 8px; align-items: flex-start; min-height: var(--tap, 44px); cursor: pointer; }
.tl-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
.tl-op.is-done .tl-label { text-decoration: line-through; color: var(--ink-2); }
@media (min-width: 768px) { .tl-now { grid-template-columns: 4.4rem minmax(0, 1fr); column-gap: 14px; } }
.tl-loads .tl-who { width: auto; min-width: 26px; padding: 0 10px; border-radius: 999px; } /* prénom, plus une lettre */

/* Cibles tactiles (R-34) : 44 px au moins pour les liens de plats en liste, les liens des aides et les segments
   chiffrés ; les titres de carte sont déjà des liens étirés (la carte entière). */
:is(.ticket-lines, .bt-dishes, .bt-consignes, .st-at-rec, .st-stock-list, .soir-demain) a[href^="#r-"],
a.wk-plat-l, a.wk-plat-t, .tl-etapes {
  display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap);
}
.seg-sm button { min-width: var(--tap); }
/* Lien dans une phrase (source d'une fiche) : la zone tactile s'étend sans changer la ligne. */
p > a[href^="http"] { padding-block: 12px; }
/* Plat d'un repas (Journée) : même principe (relecture T26g, I-3). */
.jr-rp-plat a { padding-block: 15px; }
/* Liens d'une aide : une vraie hauteur de 44 px, sinon leurs zones débordent sur la ligne voisine (relecture T26g2,
   I-1) ; sans largeur minimale, pour ne pas laisser de blanc autour de « (voir …) » (m-3). */
.hint > a[href^="#"] { display: inline-flex; align-items: center; min-height: var(--tap); }
/* T33-L5 : imprévus d'un repas (Aujourd'hui, Semaine) */
.imp { margin: 8px 0 0; }
.imp-choix { margin: 8px 0 0; display: grid; gap: 8px; }
.imp-l, .imp-faits { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.imp-sorties { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } /* T38-I1 (D-187) */
.imp-faits { display: block; margin: 6px 0 0; }
.imp-l .hint { flex-basis: 100%; }
.imp-pli { background: none; border: 0; padding: 0; font: inherit;
  cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--ink-2); font-size: .9em; }
.imp-pli::after { content: ' ▾'; }
.imp-pli[aria-expanded="true"]::after { content: ' ▴'; }
.imp-note { margin: 6px 0 0; }

/* T34-C4 (D-174) : fiche d'un plat de la semaine, ses repas par membre. */
.person-repas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.person-repas li { padding-bottom: 6px; border-bottom: 1px dotted var(--line); }
.person-repas li:last-child { border-bottom: 0; padding-bottom: 0; }
.person-quand { margin: 0; }
.person-repas .hint { margin: 2px 0 0; }

/* T35-A (D-176) : Semaine et Batch plus clairs */
.wk-grille-plis { display: flex; justify-content: flex-end; margin: -4px 0 6px; }
.fiche-semaine { margin: 10px 0 4px; }
.fiche-semaine-msg { margin: 6px 0 0; }
.fiche-semaine-msg:empty { display: none; }
/* T40-L2b : la barre d'étapes (T39-J1) est retirée (D-188 révisé) ; l'état est en texte dans l'en-tête du détail. */
.bt-courses-n { margin: 0 0 6px; }
/* T41-L5 : écrans du robot cuiseur. La couleur vient de --ap-robot (index.html, deux thèmes). */
.rb-notes { display: grid; gap: 6px; margin: 8px 0; min-width: 0; }
.rb-notes .adapt-note, .bt-refus .adapt-note { overflow-wrap: anywhere; }
.rb-reglage { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.rb-coeur { margin: 6px 0; }
.jar-robot { margin: 6px 0 0; overflow-wrap: anywhere; }

/* T42 : bloc « Se fait », versions d'un plat (spec §5). */
.sf-liste { display: flex; flex-direction: column; gap: 6px; }
.sf-ligne {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; width: 100%; min-height: 44px; padding: 8px 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font: inherit;
  text-align: left; text-decoration: none; cursor: pointer;
}
.sf-ligne[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); cursor: default; }
.sf-rond { flex: none; width: 12px; height: 12px; border: 2px solid var(--ink-2); border-radius: 50%; }
.sf-ligne[aria-pressed="true"] .sf-rond { background: var(--accent); border-color: var(--accent); }
.sf-nom { font-weight: 600; overflow-wrap: anywhere; }
.sf-autre { color: var(--ink-2); font-size: var(--s-sm); overflow-wrap: anywhere; }
.sf-temps { margin-left: auto; white-space: nowrap; }
.ck-reglage {
  margin: 0 0 12px; padding: 8px 0 8px 12px; border-left: 4px solid var(--ap-robot); color: var(--ink);
  font-size: max(28px, 1.75rem); line-height: 1.25; font-weight: 700; overflow-wrap: anywhere;
}
.rb-repartition { margin: 0 0 10px; overflow-wrap: anywhere; }
.tl-robot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: var(--s-xs); color: var(--ink-2); }
.tl-tournee { font-weight: 700; color: var(--ink); white-space: nowrap; }
.tl-plat, .tl-reglage { min-width: 0; overflow-wrap: anywhere; }
.tl-repartir { display: block; font-size: var(--s-xs); color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.tl-machine .tl-robot { grid-column: 2; }
.bt-refus { display: grid; gap: 6px; margin: 8px 0; padding: 0; list-style: none; }
.fy-modele, .fy-modele select { max-width: 100%; }
.wk-robot { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; vertical-align: middle; }
.wk-robot-verif { font-size: var(--s-xs); color: var(--ink-2); overflow-wrap: anywhere; }


/* T45-L4 (D-266) : « On l'a » avec une quantité : une rangée sous la ligne (texte, « Préciser la quantité », saisie). */
.crs-li.a-qte { flex-wrap: wrap; }
.crs-qte { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 0 4px 6px 36px; box-sizing: border-box; }
.crs-qte-f { align-items: flex-end; }
.crs-qte-f .field { flex: 1 1 120px; }
.crs-qte-b { min-height: 44px; }

/* T45-L3 (D-259) : « Toujours en plus » d'un repas (Profil) et sa ligne dans la Journée. */
.pf-plus { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-plus-h { margin: 0; font-size: var(--s-sm); font-weight: 700; }
.pf-plus .hint { margin: 0; }
.jr-enplus { margin: 0; font-size: var(--s-sm); color: var(--ink-2); overflow-wrap: anywhere; }
/* T45-L2 (D-258) : photo du plat en tête de fiche, hauteur bornée et réservée (pas de saut), recadrée. */
.fiche-photo { display: block; width: 100%; height: 190px; object-fit: cover; border-radius: var(--r); background: var(--paper); margin: 0 0 12px; }
/* T45-L2 (D-261) : composition des kcal d'un repas de la semaine ; « une portion » hors semaine. */
.person-compo { list-style: none; margin: 4px 0 0; padding: 0; font-size: var(--s-sm); color: var(--ink-2); }
.person-compo li:last-child { color: var(--ink); font-weight: 600; }
.fiche-portion { margin: 0; }
/* T45-L2 (D-262) : protéines, glucides, lipides d'une carte, discrets. */
.card-macros { margin: 2px 0 0; font-size: var(--s-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* T45-L2 (D-257) : « Pas trouvé ? Chercher sur Open Food Facts ». */
.cp-off-vide { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.cp-off-vide .hint, .cp-off-vide .pf-msg { margin: 0; }

/* BebouBatch L4 (D-382 (5) et (8)) : à 390 px, le choix du mode §5.4 empile ses options, texte à la ligne ; listes
   d'étapes et de boîtes sans retrait. */
.bb-mode .seg { flex-direction: column; width: 100%; }
.bb-mode .seg button { white-space: normal; text-align: left; padding: 10px 14px; }
.bb-etapes, .bb-boites { list-style: none; padding: 0; margin: 0; }
/* L10b2 (D-484, I4) : une pastille d'ajout nomme chaque ingrédient avec sa quantité ; elle passe à la ligne à 390 px. */
.bb-parts .chip { white-space: normal; text-align: left; padding-block: 4px; }
/* Étape 5 E5 (D-523) : Recettes (#recettes) et la page d'une recette (#recette/<id>), mobile d'abord (390 px). */
.bb-recettes .page-h + .hint { margin: 0; }
.bb-recettes-q { margin-block: 4px; }
.bb-filtres { display: flex; flex-direction: column; gap: 10px; }
.bb-filtre { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bb-filtre-h { margin: 0; font-size: var(--s-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); font-weight: 700; }
.bb-filtre-ligne { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.bb-filtre-ligne .select { max-width: 100%; }
.bb-filtre .chip, .bb-filtre-ligne .chip { white-space: normal; text-align: left; }
.bb-recettes-n { margin: 0; }
.bb-recettes-liste { list-style: none; padding: 0; margin: 0; }
.bb-recette-carte .card-tags, .bb-recette-carte .card-meta { margin: 0; }
.bb-source { margin: 0; }
.bb-source a { font-weight: 700; overflow-wrap: anywhere; }
.bb-portions .seg { flex-wrap: wrap; }
.bb-ing, .bb-taches { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bb-ing { list-style: none; }
.bb-ing li { display: flex; gap: 10px; align-items: baseline; }
.bb-ing-q { flex: 0 0 6.5em; text-align: right; font-weight: 600; }
.bb-taches { padding-left: 1.4em; gap: 12px; }
.bb-tache p { margin: 2px 0 0; }
.bb-tache .bb-tache-t { margin: 0; }
.bb-tache.is-done .tl-label { text-decoration: line-through; color: var(--ink-2); }
.bb-servir .bb-etapes { display: flex; flex-direction: column; gap: 12px; }
.bb-sous-h { margin: 8px 0 0; font-size: var(--s-md); font-weight: 700; }
.bb-cuisiner { margin-top: 8px; }