/* MaTribu — feuille de style unique.
   Palette chaleureuse : creme + sauge + terracotta, mode sombre inclus. */

:root{
  --bg:#F2EFE6;
  --bg-flou:rgba(242,239,230,.80);
  --surface:#FCFAF4;
  --surface-flou:rgba(252,250,244,.84);
  --surface-2:#F5F1E6;
  --ink:#2C2A24;
  --ink-muted:#736E62;
  --border:#E2DCCB;
  --accent:#4E7A6A;
  --accent-strong:#3C6154;
  --accent-soft:#E4EDE8;
  --accent-ink:#FFFFFF;
  --warm:#C4703F;
  --warm-soft:#F7E7DB;
  --gold:#9C7314;
  --gold-soft:#F8EFD5;
  --danger:#B14A3E;
  --danger-soft:#F8E4E0;
  --ok:#3F7A55;
  --radius:16px;
  --radius-sm:11px;
  --shadow:0 1px 2px rgba(44,42,36,.06), 0 6px 18px rgba(44,42,36,.07);
  --shadow-lg:0 4px 12px rgba(44,42,36,.10), 0 18px 40px rgba(44,42,36,.14);
  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#151917;
    --bg-flou:rgba(21,25,23,.80);
    --surface:#1E2421;
    --surface-flou:rgba(30,36,33,.84);
    --surface-2:#262D29;
    --ink:#E9E7DD;
    --ink-muted:#9AA39A;
    --border:#333B36;
    --accent:#7FB39C;
    --accent-strong:#9BCAB5;
    --accent-soft:#25332D;
    --accent-ink:#10201A;
    --warm:#DE9061;
    --warm-soft:#37271E;
    --gold:#D9AE4A;
    --gold-soft:#332D1B;
    --danger:#E08571;
    --danger-soft:#3A241F;
    --ok:#6FBF8B;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.4);
    --shadow-lg:0 6px 16px rgba(0,0,0,.45), 0 20px 44px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#151917; --bg-flou:rgba(21,25,23,.80); --surface:#1E2421;
  --surface-flou:rgba(30,36,33,.84); --surface-2:#262D29; --ink:#E9E7DD; --ink-muted:#9AA39A;
  --border:#333B36; --accent:#7FB39C; --accent-strong:#9BCAB5; --accent-soft:#25332D;
  --accent-ink:#10201A; --warm:#DE9061; --warm-soft:#37271E; --gold:#D9AE4A;
  --gold-soft:#332D1B; --danger:#E08571; --danger-soft:#3A241F; --ok:#6FBF8B;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.4);
  --shadow-lg:0 6px 16px rgba(0,0,0,.45), 0 20px 44px rgba(0,0,0,.5);
}

/* ---------- Palettes ----------
   La palette change l'identité colorée ; le mode clair/sombre continue de
   fonctionner pour chacune. Trois blocs par palette, comme pour le mode
   sombre de base : les valeurs claires, les valeurs sombres du système, et
   les valeurs sombres choisies à la main. Choisie par appareil. */

/* 🫐 Myrtille */
:root[data-palette="myrtille"]{
  --bg:#EFF0F7; --bg-flou:rgba(239,240,247,.80); --surface:#FAFAFE;
  --surface-flou:rgba(250,250,254,.84); --surface-2:#F0F1F9; --border:#DDDEEC;
  --accent:#4C5BA8; --accent-strong:#3B4788; --accent-soft:#E5E8F6; --accent-ink:#FFFFFF;
  --warm:#9B5FA8; --warm-soft:#F3E6F5; --gold:#8A6F1E; --gold-soft:#F6EFD8;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="myrtille"]:not([data-theme="light"]){
    --bg:#14161F; --bg-flou:rgba(20,22,31,.80); --surface:#1C1F2B;
    --surface-flou:rgba(28,31,43,.84); --surface-2:#242838; --border:#333850;
    --accent:#93A5E8; --accent-strong:#B3C0F2; --accent-soft:#242A45; --accent-ink:#101425;
    --warm:#C89BD8; --warm-soft:#2C2038; --gold:#D9B45C; --gold-soft:#332B18;
  }
}
:root[data-theme="dark"][data-palette="myrtille"]{
  --bg:#14161F; --bg-flou:rgba(20,22,31,.80); --surface:#1C1F2B;
  --surface-flou:rgba(28,31,43,.84); --surface-2:#242838; --border:#333850;
  --accent:#93A5E8; --accent-strong:#B3C0F2; --accent-soft:#242A45; --accent-ink:#101425;
  --warm:#C89BD8; --warm-soft:#2C2038; --gold:#D9B45C; --gold-soft:#332B18;
}

/* 🌸 Pivoine */
:root[data-palette="pivoine"]{
  --bg:#F7EFF1; --bg-flou:rgba(247,239,241,.80); --surface:#FDF8F9;
  --surface-flou:rgba(253,248,249,.84); --surface-2:#F6ECEF; --border:#EBD9DF;
  --accent:#A84D6E; --accent-strong:#8A3A58; --accent-soft:#F6E4EB; --accent-ink:#FFFFFF;
  --warm:#C4703F; --warm-soft:#F7E7DB; --gold:#9C7314; --gold-soft:#F8EFD5;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="pivoine"]:not([data-theme="light"]){
    --bg:#1A1416; --bg-flou:rgba(26,20,22,.80); --surface:#241B1F;
    --surface-flou:rgba(36,27,31,.84); --surface-2:#2D2227; --border:#3D2F35;
    --accent:#E39BB6; --accent-strong:#F0B9CD; --accent-soft:#38222B; --accent-ink:#1F1014;
    --warm:#DE9061; --warm-soft:#37271E; --gold:#D9AE4A; --gold-soft:#332D1B;
  }
}
:root[data-theme="dark"][data-palette="pivoine"]{
  --bg:#1A1416; --bg-flou:rgba(26,20,22,.80); --surface:#241B1F;
  --surface-flou:rgba(36,27,31,.84); --surface-2:#2D2227; --border:#3D2F35;
  --accent:#E39BB6; --accent-strong:#F0B9CD; --accent-soft:#38222B; --accent-ink:#1F1014;
  --warm:#DE9061; --warm-soft:#37271E; --gold:#D9AE4A; --gold-soft:#332D1B;
}

/* 🌊 Lagon */
:root[data-palette="lagon"]{
  --bg:#EAF4F4; --bg-flou:rgba(234,244,244,.80); --surface:#F8FDFD;
  --surface-flou:rgba(248,253,253,.84); --surface-2:#E6F1F1; --border:#D2E5E5;
  --accent:#1F7A81; --accent-strong:#125E64; --accent-soft:#DCEEEF; --accent-ink:#FFFFFF;
  --warm:#D2694F; --warm-soft:#F9E3DC; --gold:#96741B; --gold-soft:#F7EFD6;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="lagon"]:not([data-theme="light"]){
    --bg:#101A1B; --bg-flou:rgba(16,26,27,.80); --surface:#172426;
    --surface-flou:rgba(23,36,38,.84); --surface-2:#1E2E30; --border:#2B3E40;
    --accent:#63C3C8; --accent-strong:#8ADCE0; --accent-soft:#1B3336; --accent-ink:#08191B;
    --warm:#E8917A; --warm-soft:#35231E; --gold:#D7AE50; --gold-soft:#312B1A;
  }
}
:root[data-theme="dark"][data-palette="lagon"]{
  --bg:#101A1B; --bg-flou:rgba(16,26,27,.80); --surface:#172426;
  --surface-flou:rgba(23,36,38,.84); --surface-2:#1E2E30; --border:#2B3E40;
  --accent:#63C3C8; --accent-strong:#8ADCE0; --accent-soft:#1B3336; --accent-ink:#08191B;
  --warm:#E8917A; --warm-soft:#35231E; --gold:#D7AE50; --gold-soft:#312B1A;
}

