/* ioumi — feuille d'interface, chargée après app.css. Trois parties, dans l'ordre de
   la cascade d'avant le 15/10/2026 : l'aération (01/10), les retouches (04-05/10),
   la passe du 06/10. */

/* ==================================================================
   AÉRATION — passe d'espacement sur toute l'interface (01/10/2026)
   ==================================================================
   Paul : « en général il faut beaucoup plus d'aération et d'espace et de
   respiration entre les éléments dans toute l'interface » (référence :
   Duolingo). Ex-aeration.css, versé ici le 15/10/2026 (audit F2) : ne touche
   qu'aux marges, paddings, gaps, interlignes et hauteurs tactiles.
   Aucune couleur, aucune typo.

   Règles de prudence :
   - propriétés LONGUES (padding-left, padding-top…) plutôt que le raccourci
     quand la règle d'origine porte une zone sûre (env(safe-area-inset-*),
     --barre-native) : on ne l'écrase jamais ;
   - les règles plus spécifiques d'index.html (paysage, barre native iOS,
     clavier, #storeModeWrap…) restent gagnantes : on ne monte pas en
     spécificité pour les battre ;
   - le paywall (offre.js, .plan-card, .premium-*), « Ton carnet »
     (attache.js, .at-*), « Quoi de neuf » (.wn-*) et le parcours de
     remplissage de la semaine sont refaits ailleurs : non touchés ici.
   ================================================================== */

:root{
  /* Échelle d'espacement (base 4) */
  --esp-1:4px;
  --esp-2:8px;
  --esp-3:12px;
  --esp-4:16px;
  --esp-5:20px;
  --esp-6:24px;
  --esp-7:32px;
  --esp-8:40px;
  --esp-9:48px;
  /* Rôles */
  --esp-gouttiere:clamp(20px, 3.4vw, 36px);  /* marge latérale des vues */
  --esp-section:var(--esp-7);                /* entre deux blocs d'une vue */
  --esp-carte:clamp(20px, 3vw, 28px);        /* padding intérieur des cartes */
  --esp-tactile:48px;                        /* hauteur mini d'une ligne qu'on touche */
}
@media (max-width:880px){
  :root{ --esp-section:var(--esp-6) }
}

/* ---------- Texte : un peu plus d'interligne ---------- */
body{ line-height:1.55 }
/* Semaine en paysage : calendrier calé au pixel près sur la hauteur de l'écran */
body.is-paysage-semaine{ line-height:1.5 }
.view-sub{ line-height:1.55; margin-top:var(--esp-2) }
.section-card .sc-sub,
.profile-card .pc-sub{ line-height:1.55 }
.rcard-desc{ line-height:1.5; margin-top:6px }
.trial-banner{ line-height:1.5 }
.modal-head .mh-sub{ line-height:1.5; margin-top:var(--esp-1) }
.empty-state p{ line-height:1.6 }

/* ---------- Cadre des vues ---------- */
.view-wrap{
  padding-top:clamp(24px, 3.4vw, 40px);
  padding-left:var(--esp-gouttiere);
  padding-right:var(--esp-gouttiere);
}
.view-head{ margin-bottom:var(--esp-7) }
@media (min-width:881px){ .view-head{ gap:var(--esp-5) } }
@media (max-width:880px){
  .view-head{ margin-bottom:var(--esp-6) }
  .view-sub{ margin-top:6px }
}

/* ---------- Cartes ---------- */
.section-card{ padding:var(--esp-carte); margin-bottom:var(--esp-section) }
.section-card h2{ margin-bottom:6px }
.section-card .sc-sub{ margin-bottom:var(--esp-5) }
.profile-card{ padding:var(--esp-carte) }
.profile-card h2{ margin-bottom:6px }
.profile-card .pc-sub{ margin-bottom:var(--esp-6) }
.profile-grid{ gap:var(--esp-6) }
.acc-section{ margin-top:var(--esp-7); padding-top:var(--esp-6) }
.acc-section:first-of-type{ margin-top:var(--esp-5) }
.acc-section-title{ margin-bottom:14px }

/* Bandeaux */
.trial-banner{ padding:14px 18px }

/* État vide */
.empty-state{ padding:64px 24px }
.empty-state h3{ margin:18px 0 10px }
.empty-state p{ margin-bottom:var(--esp-6) }

/* ---------- Boutons et rangées de boutons ---------- */
/* Bureau : boutons un peu plus larges. Mobile : largeur d'origine, sinon les
   rangées de deux boutons (Importer | Nouvelle recette…) passent sur deux lignes. */
@media (min-width:561px){
  .btn{ gap:10px; padding-left:20px; padding-right:20px }
  .btn.btn-sm{ padding-left:14px; padding-right:14px }
}
/* « Charger 24 recettes de plus (506 restantes) » débordait déjà de 2 px à 375 px */
.lib-load-more .btn{ max-width:100%; white-space:normal }
.recette-head-actions,
.export-bar,
.search-row{ gap:var(--esp-3) }
.modal-foot{ gap:var(--esp-3) }
.seg{ gap:var(--esp-2) }
.seg button{ padding-top:11px; padding-bottom:11px }
.checks{ gap:10px }
.filter-group{ gap:10px }
.have-list{ gap:10px }
.cdf-chips{ gap:var(--esp-2) }

/* Menus déroulants (⋯ Semaine, Plus) : lignes tactiles */
.week-menu{ padding:var(--esp-2); gap:var(--esp-1) }
.week-menu-item{ min-height:44px; padding:12px 14px; gap:12px }
.week-menu-sep{ margin:6px 8px }

/* Interrupteurs */
.sw-row,
.jeu-switch{ min-height:var(--esp-tactile) }

/* ---------- Formulaires ---------- */
.field{ margin-bottom:var(--esp-5) }
.field label{ margin-bottom:var(--esp-2) }
.field-row{ gap:var(--esp-4) }
.field-row-3{ gap:14px }
.authgate-card .field{ margin-bottom:var(--esp-4) }

/* ---------- Modales génériques ---------- */
.modal-head{ gap:var(--esp-4); padding:24px 24px 18px }
.modal-body{ padding:22px 24px }
.modal-foot{ padding-top:18px; padding-left:24px; padding-right:24px }
@media (max-width:560px){
  .modal-head{ padding:22px 20px 16px }
  .modal-body{ padding:20px }
  .modal-foot{ padding-top:16px; padding-left:20px; padding-right:20px }
}
/* Feuilles du bas (filtres…) sur mobile */
@media (max-width:720px){
  .modal.sheet .modal-head{ padding:20px 20px 14px }
  .modal.sheet .modal-body{ padding:18px 20px }
  .modal-foot.lib-sheet-foot{ padding-top:14px; padding-left:20px; padding-right:20px }
  .modal-foot.detail-foot{ padding-left:18px; padding-right:18px; gap:10px }
}

/* Groupes de filtres (Type, Régime, Temps…) : leurs marges sont posées en ligne
   (style="margin-top:8px" dans app.js), d'où le !important pour les séparer */
.modal-body > .filter-group + .filter-group{ margin-top:var(--esp-4) !important }

/* Choix d'une recette pour un créneau */
.sel-results{ gap:var(--esp-4); margin-top:18px }
.sel-fold{ margin-top:14px }
.sel-fold > .sf-content{ padding-bottom:var(--esp-4) }

/* Fiche recette */
.detail-hero{ margin-bottom:14px }
.detail-faits{ gap:var(--esp-2); margin-top:14px }
.detail-coco{ margin:26px 0 22px }
.detail-vote{ gap:var(--esp-3); margin-bottom:14px }
.detail-ings li{ padding-top:11px; padding-bottom:11px }
.detail-benefits{ gap:var(--esp-3) }
.detail-benefits li{ padding:12px 14px }
.detail-more-fold{ margin-top:var(--esp-6) }
.detail-scores{ gap:var(--esp-3) }
/* Intertitres de section (Ingrédients, Instructions…) : plus d'air au-dessus
   qu'en dessous, pour qu'ils appartiennent au bloc qu'ils annoncent */
.section-label{ margin:var(--esp-6) 0 10px }
.modal-body > .section-label:first-child{ margin-top:var(--esp-1) }
.detail-instr li + li{ margin-top:10px }

/* ---------- Semaine ----------
   La carte de la cocotte (.wg) et le défi ont déjà leur propre réglage, très
   travaillé (voir le bloc « cocotte » d'index.html) : on n'y touche pas, pour ne
   pas repousser le premier créneau sous la ligne de flottaison. */
.recap{ gap:var(--esp-4) }
.recap-block{ padding:18px 20px }
@media (min-width:881px){
  .week-actions{ gap:var(--esp-3) }
  .week-grid{ gap:10px }
}
@media (max-width:880px){
  .recap{ gap:14px }
}

/* ---------- Livre de recettes ---------- */
.toolbar{ gap:18px; margin-bottom:var(--esp-7) }
.recipe-grid{ gap:22px }
.rcard-body{ padding:16px 18px 18px }
.rcard-tags{ gap:6px; margin-top:var(--esp-3) }
.rcard-foot{ padding-top:var(--esp-3) }
.rcard-body .rcard-foot{ margin-top:auto }
.rcard-body > .rcard-tags,
.rcard-body > .rcard-desc{ margin-bottom:14px }
.rcard-body > .rcard-desc + .rcard-tags{ margin-top:0 }
.lib-locked-block{ margin-top:var(--esp-7); padding-top:var(--esp-6) }
.lib-locked-head{ margin-bottom:var(--esp-4) }
@media (max-width:720px){
  #view-recettes .toolbar{ gap:var(--esp-3); margin-bottom:var(--esp-6) }
  .recipe-grid{ gap:var(--esp-5) }
}

/* ---------- Liste de courses ---------- */
.dc-drive{ gap:10px 14px; margin-bottom:var(--esp-5); padding:14px 16px }
.courses-day-filter{ margin-bottom:var(--esp-5) }
.cdf-label{ margin-bottom:var(--esp-2) }
.shop-prog-card{ padding:20px 24px; margin-bottom:var(--esp-6) }
.have-section{ padding:18px 20px; margin-bottom:var(--esp-6) }
.have-head{ margin-bottom:var(--esp-3) }
.shop-cat{ margin-bottom:var(--esp-7) }
.shop-cat-head{ margin-bottom:var(--esp-3) }
.shop-item{ gap:14px; padding:14px 18px; min-height:56px }
@media (max-width:880px){
  .shop-prog-card{ padding:18px 20px; margin-bottom:var(--esp-5) }
  .shop-cat{ margin-bottom:28px }
  /* mobile : on ne gagne que la hauteur, la largeur sert aux noms d'articles */
  .shop-item{ gap:12px; padding:14px 15px }
}

/* Cartes d'incitation (enseigne moins chère…) : la base de 240 px du texte ne tenait
   plus à côté de l'icône avec la gouttière élargie */
.nudge-card{ gap:14px; margin-bottom:var(--esp-6); padding-top:18px; padding-bottom:18px; padding-left:18px }
.nudge-txt{ flex-basis:200px; gap:var(--esp-1) }

/* ---------- Placard ---------- */
.stock-add{ padding:22px 24px; margin-bottom:var(--esp-7) }
.stock-add-row{ gap:var(--esp-3) }
.dc-soir{ margin-bottom:var(--esp-6); padding:18px }
.dc-soir-h{ margin-bottom:var(--esp-3) }
.dc-soir-l{ gap:6px; margin-top:var(--esp-3) }
.dc-soir-pose{ gap:var(--esp-3); padding:14px 16px }
.dc-soir-pose ~ .dc-soir-pose{ margin-top:6px }
.stock-grid{ gap:var(--esp-4) }
.stock-pill{ padding:16px 18px }
.expiring-list{ gap:10px }
.expiring-item{ gap:var(--esp-3); padding:13px 16px; min-height:52px }
.waste-grid{ gap:var(--esp-4) }
.waste-card{ padding:16px }
.waste-missing{ margin-top:var(--esp-2); line-height:1.5 }
@media (max-width:880px){
  .stock-add{ padding:18px 20px; margin-bottom:var(--esp-6) }
}

/* ---------- Profil ---------- */
.profile-tabs{ margin-bottom:var(--esp-6) }
.pf-wrap{ gap:34px }
.pf-group{ gap:var(--esp-3) }
.pf-id{ padding:24px 22px 22px }
.pf-stats{ margin-top:22px; padding-top:18px }
.pf-complete{ margin-top:var(--esp-5); padding:14px 16px }
.pf-row{ gap:var(--esp-4); min-height:60px; padding:14px 18px }
.pf-txt{ gap:var(--esp-1) }
@media (max-width:560px){
  .pf-id{ padding:22px 20px 20px }
  .pf-row{ gap:14px; padding:14px 16px }
}

