/* Le Tiroir — l'appli de poche (lot 2 de outils/TIROIR.md).
 *
 * Pensée pour une seule main, debout dans une cuisine ou au rayon d'un
 * magasin : cibles ≥ 48 px, deux onglets en bas sous le pouce, aucun indice
 * porté par le seul survol — sur un téléphone, le survol n'existe pas.
 *
 * La palette est celle du Cairn, à la variable près. Elle est définie ICI,
 * dans le fichier qui s'en sert : un `var(--x)` inconnu ne vaut pas « rien »,
 * il rend la propriété invalide, donc TRANSPARENTE — et rien ne le signale.
 * C'est ce qui a rendu invisibles un panneau du Cairn et des onglets de
 * l'Admin (cf. outils/tests/couleurs-definies.test.js). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0d0f1a;
  --surface:   #181b2e;
  --surface2:  #1f2340;
  --border:    #2a2f52;
  --accent:    #f59e0b;
  --accent-lo: rgba(245,158,11,.12);
  --green:     #4ade80;
  --green-lo:  rgba(74,222,128,.12);
  --red:       #f87171;
  --red-lo:    rgba(248,113,113,.12);
  --text:      #e2e8f0;
  --muted:     #64748b;
  --muted2:    #94a3b8;
  --radius:    10px;
  --radius-sm: 6px;
  /* La hauteur de la barre d'onglets, réservée en bas du corps : sans elle, la
     dernière ligne du tiroir passe SOUS le pouce et ne se lit jamais. */
  --barre:     72px;
}

@media (prefers-color-scheme: light) { :root:not([data-theme]) {
  --bg:        #f1f5f9;
  --surface:   #ffffff;
  --surface2:  #f8fafc;
  --border:    #e2e8f0;
  --text:      #0f172a;
  --muted:     #94a3b8;
  --muted2:    #64748b;
}}
:root[data-theme="light"] {
  --bg:        #f1f5f9;
  --surface:   #ffffff;
  --surface2:  #f8fafc;
  --border:    #e2e8f0;
  --text:      #0f172a;
  --muted:     #94a3b8;
  --muted2:    #64748b;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  font-size: 16px;          /* 16 px : en dessous, iOS zoome à chaque champ */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* `hidden` doit gagner, toujours. Une règle de classe qui pose `display: flex`
   bat l'attribut (qui ne vaut que `display: none` dans la feuille du
   navigateur, à spécificité nulle) — et c'est ainsi que la feuille de ressenti
   s'ouvrait toute seule PAR-DESSUS l'écran de connexion, au premier
   chargement. Vu à l'essai, invisible à la lecture. */
[hidden] { display: none !important; }

.ecran { display: none; }
.ecran.active { display: block; }

/* ── CONNEXION ─────────────────────────────── */
.carte-connexion {
  max-width: 420px;
  margin: 0 auto;
  padding: 40px 20px calc(40px + env(safe-area-inset-bottom));
  text-align: center;
}
.logo-connexion { width: 76px; height: 76px; border-radius: 18px; }
.carte-connexion h1 { font-size: 27px; margin: 14px 0 4px; }
.sous-titre { color: var(--muted2); font-size: 14px; margin-bottom: 26px; }
.champ { display: block; text-align: left; margin-bottom: 14px; }
.champ span {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--muted2); margin-bottom: 6px;
}
.champ input {
  width: 100%; min-height: 52px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; font-size: 16px; font-family: inherit;
}
.champ input:focus { outline: none; border-color: var(--accent); }
.btn-principal {
  width: 100%; min-height: 52px;
  background: var(--accent); color: #1b1b1f;
  border: none; border-radius: var(--radius);
  font-size: 17px; font-weight: 800; font-family: inherit;
  cursor: pointer; margin-top: 8px;
}
.btn-principal[disabled] { opacity: .55; }
.erreur { color: var(--red); font-size: 14px; min-height: 20px; margin-top: 10px; }
.note-compte { color: var(--muted); font-size: 13.5px; margin-top: 22px; line-height: 1.7; }
.note-compte a { color: var(--accent); text-decoration: underline; }

/* ── ENTÊTE ────────────────────────────────── */
.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
/* L'entête ET les deux tiroirs collent ENSEMBLE. Deux blocs collants qui se
   disputeraient `top: 0` se chevaucheraient au défilement, et le second
   passerait sous le premier. */