/* 🍁 Cannelle */
:root[data-palette="cannelle"]{
  --bg:#F6EFE3; --bg-flou:rgba(246,239,227,.80); --surface:#FDF9F1;
  --surface-flou:rgba(253,249,241,.84); --surface-2:#F3EADC; --border:#E6D8C2;
  --accent:#A8622A; --accent-strong:#8A4E1F; --accent-soft:#F5E6D6; --accent-ink:#FFFFFF;
  --warm:#B5452F; --warm-soft:#F8E1DA; --gold:#93741A; --gold-soft:#F7EFD4;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="cannelle"]:not([data-theme="light"]){
    --bg:#1A1611; --bg-flou:rgba(26,22,17,.80); --surface:#241E17;
    --surface-flou:rgba(36,30,23,.84); --surface-2:#2D261D; --border:#3E3527;
    --accent:#E0A063; --accent-strong:#F0BC86; --accent-soft:#33261A; --accent-ink:#1C1208;
    --warm:#E08A72; --warm-soft:#38241F; --gold:#D9B45C; --gold-soft:#332C19;
  }
}
:root[data-theme="dark"][data-palette="cannelle"]{
  --bg:#1A1611; --bg-flou:rgba(26,22,17,.80); --surface:#241E17;
  --surface-flou:rgba(36,30,23,.84); --surface-2:#2D261D; --border:#3E3527;
  --accent:#E0A063; --accent-strong:#F0BC86; --accent-soft:#33261A; --accent-ink:#1C1208;
  --warm:#E08A72; --warm-soft:#38241F; --gold:#D9B45C; --gold-soft:#332C19;
}