/* ==================================================================
   RETOUCHES des 04 et 05/10/2026 (ex-app-retouches.css, versé ici le 15/10/2026,
   audit F2), après l'aération et avant la passe du 06/10.
   ================================================================== */
/* ===== bloc retours-0410 ===== */
/* ---- 1. Jamais de zoom. boot.js verrouille l'échelle dans l'app ; ici, les champs qui
        déclenchaient le zoom d'iOS (moins de 16 px) passent à 16 px sur écran tactile. ---- */
html{ touch-action:manipulation }
@media (pointer:coarse){
  .ing-row input, .ing-row select, .si-buy-field input, .extra-add-row input, .extra-add-row select,
  .temps-row select, .recipe-note-input, .field-row-3 input, .po-extra-row input, .po-extra-row select,
  .popover input, .popover select{ font-size:16px !important }
}

/* ---- 2. Fiche recette : le pied tenait 3 boutons empilés (230 px) et, clavier ouvert, ne
        laissait que 2 lignes pour saisir. Une seule rangée ; « Annuler » fait doublon avec
        la croix sur téléphone. ---- */
@media(max-width:560px){
  .modal-foot.form-foot{ flex-direction:row; flex-wrap:nowrap; align-items:stretch; gap:10px; padding-top:12px }
  .modal-foot.form-foot .btn{ width:auto; flex:0 0 auto; min-height:48px; padding-left:14px; padding-right:14px; white-space:nowrap }
  .modal-foot.form-foot .btn-primary{ flex:1 1 auto; min-width:0 }
  .modal-foot.form-foot .form-foot-annuler{ display:none }
}
/* Clavier ouvert, dans toute modale : en-tête et pied se font petits, le contenu reprend la place. */
html[data-clavier] .modal-head{ padding-top:10px; padding-bottom:8px }
html[data-clavier] .modal-head h2{ font-size:1.05rem }
html[data-clavier] .modal-head .modal-close{ width:40px; height:40px; min-width:40px }
html[data-clavier] .modal-foot{ flex-direction:row; flex-wrap:wrap; gap:8px; padding-top:8px; padding-bottom:8px }
html[data-clavier] .modal-foot .btn{ width:auto; flex:1 1 auto; min-height:42px; padding-top:8px; padding-bottom:8px; font-size:.9rem }
html[data-clavier] .modal-foot.form-foot .btn:not(.btn-primary){ flex:0 0 auto }

/* ---- 3. Accueil sur téléphone : la cocotte d'abord, puis le choix de la semaine posé
        JUSTE au-dessus des jours (on ne le cherche plus), sur une seule rangée :
        [vue] ‹ semaine › [actions]. ---- */
@media(max-width:880px){
  #view-semaine.active{ display:flex; flex-direction:column }
  #view-semaine > #weekGoal{ order:-1 }
  #view-semaine > .view-head{ margin:14px 0 0 }
  #view-semaine .week-actions{ row-gap:0 }
  /* La rangée ne porte que la semaine, ses deux flèches, le retour à aujourd'hui et le menu ⋯
     (la bascule Jour/Semaine et « Suggérer ma semaine » vivent dans ce menu). */
  #view-semaine .week-actions .week-bar-mobile{ flex-wrap:nowrap; row-gap:0; gap:4px; align-items:center }
  #view-semaine .week-actions .week-nav-row{ order:0; flex:1 1 0; min-width:0; gap:4px }
  #view-semaine .week-actions .week-nav-row:has(#goTodayBtn[hidden]){ padding-left:48px }   /* la semaine reste au centre */
  #view-semaine .week-actions .week-menu-wrap{ flex:0 0 auto }
  #view-semaine .week-actions .week-menu-wrap > #weekMoreBtn{ width:44px; min-width:44px; height:44px; padding:0; justify-content:center; border-radius:14px; color:var(--ink-2) }
  #view-semaine .week-actions .week-menu-wrap > #weekMoreBtn .cw-label{ display:none }   /* le bouton porte un aria-label */
  #view-semaine .week-actions .week-bar-mobile .btn svg{ width:20px; height:20px }
  #view-semaine .week-actions .week-nav{ padding:0; gap:2px }
  #view-semaine .week-actions .week-nav > div{ text-align:center; flex:1 1 auto }
  #view-semaine .week-actions .week-nav .week-label{ font-size:1rem; font-weight:800; color:var(--ink); overflow:visible }
  #view-semaine .week-actions .week-nav .week-today{ font-size:.75rem }
  #view-semaine .week-actions .week-nav-row #goTodayBtn{ width:44px; min-width:44px; height:44px; padding:0; justify-content:center; border-radius:14px }
  /* Le menu ⋯ s'ouvre au centre, comme le menu d'un repas : accroché au bouton, il
     descendait sous la barre d'onglets. */
  #view-semaine .week-actions #weekMoreMenu{
    position:fixed; left:50%; right:auto; top:50%; transform:translate(-50%,-50%); animation:none;
    width:min(340px, calc(100vw - 32px)); max-height:calc(100dvh - 200px); overflow-y:auto; z-index:70; border-radius:22px; padding:10px;
    box-shadow:0 18px 50px rgba(20,24,40,.28) }
  #view-semaine .week-actions #weekMoreMenu .week-menu-item{ min-height:50px; font-size:.98rem; border-radius:14px }
  /* Bloc de la cocotte : une phrase, un chiffre. Les six ronds redisaient la série écrite
     juste au-dessus : ils restent sur grand écran et dans « Ton carnet ». */
  #weekGoal .wg-stamps{ display:none }
  #weekGoal .wg{ margin-top:4px }
}

/* ---- 4. Choisir une recette, sur téléphone : les résultats doivent se voir dès
        l'ouverture. Puces sur une rangée qui défile (plus de retour à la ligne ni
        d'étiquette), filtres avancés et actions en liens discrets, repère kcal en une
        ligne légère. ---- */