.haut { position: sticky; top: 0; z-index: 20; }
/* Le titre et le nom, en UNE colonne : voir le commentaire de l'entête dans
   armoire.html. C'est ce bloc-ci qui rétrécit quand la place manque — un nom
   long se coupe, le bouton de retour ne bouge pas. */
.entete-qui { display: flex; flex-direction: column; min-width: 0; }
.entete-titre { font-size: 17px; font-weight: 800; white-space: nowrap; line-height: 1.2; }
.btn-sortir {
  min-height: 48px; padding: 8px 14px;   /* comme tout le reste : un doigt, pas un curseur */
  white-space: nowrap; flex: 0 0 auto;   /* jamais rétréci par ses voisins */
  background: var(--surface2); color: var(--muted2);
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 13.5px; font-family: inherit; cursor: pointer;
}

/* ⚠️ « RETOUR AU COUREUR » EN ENTIER, QUITTE À TENIR SUR DEUX LIGNES (Pierre,
   05/09). Le libellé fait 158 px sur une ligne et l'entête d'un téléphone n'en
   a pas autant à donner : plutôt que de raccourcir le mot, on le laisse se
   couper — « ← Retour » au-dessus, « au coureur » en dessous. C'est
   `max-width` qui décide OÙ ça se coupe ; laisser le navigateur choisir
   donnerait une coupure différente d'un téléphone à l'autre.
   Au-delà de 430 px il n'y a plus de raison de couper, et la ligne se
   rétablit d'elle-même. La cible reste haute de 48 px : c'est un doigt qui
   vise, pas un curseur. */
.btn-retour {
  white-space: normal; text-align: center; line-height: 1.2;
  max-width: 106px; padding: 6px 12px;
}
@media (min-width: 430px) { .btn-retour { max-width: none; padding: 8px 14px; } }

/* ── BANDEAU DE FILE ───────────────────────── */
/* Discret, mais toujours visible tant que la file n'est pas vide : c'est la
   seule chose qui distingue « c'est enregistré » de « ça attend le réseau ». */
/* ⚠️ `cursor: pointer` N'EST PAS COSMÉTIQUE (T25) : sur iPhone, une <div>
   qui ne le porte pas ne reçoit plus le toucher. Le bandeau se touche pour
   forcer l'envoi de la file — sans cette ligne, le geste n'existerait que sur
   un ordinateur. La leçon vient de l'appli coureur, 19/09. */
.bandeau-file {
  background: var(--accent-lo); color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding: 9px 16px; font-size: 13.5px; font-weight: 600;
  position: sticky; top: 0; z-index: 15;
  cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,.08);
}

/* L'attente du stock (T22) : dire qu'on cherche, plutôt qu'afficher des zéros
   qui font croire à un placard vide. */
.tiroir-attente {
  padding: 28px 16px; text-align: center;
  color: var(--muted); font-size: 14px; line-height: 1.5;
}

.corps { padding: 12px 12px calc(var(--barre) + env(safe-area-inset-bottom) + 12px); }
body.sans-barre .corps { padding-bottom: calc(env(safe-area-inset-bottom) + 16px); }
.vue { display: none; }
.vue.active { display: block; }

/* ── LE TIROIR ─────────────────────────────── */
.famille { margin-bottom: 20px; }
.famille-titre {
  font-size: 13px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  padding: 4px 4px 8px;
}
.ligne {
  display: flex; align-items: stretch; gap: 2px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 8px; overflow: hidden;
}
.ligne.seuil { border-color: var(--accent); background: var(--accent-lo); }
.ligne.vide { opacity: .55; }
/* Le retour de la tape : net et bref. Une classe posée puis retirée par le
   script — pas une transition au survol, qui n'existe pas sous un doigt. */
.ligne.prise { border-color: var(--green); background: var(--green-lo); }

.ligne-tape {
  flex: 1 1 auto; min-width: 0; min-height: 68px;
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; color: inherit;
  padding: 10px 4px 10px 10px; font-family: inherit; font-size: 16px;
  text-align: left; cursor: pointer;
  touch-action: manipulation;         /* pas de double-tap qui zoome */
  -webkit-user-select: none; user-select: none;
}
.ligne-icone { flex: 0 0 26px; height: 26px; line-height: 0; }
.ligne-nom { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.35; }
.ligne-nom b { display: block; font-size: 13px; color: var(--muted2); font-weight: 700; }
/* Le chiffre et son unité, entre les deux pas. */
.ligne-compte {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-width: 50px; padding: 0 2px;
}
.ligne-stock {
  font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
}
.ligne.vide .ligne-stock { color: var(--muted); }
.ligne-unite { font-size: 11px; color: var(--muted); line-height: 1.2; text-align: center; }