/* 🖤 Ardoise */
:root[data-palette="ardoise"]{
  --bg:#F1F2F3; --bg-flou:rgba(241,242,243,.80); --surface:#FBFBFC;
  --surface-flou:rgba(251,251,252,.84); --surface-2:#ECEEF0; --border:#DCDFE3;
  --accent:#3A4A5A; --accent-strong:#2A3745; --accent-soft:#E6EAEE; --accent-ink:#FFFFFF;
  --warm:#B4562F; --warm-soft:#F6E4DB; --gold:#8A7420; --gold-soft:#F4EFD9;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="ardoise"]:not([data-theme="light"]){
    --bg:#131517; --bg-flou:rgba(19,21,23,.80); --surface:#1B1E21;
    --surface-flou:rgba(27,30,33,.84); --surface-2:#23272B; --border:#333940;
    --accent:#9FB4C8; --accent-strong:#C0D0E0; --accent-soft:#242B33; --accent-ink:#0E1519;
    --warm:#DE8E6C; --warm-soft:#35241D; --gold:#D3AE55; --gold-soft:#302A19;
  }
}
:root[data-theme="dark"][data-palette="ardoise"]{
  --bg:#131517; --bg-flou:rgba(19,21,23,.80); --surface:#1B1E21;
  --surface-flou:rgba(27,30,33,.84); --surface-2:#23272B; --border:#333940;
  --accent:#9FB4C8; --accent-strong:#C0D0E0; --accent-soft:#242B33; --accent-ink:#0E1519;
  --warm:#DE8E6C; --warm-soft:#35241D; --gold:#D3AE55; --gold-soft:#302A19;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}
[hidden]{display:none !important;}

.app{
  max-width:540px;
  margin:0 auto;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* ---------- Barre du haut ---------- */
.topbar{
  display:flex; align-items:center; gap:.6rem;
  padding:calc(.9rem + env(safe-area-inset-top)) 1rem .7rem;
  position:sticky; top:0; z-index:20;
  background:var(--bg-flou);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
}
.avatar{
  width:40px;height:40px;border-radius:13px;border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;flex-shrink:0;
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 2px var(--border);
}
.avatar.sm{width:30px;height:30px;border-radius:10px;font-size:1rem;}
.avatar.xs{width:24px;height:24px;border-radius:8px;font-size:.8rem;}
.topbar-titre{flex:1;min-width:0;text-align:left;background:none;border:none;padding:0;}
.topbar-titre b{display:block;font-family:var(--font-display);font-size:1.1rem;line-height:1.2;}
.topbar-titre span{display:block;font-size:.75rem;color:var(--ink-muted);}
/* L'icône « Quoi de neuf », entre le titre et les points (16/09/2026). */
.topbar-actu{
  position:relative;flex:none;
  width:38px;height:38px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);
  font-size:1.05rem;line-height:1;
}
.pastille-points{
  display:flex;align-items:center;gap:.3rem;
  background:var(--gold-soft);color:var(--gold);
  border:none;
  padding:.45rem .72rem;border-radius:999px;
  font-weight:700;font-size:.9rem;
}

/* ---------- Contenu ---------- */
/* De la place sous le contenu : la barre du bas fait ~88px et le bouton « + »
   flotte par-dessus. Sans cette marge, il cachait la dernière ligne des listes. */
main{flex:1;padding:0 1rem calc(152px + env(safe-area-inset-bottom));}
.vue{display:none;}
.vue.active{display:block;animation:apparait .22s ease;}
@keyframes apparait{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

h2.titre-section{
  font-family:var(--font-display);font-size:1.35rem;margin:.4rem 0 .9rem;font-weight:600;
}
.sous-titre{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin:1.4rem 0 .55rem;
}
.sous-titre h3{
  margin:0;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-muted);font-weight:700;
}
/* Un complément replié, à déplier sur place (16/09/2026) : « + 3 autres à
   valider » sur l'accueil, « produits du placard déjà en réserve » dans les
   ingrédients de la semaine. */
/* « Quoi de neuf » (16/09/2026) : le mot de la saison, puis les nouveautés.
   La carte de saison est le seul endroit un peu festif de l'application —
   c'est voulu : elle ne s'affiche que quatre fois par an. */
.carte-saison{
  background:linear-gradient(165deg,var(--accent-soft),var(--surface) 72%);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:1.1rem 1rem 1.2rem;text-align:center;
}
.carte-saison .saison-emoji{font-size:2.6rem;line-height:1.15}
.carte-saison h3{margin:.2rem 0 .9rem}
.carte-saison .aide{margin:.6rem 0 .4rem}
.puces{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center}
.puce-saison{
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:.2rem .65rem;font-size:.85rem;
}
.puces.fane .puce-saison{opacity:.5}
.actu{border-top:1px solid var(--border);padding:1rem 0}
.actu:first-of-type{border-top:0}
.actu-tete{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem}
.actu-tete small{color:var(--ink-muted)}
.actu h4{margin:0 0 .5rem}
.actu ul{margin:0;padding-left:1.1rem}
.actu li{margin:.45rem 0;line-height:1.55}
/* « Quoi de neuf » se lisait comme un pavé (24/09/2026) : une nouveauté tient
   maintenant sur une ligne, son détail s'ouvre d'une pression, et les versions
   passées se replient. Le petit chevron remplace le triangle du navigateur,
   qui n'a pas la même tête d'un téléphone à l'autre. */
.actu-point > summary,
details.actu-ancienne > summary{cursor:pointer;list-style:none;padding:.2rem 0}
.actu-point > summary::-webkit-details-marker,
details.actu-ancienne > summary::-webkit-details-marker{display:none}
.actu-point > summary::after,
details.actu-ancienne > summary::after{content:" ›";color:var(--accent-strong);font-weight:700}
.actu-point[open] > summary::after,
details.actu-ancienne[open] > summary::after{content:" ⌄"}
.actu-detail{margin:.2rem 0 .7rem;color:var(--ink-muted)}
.actu-detail p{margin:.4rem 0}
.actu-detail .btn{margin-top:.5rem}
details.actu-ancienne > summary{font-weight:600}

/* Les blocs repliables. .legende-sante est la légende des icônes santé du
   cahier de recettes : sans cette ligne elle s'affichait en texte ordinaire,
   sans couleur ni main au survol (relevé le 16/09/2026). */
details.repli,
details.legende-sante{margin-top:.5rem}
details.repli > summary,
details.legende-sante > summary{
  cursor:pointer;color:var(--accent-strong);font-weight:600;font-size:.85rem;
  padding:.4rem 0;
}

.carte{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:.75rem .85rem;
  margin-bottom:.6rem;
}
.carte-titre{
  display:flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:.95rem;margin-bottom:.5rem;
}
.carte-titre .lien{margin-left:auto;}

/* Une carte d'Administration qui se replie (18/10/2026) : le titre EST le
   bouton, en pleine largeur, et garde exactement l'allure d'un titre de carte.
   Repliée, elle n'a plus de marge sous le titre : la carte fait une ligne. */
.carte-pliable{
  width:100%;background:none;border:none;padding:0;margin:0 0 .5rem;
  font:inherit;font-weight:700;font-size:.95rem;color:inherit;
  display:flex;align-items:center;gap:.5rem;text-align:left;cursor:pointer;
}
.carte-pliable .chevron{margin-left:auto;color:var(--ink-muted);font-size:.8rem;}
.carte-pliable[aria-expanded="false"]{margin-bottom:0;}

/* L'aperçu de la barre du bas, dans la fenêtre qui la règle : même allure que
   la vraie barre, en plus petit, pour qu'on voie ce qu'on est en train de
   ranger. */
.apercu-barre{
  display:flex;gap:.2rem;align-items:flex-end;
  background:var(--fond);border:1px solid var(--border);
  border-radius:14px;padding:.45rem .3rem;margin-bottom:.9rem;
}
.apercu-barre span{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.15rem;
  font-size:.6rem;font-weight:600;color:var(--ink-muted);
}
.apercu-barre span b{font-size:1.1rem;font-weight:400;line-height:1;}
.apercu-barre span i{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;
}

.vide{
  text-align:center;color:var(--ink-muted);
  padding:1.5rem 1rem;font-size:.88rem;line-height:1.5;
}
.vide .emoji{display:block;font-size:1.9rem;margin-bottom:.45rem;opacity:.75;}

/* ---------- Boutons ---------- */
.btn{
  border:1px solid var(--border);background:var(--surface);
  border-radius:var(--radius-sm);padding:.62rem .9rem;
  font-weight:600;font-size:.88rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  transition:transform .08s ease;
}
.btn:active{transform:scale(.97);}
.btn.principal{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.btn.doux{background:var(--accent-soft);border-color:transparent;color:var(--accent-strong);}
.btn.danger{background:var(--danger-soft);border-color:transparent;color:var(--danger);}
.btn.or{background:var(--gold-soft);border-color:transparent;color:var(--gold);}
.btn.plein{width:100%;display:flex;}
.btn.mini{padding:.34rem .58rem;font-size:.78rem;border-radius:9px;min-height:32px;}
/* un bouton qui ne porte qu'une icône : pas de cadre, il s'efface derrière le texte */
.btn.icone{
  background:transparent;border-color:transparent;
  padding:.25rem 0;min-width:30px;min-height:30px;font-size:.82rem;
  opacity:.6;
}
.btn.icone:active{background:var(--surface-2);opacity:1;}
.btn:disabled{opacity:.42;pointer-events:none;}
.lien{
  background:none;border:none;padding:0;color:var(--accent-strong);
  font-weight:600;font-size:.82rem;text-decoration:underline;text-underline-offset:3px;
}
.rangee-btn{display:flex;gap:.5rem;}
.rangee-btn .btn{flex:1;}

/* La carte « ajouter », en tête de liste. Elle remplace le ＋ flottant là où
   celui-ci recouvrait les boutons des lignes (16/09/2026) : le carré vert
   arrondi garde exactement l'allure du ＋, il descend simplement dans la
   page. Même fond, même bordure et même ombre que les cartes de liste :
   elle se pose au-dessus des plats sans faire tache. */
.ajouter-carte{
  display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  padding:.6rem .7rem;margin-bottom:.7rem;
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);cursor:pointer;
  transition:transform .12s ease, box-shadow .18s ease;
}
.ajouter-carte > .rond{
  flex:0 0 auto;width:38px;height:38px;border-radius:13px;
  background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;line-height:1;
}
.ajouter-carte > .txt{display:flex;flex-direction:column;gap:.1rem;min-width:0;}
.ajouter-carte > .txt b{font-size:.92rem;font-weight:700;color:var(--ink);}
.ajouter-carte > .txt small{font-size:.76rem;color:var(--ink-muted);}
button.ajouter-carte:active{transform:scale(.99);box-shadow:var(--shadow-lg);}
/* La même carte, mais avec un champ : courses et réserve, où l'on tape un
   ou plusieurs articles d'un coup. Le carré vert ＋ est ici le bouton qui
   valide — la touche Entrée du clavier marche aussi. Le champ perd son
   cadre : c'est la carte qui en tient lieu. */
/* Mêmes marges intérieures que la carte à texte : le carré vert tombe alors
   exactement au même endroit d'un écran à l'autre, et les deux cartes ont
   la même hauteur. */
.ajouter-carte.saisie{padding:.6rem .7rem;gap:.7rem;margin-bottom:.4rem;}
.ajouter-carte.saisie > .rond{border:none;cursor:pointer;}
.ajouter-carte.saisie > .rond:active{filter:brightness(.92);}
/* Le champ vient sous le titre, à la place du texte d'aide des autres
   cartes : même carré vert, même titre, même hauteur — seule la deuxième
   ligne se tape au lieu de se lire. */
.ajouter-carte.saisie > .txt{flex:1;}
.ajouter-carte.saisie input[type=text]{
  width:100%;
  background:transparent;border:none;box-shadow:none;
  padding:.05rem 0 0;font-size:.86rem;color:var(--ink);
}
.ajouter-carte.saisie input[type=text]:focus{outline:none;box-shadow:none;}

.fab{
  position:fixed;
  bottom:calc(88px + env(safe-area-inset-bottom));
  width:54px;height:54px;border-radius:18px;border:none;
  background:var(--accent);color:var(--accent-ink);
  font-size:1.5rem;line-height:1;
  box-shadow:var(--shadow-lg);z-index:15;
  display:flex;align-items:center;justify-content:center;
  left:50%;margin-left:196px;
}
@media (max-width:560px){ .fab{left:auto;right:1rem;margin-left:0;} }
.fab:active{filter:brightness(.92);}

/* ---------- Champs ---------- */
label.champ{display:block;margin-bottom:.8rem;}
label.champ > span{
  display:block;font-size:.77rem;font-weight:600;color:var(--ink-muted);margin-bottom:.3rem;
}
input[type=text],input[type=number],input[type=date],input[type=time],
input[type=url],input[type=password],input[type=tel],input[type=email],select,textarea{
  width:100%;padding:.68rem .8rem;
  background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{min-height:80px;resize:vertical;}
/* Date et heure (19/09/2026) : sur iPhone, ces champs gardaient une largeur
   « naturelle » qui ne rétrécit pas. Côte à côte dans un rappel, l'heure
   débordait à droite de l'écran (383 px sur 375, mesuré) — et le sélecteur
   d'heure, accroché à elle, avec. Apparence neutralisée : ils deviennent
   souples ; min-height leur garde la hauteur des autres champs même vides. */
input[type=date],input[type=time]{
  -webkit-appearance:none;appearance:none;display:block;
  min-width:0;max-width:100%;min-height:2.75rem;
}
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value{text-align:left;}
.duo{display:flex;gap:.6rem;}
.duo > *{flex:1;min-width:0;}

/* Le code a 4 chiffres, masque comme un mot de passe, avec un oeil pour le
   relire. On masque a l'AFFICHAGE seulement : le champ reste un `tel` avec
   clavier numerique, car passer en `type=password` ramene le clavier de
   lettres sur iPhone et reveille le gestionnaire de mots de passe — pour un
   code a quatre chiffres, le remede serait pire que le mal.
   Un navigateur qui ignore `-webkit-text-security` (vieux Firefox) affiche le
   code en clair : moins bien, mais rien n'est casse et le clavier reste juste. */
.champ-pin{position:relative;}
.champ-pin input{padding-right:2.8rem;}
.champ-pin input.pin-masque{-webkit-text-security:disc;text-security:disc;}
.oeil-pin{
  position:absolute;right:.15rem;top:50%;transform:translateY(-50%);
  background:none;border:0;padding:.35rem .5rem;font-size:1rem;line-height:1;
  min-height:32px;min-width:32px;
}

/* Les cases a cocher natives font 13 px : trop petit au pouce (balayage du
   12/09/2026). On les agrandit sans toucher aux marquages inline
   « width:auto » que portent certaines (min-* n'est pas ecrase par eux). */
input[type=checkbox]{min-width:18px;min-height:18px;accent-color:var(--accent);}

.puces{display:flex;flex-wrap:wrap;gap:.4rem;}
.puce{
  border:1px solid var(--border);background:var(--surface-2);
  border-radius:999px;padding:.4rem .75rem;font-size:.82rem;font-weight:600;
  display:inline-flex;align-items:center;gap:.35rem;
  transition:transform .08s ease, background .15s ease;
}
.puce:active{transform:scale(.96);}
.puce.on{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  box-shadow:0 2px 6px rgba(44,42,36,.12);
}
/* Choix unique (« Pour qui ? », durée, rôle…) : on le dessine comme une
   liste d'options, pas comme des boutons. Un rond vide devant chaque option,
   un rond plein et une teinte douce pour celle qui est retenue. Le vert plein
   reste réservé aux vrais boutons (« Créer l'invitation »), sinon l'option
   retenue donnait envie de cliquer dessus. Les émojis restent dans le texte. */
.puces.unique .puce::before{
  content:"";flex:none;width:.72rem;height:.72rem;border-radius:50%;
  box-sizing:border-box;border:1.5px solid var(--ink-muted);
}
.puces.unique .puce.on{
  background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong);
  box-shadow:none;cursor:default;
}
.puces.unique .puce.on::before{
  border-color:var(--accent);background:var(--accent);
  box-shadow:inset 0 0 0 2px var(--accent-soft);
}
.puces.unique .puce.on:active{transform:none;}

/* Un interrupteur à segments : pour les bascules « soit l'un, soit l'autre ».
   Sans lui, elles ressemblaient aux pastilles de filtre juste en dessous. */
.segments{
  display:flex;gap:.2rem;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:999px;padding:.22rem;
  margin:.2rem 0 .8rem;
}
.segments button{
  flex:1;min-width:0;border:none;background:transparent;
  border-radius:999px;padding:.44rem .4rem;
  font-size:.82rem;font-weight:600;color:var(--ink-muted);
  display:inline-flex;align-items:center;justify-content:center;gap:.3rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .18s ease, color .18s ease;
}
.segments button.on{
  background:var(--surface);color:var(--accent-strong);
  box-shadow:var(--shadow);
}
/* Sur les écrans les plus étroits (320 px, iPhone SE), « 📝 Pense-bêtes »
   se faisait couper de huit pixels : text-overflow:ellipsis ne s'applique
   pas au texte d'un conteneur inline-flex, le mot était donc tranché net,
   sans même les points de suspension. On resserre plutôt le texte pour
   qu'il tienne en entier (16/09/2026). */
@media (max-width:360px){
  .segments button{font-size:.76rem;padding:.44rem .22rem;gap:.2rem;}
}

/* Le petit rang d'étiquettes. Jusqu'au 16/09/2026 il n'était mis en forme
   que dans une ligne de liste (.ligne-corps .etiquettes, plus bas). Ailleurs
   — la fiche d'une recette — les étiquettes se touchaient, et « centrer »
   n'avait aucun effet faute de rangée souple. */
.etiquettes{display:flex;flex-wrap:wrap;gap:.3rem;}
/* Les macronutriments d'une recette (option du 18/09/2026) : quatre chiffres
   côte à côte, le nombre en gras, son nom dessous. */
.macros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;text-align:center;}
.macros b{display:block;font-size:1.05rem;font-weight:700;color:var(--ink);}
.macros small{display:block;font-size:.72rem;color:var(--ink-muted);}