@media(max-width:640px){
  .modal-head.sel-head{ padding-bottom:12px }
  .modal-head.sel-head .sel-ctx{ display:block !important; font-weight:700; color:var(--sage-text); font-size:.86rem }
  .modal-body:has(> #selResults){ padding-top:14px }
  .modal-body:has(> #selResults) > .filter-group{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-left:-18px; margin-right:-18px; padding:2px 18px; gap:8px; margin-top:12px !important }
  .modal-body:has(> #selResults) > .filter-group::-webkit-scrollbar{ display:none }
  .modal-body:has(> #selResults) > .filter-group > .fg-label{ display:none }
  .modal-body:has(> #selResults) > .filter-group > .chip{ flex:0 0 auto; white-space:nowrap }
  .modal-body:has(> #selResults) > .filter-group ~ .filter-group{ margin-top:8px !important }
  /* Les 4 moments tiennent sur la largeur : ils se la partagent, rien à faire défiler. */
  .modal-body:has(> #selResults) > .filter-group:not(.filter-group ~ .filter-group){ gap:6px }
  .modal-body:has(> #selResults) > .filter-group:not(.filter-group ~ .filter-group) > .chip{ flex:1 1 auto; justify-content:center; text-align:center; padding-left:8px; padding-right:8px }
  .modal-body:has(> #selResults) > .sel-countrow #selCount{ white-space:nowrap }
  .modal-body:has(> #selResults) > .sel-countrow #selResetBtn[data-inutile]{ display:none }
  .modal-body:has(> #selResults) > .sel-suggest-banner{
    background:none; border:0; padding:0; margin:10px 2px 0; font-size:.8rem; font-weight:500; color:var(--ink-2); line-height:1.4; gap:6px }
  .modal-body:has(> #selResults) > .sel-suggest-banner svg{ width:14px; height:14px; color:var(--sage-text) }
  .modal-body:has(> #selResults) > .sel-suggest-banner strong{ color:var(--ink) }
  .modal-body:has(> #selResults) > .sel-fold:not([open]){ background:none; border:0; padding:0; margin-top:6px; box-shadow:none }
  .modal-body:has(> #selResults) > .sel-fold:not([open]) > summary{ display:inline-flex; padding:10px 2px; min-height:44px; font-size:.86rem; font-weight:700; color:var(--ink-2) }
  .modal-body:has(> #selResults) > .sel-fold .cl-count{ margin-left:6px }
  .modal-body:has(> #selResults) > .sel-countrow{ margin-top:2px !important; padding-top:10px; border-top:1px solid var(--border); flex-wrap:nowrap !important }
  .modal-body:has(> #selResults) > .sel-countrow .btn{
    width:auto; min-height:40px; padding:6px 10px; font-size:.84rem; font-weight:700; border:0; box-shadow:none; background:none; color:var(--ink-2); gap:6px }
  .modal-body:has(> #selResults) > .sel-countrow .btn svg{ width:16px; height:16px }
  .modal-body:has(> #selResults) > .sel-countrow .btn:active{ transform:none; opacity:.55 }
  .modal-body:has(> #selResults) > .sel-results{ margin-top:10px }
}

/* ---- 5. Menu d'un repas, sur téléphone : au centre, sur un voile. ---- */
.popover-voile{ position:fixed; inset:0; z-index:69; background:color-mix(in srgb, var(--ink) 38%, transparent);
  opacity:0; pointer-events:none; transition:opacity .2s var(--ease) }
.popover-voile.show{ opacity:1; pointer-events:auto }
.popover.centre{ width:min(380px, calc(100vw - 32px)); max-width:none; box-sizing:border-box;
  border-radius:22px; box-shadow:0 18px 50px rgba(20,24,40,.28); overflow-y:auto; overscroll-behavior:contain }
/* Une vraie carte : le plat en tête, au centre ; des rangées qu'on touche sans viser. */
.popover.centre{ padding:18px 16px 16px }
.popover.centre .po-head{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:2px 8px 14px; margin-bottom:10px }
.popover.centre .po-head .pe{ font-size:2.6rem; line-height:1 }
.popover.centre .po-head .pn{ font-size:1.12rem; margin-top:8px }
.popover.centre .po-row{ min-height:50px; padding:12px 14px; font-size:.98rem; border-radius:14px; margin-top:4px }
.popover.centre .po-row svg{ width:20px; height:20px; flex:0 0 auto; margin-left:10px }
.popover.centre .po-cook-btn{ padding:14px; margin:8px 0 4px; font-size:.95rem; border-radius:14px }
.popover.centre .po-ppl{ padding:10px 4px 4px }
.popover.centre .po-profiles{ padding:8px 0 4px; gap:8px }
.popover.centre .po-pchip{ min-height:40px; padding:6px 14px 6px 8px; font-size:.92rem }
.popover.centre .po-more{ margin:12px 0 0; padding:2px 14px; border-radius:14px }
.popover.centre .po-more > summary{ min-height:48px; font-size:.95rem }
.popover.centre .po-subhead{ padding:14px 4px 6px }
@media (prefers-reduced-motion: reduce){ .popover-voile{ transition:none } }

/* ---- 5 ter. Menu d'un repas en trois étages (26/10/2026, retour testeur : « brouillon »).
        Le plat et son créneau ; trois tuiles posées ; une liste unique, même hauteur, icône
        à gauche, sans sous-titres ni icône à droite. ---- */
.po-meta{ font-size:.86rem; font-weight:600; color:var(--muted); margin-top:4px }
.popover.centre .po-head{ border-bottom:0; margin-bottom:4px; padding-bottom:10px }
/* Sur ordinateur, le menu s'ouvre à côté du repas : assez large pour trois tuiles. */
.popover:not(.centre):has(.po-tuiles){ width:320px; padding:14px 12px 12px }
.popover:not(.centre) .po-head{ border-bottom:0; margin-bottom:2px }
.po-tuiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:10px; margin:6px 0 4px }
.po-tuile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:78px; padding:10px 6px;
  border:var(--bw) solid var(--ink); border-radius:16px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-hard);
  font:inherit; font-size:.9rem; font-weight:800; line-height:1.2; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent }
.po-tuile:active{ transform:var(--press); box-shadow:none }
.po-tuile .po-ico{ width:26px; height:26px }
.po-ico{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex:0 0 auto }
.po-ico svg, .po-ico .ic{ width:100%; height:100%; margin:0 }
.po-section-t{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 4px 0; font-weight:800; font-size:.92rem; color:var(--ink) }
#popover .po-cook-btn{ align-items:center; min-height:52px; margin:12px 0 0 }
.po-liste{ display:flex; flex-direction:column; padding:2px 0 4px }
.po-ligne{ display:flex; align-items:center; gap:14px; width:100%; min-height:50px; padding:10px 8px; border:0; border-radius:12px;
  background:none; font:inherit; font-size:.97rem; font-weight:700; color:var(--ink); text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent }
.po-ligne .po-ico{ color:var(--ink-2) }
.po-ligne:hover, .po-ligne.is-ouvert{ background:var(--surface-2) }
.po-ligne.del, .po-ligne.del .po-ico{ color:var(--danger) }
.po-ligne.del{ margin-top:6px; border-top:1px solid var(--border); border-radius:0 0 12px 12px }
.po-ex-form{ padding:4px 8px 10px }
#popover .po-more{ margin-top:10px }
#popover .po-pchip{ min-height:44px; padding:6px 14px 6px 8px; font-size:.92rem }   /* les convives se touchent du pouce, comme le reste */
#popover .po-more > .po-liste{ padding-top:0 }

/* ---- 5 bis. Second plat d'un repas (slot.autres) : une ligne sous le plat dans la carte,
        un bloc par plat dans le menu. ---- */
.slot-autre{ display:block; font-size:.82rem; font-weight:600; color:var(--ink-2); line-height:1.35; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100% }
.slot-autre em{ font-style:normal; font-weight:500; color:var(--muted) }
.po-autre{ border-top:1px solid var(--border); margin-top:10px; padding-top:8px }
.po-autre-tete{ display:flex; align-items:center; gap:8px; padding:0 4px }
.po-autre-nom{ flex:1 1 auto; min-width:0; min-height:44px; font-weight:700; font-size:.95rem; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.po-autre-n{ flex:0 0 auto; font-size:.8rem; color:var(--muted) }
.po-autre .extra-rm{ flex:0 0 auto; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:12px }
.po-autre .extra-rm svg{ width:18px; height:18px }
.po-row.po-autre-add{ margin-top:8px; color:var(--sage-text) }

/* ---- 6. Menu ⋯ d'un article : position fixe (voir placeShopItemMenu), au-dessus de tout. ---- */
.si-more-wrap .week-menu{ z-index:60 }

/* ---- 7. Réglages : toutes les cartes à la même distance les unes des autres. ---- */
#parametresHost > * + *{ margin-top:16px !important }
#parametresHost > *:empty{ margin-top:0 !important }
/* ===== bloc identite-0510 ===== */
/* ==================================================================
   IDENTITÉ CANTINE, passe du 05/10/2026 (Paul : « ioumi s'éloigne de sa charte
   cantine dans certains éléments ; une identité uniforme, qui marque »).
   Relevé fait écran par écran, app remplie : tout ce qui suit ramène un écart à
   docs/charte-interface.md, section 0. Deux niveaux de carte, pas trois ; l'encre
   marque ce qu'on touche ; le vert dit l'action et le choix, jamais le contour.
   ================================================================== */

/* ---- 1. Les feuilles : fond clair, sans trait. Le filet beige était le troisième
        style que la charte interdit (placard, « Que cuisiner ? », chiffres du budget,
        avancement des courses, réglages du budget, profil à compléter). ---- */
.bilan, .nut-box, .tdee-box, .tdee-hero, .waste-card, .shop-prog-card, .stock-pill,
.have-section, .have-pill, .pf-complete, .bs-toggle, .bs-group{ border-color:transparent !important; box-shadow:none }
.tdee-hero{ background:var(--sage-soft) }
.bs-group{ background:var(--surface-2) }
.pf-complete{ border-style:solid; background:var(--surface-2) }
.bs-toggle{ border-style:solid }
/* Survol : une feuille ne prend pas de contour vert (le vert, c'est l'action). */
.stock-pill:hover, .waste-card:hover{ border-color:transparent !important; box-shadow:none; transform:none; background:var(--surface-2) }
.waste-card:hover{ background:var(--sand) }

/* ---- 2. Ce qu'on touche : trait d'encre de 2 px, ombre nette, enfoncement. ---- */
.day-chip{ border:var(--bw) solid var(--ink) }
.day-chip.on{ background:var(--sage); border-color:var(--ink); color:var(--on-accent) }
.mt-autre{ border:var(--bw) solid var(--ink); box-shadow:var(--shadow-flat); transition:transform .08s ease, box-shadow .08s ease }
.mt-autre:hover{ border-color:var(--ink) }
.mt-autre:active{ transform:var(--press); box-shadow:none }
.mt-une{ border-color:var(--ink); box-shadow:var(--shadow-hard) }
.mt-une:active{ transform:var(--press); box-shadow:0 0 0 var(--ink) }
.mt-une-cta{ border:var(--bw) solid var(--ink) }
/* Le placard à sauver : un objet qu'on ouvre, pas un pointillé rouge. Le rouge reste
   sur les produits qui périment (sa seule mission). */
.hs-placard{ border:var(--bw) solid var(--ink) !important; box-shadow:var(--shadow-flat) }
.hs-placard:active{ transform:var(--press); box-shadow:none }
/* « C'est l'heure » : la carte du repas et l'encart qui lance la cuisine. L'encre
   remplace le contour et le halo verts ; l'invitation est celle de la cocotte (corail). */
.slot.filled.is-now, .day-view .slot.filled.is-now{ outline:0; border:var(--bw) solid var(--ink); box-shadow:var(--shadow-hard) }
.cook-now-banner{ background:var(--surface); color:var(--ink); border:var(--bw) solid var(--ink); border-radius:var(--radius-lg); box-shadow:var(--shadow-hard); padding:16px 18px }
.cook-now-banner .cnb-titre{ color:var(--terra-text) }
.cook-now-banner .cnb-meta{ color:var(--muted); opacity:1 }
/* Les repas du jour sont des feuilles : ombre nette et discrète, plus de halo flou. */
.day-view .slot.filled, .day-view .slot.filled:hover{ box-shadow:var(--shadow-flat) }
/* Fermer : une commande comme les autres. */
.sm-close{ border:var(--bw) solid var(--ink); background:var(--surface); color:var(--ink) }

/* ---- 3. Mode cuisine : le même papier que le reste de l'app. ---- */
#cookModeWrap .sm-close{ box-shadow:var(--shadow-hard) }
#cookModeWrap .sm-close:active{ transform:var(--press); box-shadow:none }
.cm-head-title{ display:flex; align-items:center; gap:8px; min-width:0 }
.cm-head-emoji{ font-size:1.4rem; flex:0 0 auto }
.cm-head-nom{ font-family:var(--serif); font-weight:400; font-size:1.12rem; letter-spacing:-.005em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cm-progress{ gap:6px; padding:2px 16px 10px }
.cm-progress i{ height:12px; border:var(--bw) solid var(--ink); background:var(--surface) }
.cm-progress i.on{ background:var(--sage) }
.cm-step-num{ color:var(--terra-text) }
.cm-cite{ background:var(--sage-soft); border:0 }
.cm-voix{ border:var(--bw) solid var(--ink); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-hard) }
.cm-voix:active{ transform:var(--press); box-shadow:none }
.cm-voix.is-on{ background:var(--sage); border-color:var(--ink); color:var(--on-accent) }
/* Les ingrédients sont des lignes (feuilles) ; la case, elle, se touche : encre. */
.cm-ing{ border:0; background:var(--surface); box-shadow:none }
.cm-ing-coche{ border:2.5px solid var(--ink); background:var(--surface); color:var(--on-accent) }
.cm-ing.is-pret .cm-ing-coche{ background:var(--sage); border-color:var(--ink) }
/* La minuterie : un objet posé, son anneau corail se vide. */
.cm-timer-display{ border:var(--bw) solid var(--ink); box-shadow:var(--shadow-hard); background:var(--surface); color:var(--ink); padding:8px 10px 8px 12px }
.cm-timer-anneau{ width:44px; height:44px; flex:0 0 auto; transform:rotate(-90deg) }
.cm-ta-fond{ fill:none; stroke:var(--surface-2); stroke-width:6 }
.cm-ta-reste{ fill:none; stroke:var(--terra); stroke-width:6; stroke-linecap:round; transition:stroke-dasharray 1s linear }
.cm-timer-display.is-fini{ background:var(--terra-soft); color:var(--ink); border-color:var(--ink); animation:cmSonne .5s ease-in-out infinite alternate }
.cm-timer-display .cm-timer-stop{ border:var(--bw) solid var(--ink); background:var(--surface); color:var(--ink) }
@keyframes cmSonne{ from{ transform:rotate(-1.5deg) } to{ transform:rotate(1.5deg) } }
/* L'étape arrive du côté où l'on va. */
.cm-entre-droite{ animation:cmDroite .3s var(--ease) both }
.cm-entre-gauche{ animation:cmGauche .3s var(--ease) both }
@keyframes cmDroite{ from{ transform:translateX(28px); opacity:0 } }
@keyframes cmGauche{ from{ transform:translateX(-28px); opacity:0 } }
@media (prefers-reduced-motion: reduce){
  .cm-entre-droite, .cm-entre-gauche, .cm-timer-display.is-fini{ animation:none }
}
/* Paul (05/10/2026) : « aère, c'est trop serré sur le mode cuisine ». On cuisine à un
   bras de l'écran, les mains prises : de l'air entre chaque bloc, des lignes hautes. */
.cm-head{ gap:14px; padding:calc(14px + env(safe-area-inset-top)) 20px 14px }
.cm-progress{ gap:8px; padding:4px 20px 18px }
.cm-body, #cookModeWrap .cm-body{ padding:26px 24px 40px; gap:26px }
.cm-body > .cm-step-num{ margin-bottom:-14px }
.cm-titre-ings{ margin:0 }
.cm-sous{ margin:-12px 0 0; line-height:1.55 }
.cm-step-text{ line-height:1.5 }
.cs-scene{ margin:0 }
.cm-cites{ gap:10px }
.cm-cite{ padding:11px 16px }
.cm-ings-list{ gap:12px }
.cm-ing{ min-height:62px; padding:14px 18px; gap:14px; border-radius:16px }
.cm-timer-host{ gap:14px }
.cm-tous summary{ min-height:52px }
.cm-tous[open] summary{ margin-bottom:12px }
.cm-nav{ gap:14px; padding:16px 20px calc(18px + env(safe-area-inset-bottom)) }
.cm-nav-btn{ min-height:60px }
.cm-nav-btn.cm-nav-prev{ flex:0 0 72px }
/* 26/10/2026 (retour testeur) : « Pas à pas » ou « Toutes les étapes ». En liste, chaque
   étape est une ligne haute qu'on touche du doigt ou du poignet ; l'étape en cours est
   posée (trait encre, ombre nette), les étapes passées s'effacent un peu. */
.cm-vues{ align-self:center; width:calc(100% - 40px); max-width:440px; margin:0 auto 14px; flex-shrink:0 }
.cm-vues .seg-cp-btn{ flex:1; min-height:48px; font-size:.95rem }
.cm-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px }
.cm-li{ display:flex; flex-direction:column; gap:10px; padding:14px 16px; border-radius:18px; background:var(--surface); border:var(--bw) solid transparent }
.cm-li.is-courante{ border-color:var(--ink); box-shadow:var(--shadow-hard); background:var(--sage-soft) }
.cm-li.is-passee{ opacity:.62 }
.cm-li-btn{ display:flex; align-items:flex-start; gap:14px; width:100%; padding:0; border:0; background:none; font:inherit; color:var(--ink); text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent }
.cm-li-n{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; border:var(--bw) solid var(--ink); background:var(--surface); font-weight:800; font-size:1rem }
.cm-li.is-courante .cm-li-n{ background:var(--terra); color:var(--on-accent) }
.cm-li-t{ flex:1; min-width:0; font-weight:700; font-size:1.25rem; line-height:1.45; padding-top:3px }
.cm-li-cites{ display:flex; flex-wrap:wrap; gap:8px; padding-left:50px }
.cm-li-cites .cm-cite{ padding:7px 12px; font-size:.9rem }
.cm-li-timer{ align-self:flex-start; margin-left:50px }
#cookModeWrap .cm-body.cm-body-liste{ gap:18px; padding-top:10px }
@media (max-width:600px){
  .cm-body, #cookModeWrap .cm-body{ padding:22px 20px 36px; gap:24px }
  .cm-head{ padding-left:16px; padding-right:16px }
  .cm-progress{ padding-left:16px; padding-right:16px }
  .cm-nav{ padding-left:16px; padding-right:16px }
  .cm-vues{ width:calc(100% - 32px) }
  .cm-li-t{ font-size:1.15rem }
  .cm-li-cites{ padding-left:0 }
  .cm-li-timer{ margin-left:0 }
}
/* ===== bloc aeration-0510 ===== */
/* ==================================================================
   AÉRATION, DEUXIÈME PASSE (05/10/2026). Paul : « encore beaucoup de manque
   d'aération, on n'est pas au niveau de Duolingo, d'une appli premium ».
   Mesuré à 360 px avant la passe : titre à 10 px de la bascule Liste/Placard,
   cartes du budget à 16 px l'une de l'autre, cases à cocher de 23 px, libellés
   en capitales de 11 px. Un seul rythme, partout :
     8 px   entre un libellé et ce qu'il nomme ;
     16 px  entre deux éléments d'un même bloc ;
     32 px  entre deux blocs (40 px entre deux rayons de courses).
   Rien que des marges, paddings, gaps, hauteurs et tailles de petits textes.
   Chargé en dernier : l'emporte sur l'aération et sur les retours du 04/10.
   ================================================================== */
:root{ --esp-carte:clamp(22px, 3vw, 28px); --esp-section:32px }

/* ---- En-tête de vue : la bascule, le titre, le sous-titre, les actions respirent. ---- */
.seg-cp{ margin-bottom:30px }
.view-head{ margin-bottom:32px }
.view-head .view-sub{ margin-top:10px; margin-bottom:0 }
.view-head .export-bar, .view-head .recette-head-actions{ margin-top:22px }

/* ---- Cartes : plus de marge intérieure, 32 px entre deux cartes. ---- */
.section-card, .profile-card{ padding:var(--esp-carte) }
.section-card, .profile-card, #budgetSummary{ margin-bottom:32px }
.section-card h2, .profile-card h2{ margin-bottom:8px }
.section-card .sc-sub{ margin-bottom:24px }
#compareContent, #budgetSettings{ margin-top:0 }
.tdee-panel{ gap:16px; margin-top:16px }
.tdee-hero{ padding:24px 20px }
.tdee-row{ gap:14px }
.tdee-box{ padding:18px 12px }
.cc-row{ gap:14px; margin-top:16px }
.br-bloc{ margin-top:24px; padding-top:20px }
#brBloc .br-cases{ gap:10px }
#brBloc .br-case{ padding:14px 6px; gap:4px }
#brBloc .br-case b{ white-space:nowrap; font-size:clamp(.9rem, 4.2vw, 1.05rem) }   /* « ≈ 36,51 € » sur une ligne à 360 px */
#brBloc .br-case small{ font-size:.78rem }

/* ---- Liste de courses : des lignes qu'on touche du pouce, des rayons qui se détachent. ---- */
.shop-prog-card, .have-section{ margin-bottom:32px }
.shop-prog-card{ padding:22px 24px }
.shop-cat{ margin-bottom:40px }
.shop-cat-head{ margin-bottom:16px; padding:0 4px }
.shop-item{ gap:14px; padding:18px 16px; min-height:76px }
.scheck{ width:28px; height:28px; border-radius:9px }
.si-name{ font-size:.96rem }
.si-from{ font-size:.82rem; margin-top:4px; line-height:1.4 }
/* Les flèches qui rangent les rayons : des commandes de service, pas des objets. */
.rayon-move{ border-color:transparent !important; background:transparent !important; box-shadow:none !important; color:var(--muted) }
.rayon-move:not(:disabled):hover{ background:var(--surface-2) !important; color:var(--ink) }

/* ---- Placard ---- */
.stock-add{ margin-bottom:32px }
#stockSortToggle{ margin-bottom:28px !important }
.stock-cat-head, #view-stock .shop-cat-head{ margin-bottom:14px }
.stock-pill .sp-qty{ font-size:.84rem; margin-top:2px }
.stock-grid{ gap:14px }
.stock-pill{ padding:18px 20px; min-height:76px }
.waste-grid{ gap:14px }
.waste-card{ padding:18px }

/* ---- Semaine : un repas, puis de l'air ; les encarts du bas se séparent. ---- */
.day-view .day-meal-row{ margin-bottom:32px }
.day-view .day-meal-row .meal-label{ font-size:.8rem; padding-bottom:10px }
.week-extras{ gap:20px; margin-top:32px }
.cook-now-banner{ gap:16px; padding:20px }
.cook-now-banner .cnb-txt{ gap:4px }
.cook-now-banner .cnb-titre{ font-size:.8rem }
.cook-now-banner .cnb-meta{ font-size:.86rem }
#weekGoal .wg-foot{ margin-top:16px }
/* À l'heure d'un repas prévu, sur téléphone : l'invitation à cuisiner monte juste sous la
   cocotte, et devient la seule action principale (« La cocotte complète ma semaine » reste
   dans le menu ⋯). */
@media (max-width:880px){
  #view-semaine > #cookNowBanner{ order:-1; margin:4px 0 8px }
  #view-semaine:has(> #cookNowBanner) #wgSuggestBtn{ display:none }
}

/* ---- Profils et réglages : des lignes hautes, des groupes séparés. ---- */
#profilTabSeg{ margin-top:8px; margin-bottom:28px }
.pf-wrap{ gap:40px }
.pf-row{ min-height:68px; padding-top:16px; padding-bottom:16px }
.acc-section{ margin-top:32px; padding-top:28px }

/* ---- Petits libellés en capitales : jamais sous 12,5 px, un peu moins serrés. ---- */
.tdee-hero .th-lab, .tdee-box .tl, .section-label, .mt-une-kicker, .mt-autres-titre{ font-size:.8rem; letter-spacing:.06em }

/* ---- Pied des fiches : deux boutons séparés franchement. ---- */
.modal-foot{ gap:14px }

@media (min-width:881px){
  .view-head{ margin-bottom:40px }
  .section-card, .profile-card, #budgetSummary{ margin-bottom:40px }
}

/* ==================================================================
   INTERFACE — passe de l'audit du 06/10/2026
   ==================================================================
   Paul : « fluide, minimaliste, addictive et intuitive », « de l'espace
   visuel et de l'aération à la hauteur de Duolingo », « que l'utilisateur
   ne se demande jamais où cliquer ». Chargée en dernier : l'emporte sur
   index.html, l'aération et les retouches du 04 et du 05/10 (plus haut).
   ================================================================== */

/* ---------- 1. Le haut de Semaine (accueil.js) ---------- */
.acl-actions{ flex:1 1 100%; display:flex; flex-wrap:wrap; justify-content:center; gap:12px }
.acl-actions .btn{ flex:1 1 0; min-width:0; min-height:52px; justify-content:center; font-size:1rem }
.acl-actions .btn-primary{ flex:1.4 1 0 }
.acl-actions .acl-meta{ flex:1 1 100%; margin:0; font-size:.85rem; color:var(--muted); text-align:center }

/* Glisser un repas (app.js, initTouchDragDrop, 08/10/2026) : la copie sous le doigt, la
   bande des sept jours, l'anneau qui se remplit avant d'entrer dans un jour. */
.slot.filled{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none }
.slot-fantome{ position:fixed; left:0; top:0; z-index:90; pointer-events:none; display:flex; align-items:center; gap:8px; max-width:240px; padding:10px 16px 10px 12px; border-radius:999px; background:var(--ink); color:var(--surface); font-size:.95rem; box-shadow:0 14px 30px rgba(20,24,40,.35); will-change:transform; animation:fantomeLeve .18s cubic-bezier(.2,1.4,.4,1) both }
.slot-fantome span{ font-size:1.3rem; line-height:1 }
.slot-fantome b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
@keyframes fantomeLeve{ from{ opacity:0; scale:.6 } to{ opacity:1; scale:1 } }
body.is-glisse{ -webkit-user-select:none; user-select:none }
body.is-glisse .slot.dragging{ opacity:.35; transform:scale(.97); transition:opacity .15s, transform .15s }
/* L'appui se voit tout de suite (le repas s'enfonce), et le repas posé arrive en rebond. */
.slot.filled.is-appui{ transform:scale(.97); transition:transform .2s ease-out }
.slot.is-pose{ animation:reposPose .6s cubic-bezier(.2,1.5,.4,1) both; outline:3px solid var(--ink); outline-offset:2px }
@keyframes reposPose{ 0%{ transform:scale(.9); opacity:.4 } 60%{ transform:scale(1.03); opacity:1 } 100%{ transform:none } }
@media (prefers-reduced-motion: reduce){ .slot.filled.is-appui{ transform:none } .slot.is-pose{ animation:none } }
body.is-glisse .slot.drop-target{ outline:3px dashed var(--ink); outline-offset:2px; background:var(--sage-soft, var(--surface-2)) }   /* le vert remplit, il ne fait pas de contour (charte) */
.glisse-rail{ position:fixed; left:12px; right:12px; z-index:85; padding:10px 10px 12px; border-radius:22px; background:var(--surface); border:var(--bw, 2px) solid var(--ink); box-shadow:0 14px 34px rgba(20,24,40,.22); animation:railDescend .26s cubic-bezier(.2,1.2,.4,1) both }
.glisse-rail.is-part{ animation:railMonte .2s ease-in both }
.gr-lab{ display:block; text-align:center; font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:8px }
.gr-jours{ display:flex; justify-content:space-between; gap:4px }
.gr-jour{ position:relative; flex:1 1 0; min-width:0; height:56px; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; background:var(--surface-2); color:var(--ink-2); transition:transform .15s, background .15s }
.gr-jour b{ font-size:.72rem; font-weight:800; text-transform:uppercase }
.gr-jour small{ font-size:.95rem; font-weight:800; color:var(--ink) }
.gr-jour.on{ background:var(--ink); color:var(--surface) }
.gr-jour.on small{ color:var(--surface) }
.gr-jour.is-survol{ transform:scale(1.1); background:var(--sage-soft, var(--surface-2)); color:var(--sage-text) }
.gr-jour.is-survol::after, .day-switch [data-day].is-survol::after{ content:""; position:absolute; inset:-3px; border-radius:inherit; border:3px solid var(--ink); clip-path:inset(0 100% 0 0); animation:jourRemplit .4s linear forwards }
.day-switch [data-day].is-survol{ position:relative; transform:scale(1.08) }
@keyframes jourRemplit{ to{ clip-path:inset(0 0 0 0) } }
@keyframes railDescend{ from{ opacity:0; transform:translateY(-14px) scale(.97) } to{ opacity:1; transform:none } }
@keyframes railMonte{ to{ opacity:0; transform:translateY(-10px) } }
@media (prefers-reduced-motion: reduce){ .slot-fantome, .glisse-rail, .glisse-rail.is-part, .gr-jour.is-survol::after, .day-switch [data-day].is-survol::after{ animation:none; clip-path:none } }

/* Hier soir (accueil.js, 08/10/2026) : le plat d'hier, un oui, deux autres réponses. */
.acl-hier{ flex-direction:column; align-items:stretch; gap:12px }
.acl-hier-q{ margin:0; font-size:.82rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); text-align:center }
.acl-hier-plat{ display:flex; align-items:center; justify-content:center; gap:12px; min-width:0 }
.acl-hier-plat b{ font-size:1.1rem; line-height:1.25; color:var(--ink); overflow-wrap:anywhere }
.acl-hier .acl-hier-oui{ flex:0 0 auto; width:100% }
.acl-hier-autres{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 20px }
.acl-hier-autres .link-btn{ background:none; border:0; padding:0 4px; min-height:44px; font:inherit; font-size:.9rem; font-weight:600; color:var(--sage-text); text-decoration:underline; cursor:pointer }

/* Le dimanche (accueil.js, 23/10/2026, piste E) : le bilan de la semaine qui finit, puis le
   bouton de la suivante. La première fois de la semaine, les chiffres montent. */
.acl-dimanche{ flex-direction:column; align-items:stretch; gap:12px }
.acl-dimanche .acl-prochaine{ flex:0 0 auto; width:100% }
.acl-bilan{ display:flex; flex-direction:column; gap:10px; padding:14px 16px; border-radius:16px; background:var(--surface-2) }
.acl-bilan-chiffres{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; font-size:.95rem; color:var(--ink-2) }
.acl-bilan-chiffres b{ display:inline-block; margin-right:2px; font-size:1.5rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums }
.acl-bilan.is-neuf .acl-bilan-chiffres span{ animation:bilanMonte .5s var(--ease, ease) both }
.acl-bilan.is-neuf .acl-bilan-chiffres span:nth-child(2){ animation-delay:.15s }
@keyframes bilanMonte{ from{ opacity:0; transform:translateY(10px) scale(.92) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){ .acl-bilan.is-neuf .acl-bilan-chiffres span{ animation:none } }

/* Les deux chiffres : des feuilles, sans trait (charte, deux niveaux de carte). */
.acl-chiffres{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin-top:24px; text-align:left }
.acl-chiffre{
  display:flex; flex-direction:column; gap:4px; min-height:88px; padding:14px 16px;
  border:0; border-radius:16px; background:var(--surface-2); color:var(--ink);
  font:inherit; text-align:left; cursor:pointer; transition:transform .12s var(--ease);
}
.acl-chiffre:active{ transform:scale(.97) }
.acl-lab{ font-size:.8rem; font-weight:600; color:var(--muted) }
.acl-val{ font-size:1.35rem; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums }
.acl-val small{ font-size:.85rem; font-weight:600; color:var(--ink-2) }
.acl-sous{ font-size:.8rem; color:var(--ink-2) }
.acl-jauge{ display:block; height:8px; margin-top:6px; border-radius:999px; background:var(--surface); overflow:hidden }
.acl-jauge i{ display:block; height:100%; border-radius:inherit; background:var(--sage) }
.acl-jauge.is-over i{ background:var(--danger) }

/* « Ce soir » (08/10/2026) : une feuille, comme les chiffres. Le plat sur un rond corail
   doux, la couleur du dîner (charte, une couleur par repas). */
.acl-soir{
  display:flex; align-items:center; gap:14px; width:100%; min-height:72px; margin-top:16px; padding:12px 16px;
  border:0; border-radius:16px; background:var(--surface-2); color:var(--ink);
  font:inherit; text-align:left; cursor:pointer; transition:transform .12s var(--ease);
}
.acl-soir:active{ transform:scale(.98) }
.acl-soir-illu{ flex:0 0 48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--terra-soft); font-size:1.6rem; line-height:1 }
.acl-soir-t{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0 }
.acl-soir-t b{ font-size:1.02rem; line-height:1.25; overflow-wrap:anywhere }
.acl-soir-t small{ font-size:.82rem; color:var(--ink-2) }
/* Le matin (accueil.js, 23/10/2026, piste B) : ce qui reste à faire pour ce soir. */
.acl-soir-t .acl-soir-prep{ display:flex; align-items:center; gap:6px; margin-top:4px; font-weight:600; color:var(--sage-text) }
.acl-soir-t .acl-soir-prep.is-manque{ color:var(--ink) }
.acl-soir-prep svg{ flex:0 0 16px; width:16px; height:16px }
.acl-soir-liste{ display:block; margin:4px auto 0; background:none; border:0; padding:0 4px; min-height:44px; font:inherit; font-size:.9rem; font-weight:600; color:var(--sage-text); text-decoration:underline; cursor:pointer }

/* « Prépare ta cuisine » : une ligne et une jauge, pas une carte de plus. */
.acl-prep{
  display:flex; align-items:center; gap:14px; width:100%; min-height:64px; margin-top:12px; padding:12px 16px;
  border:2px solid var(--ink); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-hard);
  color:var(--ink); font:inherit; text-align:left; cursor:pointer;
}
.acl-prep:active{ transform:var(--press); box-shadow:none }
.acl-prep-t{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0 }
.acl-prep-t b{ font-size:.98rem }
.acl-prep-t small{ font-size:.82rem; color:var(--muted) }
.acl-prep-prio{ align-self:flex-start; margin-top:4px; padding:2px 9px; border-radius:999px; background:var(--terra-soft); color:var(--terra-text); font-style:normal; font-size:.74rem; font-weight:800 }   /* 26/10/2026 : réglage qui répond à la priorité de l'accueil */
.acl-prep-jauge{ flex:0 0 64px; height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden }
.acl-prep-jauge i{ display:block; height:100%; background:var(--sage); transition:width .45s var(--ease, ease) }
.acl-prep{ transition:opacity .3s ease, transform .3s ease }
.acl-prep.is-fini{ opacity:0; transform:scale(.96) }
.acl-prep-go{ flex:0 0 auto; font-size:1.3rem; color:var(--muted) }
.acl-prep-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.acl-prep-ligne{
  display:flex; align-items:center; gap:14px; width:100%; min-height:64px; padding:10px 12px;
  border:0; border-radius:14px; background:var(--surface-2); color:var(--ink); font:inherit; text-align:left; cursor:pointer;
}
.acl-prep-ligne:active{ transform:scale(.98) }
.acl-prep-ico{ flex:0 0 40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--surface); color:var(--ink) }
.acl-prep-ico svg{ width:22px; height:22px }
.acl-prep-ligne.is-fait .acl-prep-ico{ background:var(--sage); color:var(--on-accent) }
.acl-prep-ligne.is-fait b{ color:var(--ink-2) }

@media(min-width:820px){
  .wg{ grid-template-areas:"coco foot" "coco soir" "coco chiffres" "coco prep" "coco defi" "coco liens" }
  .acl-soir, .acl-soir-bloc{ grid-area:soir }
  .acl-soir-bloc .acl-soir-liste{ margin-left:0 }
  .acl-chiffres{ grid-area:chiffres }
  .acl-prep{ grid-area:prep }
  .acl-actions{ justify-content:flex-start }
  .acl-actions .acl-meta{ text-align:left }
}

/* ---------- 2. Premier affichage de la semaine : la cascade (D28) ---------- */
@keyframes acEntree{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.is-cascade .slot, .is-cascade .ws-day{ animation:acEntree .32s var(--ease) both }
.is-cascade .slot:nth-child(2n){ animation-delay:.04s }
.is-cascade .slot:nth-child(3n){ animation-delay:.08s }
.is-cascade .slot:nth-child(4n){ animation-delay:.12s }
.is-cascade .slot:nth-child(5n){ animation-delay:.16s }
@media (prefers-reduced-motion: reduce){ .is-cascade .slot, .is-cascade .ws-day{ animation:none } }

/* ---------- 3. Bascules : le choix se pose, il ne crie pas (B7) ----------
   Une bascule choisie n'est pas une action : elle ne prend plus le vert plein,
   réservé au bouton principal de l'écran. Le choix devient une pastille crème
   posée (trait encre, ombre nette), le reste s'efface. Charte mise à jour. */
.seg button.on, body .seg button.on, html[data-theme="dark"] .seg button.on,
.seg-cp-btn.on{
  background:var(--surface); color:var(--ink); border-color:var(--ink);
  box-shadow:2px 2px 0 var(--ink); font-weight:700;
}
.seg-cp{ background:var(--surface-2); border-color:var(--border-2) }
.seg-cp-btn.on{ border:var(--bw) solid var(--ink) }
.seg button:not(.on), .seg-cp-btn:not(.on){ color:var(--ink-2) }

/* ---------- 4. Les étiquettes des repas (B10) ----------
   « À acheter » est le cas ordinaire : il ne s'affiche plus. Ne reste que ce qui
   aide à décider (ce qui est déjà chez toi), en texte discret, sans couleur de rôle. */
.slot-src.s-courses{ display:none }
.slot-src.s-partiel, .slot-src.s-frigo,
html[data-theme="dark"] .slot-src.s-partiel{
  background:var(--surface-2); color:var(--ink-2); border-color:transparent; box-shadow:none;
}
.day-view .slot-src.s-partiel, .day-view .slot-src.s-frigo{ background:none; color:var(--muted) }

/* ---------- 5. Recettes : la liste d'abord (B13) ---------- */
#view-recettes .menus-theme{ margin:4px 0 24px }
.mt-rang{ display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.mt-rang::-webkit-scrollbar{ display:none }
.mt-pastille{
  flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:52px; padding:8px 16px;
  border:var(--bw) solid var(--ink); border-radius:16px; background:var(--surface); box-shadow:2px 2px 0 var(--ink);
  color:var(--ink); font:inherit; text-align:left; cursor:pointer; scroll-snap-align:start; white-space:nowrap;
}
.mt-pastille:active{ transform:var(--press); box-shadow:none }
.mt-pastille .mt-une-kicker{ font-size:.75rem; font-weight:700; color:var(--sage-text); letter-spacing:0; text-transform:none }
.mt-pastille-t{ font-size:.95rem; font-weight:700 }
.mt-autre.mt-pastille{ border-color:var(--border-2); box-shadow:none; background:var(--surface-2) }

/* ---------- 6. En-tête : le profil à la place du thème (B14, B17) ---------- */
.profil-btn{ width:44px; height:44px; border-radius:50%; border:var(--bw) solid var(--ink); background:var(--terra-soft); color:var(--ink); padding:0 }
.profil-btn-initiale{ font-weight:700; font-size:1.05rem; line-height:1; display:grid; place-items:center }
.profil-btn-initiale svg{ width:20px; height:20px }
.profil-btn:active{ transform:scale(.94) }
.profil-btn.on{ background:var(--surface); box-shadow:2px 2px 0 var(--ink) }
/* « Actions » de la semaine : la même icône ⋯ que partout, sans un troisième nom (B11). */
#weekMoreBtn .cw-label{ display:none }
#weekMoreBtn{ min-width:48px; justify-content:center }
/* 08/10/2026 (Paul : « une animation pour le bouton … ») : au toucher, les trois points
   sautent l'un après l'autre et le bouton s'enfonce ; ouvert, ils se resserrent en
   pastille. Sur téléphone, le menu centré n'avait plus d'animation (son transform la
   cassait) : il éclot du centre et ses lignes arrivent en cascade. */
#weekMoreBtn svg circle{ transform-box:fill-box; transform-origin:center; transition:transform .25s var(--ease, ease) }
#weekMoreBtn:active{ transform:scale(.9) }
#weekMoreBtn.is-open svg circle:nth-child(1){ transform:translateX(3px) scale(.85) }
#weekMoreBtn.is-open svg circle:nth-child(3){ transform:translateX(-3px) scale(.85) }
#weekMoreBtn.is-open svg circle:nth-child(2){ transform:scale(1.25) }
#weekMoreBtn.is-open svg circle{ animation:pointsSaut .42s cubic-bezier(.3,1.6,.5,1) both }
#weekMoreBtn.is-open svg circle:nth-child(2){ animation-delay:.05s }
#weekMoreBtn.is-open svg circle:nth-child(3){ animation-delay:.1s }
@keyframes pointsSaut{ 0%{ translate:0 0 } 45%{ translate:0 -4px } 100%{ translate:0 0 } }
@media (max-width:880px){
  #view-semaine .week-actions #weekMoreMenu:not([hidden]){ animation:menuEclot .3s cubic-bezier(.2,1.3,.4,1) both }
  #view-semaine .week-actions #weekMoreMenu:not([hidden]) .week-menu-item{ animation:menuLigne .32s var(--ease, ease) both }
  #view-semaine .week-actions #weekMoreMenu .week-menu-item:nth-child(2){ animation-delay:.03s }
  #view-semaine .week-actions #weekMoreMenu .week-menu-item:nth-child(3){ animation-delay:.06s }
  #view-semaine .week-actions #weekMoreMenu .week-menu-item:nth-child(4){ animation-delay:.09s }
  #view-semaine .week-actions #weekMoreMenu .week-menu-item:nth-child(5){ animation-delay:.12s }
  #view-semaine .week-actions #weekMoreMenu .week-menu-item:nth-child(n+6){ animation-delay:.15s }
}
@keyframes menuEclot{ 0%{ opacity:0; transform:translate(-50%,-46%) scale(.9) } 100%{ opacity:1; transform:translate(-50%,-50%) scale(1) } }
@keyframes menuLigne{ 0%{ opacity:0; translate:0 8px } 100%{ opacity:1; translate:0 0 } }
@media (prefers-reduced-motion: reduce){
  #weekMoreBtn svg circle, #weekMoreBtn.is-open svg circle{ animation:none; transition:none }
  #view-semaine .week-actions #weekMoreMenu:not([hidden]), #view-semaine .week-actions #weekMoreMenu:not([hidden]) .week-menu-item{ animation:none }
}

/* ---------- 7. Offre en pause : aucune porte vers Premium pour un compte gratuit (B16) ---------- */
html.offre-en-pause body:not(.is-premium) :is(
  #duplicateWeekBtn, #recapBudgetTeaser, #coursesEnseigneNudge, #coursesGroupToggle,
  #importPhotoBtn, #importPhotoField, [data-plr-toggle].locked, .pm-couronne, .premium-lock-chip,
  .ptab-add:has(#addProfileLockChip:not([hidden])),
  .field:has(#bBudgetStrict), label:has(#bBudgetStrict), .premium-teaser, .blur-teaser-wrap, .wsv-premium-line,
  .pp-carte .mw-achat-natif
){ display:none !important }

/* ---------- 8. Doublons (B17, puis audit F1 du 14/10/2026) ----------
   « Suggérer ma semaine » : le bouton de la cocotte (sous elle, quand il reste des
   dîners à poser) et l'entrée du menu ⋯ (#suggestWeekBtn) suffisent. Le bouton d'en-tête
   a quitté la page. */

/* ---------- 9. Pas de pied de page de site dans l'app (A5) ----------
   « Alternative à Jow », « Mentions légales »… sont des liens de site web. Dans l'app
   installée (native ou écran d'accueil), ils passent par Paramètres. */
html.mw-natif .app-footer{ display:none }
@media (display-mode: standalone){ .app-footer{ display:none } }
.acl-liens{ display:flex; flex-direction:column; margin-top:8px }
.acl-lien{ display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:0 4px; border:0; border-bottom:1px solid var(--border); background:none; color:var(--ink); font:inherit; font-size:.98rem; text-align:left; cursor:pointer }
.acl-lien:last-child{ border-bottom:0 }
.acl-lien:active{ background:var(--surface-2) }

/* ---------- 10. Respiration (C21) : 40 px entre deux blocs, partout ---------- */
:root{ --esp-section:40px }
.section-card, .profile-card, #budgetSummary{ margin-bottom:40px }
.view-head{ margin-bottom:40px }
.week-extras{ gap:20px; margin-top:32px }

/* ---------- 11. Deux écritures (C23) ----------
   Alfa Slab : titre d'écran, nom de recette et grands chiffres (exception écrite dans
   la charte). Les titres de carte reviennent en Rubik. */
.recap-titre, .ac-h, .jeu-h3 span, .rp-jour span{ font-family:var(--sans) !important; font-weight:700 !important; letter-spacing:0 }
.recap-titre{ font-size:1.15rem }

/* ---------- 12. La coche lisible (C24) ---------- */
.scheck svg, .ws-day.has-diner .ws-n{ color:var(--on-accent) }

/* ---------- 13. Le vert ne fait pas de contour (C25) ----------
   Champs : bordure encre au focus, sans halo. Focus clavier : anneau encre partout. */
.field input:focus, .field select:focus, .field textarea:focus,
.search-box input:focus, .ing-search-box input:focus, .temps-row select:focus{
  border-color:var(--ink); box-shadow:none; outline:none;
}
:is(.btn, .rcard[data-card], input.sw, .seg-cp-btn, .ws-day, .bc-touche, .jeu-anneau, .chip, button):focus-visible{
  outline:3px solid var(--ink) !important; outline-offset:2px; box-shadow:none;
}
.bs-toggle:has(input:focus-visible){ outline:3px solid var(--ink); outline-offset:2px }
/* Un choix sur fond doux : contour encre, jamais vert. */
.check-chip.on, .po-pchip.on, .mt-ligne.on, .fr-opt.on, .si-state.bio, .si-bio-toggle.on-bio,
.slot-src.s-frigo, .photo-cta.is-mine, .bday.st-ok, .micro-chip.is-strong, .micro-rattrap.micro-ok,
.rp-carte.is-choisi, .rp-carte.is-actuel, .rp-tuile.is-on, .rp-jour.is-on,
.compare-result.ok, .bilan-verdict.ok, .sel-suggest-banner, .coach-tip{
  border-color:var(--ink) !important;
}
.rp-tuile.is-on, .rp-jour.is-on{ box-shadow:0 4px 0 var(--ink) !important }
.coach-tip::before, .coach-tip::after{ border-color:var(--ink) !important }
.slot.drop-target, .price-learn-row, #photoDropZone{ border-color:var(--ink-2) !important }
/* Les halos flous verts des choix : retirés, comme sur .seg. */
.chip.on, .nav-btn.active{ box-shadow:none }
/* Au survol (bureau) : le trait passe à l'encre, pas au vert. */
@media (hover:hover){
  .slot.empty:hover, .slot.filled:hover, .chip:hover, .seg button:hover, .day-chip:hover, .btn-ghost:hover,
  .btn-oauth:hover, .mr-chip:hover, .nutri-badge-btn:hover, .si-bio-toggle:hover, .plan-pick-cell:hover{ border-color:var(--ink) }
}

/* ---------- 14. Tout ce qui se touche s'enfonce (C26) ---------- */
:is(.modal-close, .po-row, .pf-row, .sel-card, .icon-btn, .ptab, .mt-ligne, .cm-ing, .waste-card, .stock-pill,
  .link-btn, .toast-action, .dc-lien, .dc-x, .rp-lien, .hs-sem, .hs-res, .hs-an, .ac-case, .week-menu-item, .cnb-x, .fr-x, .ing-del):active{
  transform:scale(.96); transition:transform .08s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  :is(.modal-close, .po-row, .pf-row, .sel-card, .icon-btn, .ptab, .mt-ligne, .cm-ing, .waste-card, .stock-pill,
    .link-btn, .toast-action, .dc-lien, .dc-x, .rp-lien, .hs-sem, .hs-res, .hs-an, .ac-case, .week-menu-item,
    .rcard, .slot.filled, .fr-opt, .rp-carte, .acl-chiffre, .acl-soir, .acl-prep, .acl-prep-ligne, .mt-pastille):active{ transform:none }
}

/* ---------- 15. Commandes icône : 40 px visibles au moins (charte, mesures) ---------- */
.coach-tip-close, .price-learn-toggle, .ing-del, .fr-x, .ptab-x, .stepper button, .cnb-x, .di-sub-btn{
  min-width:40px; min-height:40px;
}
.chip-select{ font-size:16px }

/* ---------- 16. Fluidité (D30) ----------
   La vie reste où elle raconte quelque chose : la cocotte, sa vapeur, les confettis,
   les tampons, le souffle du bouton de la cocotte. Ce qui tournait sans fin pour rien
   s'arrête : le bouton magique ne bouge plus (corail plein depuis le 15/10, sans dégradé
   ni halo ; le fond à taches floues est parti le même jour), et les flous d'arrière-plan
   des menus et fenêtres laissent place à un fond plein (cher sur Android d'entrée de gamme). */
.btn-magic{ animation:none !important }
.glass-panel, .modal{
  background:var(--surface) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.overlay{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:rgba(20,22,31,.5) }

/* L'or est au couvercle (Premium, récompenses) : le bandeau d'installation passe en sable. */
#installBanner{ background:var(--surface-2); color:var(--ink); border-bottom:1px solid var(--border) }
#installBanner a{ background:var(--surface); border:var(--bw) solid var(--ink); min-height:40px; display:inline-flex; align-items:center }

/* Recettes : « Nouvelle recette » est secondaire, mais garde la place de son libellé. */
@media (max-width:560px){ .recette-head-actions > #newRecipeBtn{ flex-grow:1.5 } }
/* Grand écran : un chiffre seul ne s'étire pas sur toute la largeur. */
@media(min-width:820px){ .acl-chiffres{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }

/* ---------- 17. Menu de la semaine : une liste qu'on décoche, pas une pile de cartes ----------
   (Paul, 06/10/2026 : « encore trop chargé »). Les lignes sont des feuilles sans trait ; la
   coche dit le choix, une ligne décochée s'efface. Le choix de semaine est une bascule
   (crème posée), pas un bouton vert. Une seule action en pied : la croix ferme. */
.mt-liste{ gap:6px }
.mt-ligne, .mt-ligne.on{
  border:0 !important; box-shadow:none !important; background:var(--surface-2) !important;
  min-height:64px; padding:10px 14px; color:var(--ink);
}
.mt-ligne:not(.on){ opacity:.5 }
.mt-ligne .mt-txt strong{ font-size:.98rem; line-height:1.25 }
.mt-ligne .mt-txt small{ color:var(--muted); font-weight:500 }
.mt-ligne .mt-coche{ border-radius:50% }
.mt-semaine{ gap:10px; margin-bottom:16px }
.mt-semaine .chip, .mt-semaine .chip.on{ background:var(--surface-2); color:var(--ink-2); border:var(--bw) solid transparent; box-shadow:none }
.mt-semaine .chip.on{ background:var(--surface); color:var(--ink); border-color:var(--ink); box-shadow:2px 2px 0 var(--ink) }
.mt-semaine .chip small{ color:var(--muted); opacity:1 }

/* ---------- 18. Courses : les réglages en haut, en une ligne (Paul, 06/10/2026) ---------- */
.courses-reglages{ margin:0 0 24px; padding:0; border:0; border-radius:16px; background:var(--surface-2) }
.courses-reglages-s{
  display:flex; align-items:center; gap:10px; min-height:52px; padding:0 16px; cursor:pointer; list-style:none;
}
.courses-reglages-s::-webkit-details-marker{ display:none }
.courses-reglages-s .crs-t{ font-weight:700 }
.courses-reglages-s .crs-v{ flex:1 1 auto; color:var(--muted); font-size:.9rem; text-align:right }
.courses-reglages-s .crs-go{ color:var(--muted); font-size:1.2rem; transition:transform .15s var(--ease) }
.courses-reglages[open] .crs-go{ transform:rotate(90deg) }
.courses-reglages-corps{ padding:4px 16px 16px; display:flex; flex-direction:column; gap:10px }
.courses-reglages .crs-lab{ font-size:.85rem; font-weight:700; color:var(--ink-2); margin-top:6px }
.courses-reglages .seg{ margin:0 }

/* ---------- 19. Cartes du Livre de recettes, sur téléphone : l'essentiel ----------
   Nom, une étiquette, le prix et le temps. La description et la 2e étiquette restent
   sur la fiche (Paul, 06/10/2026 : « encore trop chargé »). */
@media (max-width:560px){
  #recetteResults .rcard-desc{ display:none }
  #recetteResults .rcard-tags .tag:nth-child(n+2){ display:none }
}
.day-chip.on, body .day-chip.on{ background:var(--surface); color:var(--ink); border-color:var(--ink); box-shadow:2px 2px 0 var(--ink) }
.day-chip:not(.on){ background:transparent; color:var(--muted); border-color:var(--border-2) }
.mt-semaine .chip.on, .mt-semaine .chip.on small{ color:var(--ink) !important }
.mt-semaine .chip.on small{ color:var(--ink-2) !important }

/* ---------- 20. Photos de plats (Paul, 06/10/2026 : « j'ai besoin de photos des gens ») ---------- */
.photo-choix{ display:flex; flex-direction:column; gap:12px; max-width:320px; margin:0 auto }
.photo-choix .btn{ width:100%; min-height:52px; justify-content:center; gap:10px }
.photo-choix .btn svg{ width:20px; height:20px }
/* Fiche sans photo : le rond de l'émoji se touche, avec un badge qui dit quoi faire. */
.detail-emoji-photo{ cursor:pointer; font-family:inherit; color:inherit; padding:0 }
.dep-wrap{ position:relative; display:inline-flex; justify-content:center; margin-bottom:26px }
.dep-wrap .dep-badge{ font-family:var(--sans); cursor:pointer;
  position:absolute; left:50%; bottom:-20px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  min-height:40px; padding:4px 14px; border-radius:999px;
  background:var(--ink); color:var(--bg); border:var(--bw) solid var(--ink);
  font-size:.82rem; font-weight:700; box-shadow:2px 2px 0 var(--ink);
}
.dep-wrap .dep-badge svg{ width:16px; height:16px }
.detail-emoji-photo:active{ transform:scale(.97) }

/* ---------- 21. Ce que j'ai appris (gouts.js, 07/10/2026) ----------
   La question du jour sous la cocotte est une feuille (fond clair, sans trait) : elle
   demande, elle ne pousse pas ; ses deux réponses sont secondaires. La page « Ce que
   j'ai appris » reprend les deux niveaux de la charte : une carte objet pour le seul
   grand chiffre, des feuilles pour le reste. */
.gt-question{ flex:1 1 100%; display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:16px; background:var(--surface-2); text-align:left }
.gt-q-haut{ display:flex; align-items:center; gap:12px }
.gt-q-emo{ flex:0 0 44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--surface); font-size:1.5rem; line-height:1 }
.gt-q-t{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0 }
.gt-q-t small{ font-size:.8rem; font-weight:600; color:var(--muted) }
.gt-q-t b{ font-family:var(--serif); font-weight:400; font-size:1.05rem; line-height:1.2; color:var(--ink); overflow-wrap:anywhere }
.gt-q-x{ flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--muted); font-size:1.05rem; cursor:pointer }
.gt-q-x:active{ transform:scale(.94) }
.gt-q-question{ margin:0; font-size:1rem; font-weight:700; color:var(--ink) }
.gt-q-btns{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px }
.gt-q-btns .btn{ min-height:48px; justify-content:center; font-size:.95rem; padding:0 10px }
@media (min-width:820px){ .gt-q-btns{ max-width:520px } }

.gt-appris{ padding:20px 22px 26px }
.gt-hero{ display:flex; align-items:center; gap:16px; margin:0 0 28px }
.gt-coco{ flex:0 0 auto }
.gt-coco .jeu-coco.gt-coco-svg{ width:96px; height:80px }
@media (max-width:400px){ .gt-hero{ gap:12px } .gt-coco .jeu-coco.gt-coco-svg{ width:76px; height:64px } .gt-bulle{ font-size:.9rem } }
.gt-bulle{ position:relative; flex:1 1 auto; margin:0; padding:14px 16px; border-radius:18px; border:2px solid var(--ink); background:var(--surface-2); color:var(--ink); font-size:.95rem; font-weight:600; line-height:1.45 }
.gt-bulle:before{ content:""; position:absolute; left:-10px; top:50%; width:16px; height:16px; margin-top:-8px; background:var(--surface-2); border-left:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(45deg) }
.gt-carte{ margin:0 0 32px; padding:20px; border-radius:18px; border:var(--bw, 2px) solid var(--ink); background:var(--surface); box-shadow:var(--shadow-hard) }
.gt-surtitre{ display:block; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.gt-grand{ display:flex; align-items:baseline; gap:8px; margin:6px 0 8px }
.gt-grand b{ font-family:var(--serif); font-weight:400; font-size:2.6rem; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums }
.gt-grand span{ font-size:1rem; font-weight:700; color:var(--ink-2) }
.gt-sous{ margin:0; font-size:.88rem; line-height:1.5; color:var(--ink-2) }
.gt-section{ margin:0 0 32px }
.gt-h{ margin:0 0 12px; font-size:1.15rem; font-weight:700; color:var(--ink) }
.gt-note{ margin:10px 0 0; font-size:.84rem; line-height:1.45; color:var(--muted) }
.gt-centre{ text-align:center }
.gt-plats{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px }
@media (min-width:640px){ .gt-plats{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)) } }
.gt-plat{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:80px; padding:12px; border:0; border-radius:14px; background:var(--surface-2); color:var(--ink); font:inherit; text-align:left; cursor:pointer }
.gt-plat > span:first-child{ font-size:1.4rem; line-height:1 }
.gt-plat-n{ font-weight:700; font-size:.92rem; line-height:1.25; overflow-wrap:anywhere }
.gt-plat small{ font-size:.78rem; color:var(--muted) }
.gt-plat:active{ transform:scale(.97) }
.gt-faits, .gt-moins{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.gt-faits li{ display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 14px; border-radius:14px; background:var(--surface-2) }
.gt-f-ico{ flex:0 0 36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--surface); color:var(--ink) }
.gt-f-ico svg{ width:20px; height:20px }
.gt-f-t{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0 }
.gt-f-t small{ font-size:.8rem; color:var(--muted) }
.gt-f-t b{ font-size:.95rem; line-height:1.3; color:var(--ink) }
.gt-moins li{ display:flex; align-items:center; gap:12px; min-height:64px; padding:8px 8px 8px 14px; border-radius:14px; background:var(--surface-2) }
.gt-moins li.is-remis{ opacity:.55 }
.gt-m-emo{ flex:0 0 auto; font-size:1.3rem; line-height:1 }
.gt-m-t{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0 }
.gt-m-t b{ font-size:.92rem; line-height:1.25; overflow-wrap:anywhere }
.gt-m-t small{ font-size:.78rem; color:var(--muted) }
.gt-remettre{ flex:0 0 auto; min-height:40px }
.gt-export{ margin-top:8px; padding-top:20px; border-top:1px solid var(--border) }
.gt-export p{ margin:0 0 12px; font-size:.86rem; line-height:1.45; color:var(--ink-2) }
/* Sous « Mes semaines » (22 px en bas) : 16 px entre les deux boutons, 22 px avant l'export. */
.ac-carnet .ac-appris{ margin:-6px 0 22px }
@media (prefers-reduced-motion: reduce){ .gt-plat:active, .gt-q-x:active{ transform:none } }
/* Tes habituels (Courses, « Ajoutés à la main ») : une feuille, des pastilles qui ajoutent. */
.gt-hab{ margin:4px 12px 0; padding:14px; border-radius:14px; background:var(--surface-2); display:flex; flex-direction:column; gap:10px }
.gt-hab-t{ display:flex; flex-direction:column; gap:2px }
.gt-hab-t b{ font-size:.95rem; color:var(--ink) }
.gt-hab-t small{ font-size:.8rem; color:var(--muted) }
.gt-hab-chips{ display:flex; flex-wrap:wrap; gap:8px }
.gt-hab-chip{ min-height:44px; padding:0 14px; background:var(--surface); color:var(--ink); border:var(--bw, 2px) solid var(--ink); border-radius:999px; font-weight:600; font-size:.9rem; cursor:pointer }
.gt-hab-chip:active{ transform:scale(.96) }
.gt-hab-tout{ align-self:flex-start; min-height:44px }
@media (prefers-reduced-motion: reduce){ .gt-hab-chip:active{ transform:none } }
/* Liste sans repas planifié : « Ajoutés à la main » suit le message, à 40 px (rythme entre deux blocs). */
.empty-state.courses-vide{ padding-bottom:40px }

/* ---------- 22. « How Addictive Apps Are Made » (08/10/2026) ----------
   Couche 1 : la tâche du jour sans défiler. Les repas qu'on ne planifie pas tiennent
   sur une ligne de pastilles discrètes sous le dîner (app.js, repasRepliesHtml). */
.day-meal-plus{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:24px 0 8px }
.day-meal-plus .day-meal-add{ min-height:44px; padding:0 16px; background:transparent; border:2px dashed var(--border-2); color:var(--muted); font-size:.88rem; font-weight:700 }
.day-meal-plus .day-meal-add span{ font-size:1.05rem; margin-right:2px }

/* Couche 2 : chaque choix visuel montre ce qu'il faut voir. Dans le menu d'un repas, une
   seule ligne pleine (le mode cuisine, ou « Voir la recette ») ; « Marquer comme cuisiné »
   ne prend le vert qu'une fois fait (c'est un choix), « Ajouter un autre plat » parle à
   l'encre, et « Plus d'actions » s'efface : il était plus appuyé que les vraies actions. */
#popover .po-cook-btn:not(.is-on){ background:var(--surface-2); color:var(--ink) }
#popover .po-row.po-autre-add{ color:var(--ink) }
#popover .po-more{ border-color:transparent; background:transparent; padding-left:4px; padding-right:4px }
#popover .po-more > summary{ color:var(--ink-2) }

/* Couche 3 : une alerte porte la cocotte inquiète (app.js, toast). Elle ne saute pas. */
.toast.warn.has-coco .ti-coco .jeu-coco{ animation:none }

/* ---------- 15. Le placard (08/10/2026, Paul : « le bordel visuellement ») ----------
   Avant : cadre autour du champ, gros bouton « Scanner », carte à bouton pour les articles
   cochés, deux gros boutons de tri dont un cerné de vert, et les produits sous le pli.
   Maintenant : un champ (Scanner dedans), une feuille d'une ligne, la bascule de la charte,
   puis le contenu. Charte : deux niveaux de carte, le vert ne fait pas de contour. */
#view-stock .stock-add{ background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 0 16px !important }
#view-stock .stock-add-row > .field.autoc-wrap{ position:relative }
#view-stock #stockName{ min-height:54px; padding-right:128px; border-radius:16px; font-size:1rem }
#view-stock .sa-scan{
  position:absolute; right:7px; top:7px; height:40px; display:inline-flex; align-items:center; gap:7px;
  padding:0 14px 0 11px; border:var(--bw, 2px) solid var(--ink); border-radius:12px; background:var(--surface);
  color:var(--ink); font:inherit; font-weight:700; font-size:.9rem; box-shadow:2px 2px 0 var(--ink); cursor:pointer; z-index:2
}
#view-stock .sa-scan svg{ width:20px; height:20px }
#view-stock .sa-scan:active{ transform:translate(2px,2px); box-shadow:none }
.transfer-banner{ display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:8px 8px 8px 14px; border:0 !important; border-radius:16px; background:var(--surface-2); box-shadow:none }
.transfer-banner .bt-em{ flex:0 0 auto; display:grid; place-items:center }
.transfer-banner .bt-em svg{ width:20px; height:20px }
.transfer-banner .tb-txt{ flex:1; min-width:0; font-size:.9rem; line-height:1.35; color:var(--ink-2) }
.transfer-banner .tb-ranger{ flex:0 0 auto; min-height:44px; padding:0 10px; background:none; border:0; font:inherit; font-size:.9rem; font-weight:700; color:var(--sage-text); text-decoration:underline; cursor:pointer; white-space:nowrap }
#view-stock .stock-tri{ max-width:320px; margin:0 0 20px }
#view-stock .stock-tri .seg-cp-btn{ min-height:40px; font-size:.88rem }
/* Retirer un produit : une croix discrète, la zone de toucher reste de 44 px. */
#view-stock .stock-pill .mini-btn.del{ width:44px; height:44px; background:transparent; border:0; box-shadow:none; color:var(--muted) }
#view-stock .stock-pill .mini-btn.del svg{ width:18px; height:18px }
@media (hover:hover){ #view-stock .stock-pill .mini-btn.del:hover{ background:var(--surface); color:var(--danger) } }
/* Sur un écran tactile, le survol reste collé après un toucher : plus de contour vert sur
   les bascules (.seg), le choix seul se pose. */
@media (hover:none){ .seg button:not(.on):hover{ border-color:var(--border); color:var(--ink-2) } }

/* ---------- 16. Cibles tactiles de la charte (audit F7, 15/10/2026) ----------
   verif-visuelle.mjs vérifie désormais 44 px pour tout bouton et 48 px pour un .btn
   (docs/charte-interface.md). Ces boutons étaient tous à 40 px. */
:is(.check-chip, .day-chip, .chip, .di-sub-btn, .seg-cp-btn, #bBudgetSuggestBtn, #dcChoisir,
  #detailPhotoAddBadge, #voteLikeBtn, #voteDislikeBtn, #libFilterBtnDesk){ min-height:44px !important }
#view-stock .stock-tri .seg-cp-btn{ min-height:44px }
#view-stock #stockName{ min-height:58px }
#view-stock .sa-scan{ height:44px }
.btn.btn-sm:is(.gt-hab-tout, .gt-remettre, .pf-edit), #resetStockBtn{ min-height:48px !important }

/* 20/10/2026 (langues) : « Está cocinado » et « It's cooked » sont plus larges que « C'est
   cuisiné » ; à 360 px le libellé débordait. Hors français, le bouton prend la largeur de son
   libellé, le mode cuisine garde le reste. */
html:not([lang="fr"]) .acl-actions .acl-cuit{ flex:0 1 auto; padding-left:14px; padding-right:14px }

/* ---------- 17. Filtres allégés (25/10/2026) ----------
   Paul : « la liste des filtres est beaucoup trop chargée ». Une pastille de filtre est une
   feuille (sable, sans trait) ; choisie, elle prend le fond vert doux et le trait encre, comme
   les réponses de l'accueil et du formulaire (.check-chip.on, .fr-opt.on) : un choix n'est pas
   une action, le vert plein reste au bouton « Voir N recettes ». Chaque groupe a son titre sur
   sa ligne, 24 px entre deux groupes. */
.filter-group .chip{ background:var(--surface-2); border-color:transparent; color:var(--ink-2); box-shadow:none }
/* :root : passe devant html[data-theme="dark"] .chip.on (app.css), qui écrit en couleur d'accent. */
:root .filter-group .chip.on, :root .filter-group .chip.on.terra{ background:var(--sage-soft); border-color:var(--ink); color:var(--sage-text); box-shadow:none; animation:none }
.filter-group .chip.lf-effacer{ background:none; color:var(--sage-text); text-decoration:underline }
@media (hover:hover){ .filter-group .chip:not(.on):hover{ border-color:transparent; background:var(--border); color:var(--ink) } }
.lf-feuille .lf-groupe + .lf-groupe, .lf-feuille .lf-plus{ margin-top:var(--esp-6) }
.lf-feuille .lf-titre{ margin:0 0 var(--esp-3); font-size:.85rem; font-weight:700; line-height:1.3; color:var(--ink); letter-spacing:0; text-transform:none }
.lf-feuille .lf-titre label{ font:inherit; color:inherit }
.lf-feuille .filter-group{ gap:var(--esp-2) }
.ing-search-box .ing-ic{ display:grid; place-items:center; color:var(--muted) }
.ing-search-box .ing-ic svg{ position:static; transform:none; width:20px; height:20px }
.lf-plus > summary{ list-style:none; display:flex; align-items:center; gap:10px; min-height:48px; font-size:.95rem; font-weight:700; color:var(--ink-2); cursor:pointer }
.lf-plus > summary::-webkit-details-marker{ display:none }
.lf-plus > summary::after{ content:''; width:8px; height:8px; margin-left:2px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s var(--ease) }
.lf-plus[open] > summary::after{ transform:translateY(2px) rotate(-135deg) }
.lf-plus .cl-count{ background:var(--sage); color:var(--on-accent); font-size:.72rem; font-weight:700; border-radius:999px; padding:2px 8px; line-height:1.4 }
.lf-plus .cl-count:empty{ display:none }
.lf-plus[open] > summary{ margin-bottom:var(--esp-2) }
.lf-feuille .chip-select{ min-height:48px }
@media (prefers-reduced-motion: reduce){ .lf-plus > summary::after{ transition:none } }
/* Le livre n'a plus qu'un bouton « Ajouter » (écrire, importer), à droite du titre : les
   recettes arrivent tout de suite dessous. */
#view-recettes .view-head{ flex-wrap:nowrap; align-items:flex-start }
#view-recettes .view-head > div:first-child{ flex:1 1 auto; min-width:0 }
#view-recettes .recette-head-actions{ width:auto; flex:0 0 auto }
#view-recettes .recette-head-actions > .btn{ flex:0 0 auto; gap:8px; padding-left:16px; padding-right:18px }
#view-recettes .recette-head-actions .week-menu{ right:0; left:auto; min-width:230px }
#addRecipeBtn .draft-dot{ width:8px; height:8px; border-radius:50%; background:var(--terra) }
.week-menu-item .draft-badge{ margin-left:auto; background:var(--surface-2); color:var(--ink-2) }
.empty-state .es-actions{ display:flex; flex-direction:column; align-items:center; gap:var(--esp-4) }
.empty-state .es-actions:empty{ display:none }

/* ---------- 18. « Ce soir, avec ce que j'ai » allégé (25/10/2026) ----------
   La carte est une feuille (sable, sans trait) : le vert pâle n'est pas un rôle de la charte.
   Chaque recette est une ligne claire ; « Poser » est une action secondaire (crème, trait
   encre), trois boutons verts pleins se disputaient l'écran. Ce qui périme est dit une fois. */
.dc-soir{ background:var(--surface-2); border:0; box-shadow:none }
.dc-soir-h h2{ color:var(--ink) }
.dc-soir-s{ display:block; margin-top:2px; font-size:.86rem; line-height:1.4; color:var(--ink-2) }
.dc-soir-s.dc-urg{ color:var(--terra-text); font-weight:700 }
.dc-soir-l{ flex-direction:row; align-items:center; gap:var(--esp-2); margin-top:var(--esp-2); padding:6px 8px 6px 4px; border-radius:16px; background:var(--surface) }
.dc-soir-fiche{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:var(--esp-3); min-height:56px; padding:6px 8px; background:none; border:0; font:inherit; color:inherit; text-align:left; cursor:pointer; border-radius:12px }
.dc-soir-t b{ font-size:.95rem; line-height:1.3 }
.dc-soir-t small{ font-size:.82rem }
.dc-soir-go{ flex:0 0 auto; min-height:44px; padding:0 16px; border:var(--bw, 2px) solid var(--ink); border-radius:14px; background:var(--surface); color:var(--ink); font:inherit; font-size:.9rem; font-weight:700; box-shadow:2px 2px 0 var(--ink); cursor:pointer }
.dc-soir-go:active{ transform:translate(2px,2px); box-shadow:none }
@media (prefers-reduced-motion: reduce){ .dc-soir-go:active{ transform:none } }
/* Un seul message sur le placard à finir (charte, principe 6). La carte du soir dit quoi
   cuisiner avec : le geste « Finir le placard » et « … de placard à sauver » se retirent.
   Sans elle, le geste (qui propose une recette) passe avant le montant à sauver. */
#weekExtras:has(#tonightStockBanner) :is(#hsPlacard, #gsCarte[data-geste="placard"]),
#weekExtras:has(#gsCarte[data-geste="placard"]) #hsPlacard{ display:none }

/* ---------- 19. Rayons rangés à la demande (25/10/2026) ---------- */
#view-courses:not(.ranger-rayons) .rayon-reorder{ display:none }
.ranger-rayons-barre{ position:sticky; top:72px; z-index:6; display:flex; align-items:center; gap:var(--esp-3); margin:0 0 var(--esp-5); padding:10px 10px 10px 16px; border:var(--bw, 2px) solid var(--ink); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-hard); font-size:.92rem; line-height:1.4; color:var(--ink) }
.ranger-rayons-barre > span{ flex:1 1 auto; min-width:0 }
.ranger-rayons-barre .btn{ flex:0 0 auto }
/* « Déjà chez toi » : une feuille, comme la carte de progression au-dessus (le vert pâle
   n'est pas un rôle de la charte ; la coche verte suffit à dire « c'est là »). */
.have-section{ background:var(--surface-2) }
.have-head{ color:var(--ink) }
/* Le total estimé du Budget est un chiffre : une feuille sable, comme « Il reste N articles ». */
.tdee-hero{ background:var(--surface-2) }
.tdee-hero .th-lab{ color:var(--ink-2) }

/* ---------- 20. Carte de repas du jour centrée (25/10/2026) ----------
   Paul : « la carte du déjeuner n'est pas centrée ». L'illustration couvrait six rangées de
   la grille (1 / span 6) ; avec deux lignes de texte, les quatre rangées vides repoussaient le
   nom vers le haut (16 px d'air au-dessus, 36 px dessous). Elle est posée à gauche, centrée
   sur la hauteur, et le texte se centre dans la carte quel que soit son nombre de lignes. */
.day-view .slot.filled{ grid-template-columns:minmax(0,1fr); align-content:center; min-height:82px; padding-left:82px }
.day-view .slot.filled > *{ grid-column:1 }
/* grid-area:auto : placée dans la grille, une enfant absolue se repère sur sa case et non sur la carte. */
.day-view .slot.filled > .slot-emoji{ position:absolute; left:18px; top:50%; transform:translateY(-50%); grid-area:auto }

/* ---------- 21. « Choisir une recette » : une ligne par recette (25/10/2026) ----------
   Comme « Ce soir, avec ce que j'ai » : une ligne est une feuille (sable, sans trait), le plat
   et son nom à gauche, ce qui aide à choisir en petit dessous, « + » à droite en action
   secondaire (crème, trait encre). Plus de carte à socle d'encre pour chaque recette, plus de
   pastille or (l'or est Premium) ni de vert pâle au survol. */
.sel-results{ grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:var(--esp-2) }
.sel-card, .sel-card:hover{ display:flex; flex-direction:row; align-items:center; gap:var(--esp-2); padding:4px 8px 4px 4px; border:0; border-radius:16px; background:var(--surface-2); box-shadow:none; transform:none }
.sel-card::after{ display:none }
.sel-card:active{ transform:none }
.sel-card-fiche{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; min-height:64px; padding:6px 4px 6px 6px; background:none; border:0; border-radius:12px; font:inherit; color:inherit; text-align:left; cursor:pointer }
.sel-card-fiche:active{ transform:scale(.98) }
.sel-card .se{ flex:0 0 36px; text-align:center; font-size:1.8rem; line-height:1 }
.sel-card-t{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.sel-card .sn{ font-size:.95rem; font-weight:700; line-height:1.3; color:var(--ink) }
.sel-card .sm{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; margin-top:0; font-size:.82rem; line-height:1.35; color:var(--ink-2) }
.sel-card .sm .ic{ width:14px; height:14px; vertical-align:-2px }
.sel-card .sel-reco, .sel-card .sel-nouveau{ position:static; max-width:none; padding:0; border:0; border-radius:0; background:none; color:var(--ink); font-size:inherit; font-weight:700; letter-spacing:0 }
.sel-card .sel-vote{ display:inline-flex; color:var(--sage-text) }
.sel-card .sel-card-quickadd{ position:static; flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; padding:0; border:var(--bw, 2px) solid var(--ink); border-radius:14px; background:var(--surface); color:var(--ink); box-shadow:2px 2px 0 var(--ink); font-size:1rem; transform:none }
.sel-card .sel-card-quickadd:hover{ background:var(--surface); color:var(--ink); transform:none; box-shadow:2px 2px 0 var(--ink) }
.sel-card .sel-card-quickadd:active{ transform:translate(2px,2px); box-shadow:none }
.sel-card .sel-card-quickadd .ic{ width:20px; height:20px }
@media (hover:hover){ .sel-card:hover .sel-card-fiche{ background:color-mix(in srgb, var(--surface) 55%, transparent) } }
@media (prefers-reduced-motion: reduce){ .sel-card-fiche:active, .sel-card .sel-card-quickadd:active{ transform:none } }

/* ---------- 22. Contrôle de la charte, toute l'app (25/10/2026) ----------
   Le vert doux ne dit qu'une chose : ce qui est choisi. Ce qui ne l'est pas (une info, un
   aperçu, un avatar, une étiquette) passe en sable ; le vert ne fait jamais de contour. */
.ws-day.has-diner .ws-n{ border-color:var(--ink); box-shadow:0 3px 0 var(--ink) }
.di-placard, .modal-body > .di-placard{ background:var(--surface-2) }
.qn-kicker{ background:var(--surface-2); color:var(--ink-2) }
.import-need-account{ background:var(--surface-2) }
.ag-apercu{ background:var(--surface-2); color:var(--ink-2) }
.pf-avatar{ background:var(--surface-2); color:var(--ink) }
/* Fiche recette : « En savoir plus » en feuilles (sans filet beige, le troisième style que la
   charte écarte) ; le bouton d'échange d'un ingrédient est une commande sable, il ne devient
   vert qu'ouvert (choisi). Le rouge est réservé à la péremption et à la suppression : un
   équipement qui manque ou un fast-food se disent en pointillé. */
.detail-benefits li{ border:0 }
.di-sub-btn{ background:var(--surface-2); color:var(--ink-2) }
/* Les étiquettes : une seule allure, sable et encre (avant : vert pâle par défaut, corail pour le
   régime, orange pour la canicule, bleu pour la convalescence, hors palette). « Nouveau » reste
   visible en encre pleine : les fournées se montrent (Paul, 22/10/2026). Le prix d'une carte
   s'écrit à l'encre ; le corail est à la cocotte et au dîner. */
html:root .tag, html:root .tag.diet, html:root .tag.canicule, html:root .tag.malade, html:root .tag.tag-petit-budget{ background:var(--surface-2); color:var(--ink) }
html:root .tag.nouveau{ background:var(--ink); color:var(--surface) }
.rcard-price{ color:var(--ink) }
html:root .tag.junk{ background:transparent; color:var(--ink-2); border:1.5px dashed var(--border-2) }
/* « Profils / Cuisine » est une bascule comme « Liste / Placard » : le choix se pose en crème
   (trait encre, ombre nette), pas en vert plein. Dans le menu d'un repas, « Mode cuisine » est la
   seule ligne pleine : le « + » d'un ingrédient en plus passe en commande secondaire. */
.profil-tab-seg{ border-color:var(--border-2) }
.profil-tab-seg button.on{ background:var(--surface); color:var(--ink); border:var(--bw, 2px) solid var(--ink); box-shadow:2px 2px 0 var(--ink) }
.extra-add-btn, .extra-add-btn:hover{ background:var(--surface); color:var(--ink); border:var(--bw, 2px) solid var(--ink); box-shadow:2px 2px 0 var(--ink) }
/* Petites tuiles et pastilles qui n'étaient pas des choix : sable et encre (icônes des lignes de
   réglage, rond des produits du placard, « De saison » d'un article, « Auto » des valeurs
   nutritionnelles). Le carnet garde ses couleurs : c'est la page des récompenses. */
.pf-ico.is-trait{ background:var(--surface-2); color:var(--ink) }
.stock-pill .sp-em{ background:var(--surface-2) }
html .si-state.saison{ background:var(--surface-2); color:var(--ink-2) }   /* html : passe devant le style injecté par saisons.js */
.nutri-auto-badge.is-auto{ background:var(--surface-2); color:var(--ink-2) }

/* 26/10/2026 (retour testeur) : la fiche ouverte depuis un repas de la semaine dit lequel. */
.detail-creneau{ display:flex; align-items:center; gap:8px; width:fit-content; max-width:100%; margin:0 0 14px; padding:8px 14px;
  border-radius:999px; background:var(--sage-soft); color:var(--sage-text); font-weight:700; font-size:.9rem; line-height:1.3; margin-left:auto; margin-right:auto }
.detail-creneau .ic{ width:18px; height:18px; flex:0 0 auto }

/* 26/10/2026 (retour testeur) : les repas de la semaine qui ne vont plus avec le profil. */
.incompat-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.incompat-liste li{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:16px; background:var(--surface-2) }
.incompat-em{ font-size:1.7rem; line-height:1; flex:0 0 auto }
.incompat-t{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.incompat-t small{ font-size:.8rem; font-weight:700; color:var(--muted) }
.incompat-t b{ font-size:.98rem; line-height:1.3 }
.incompat-t em{ font-style:normal; font-size:.86rem; font-weight:600; color:var(--terra-text) }