/* Le pas à pas (Pierre, 22/08). Debout dans une cuisine, avec un doigt, on ne
   vise pas une case de 20 px : 52 px de large, toute la hauteur de la ligne,
   et un signe qu'on lit sans lunettes.
   Le « − » se grise à zéro — il n'y a plus rien à prendre — mais la ligne
   reste : elle n'a pas disparu du tiroir, elle est vide. */
.pas {
  /* `width` EN PLUS du `flex` : Safari iPhone mesure un compteur (− 0 +) sur la
     largeur des SIGNES, pas sur le flex des boutons. Il le croyait étroit, le
     nom prenait la place, et le « + » sortait de l'écran (retour de course,
     capture de Pierre du 23/09). */
  flex: 0 0 48px; width: 48px; min-height: 68px;
  background: var(--surface2); border: none; border-left: 1px solid var(--border);
  color: var(--text); font-size: 30px; font-weight: 300; line-height: 1;
  font-family: inherit; cursor: pointer; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.pas:active { background: var(--accent-lo); color: var(--accent); }
.pas:disabled { opacity: .3; cursor: not-allowed; }
.pas-moins { border-left: 1px solid var(--border); }
.pas-plus  { border-left: none; }
/* Le « ⋯ » ouvre la feuille (quantité, cadre, ressenti). L'appui LONG sur le
   nom l'ouvre aussi — le bouton reste parce qu'un geste caché ne se découvre
   pas. Il est étroit : c'est le moins fréquent des quatre. */
.ligne-plus {
  flex: 0 0 38px; min-height: 68px;
  background: var(--surface2); border: none; border-left: 1px solid var(--border);
  color: var(--muted2); font-size: 20px; font-family: inherit; cursor: pointer;
  touch-action: manipulation;
}

.vide-etat {
  text-align: center; color: var(--muted2);
  padding: 48px 20px; font-size: 15px; line-height: 1.7;
}
.vide-etat .emoji { display: block; font-size: 40px; margin-bottom: 12px; }

/* ── RÉASSORT ──────────────────────────────── */
.intro { font-size: 17px; font-weight: 800; padding: 4px 4px 14px; }
.r-ligne {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; margin-bottom: 10px;
}
.r-ligne.rupture { border-color: var(--red); background: var(--red-lo); }
.r-nom { font-size: 15px; line-height: 1.35; margin-bottom: 4px; }
.r-nom b { color: var(--muted2); font-size: 13px; font-weight: 700; }
.r-etat { font-size: 12.5px; color: var(--muted2); margin-bottom: 10px; }
.r-ligne.rupture .r-etat { color: var(--red); }
.r-geste { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.r-champ {
  width: 88px; min-height: 48px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 18px; font-weight: 700; font-family: inherit;
  text-align: center;
}
.r-champ:focus { outline: none; border-color: var(--accent); }
.r-unite { font-size: 13px; color: var(--muted); flex: 0 0 auto; }
.r-vite {
  min-width: 52px; min-height: 48px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
  touch-action: manipulation;
}
.limite {
  color: var(--muted); font-size: 12.5px; line-height: 1.6;
  padding: 18px 4px 0; border-top: 1px solid var(--border); margin-top: 18px;
}

/* ── BANDE « ANNULER » ─────────────────────── */
/* Elle flotte au-dessus des onglets pendant ~6 s. Le bouton n'apparaît que si
   la conso est encore dans la file : passée au serveur, elle ne se reprend
   plus (aucune action serveur n'efface une conso). */
.bandeau-annuler {
  position: fixed; left: 10px; right: 10px;
  bottom: calc(var(--barre) + env(safe-area-inset-bottom) + 10px);
  z-index: 40;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
  font-size: 14px;
}
.bandeau-annuler .b-texte { flex: 1 1 auto; min-width: 0; }
.bandeau-annuler button {
  flex: 0 0 auto; min-height: 44px; padding: 8px 14px;
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.bandeau-annuler button.b-second { color: var(--muted2); border-color: var(--border); }

/* ── ONGLETS DU POUCE ──────────────────────── */
.onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex;
  background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.onglet {
  flex: 1 1 0; min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: none; border-top: 3px solid transparent;
  color: var(--muted); font-size: 22px; font-family: inherit; cursor: pointer;
  touch-action: manipulation;
}
.onglet span { font-size: 12px; font-weight: 700; }
.onglet.active { color: var(--accent); border-top-color: var(--accent); }

/* ── LA FEUILLE ────────────────────────────── */
/* ⚠️ `cursor: pointer` n'est pas décoratif : sans lui, l'iPhone ignore ce toucher (voir actions.js). */
.feuille-fond {
  cursor: pointer;
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end;
}
.feuille {
  cursor: auto;   /* seul le fond ferme : la main n'a rien à faire ici */
  width: 100%; max-height: 88dvh; overflow-y: auto;
  background: var(--surface); border-top: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
}
.feuille h2 { font-size: 17px; margin-bottom: 2px; }
.feuille .f-marque { font-size: 13px; color: var(--muted2); margin-bottom: 16px; }
.f-titre {
  font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 8px;
}
.f-rang { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille {
  min-height: 48px; min-width: 48px; padding: 10px 14px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 14.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  touch-action: manipulation;
}
.pastille.on { background: var(--accent-lo); border-color: var(--accent); color: var(--accent); }
.f-note {
  width: 100%; min-height: 72px; resize: vertical;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 16px; font-family: inherit;
}
.f-note:focus { outline: none; border-color: var(--accent); }
.f-prive { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.f-pied { display: flex; gap: 10px; margin-top: 22px; }
.f-pied button { flex: 1 1 0; min-height: 52px; border-radius: var(--radius);
  font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer; }
.f-annuler { background: var(--surface2); color: var(--muted2); border: 1px solid var(--border); }
.f-valider { background: var(--accent); color: #1b1b1f; border: none; }

/* ── LE MOT QUI PASSE ──────────────────────── */
.mot {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(var(--barre) + env(safe-area-inset-bottom) + 10px);
  z-index: 70;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 12px 14px;
  font-size: 14px; line-height: 1.5;
}
.mot.grave { border-left-color: var(--red); }

/* Le numéro de version, sous le titre de la connexion : c'est le seul écran
   où il ne vole pas de place au pouce, et c'est le premier qu'on regarde
   quand on demande « tu es sur quelle version ? ». */
.auth-version {
  display: inline-block; margin-top: 10px; padding: 3px 11px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface2); color: var(--muted2);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
}

/* ── PROGRAMME BÊTA ────────────────────────────────────────────
   La bande « version d'essai », posée par `poserBandeauBeta()` (app.js) sur
   les seules adresses beta.*. Elle vit DANS LE FLUX, en premier enfant du
   <body> : elle pousse le contenu vers le bas au lieu de le recouvrir, et ne
   prend rien en bas d'écran — là se tiennent les deux onglets, qui sont toute
   la navigation de cette appli.

   Discrète mais impossible à manquer : le fond reste celui de l'appli, c'est
   le liseré d'accent qui accroche l'œil. Une bande criarde finit par ne plus
   se voir. */
.bandeau-beta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: calc(9px + env(safe-area-inset-top)) 14px 9px;
  background: var(--surface);
  border-bottom: 2px solid var(--accent);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.bandeau-beta-lien {
  color: var(--accent);
  text-decoration: underline;
  white-space: nowrap;
}

/* L'entête colle en haut (`position: sticky; top: 0`) : sous la bande, elle
   reprend sa place dès qu'on fait défiler, et n'a rien à recouvrir puisque la
   bande, elle, défile avec la page. La marge d'encoche, en revanche, revient à
   la bande — c'est elle qui est désormais tout en haut. */
:root.beta .entete { padding-top: 12px; }

/* Le chemin vers l'inscription, sous le formulaire de connexion. */
.beta-profil {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.beta-profil a { color: var(--accent); text-decoration: underline; }

/* Six chiffres qu'on tape debout dans une cuisine : gros, espacés, alignés.
   Le PIN se dicte au téléphone et se relit d'un coup d'œil. */
.champ-pin { font-family: ui-monospace, Menlo, monospace; font-size: 26px;
  letter-spacing: .34em; text-align: center; font-variant-numeric: tabular-nums; }
/* À qui est ce tiroir. Écrit en toutes lettres à l'entrée : six chiffres ne
   disent rien, et se tromper de PIN doit se voir tout de suite. */
/* ⚠️ C'EST LUI QUI CÈDE QUAND L'ENTÊTE EST TROP ÉTROITE. Cinq choses s'y
   partagent 375 px : le titre, ce nom, la version, le 🐞 et le retour. Sans
   `min-width: 0`, une boîte de flex refuse de descendre sous la largeur de son
   texte — le nom poussait alors le bouton de retour hors de l'écran. Il se
   coupe donc en « Pierre Mi… » plutôt que d'emporter la sortie avec lui. */
.entete-coureur {
  font-size: 12px; color: var(--muted); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Mes produits (lot 5) ─────────────────────────────────────
   LA MÊME PAGE que « Fiches produits » dans Le Cairn : ces règles en sont la
   copie exacte. Les deux palettes portent les mêmes noms de variables, elles
   s'y posent donc telles quelles. Ce qui manque, c'est ce que l'appli de poche
   ne fait pas — modifier une fiche.
   ⚠️ Si le catalogue du Cairn change d'allure, ces règles doivent suivre :
   un test compare les deux blocs et tombe s'ils divergent. */
.prod-toolbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.prod-search { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; padding: 10px 12px; font-family: inherit; }
.prod-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.prod-filter-row select { flex: 1; min-width: 120px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; padding: 8px 10px; font-family: inherit; }
.prod-fav-toggle { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted2); font-size: 16px; padding: 8px 12px; cursor: pointer; }
.prod-fav-toggle.on { background: rgba(255,193,7,.15); border-color: #ffc107; color: #ffc107; }
.prod-count { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.prod-grid { display: flex; flex-direction: column; gap: 8px; }
.prod-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; }
.prod-card .pc-photo { position: relative; width: 46px; height: 46px; border-radius: 8px; background: #0b0b0d; flex-shrink: 0; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.prod-card .pc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prod-card .pc-main { flex: 1; min-width: 0; }
.pc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-name { font-weight: 700; font-size: 14px; }
.pc-brand { font-size: 12px; color: var(--muted2); }
.pc-type { font-size: 10px; font-weight: 700; color: var(--accent); background: rgba(255,122,24,.12); border-radius: 20px; padding: 2px 8px; white-space: nowrap; }
/* Même étiquette verte que dans admin */
.pc-cert {
  font-size: 10px; font-weight: 700; color: var(--green);
  background: var(--green-lo); border-radius: 20px; padding: 2px 8px;
  white-space: nowrap;
}
.pc-nutri { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: 11.5px; color: var(--muted2); }
.pc-nutri b { color: var(--text); font-weight: 600; }
.pc-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }
.pc-fav { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1; }
.pc-fav.on { color: #ffc107; }

/* iPhone : sous 16 px, Safari zoome sur le champ à la mise au point et ne
   revient jamais en arrière. */
.prod-search, .prod-filter-row select { font-size: 16px; }

/* Le champ du réassort porte un compte ABSOLU, et rien ne le disait : une
   grande case avec un chiffre dedans se lit comme un affichage. Le liseré au
   focus et la phrase d'aide le rendent saisissable à l'œil. */
.r-aide { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; margin-top: 4px; }
.r-champ:focus { outline: none; border-color: var(--accent); background: var(--accent-lo); }

/* ══════════ LE TIROIR À MATOS (lot 6) ══════════
   L'écran réutilise `.ligne`, `.famille` et `.pas` du tiroir à ravito : deux
   tiroirs derrière une même porte doivent se manier pareil. Ce qui suit ne
   couvre que ce qui n'existait pas — la barre d'ajout, le total, et les deux
   champs côte à côte de la fiche. */

.matos-barre {
  display: flex; gap: 8px; align-items: stretch;
  padding: 0 4px 10px;
}
.matos-barre .prod-search { flex: 1 1 auto; }
.btn-ajout-matos {
  flex: 0 0 auto; min-height: 44px; padding: 0 16px;
  background: var(--accent); color: #1b1b1f; border: none;
  border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 800; font-family: inherit;
  cursor: pointer; touch-action: manipulation; white-space: nowrap;
}
.matos-total {
  padding: 0 6px 12px; font-size: 13px; font-weight: 700;
  color: var(--muted2); font-variant-numeric: tabular-nums;
}

/* Le poids sous la désignation, dans la même veine que la marque d'un produit. */
.ligne-poids { font-variant-numeric: tabular-nums; }

/* Poids et nombre tiennent sur une ligne : ils se saisissent ensemble. */
.matos-duo { display: flex; gap: 10px; }
.matos-duo .champ { flex: 1 1 0; min-width: 0; }

/* La fiche d'un matos est la seule feuille qui puisse détruire quelque chose.
   Le bouton est donc à l'écart des deux autres, et il ne prend pas la place
   d'un bouton d'action : il se contente de ce qu'il lui faut. */
.f-supprimer {
  flex: 0 0 auto !important; padding: 0 16px;
  background: none; color: var(--red);
  border: 1px solid var(--border);
}
/* L'équipe (23/08) : le placard commun, dit en tête du tiroir à ravito */
.placard-commun {
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 13.5px; color: var(--muted2); line-height: 1.45;
}
.placard-commun b { color: var(--text); }

/* L'équipe (23/08) : transmettre du matos à un coéquipier */
.matos-transmettre { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.matos-transmettre .matos-duo { margin-top: 6px; }
.matos-transmettre .matos-duo > * { flex: 1 1 0; min-width: 0; }
.f-transmettre {
  width: 100%; min-height: 48px; margin-top: 10px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.champ select {
  width: 100%; min-height: 52px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; font-size: 16px; font-family: inherit;
}
.champ select:focus { outline: none; border-color: var(--accent); }

/* ── Les icônes de Pierre ──────────────────────
   Les deux tiroirs sont des dessins, pas des emojis : ils portent la même
   main que l'icône de l'application. Hauteur fixe, largeur libre — les
   originaux ne sont pas carrés, et les écraser pour qu'ils le soient
   déformerait les objets qu'ils montrent. */
.entete-icone {
  height: 24px; width: auto; border-radius: 6px;
  vertical-align: -5px; margin-right: 7px;
}

/* ── LES DEUX TIROIRS, EN TÊTE ──────────────────
   Deux gros boutons, pas deux onglets : ouvrir un tiroir précède tout le
   reste, et le geste se fait au pouce, en marchant. Ils collent sous l'entête
   pour rester atteignables quand la liste défile. */
.tiroirs {
  display: flex; gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.tiroir-btn {
  flex: 1 1 0; min-height: 62px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted2); font-family: inherit; font-size: 17px; font-weight: 800;
  cursor: pointer; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  transition: border-color .12s, color .12s, background .12s;
}
.tiroir-btn img { height: 38px; width: auto; display: block; border-radius: 7px; }
.tiroir-btn.active {
  background: var(--accent-lo); border-color: var(--accent); color: var(--text);
}

/* La version et le signalement, dans l'entête. Ils vivaient sur l'écran de
   CONNEXION seulement : invisibles dès qu'on était entré — et c'est une fois
   entré qu'on trouve un problème à signaler. */
.entete-version {
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; flex: 0 0 auto;
}
.btn-sortir.btn-bug { padding: 8px 11px; font-size: 15px; flex: 0 0 auto; }

/* ── LES NOTES DE VERSION ───────────────────────
   Le badge de l'entête les ouvre. `margin: auto` est OBLIGATOIRE : le reset de
   la page retire à <dialog> ce qui le centre, et la fenêtre se colle dans le
   coin haut gauche. */
#changelogDialog {
  border: none; border-radius: 18px; background: var(--surface); color: var(--text);
  padding: 0; width: 90%; max-width: 420px; margin: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
}
#changelogDialog::backdrop { background: rgba(0,0,0,.55); }
.changelog-content { padding: 24px 20px 20px; }
.changelog-title { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.changelog-sous { font-size: 12px; color: var(--muted); margin-bottom: 16px; line-height: 1.5; }
/* Sans défilement propre, la fenêtre déborde de l'écran d'un téléphone et le
   bouton Fermer devient inatteignable — on ne peut plus revenir en arrière. */
.changelog-list {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 60vh; overflow-y: auto; overscroll-behavior: contain;
}
/* Une <li> en display:flex ferait de CHAQUE <b> un élément de flex : les notes
   se briseraient en colonnes de deux mots. Le texte reste un seul flux. */
.changelog-list li { font-size: 13px; line-height: 1.5; text-align: left; }
.changelog-badge {
  font-size: 10px; font-weight: 700; color: var(--accent);
  background: var(--accent-lo); border-radius: 20px; padding: 2px 8px;
  white-space: nowrap; display: inline-block; margin-right: 6px;
}
.changelog-close {
  width: 100%; min-height: 48px; border: none; border-radius: var(--radius);
  background: var(--surface2); color: var(--text);
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
/* Le numéro de l'entête OUVRE les notes : c'est un bouton, mais il se lit
   comme du texte. */
.entete-version {
  background: none; border: none; padding: 0;
  font-family: inherit; cursor: pointer;
}
.entete-version:hover { color: var(--text); }

/* Sur le corps plutôt que dans le sac (20/09). Une montre pèse, mais pas
   dans le sac — et c'est le poids du sac qu'on prépare. */
.matos-sursoi { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; }
.matos-sursoi input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); }
.matos-sursoi span { font-size: 15px; }

/* Le repère d'un menu passe AVANT le texte (Pierre, 20/09 : « sinon on ne
   comprend pas »). Le chevron natif part à l'extrême droite du champ, loin du
   mot qu'il commande. `appearance:none` est indispensable, sinon il reste en
   plus. Le pourquoi au long : suivi-gestion/styles.css, même règle. */
select,
.champ select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b8b96' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 7px center;
  background-size: 10px 6px;
  padding-left: 23px;
}

/* ── Préparer sa course (20/09) ─────────────────────────────────────
   Une ligne se coche d'un doigt, en tenant le produit de l'autre main : la
   zone cliquable est la LIGNE ENTIÈRE, pas la case. */
.prep-compte { color: var(--muted); font-size: 13px; margin: 2px 0 10px; }
.prep-ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer;
}
.prep-ligne input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--accent); }
.prep-nom { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prep-detail { font-size: 12px; color: var(--muted); }
/* Sorti du placard : la ligne s'efface sans disparaître. La faire disparaître
   ferait douter de ce qu'on a coché, et on recompterait. */
.prep-ligne.fait { opacity: .55; }
.prep-ligne.fait .prep-nom b { text-decoration: line-through; }
/* À moitié sorti : il manque quelque chose, et ça doit se voir tout de suite —
   c'est la seule ligne qui demande encore une décision. */
.prep-ligne.partiel { border-color: #e8a33d; background: rgba(232, 163, 61, .08); }

/* ── Le retour de course (20/09) ────────────────────────────────────
   Trois étapes, un fil en haut pour savoir où l'on en est. On range son sac
   debout dans une cuisine, fatigué : les cibles sont grandes et le chiffre
   se bouge au doigt, jamais au clavier — la règle de L'Armoire. */
.rc-bouton {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; margin-top: 14px; padding: 14px;
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: 10px; color: var(--accent);
  font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.rc-bouton span { font-size: 12px; font-weight: 400; color: var(--muted); }
.rc-bouton.suite, .rc-bouton.valider { background: var(--accent); color: #12121a; border-color: var(--accent); }
.rc-bouton.secondaire { background: transparent; border-color: var(--border); color: var(--muted2); }
.rc-bouton[disabled] { opacity: .6; cursor: default; }
.retour-boutons { display: flex; gap: 10px; }
.retour-boutons .rc-bouton { flex: 1; }

.retour-fil { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.retour-pas {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); font-size: 13px; font-weight: 700;
}
.retour-pas.ici { background: var(--accent); border-color: var(--accent); color: #12121a; }
.retour-pas.fait { border-color: var(--accent); color: var(--accent); }
.retour-fil .lien-clair {
  margin-left: auto; background: none; border: none; color: var(--muted);
  font-size: 13px; font-family: inherit; cursor: pointer; text-decoration: underline;
}

.retour-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
/* Le nom prend CE QUI RESTE, jamais sa largeur d'origine : c'est le compteur
   qui a priorité, sinon le « + » sort de l'écran sur iPhone (23/09). */
.retour-ligne .prep-nom { flex: 1 1 0; }
.retour-compteur { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.retour-compteur b { min-width: 24px; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; }
.retour-avis { display: flex; gap: 6px; flex: 0 0 auto; }
.retour-avis .avis {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: 19px; cursor: pointer; line-height: 1;
}
/* Un avis CHOISI se voit : sans ça, on ne sait plus si on a répondu, et on
   répond deux fois. */
.retour-avis .avis.on { border-color: var(--accent); background: rgba(232,163,61,.18); }