.etiquette{
  display:inline-flex;align-items:center;gap:.25rem;
  font-size:.69rem;font-weight:700;
  padding:.18rem .48rem;border-radius:999px;
  background:var(--surface-2);color:var(--ink-muted);
  border:1px solid var(--border);
  white-space:nowrap;
}
/* Une étiquette qui se touche (28/09/2026) : même allure, mais elle réagit
   au doigt et se distingue par son trait plus marqué. */
button.etiquette{
  font-family:inherit;cursor:pointer;
  border-style:dashed;border-color:var(--ink-muted);
}
button.etiquette:active{transform:scale(.96);}
.etiquette.vert{background:var(--accent-soft);color:var(--accent-strong);border-color:transparent;}
.etiquette.or{background:var(--gold-soft);color:var(--gold);border-color:transparent;}
.etiquette.chaud{background:var(--warm-soft);color:var(--warm);border-color:transparent;}
.etiquette.rouge{background:var(--danger-soft);color:var(--danger);border-color:transparent;}
/* les profils santé : juste l'émoji, sinon la fiche recette devient un sapin de Noël */
.etiquette.sante{
  background:none;border-color:transparent;
  padding:.1rem .05rem;font-size:.9rem;line-height:1;
}

/* ---------- Listes ---------- */
/* PASSE DE DENSITE (12/09/2026, demande d'Amandine) : une ligne faisait
   59 px sur un ecran de 360 px, avec 11 px entre chaque element — les
   icones ✏️ 🗑️ occupaient 79 px pour deux gestes. Les boutons qui se
   suivent forment un groupe : ils se rapprochent, et le libelle gagne la
   place. Les zones tactiles restent a 32 px au minimum. */
.ligne{
  display:flex;align-items:center;gap:.55rem;
  padding:.36rem 0;border-top:1px solid var(--border);
}
/* Seconde passe (14/09/2026) : la premiere (-.3rem) ne se voyait pas sur
   telephone. Les boutons se touchent : 32 px chacun, 0 px entre eux. */
.ligne > .btn + .btn{margin-left:-.55rem;}   /* exactement 0 px entre eux : au-dela ils se chevauchent et un clic au bord part sur le voisin — supprimer au lieu de modifier (14/09/2026) */
.ligne:first-child{border-top:none;}
.ligne-corps{flex:1;min-width:0;}
.ligne-corps b{display:block;font-size:.93rem;font-weight:600;line-height:1.3;}
.ligne-corps small{display:block;color:var(--ink-muted);font-size:.74rem;margin-top:0;line-height:1.25;}
.ligne-corps .etiquettes{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem;}
.ligne.fait .ligne-corps b{text-decoration:line-through;color:var(--ink-muted);}

.coche{
  width:26px;height:26px;flex-shrink:0;border-radius:9px;
  border:2px solid var(--border);background:transparent;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;color:transparent;padding:0;
}
.coche.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}

/* ---------- Navigation basse ---------- */
.nav{
  position:fixed;bottom:0;left:0;right:0;z-index:20;
  background:var(--surface-flou);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-top:1px solid var(--border);
  padding:.35rem .3rem calc(.35rem + env(safe-area-inset-bottom));
}
.nav-inner{max-width:540px;margin:0 auto;display:flex;}
.nav button{
  flex:1 1 0;min-width:0;background:none;border:none;padding:.3rem 0;
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  color:var(--ink-muted);font-size:.65rem;font-weight:600;
  position:relative;
  transition:color .18s ease;
}
/* Sept onglets depuis la Réserve : sur un écran de 360 px, une pastille de
   46 px fixes par onglet débordait de 17 px et coupait « Rappels »
   (mesuré le 12/09/2026). La pastille cède la place, le libellé aussi. */
.nav button .ic{
  font-size:1.2rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  width:min(46px,100%);height:28px;border-radius:999px;
  background:transparent;
  transition:background .2s ease, transform .2s ease;
}
.nav button .lib{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:380px){
  .nav{padding-left:.15rem;padding-right:.15rem;}
  .nav button{font-size:.6rem;}
  .nav button .ic{width:min(40px,100%);}
}
.nav button.active{color:var(--accent-strong);}
.nav button.active .ic{background:var(--accent-soft);transform:translateY(-1px);}
.nav button:active .ic{transform:scale(.92);}
.nav .pastille{
  position:absolute;top:0;left:calc(50% + 8px);
  min-width:17px;height:17px;padding:0 .25rem;border-radius:999px;
  background:var(--warm);color:#fff;font-size:.62rem;line-height:17px;font-weight:700;
}
/* En mode sombre, le terracotta s'éclaircit : un chiffre blanc dessus tombait
   à 2,5 de contraste (mesuré le 15/09/2026). Chiffre foncé à la place. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .nav .pastille{color:#1d140e;}
}
:root[data-theme="dark"] .nav .pastille{color:#1d140e;}

/* ---------- Présentation de bienvenue (carrousel) ---------- */
.carrousel{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.carrousel::-webkit-scrollbar{display:none;}
.volet{
  flex:0 0 100%;scroll-snap-align:start;box-sizing:border-box;
  padding:.4rem .6rem .5rem;text-align:center;min-height:230px;
}
.volet .grand{font-size:3rem;line-height:1;margin:.3rem 0 .7rem;}
.volet h4{font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin:0 0 .45rem;}
.volet p{color:var(--ink-muted);font-size:.9rem;line-height:1.5;margin:0;}
.points-carrousel{display:flex;justify-content:center;gap:.4rem;margin:.5rem 0 1rem;}
.points-carrousel i{width:7px;height:7px;border-radius:999px;background:var(--border);
  transition:background .2s ease, transform .2s ease;}
.points-carrousel i.on{background:var(--accent);transform:scale(1.35);}

/* ---------- Feuille modale ---------- */
.voile{
  position:fixed;inset:0;z-index:40;
  background:rgba(20,18,14,.45);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.voile.on{opacity:1;pointer-events:auto;}
.feuille{
  width:100%;max-width:540px;max-height:88dvh;overflow-y:auto;
  overscroll-behavior:contain;   /* arrivé au bout, le geste ne fait pas défiler la page derrière */
  background:var(--surface);
  border-radius:22px 22px 0 0;
  padding:1rem 1.1rem calc(1.3rem + env(safe-area-inset-bottom));
  transform:translateY(16px);transition:transform .22s ease;
  box-shadow:var(--shadow-lg);
}
.voile.on .feuille{transform:none;}
/* Page figée tant qu'une feuille est ouverte (figerPage / libererPage dans
   app.js). Sans cela, sur téléphone, la page de derrière défilait sous la
   feuille : la barre d'adresse se repliait, la hauteur d'écran changeait et
   la feuille glissait vers le bas, emportant ses boutons (bug du 11/09/2026). */
/* height:auto : la page garde sa vraie hauteur. Avec la hauteur d'écran
   (html,body{height:100%}), remontée de N pixels, elle laissait un vide en bas. */
body.feuille-ouverte{position:fixed;left:0;right:0;height:auto;}
@media print{
  body.feuille-ouverte{position:static !important;top:auto !important;overflow:visible !important;}
}
.feuille-poignee{
  width:40px;height:4px;border-radius:999px;background:var(--border);
  margin:0 auto .9rem;
}
.feuille h3{margin:.1rem 0 1rem;font-family:var(--font-display);font-size:1.2rem;font-weight:600;}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;transform:translate(-50%,20px);
  bottom:calc(100px + env(safe-area-inset-bottom));
  background:var(--ink);color:var(--bg);
  padding:.6rem 1rem;border-radius:999px;font-size:.85rem;font-weight:600;
  z-index:60;opacity:0;pointer-events:none;transition:opacity .22s ease, transform .22s ease;
  max-width:88vw;text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0);}
/* Une feuille ouverte : le message passe EN HAUT de l'écran. En bas, il se
   posait sur les champs et les boutons de la feuille — « Choisissez un code »
   cachait justement le champ du code (15/09/2026). */
body.feuille-ouverte .toast{
  top:calc(14px + env(safe-area-inset-top));bottom:auto;transform:translate(-50%,-20px);
}
body.feuille-ouverte .toast.on{transform:translate(-50%,0);}

/* ---------- Ecran de connexion ---------- */
.connexion{
  min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:2rem 1.2rem calc(2rem + env(safe-area-inset-bottom));
  max-width:440px;margin:0 auto;
}
.logo-tribu{
  width:74px;height:74px;border-radius:24px;margin:0 auto 1rem;
  background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-size:2.1rem;
  box-shadow:var(--shadow-lg);
}
.connexion h1{
  font-family:var(--font-display);font-size:1.85rem;text-align:center;
  margin:0 0 .35rem;font-weight:600;
}
.connexion p.intro{text-align:center;color:var(--ink-muted);margin:0 0 1.6rem;font-size:.9rem;line-height:1.5;}

.grille-profils{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;}
.profil-carte{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:.85rem .35rem;text-align:center;box-shadow:var(--shadow);
}
.profil-carte .em{font-size:1.65rem;display:block;margin-bottom:.28rem;}
.profil-carte b{font-size:.84rem;display:block;overflow:hidden;text-overflow:ellipsis;}
.profil-carte small{font-size:.66rem;color:var(--ink-muted);}

.pin-points{display:flex;gap:.55rem;justify-content:center;margin:1.1rem 0 1.3rem;}
.pin-point{width:14px;height:14px;border-radius:999px;border:2px solid var(--border);}
.pin-point.on{background:var(--accent);border-color:var(--accent);}
/* Le clavier du code. Safari sur iPhone (surtout depuis l'icône) le
   decalait : ses boutons gardent une largeur minimale et un style propres,
   et des colonnes « 1fr » peuvent alors deborder de la grille. D'ou les
   colonnes bornees (minmax(0,1fr)), l'apparence neutralisee, les chiffres
   centres explicitement, et une hauteur minimale si aspect-ratio manque. */
.clavier{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;
  width:100%;max-width:270px;margin:0 auto;
}
.clavier button{
  -webkit-appearance:none;appearance:none;min-width:0;margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1.6;min-height:2.9rem;border-radius:var(--radius);border:1px solid var(--border);
  background:var(--surface);color:var(--ink);font-size:1.25rem;font-weight:600;
}
.clavier button.vide{background:none;border:none;box-shadow:none;}

/* ---------- Divers ---------- */
.bandeau{
  display:flex;gap:.55rem;align-items:flex-start;
  background:var(--warm-soft);color:var(--warm);
  border-radius:var(--radius-sm);padding:.62rem .75rem;
  font-size:.79rem;line-height:1.45;margin-bottom:.75rem;font-weight:600;
}
.bandeau.info{background:var(--accent-soft);color:var(--accent-strong);}
.bandeau.discret{
  background:var(--surface-2);color:var(--ink-muted);
  border:1px solid var(--border);font-weight:500;font-size:.76rem;
}
.bandeau.discret b{color:var(--ink);}
.bandeau.discret .lien{color:var(--ink-muted);}
.barre-progression{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden;}
.barre-progression > i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s ease;}

.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
.stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:.75rem .85rem;box-shadow:var(--shadow);
}
.stat b{display:block;font-size:1.35rem;font-family:var(--font-display);line-height:1.1;}
.stat span{display:block;font-size:.73rem;color:var(--ink-muted);margin-top:.15rem;}

.grille-cadeaux{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.cadeau{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:.85rem .7rem;text-align:center;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:.35rem;align-items:center;
}
.cadeau .em{font-size:1.9rem;}
.cadeau b{font-size:.86rem;line-height:1.25;}
.cadeau .btn{width:100%;margin-top:auto;}

.semaine-nav{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem;}
.semaine-nav b{flex:1;text-align:center;font-size:.95rem;font-family:var(--font-display);}
.semaine-nav button{
  width:36px;height:36px;border-radius:11px;border:1px solid var(--border);
  background:var(--surface);font-size:1rem;flex-shrink:0;
}
.jour-repas{margin-bottom:.55rem;}
.jour-repas .entete{
  display:flex;align-items:baseline;gap:.45rem;margin-bottom:.3rem;padding-left:.15rem;
}
.jour-repas .entete b{font-size:.84rem;text-transform:capitalize;}
.jour-repas .entete small{color:var(--ink-muted);font-size:.71rem;}
.jour-repas.aujourdhui .entete b{color:var(--accent-strong);}
.jour-repas.aujourdhui .entete b::after{content:" • aujourd'hui";font-weight:600;font-size:.7rem;}
.case-repas{
  width:100%;text-align:left;display:flex;align-items:center;gap:.55rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.55rem .7rem;margin-bottom:.3rem;
  font-size:.85rem;
}
.case-repas .quand{
  font-size:.66rem;font-weight:700;color:var(--ink-muted);
  text-transform:uppercase;letter-spacing:.05em;width:38px;flex-shrink:0;
}
.case-repas .plat{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.case-repas .plat.libre{color:var(--ink-muted);font-weight:400;}

.rang{
  width:24px;text-align:center;font-weight:700;color:var(--ink-muted);font-size:.85rem;flex-shrink:0;
}
.rang.or{color:var(--gold);}

hr.sep{border:none;border-top:1px solid var(--border);margin:1.1rem 0;}
/* Le résumé de la semaine : trois petits compteurs, en pastilles pour qu'on
   les lise comme un bilan et non comme une phrase inachevée. */
.resume-compo{
  display:flex;justify-content:center;flex-wrap:wrap;gap:.35rem;
  margin:-.45rem 0 1rem;
}
.resume-compo span{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:999px;padding:.24rem .6rem;
  font-size:.77rem;font-weight:600;color:var(--ink-muted);
}

.aide{font-size:.77rem;color:var(--ink-muted);line-height:1.5;margin:.4rem 0 0;}
.centre{text-align:center;}
.code-famille{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.1rem;font-weight:700;letter-spacing:.1em;
  background:var(--surface-2);border:1px dashed var(--border);
  border-radius:var(--radius-sm);padding:.7rem;text-align:center;
}
/* Le code avec son icone de copie : l icone contre le texte, pas ailleurs. */
.code-famille.avec-copie{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.55rem .5rem;
}
.code-famille.avec-copie .code-texte{ flex:0 1 auto; word-break:break-all; }
.btn-copie{
  flex:0 0 auto;
  border:1px solid var(--border);background:var(--surface);
  border-radius:var(--radius-sm);
  font-size:1rem;line-height:1;
  padding:.4rem .5rem;cursor:pointer;
  letter-spacing:0;
  transition:background .15s, border-color .15s, transform .1s;
}
.btn-copie:hover{ background:var(--accent-soft); }
.btn-copie:active{ transform:scale(.94); }
.btn-copie.copie{ background:var(--accent-soft); border-color:var(--accent); }
.btn-copie:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.etat-connexion{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.72rem;color:var(--ink-muted);
}
.etat-connexion i{width:8px;height:8px;border-radius:999px;background:var(--ink-muted);display:block;}
.etat-connexion.en-ligne i{background:var(--ok);}
.etat-connexion.local i{background:var(--warm);}

/* ---------- bandeau version bêta ---------- */
.badge-beta{
  display:inline-block;
  background:var(--warm-soft);color:var(--warm);
  font-size:.62rem;font-weight:800;letter-spacing:.1em;
  padding:.14rem .42rem;border-radius:6px;
  vertical-align:middle;margin-left:.4rem;text-transform:uppercase;
}
.ruban-beta{
  text-align:center;font-size:.72rem;color:var(--warm);
  background:var(--warm-soft);
  padding:.35rem .6rem;border-radius:0 0 12px 12px;
  max-width:540px;margin:0 auto;font-weight:600;
}
.ruban-beta button{
  background:none;border:none;padding:0;color:inherit;
  font:inherit;text-decoration:underline;text-underline-offset:2px;
}

/* ---------- pastilles numérotées (premiers pas, mode d'emploi) ---------- */
.etape{
  width:26px;height:26px;flex-shrink:0;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;
}
.etape.ok{background:var(--accent);color:var(--accent-ink);}

/* ---------- entête de la liste de courses choisie ---------- */
.entete-liste{
  display:flex;align-items:center;gap:.6rem;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.55rem .75rem;margin-bottom:.8rem;
}
.entete-liste b{display:block;font-size:.92rem;}
.entete-liste small{display:block;font-size:.74rem;color:var(--ink-muted);margin-top:.1rem;}
.entete-liste > div:first-child{flex:1;min-width:0;}

/* ---------- grille d'icônes : fournie, donc défilante ---------- */
.grille-emojis{
  max-height:132px;overflow-y:auto;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.5rem;margin-bottom:1rem;
  -webkit-overflow-scrolling:touch;
}
.grille-emojis .puce{
  background:var(--surface);
  padding:.34rem .5rem;font-size:1.05rem;line-height:1.15;
}
.grille-emojis .puce.on{background:var(--accent);border-color:var(--accent);}

/* ---------- pastille « il y a du nouveau » sur l'avatar ---------- */
.topbar .avatar{position:relative;}
.point-maj{
  position:absolute;top:-2px;right:-2px;
  width:12px;height:12px;border-radius:999px;
  background:var(--warm);
  box-shadow:0 0 0 2px var(--bg);
}
.ligne-maj{cursor:pointer;}

/* ---------- le menu de la semaine, à afficher ou à imprimer ---------- */
.entete-affiche, .jour-affiche{
  display:grid;grid-template-columns:5.2rem 1fr 1fr;gap:.5rem;align-items:start;
}
.entete-affiche{
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);padding:0 .2rem .3rem;
}
.jour-affiche{
  padding:.5rem .2rem;border-top:1px solid var(--border);
}
.jour-affiche.aujourdhui{background:var(--accent-soft);border-radius:var(--radius-sm);}
.jour-affiche-nom{font-weight:700;font-size:.9rem;}
.jour-affiche-nom small{display:block;font-weight:400;font-size:.7rem;color:var(--ink-muted);}
.jour-affiche-repas{display:contents;}
.jour-affiche-repas span{font-size:.85rem;line-height:1.35;}

/* ---------- la liste de courses, à afficher ou à imprimer ---------- */
.liste-papier h3{
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-muted);margin:1.1rem 0 .1rem;
}
.liste-papier h3:first-of-type{margin-top:.3rem;}
.ligne-papier{
  display:flex;align-items:baseline;gap:.65rem;
  padding:.36rem .2rem;border-top:1px solid var(--border);
}
/* la case se coche au crayon, dans les rayons */
.ligne-papier .case{
  flex:0 0 auto;width:13px;height:13px;border:1.5px solid var(--ink-muted);
  border-radius:3px;align-self:center;
}
.ligne-papier .nom{flex:1;font-size:.92rem;}
.ligne-papier .qte{font-size:.8rem;color:var(--ink-muted);white-space:nowrap;}

@media print{
  /* `#ecran-app` EN ENTIER, et pas seulement son `main` : le cadre porte
     min-height:100dvh, et même vide il occupait une page complète — d'où
     une première feuille blanche (signalé le 17/09/2026). Ce qui s'imprime,
     `#feuille`, est en dehors de ce cadre. */
  #ecran-app, #ecran-connexion,
  .topbar, .nav, .fab, .sans-impression, .toast { display:none !important; }
  #voile{position:static;background:none;display:block !important;}
  #feuille{position:static;max-height:none;box-shadow:none;border-radius:0;overflow:visible;}
  .feuille-poignee{display:none;}
  body{background:#fff;color:#000;}

  /* ENCRE NOIRE SUR PAPIER BLANC, quel que soit le thème (17/09/2026).
     En thème sombre, le texte de la feuille est clair — et comme les
     navigateurs n'impriment pas les fonds par défaut, la page sortait
     presque vide. Tout est donc remis en noir, fonds et ombres retirés.
     Les règles qui suivent sont toutes accrochées à #feuille : sans cela
     elles passeraient APRÈS `#feuille *` en priorité, et ne serviraient à
     rien. */
  #feuille, #feuille *{
    background:transparent !important;color:#000 !important;
    box-shadow:none !important;
  }
  #feuille .aide,
  #feuille .liste-papier h3,
  #feuille .ligne-papier .qte,
  #feuille .entete-affiche{color:#444 !important;}
  #feuille .carte,
  #feuille .ligne-papier,
  #feuille .jour-affiche{border-color:#c9c9c9 !important;}
  #feuille .ligne-papier .case{border-color:#555 !important;}
  #feuille .jour-affiche.aujourdhui{background:#f1f1f1 !important;}
}

/* ---------- Les post-it du frigo (19/09/2026) ----------
   De vrais post-it : des carrés de couleur au texte foncé, quel que soit le
   thème de l'appli. Sur le papier, deux par ligne, sans ombre ni biais, et
   leurs couleurs gardées (print-color-adjust) : sans cela, la règle
   « encre noire sur papier blanc » plus haut les effacerait. */
.postits{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
.postit{
  background:var(--postit,#fff1a8);color:#33291c;
  padding:12px 13px 14px;border-radius:3px;
  box-shadow:0 10px 14px -10px rgba(0,0,0,.45);
  transform:rotate(-.8deg);break-inside:avoid;page-break-inside:avoid;
}
.postit:nth-child(2n){transform:rotate(.7deg);}
.postit:nth-child(3n){transform:rotate(-.3deg);}
.postit-qui{font-family:var(--font-display);font-size:1.2rem;font-weight:700;margin-bottom:.4rem;}
.postit-tache{padding:.32rem 0;border-top:1px dashed rgba(51,41,28,.28);}
.postit-nom{font-weight:600;font-size:.9rem;line-height:1.3;}
.postit-nom small{font-size:.72rem;opacity:.7;}
.postit-cases{display:flex;flex-wrap:wrap;gap:.2rem .7rem;margin-top:.22rem;font-size:.8rem;}
.postit .case{
  display:inline-block;width:11px;height:11px;margin-right:4px;vertical-align:-1px;
  border:1.5px solid rgba(51,41,28,.65);border-radius:2px;
}
.postit-total{margin-top:.5rem;font-size:.78rem;font-weight:700;opacity:.8;}
@media print{
  #feuille .postits{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  #feuille .postit{
    background:var(--postit,#fff1a8) !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    transform:none;border:1px solid rgba(0,0,0,.2);
  }
  #feuille .postit, #feuille .postit *{color:#33291c !important;}
  #feuille .postit .case{border-color:rgba(51,41,28,.7) !important;}
}

/* ---------- sauts vers une section (admin, index des recettes) ----------
   La barre du haut est collante : un saut qui vise le haut de l'écran place
   la cible SOUS elle, et le titre disparaît — on croit avoir raté sa cible.
   On réserve donc la hauteur de la barre (66 px, plus l'encoche du téléphone)
   et un peu d'air au-dessus. */
[id^="admin-"],
[id^="lettre-"] {
  scroll-margin-top: calc(78px + env(safe-area-inset-top));
}

/* ---------- index alphabétique du cahier de recettes ---------- */
.index-lettres{
  display:flex;flex-wrap:wrap;gap:.25rem;
  margin:0 0 .5rem;
}
.index-lettres button{
  flex:1 1 auto;min-width:24px;
  border:1px solid transparent;background:var(--surface-2);
  border-radius:8px;padding:.26rem 0;
  font-size:.72rem;font-weight:700;color:var(--ink-muted);
  transition:background .15s ease, color .15s ease;
}
.index-lettres button:active{background:var(--accent-soft);color:var(--accent-strong);}

/* ---------- repère « qui cuisine / où en est le repas » ---------- */
.case-repas{position:relative;}
.marque-repas{position:absolute;top:.3rem;right:.35rem;}
.marque-repas .avatar.xs{width:20px;height:20px;font-size:.7rem;}

/* ---------- une recette se consulte d'un simple appui ---------- */
.ligne-recette{cursor:pointer;}
.ligne-recette:active{background:var(--surface-2);}

/* ---------- Le mot du jour (0.60) ----------
   Des couleurs FIXES, les mêmes pour toutes les palettes : elles ont un sens
   (bien placée, ailleurs, absente) qui ne doit pas changer avec le thème. Le
   ROND de « ailleurs » double l'orange pour les daltoniens. La taille des
   cases suit aussi la hauteur de l'écran : sur un petit téléphone, la grille
   ET le clavier tiennent sans faire défiler. */
:root{--mj-bien:#3F7A55;--mj-ailleurs:#B8642F;--mj-absent:#6E6A60;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--mj-absent:#4B504C;}
}
:root[data-theme="dark"]{--mj-absent:#4B504C;}
.mj{--mj-case:min(3.2rem,12.5vw,6vh);}
@supports (height:1dvh){ .mj{--mj-case:min(3.2rem,12.5vw,6dvh);} }
.mj-tete{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:2.1rem;margin:-.5rem 0 .2rem;}
.mj-indice{min-height:1.2em;margin:0 0 .45rem;text-align:center;font-size:.84rem;color:var(--ink-muted);}
.mj-indice b{color:var(--ink);}
.mj-grille{display:grid;gap:.3rem;justify-content:center;}
.mj-rangee{display:grid;grid-template-columns:repeat(5,var(--mj-case));gap:.3rem;}
.mj-case{
  width:var(--mj-case);height:var(--mj-case);box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--border);border-radius:8px;background:var(--surface);
  font-weight:700;font-size:calc(var(--mj-case) * .48);line-height:1;color:var(--ink);
}
.mj-case.pleine{border-color:var(--ink-muted);}
.mj-case.v,.mj-case.o,.mj-case.g{border-color:transparent;color:#fff;}
.mj-case.v{background:var(--mj-bien);}
.mj-case.o{background:var(--mj-ailleurs);border-radius:50%;}
.mj-case.g{background:var(--mj-absent);}
.mj-case.revele{animation:mj-retourne .38s ease both;animation-delay:calc(var(--i,0) * 110ms);}
@keyframes mj-retourne{from{transform:rotateX(90deg);}to{transform:none;}}
.mj-rangee.secoue{animation:mj-secoue .35s ease;}
@keyframes mj-secoue{20%,60%{transform:translateX(-6px);}40%,80%{transform:translateX(6px);}}
@media (prefers-reduced-motion: reduce){ .mj-case.revele,.mj-rangee.secoue{animation:none;} }
.mj-message{min-height:1.25em;margin:.35rem 0;text-align:center;font-size:.84rem;font-weight:600;color:var(--danger);}
.mj-clavier{display:flex;flex-direction:column;gap:.32rem;margin-bottom:.5rem;}
.mj-rang{display:flex;justify-content:center;gap:.24rem;}
.mj-touche{
  flex:1 1 0;min-width:0;max-width:2.7rem;height:2.9rem;height:min(3rem,6.4dvh);padding:0;
  -webkit-appearance:none;appearance:none;border:none;border-radius:8px;
  background:var(--surface-2);color:var(--ink);font-weight:700;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;touch-action:manipulation;
}
.mj-touche.large{flex:1.6 1 0;max-width:4.4rem;font-size:.76rem;}
.mj-touche:active{transform:scale(.94);}
.mj-touche.v,.mj-touche.o,.mj-touche.g{color:#fff;}
.mj-touche.v{background:var(--mj-bien);}
.mj-touche.o{background:var(--mj-ailleurs);}
.mj-touche.g{background:var(--mj-absent);}
.mj-fin{text-align:center;}
.mj-fin p{margin:.2rem 0 .5rem;line-height:1.45;}
.mj-legende{text-align:center;margin:.1rem 0 .8rem;}
.mj-legende i{display:inline-block;width:.75em;height:.75em;margin:0 .25em 0 .7em;vertical-align:-.05em;border-radius:2px;}
.mj-legende i:first-child{margin-left:0;}
.mj-legende i.v{background:var(--mj-bien);}
.mj-legende i.o{background:var(--mj-ailleurs);border-radius:50%;}
.mj-legende i.g{background:var(--mj-absent);}
.mj-tribu{border-top:1px solid var(--border);padding-top:.7rem;}
.mj-tribu-titre{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.2rem .6rem;font-weight:700;font-size:.9rem;}
.mj-mini{display:grid;gap:2px;flex:none;}
.mj-mini span{display:grid;grid-template-columns:repeat(5,7px);gap:2px;}
.mj-mini i{width:7px;height:7px;border-radius:1.5px;background:var(--mj-absent);}
.mj-mini i.v{background:var(--mj-bien);}
.mj-mini i.o{background:var(--mj-ailleurs);border-radius:50%;}