:root{
  /* Socle : blanc cassé très discret, surfaces blanches, texte brun. Thème clair unique. */
  --bg:#F2EEE8; --surface:#FFFFFF; --surface-2:#F5F1EB; --surface-3:#ECE6DD;
  --ink:#2E2118; --muted:#74624F; --border:#E9E3DA;
  /* Tomate : réservée aux actions et alertes. Aucun autre usage. */
  --accent:#C93F19; --accent-ink:#FFFFFF; --accent-soft:#FBE3DA; --accent-text:#8F2A0F;
  --warn:#8F2A0F; --warn-soft:#FBE3DA; --danger:#C93F19;
  --shadow: 0 1px 2px rgba(74,45,20,.06), 0 8px 22px -10px rgba(74,45,20,.28);
  --radius: 16px;
  /* Code couleur : 3 tons par teinte (vive = filets, points, icônes ; douce = fonds ; encre = texte). */
  --vegan:#5B8A2E; --vegan-soft:#E4F0D0; --vegan-ink:#38591A;
  --vegetarien:#E3A21A; --vegetarien-soft:#FBEBBF; --vegetarien-ink:#7A5200;
  --poisson:#2F82B5; --poisson-soft:#D8ECF7; --poisson-ink:#185A85;
  --viande:#7A4A33; --viande-soft:#EADCD2; --viande-ink:#4E2C1B;
  --legumes:#5B8A2E; --legumes-soft:#E4F0D0; --legumes-ink:#38591A;
  --herbes:#2A8C78; --herbes-soft:#D3EFE8; --herbes-ink:#14614F;
  --fruits:#D6477A; --fruits-soft:#FBDCE7; --fruits-ink:#8A1F4B;
  --feculents:#E08A1E; --feculents-soft:#FCE4C4; --feculents-ink:#7A4208;
  --laitiers:#E3A21A; --laitiers-soft:#FBEBBF; --laitiers-ink:#7A5200;
  --epicerie:#6E68A3; --epicerie-soft:#E5E2F3; --epicerie-ink:#46407A;
  color-scheme: light;
}

*{box-sizing:border-box;}
:root{ --nav-h:66px; }
html{ min-height:100%; }
body{
  margin:0; min-height:100vh; min-height:100dvh;
  background:var(--bg); color:var(--ink);
  font-family:'Work Sans', system-ui, sans-serif;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}
h1,h2,h3, .display{ font-family:'Fraunces', Georgia, serif; text-wrap:balance; }
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
a{color:inherit;}
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; font-size:15px; }
::selection{ background:var(--accent-soft); }
img{ max-width:100%; }
[hidden]{ display:none !important; }

.container{ max-width:720px; margin:0 auto; padding:0 16px; }

header.top{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  background:var(--bg); border-bottom:1px solid var(--border);
  padding-top: max(14px, env(safe-area-inset-top,0px));
}
.top-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:12px; }
.brand{ font-size:22px; font-weight:600; letter-spacing:-0.01em; display:flex; align-items:center; gap:8px;}
.brand .pot{ font-size:20px; }
.household-chip{
  font-size:13px; color:var(--muted); background:var(--surface-2);
  border:1px solid var(--border); border-radius:999px; padding:4px 10px;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}

nav.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--surface); border-top:1px solid var(--border);
  padding: 6px 10px calc(8px + env(safe-area-inset-bottom,0px));
  display:flex; justify-content:space-around; gap:4px;
}
nav.tabs button{
  flex:1; max-width:140px; background:none; border:none; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 4px; border-radius:10px; font-size:11px; font-weight:500;
}
nav.tabs button .ic{ font-size:19px; line-height:1; }
nav.tabs button.active{ color:var(--accent-text); }
nav.tabs button.active .ic{ transform:translateY(-1px); }

.section-title{ font-size:22px; font-weight:600; margin:0; }
.section-sub{ color:var(--muted); font-size:14px; margin-bottom:16px; }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; margin-bottom:12px; box-shadow:var(--shadow);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:10px; border:1px solid var(--border); background:var(--surface-2);
  color:var(--ink); padding:10px 14px; font-size:14px; font-weight:600;
}
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.ghost{ background:transparent; border-color:transparent; padding:8px 10px; }
.btn.danger{ color:var(--danger); background:transparent; border-color:var(--border); }
.btn:disabled{ opacity:.5; cursor:default; }
.btn.block{ width:100%; }
.btn.sm{ padding:6px 10px; font-size:13px; }

.pill{
  font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--border);
  white-space:nowrap;
}
.pill.season{ background:var(--accent-soft); color:var(--accent-text); border-color:transparent; }
.pill.accent{ background:var(--accent-soft); color:var(--accent-text); border-color:transparent; }
.pill.warn{ background:var(--warn-soft); color:var(--warn); border-color:transparent; }

.row{ display:flex; align-items:center; gap:10px; }
.row.between{ justify-content:space-between; }
.row.wrap{ flex-wrap:wrap; }
.stack{ display:flex; flex-direction:column; gap:10px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:13px; font-weight:600; color:var(--muted); }
.field input, .field select, .field textarea{
  padding:10px 11px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); width:100%;
}
.field textarea{ resize:vertical; min-height:70px; }
.check-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.check-chip{
  display:flex; align-items:center; flex:none; white-space:nowrap; padding:7px 13px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); font-size:13px; cursor:pointer; user-select:none;
}
.check-chip input{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}
.check-chip.on{ background:var(--accent-soft); border-color:transparent; color:var(--accent-text); font-weight:600; }

.wysiwyg-toolbar{ display:flex; gap:6px; margin-bottom:6px; }
.wysiwyg-toolbar .btn{ padding:6px 10px; min-width:34px; }
.wysiwyg-editor{
  min-height:130px; padding:10px 11px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); font-size:14px; line-height:1.5;
}
.wysiwyg-editor:focus{ outline:2px solid var(--accent); outline-offset:-1px; }
.wysiwyg-editor ol, .wysiwyg-editor ul, .wysiwyg-content ol, .wysiwyg-content ul{ padding-left:20px; margin:0 0 8px; }
.wysiwyg-editor p, .wysiwyg-content p{ margin:0 0 8px; }
.wysiwyg-content{ font-size:14px; line-height:1.5; }
.wysiwyg-content li{ margin-bottom:6px; }

.empty{ text-align:center; padding:40px 20px; color:var(--muted); }
.empty .big{ font-size:32px; margin-bottom:8px; }

.recipe-card{ cursor:pointer; }
.recipe-card h3{ font-size:17px; margin:2px 0 6px; font-weight:600; }
.recipe-meta{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.recipe-card.has-thumb{ display:flex; gap:14px; align-items:center; }
.recipe-card-body{ flex:1; min-width:0; }
.recipe-thumb{ width:92px; height:92px; flex:none; border-radius:10px; object-fit:cover; background:var(--surface-2); }
.recipe-hero{ display:block; width:100%; max-height:260px; object-fit:cover; border-radius:12px; margin:0 0 14px; background:var(--surface-2); }

.photo-zone{ display:flex; gap:14px; align-items:center; padding:10px; border:1.5px dashed var(--border); border-radius:12px; background:var(--surface-2); transition:border-color .15s, background .15s; }
.photo-zone.drag{ border-color:var(--accent); background:var(--accent-soft); }
.photo-preview{ width:96px; height:96px; flex:none; border-radius:10px; overflow:hidden; background:var(--surface-3); display:flex; align-items:center; justify-content:center; }
.photo-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-empty{ font-size:12px; color:var(--muted); text-align:center; padding:6px; }
.photo-side{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.photo-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.modal-overlay{
  position:fixed; inset:0; background:rgba(20,24,17,.45); z-index:50;
  display:flex; align-items:flex-start; justify-content:center;
  padding:max(14px, env(safe-area-inset-top)) 12px 14px; overflow-y:auto;
}
.modal{
  background:var(--surface); width:100%; max-width:600px; max-height:calc(100vh - 28px); max-height:calc(100dvh - 28px); overflow-y:auto;
  border-radius:18px; padding:20px; box-shadow:var(--shadow);
}
.modal-overlay.leave-guard{ z-index:90; align-items:center; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.ing-row{ display:grid; grid-template-columns:1fr 60px 84px 28px; gap:6px; align-items:center; }
.ing-name-wrap{ position:relative; }
.ing-name-wrap input{ padding-right:26px; }
.ing-status{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%; background:var(--surface-2); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; line-height:1; pointer-events:none;
}
.ing-status:empty{ display:none; }
.ing-status.known{ background:var(--accent-soft); color:var(--accent-text); }
.ing-status.maybe, .ing-status.new{ background:var(--warn-soft); color:var(--warn); }
.ing-pivot-btn{ font-size:12.5px; opacity:.55; }
.ing-pivot-btn.on{ opacity:1; background:var(--accent-soft); color:var(--accent-text); border-color:transparent; font-weight:600; }
.ing-row input, .ing-row select{ padding:8px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--ink); width:100%; font-size:13px; }

.receipt{ background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius); padding:18px 16px; }
.receipt-group{ margin-bottom:14px; }
.receipt-group-title{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.receipt-line{ display:flex; align-items:baseline; gap:8px; padding:5px 0; border-bottom:1px dotted var(--border); }
.receipt-line:last-child{ border-bottom:none; }
.receipt-line .chk{ width:18px; height:18px; accent-color:var(--accent); flex:none; }
.receipt-line .name{ flex:1; font-size:14px; }
.receipt-line.done .name{ text-decoration:line-through; color:var(--muted); }
.receipt-line .qty{ font-size:12.5px; color:var(--muted); }
.receipt-line .price{ font-size:13.5px; min-width:56px; text-align:right; }
.receipt-total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:12px; margin-top:6px; border-top:1px solid var(--border); font-size:16px; font-weight:600; }
.receipt-note{ font-size:12px; color:var(--muted); margin-top:4px; }

.meal-card{ display:flex; gap:12px; align-items:flex-start; }
.meal-card .txt{ flex:1; }
.meal-actions{ display:flex; gap:4px; }

.loading{ text-align:center; padding:60px 20px; color:var(--muted); }

.toast{
  position:fixed; left:16px; right:16px; bottom: calc(78px + env(safe-area-inset-bottom,0px));
  max-width:520px; margin:0 auto; z-index:60; background:var(--ink); color:var(--bg);
  padding:12px 16px; border-radius:12px; font-size:13.5px; box-shadow:var(--shadow); cursor:pointer;
}

.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card{
  width:100%; max-width:340px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow);
}
.login-error{
  background:var(--accent-soft); color:var(--accent-text); border-radius:10px; padding:9px 12px;
  font-size:13px; margin-bottom:14px;
}

.season-chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:10px 0 4px; }
.season-chip{ border:1px solid var(--border); background:transparent; color:var(--muted); border-radius:999px; padding:3px 10px; font-size:12px; font-family:inherit; cursor:pointer; }
.season-chip.on{ background:var(--accent-soft); color:var(--accent-text); border-color:transparent; font-weight:600; }

/* Icônes : Lucide (interface, traits) et Fluent Emoji (ingrédients, couleur) */
.ico{ width:1.15em; height:1.15em; flex:none; vertical-align:-0.2em; }
.btn .ico{ vertical-align:0; }
.pill .ico, .household-chip .ico{ width:1em; height:1em; vertical-align:-0.15em; margin-right:2px; }
.household-chip .ico{ margin-right:0; }
.ico.fill{ fill:currentColor; }
.ico.star-on{ color:var(--warn); }
.ico-food{ width:1em; height:1em; flex:none; display:inline-block; vertical-align:-0.15em; }
.ico-food.big-ico{ width:48px; height:48px; }
.brand .pot{ display:inline-flex; }
.brand .pot .ico-food{ width:26px; height:26px; }
nav.tabs button .ic{ display:flex; height:24px; align-items:center; }
nav.tabs button .ic .ico{ width:22px; height:22px; stroke-width:1.8; }
nav.tabs button.active .ic .ico{ stroke-width:2.2; }

.ing-ico{
  width:44px; height:44px; flex:none; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center;
}
.ing-ico .ico-food{ width:30px; height:30px; vertical-align:0; }
.ing-ico.none{ color:var(--muted); }
.ing-ico.none .ico{ width:20px; height:20px; opacity:.7; vertical-align:0; }

.icon-panel{ margin-top:8px; padding:10px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }
.icon-panel[hidden]{ display:none; }
.icon-panel input[type=text]{ width:100%; margin-bottom:8px; }
.icon-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(46px, 1fr)); gap:6px; max-height:210px; overflow-y:auto; }
.icon-tile{
  aspect-ratio:1; border-radius:10px; border:1px solid transparent; background:var(--surface);
  display:flex; align-items:center; justify-content:center; padding:0; color:var(--muted); cursor:pointer;
}
.icon-tile:hover{ border-color:var(--border); }
.icon-tile.on{ border-color:var(--accent); background:var(--accent-soft); }
.icon-tile .ico-food{ width:28px; height:28px; vertical-align:0; }
.icon-tile .ico{ width:20px; height:20px; vertical-align:0; }

/* Réglages : compteurs et aperçu d'impact */
.chip-count{ font-size:11px; font-weight:600; color:var(--muted); background:var(--surface-2); border-radius:999px; padding:0 6px; margin-left:2px; }
.check-chip.on .chip-count{ background:rgba(255,255,255,.55); color:inherit; }
.impact{ font-size:13px; color:var(--muted); background:var(--surface-2); border-radius:10px; padding:8px 12px; }
.impact:empty{ display:none; }
.impact.warn-text{ color:var(--warn); background:var(--warn-soft); font-weight:600; }


/* ===== Thème chaleureux et code couleur strict ===== */
body{ background:var(--bg); }
header.top{ background:var(--bg); }
.card{ border-radius:var(--radius); }
.btn{ border-radius:12px; }
.btn.primary{ box-shadow:0 6px 14px -8px rgba(201,63,25,.7); }
.btn.primary:hover{ filter:brightness(1.05); }
.btn.danger{ color:var(--accent-text); }
.section-title{ font-size:26px; letter-spacing:-0.01em; }

nav.tabs{ border-radius:20px 20px 0 0; box-shadow:0 -6px 20px -12px rgba(74,45,20,.35); }
nav.tabs button.active{ background:var(--accent-soft); color:var(--accent-text); font-weight:600; }

/* Neutres : saisons, allergènes, états ne portent aucune couleur */
.pill{ background:var(--surface); color:var(--muted); border:1px solid var(--border); }
.pill.season{ background:var(--surface); color:var(--muted); border:1px solid var(--border); }
.pill.warn{ background:transparent; color:var(--ink); border:1px dashed var(--muted); }
.pill.accent{ background:var(--accent-soft); color:var(--accent-text); border-color:transparent; }
.ing-status.known{ background:var(--surface-3); color:var(--ink); }
.ing-status.maybe, .ing-status.new{ background:var(--accent-soft); color:var(--accent-text); }
.ico.star-on{ color:var(--accent); }
.season-chip.on{ background:var(--surface-3); color:var(--ink); border-color:var(--border); }
.check-chip.on{ background:var(--accent-soft); color:var(--accent-text); }
.photo-zone.drag{ border-color:var(--accent); background:var(--accent-soft); }

/* Régime (recettes) : pastille point + libellé, texte en encre sur fond doux */
.dp{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:3px 10px 3px 8px; border-radius:999px; white-space:nowrap; }
.dp i{ width:8px; height:8px; border-radius:50%; flex:none; }
.dp.vegan{ background:var(--vegan-soft); color:var(--vegan-ink); } .dp.vegan i{ background:var(--vegan); }
.dp.vegetarien{ background:var(--vegetarien-soft); color:var(--vegetarien-ink); } .dp.vegetarien i{ background:var(--vegetarien); }
.dp.poisson{ background:var(--poisson-soft); color:var(--poisson-ink); } .dp.poisson i{ background:var(--poisson); }
.dp.viande{ background:var(--viande-soft); color:var(--viande-ink); } .dp.viande i{ background:var(--viande); }
.d-vegan{ --dc:var(--vegan); --dcs:var(--vegan-soft); }
.d-vegetarien{ --dc:var(--vegetarien); --dcs:var(--vegetarien-soft); }
.d-poisson{ --dc:var(--poisson); --dcs:var(--poisson-soft); }
.d-viande{ --dc:var(--viande); --dcs:var(--viande-soft); }
.has-diet{ border-left:5px solid var(--dc); }
.modal.d-vegan, .modal.d-vegetarien, .modal.d-poisson, .modal.d-viande{ border-top:6px solid var(--dc); }
.recipe-thumb{ width:84px; height:84px; border-radius:14px; }
.recipe-thumb.ph{ display:flex; align-items:center; justify-content:center; background:var(--dcs, var(--surface-2)); }
.recipe-thumb.ph .ico-food{ width:46px; height:46px; vertical-align:0; }
.recipe-card.has-thumb{ gap:14px; align-items:center; }

/* Catégorie (ingrédients) : filet gauche + pastille d'icône teintés */
.c-legumes{ --cc:var(--legumes); --ccs:var(--legumes-soft); --cci:var(--legumes-ink); }
.c-herbes{ --cc:var(--herbes); --ccs:var(--herbes-soft); --cci:var(--herbes-ink); }
.c-fruits{ --cc:var(--fruits); --ccs:var(--fruits-soft); --cci:var(--fruits-ink); }
.c-feculents{ --cc:var(--feculents); --ccs:var(--feculents-soft); --cci:var(--feculents-ink); }
.c-laitiers{ --cc:var(--laitiers); --ccs:var(--laitiers-soft); --cci:var(--laitiers-ink); }
.c-viande{ --cc:var(--viande); --ccs:var(--viande-soft); --cci:var(--viande-ink); }
.c-poisson{ --cc:var(--poisson); --ccs:var(--poisson-soft); --cci:var(--poisson-ink); }
.c-epicerie{ --cc:var(--epicerie); --ccs:var(--epicerie-soft); --cci:var(--epicerie-ink); }
.ing-card{ border-left:5px solid var(--cc, var(--border)); }
.ing-ico{ width:48px; height:48px; border-radius:14px; background:var(--ccs, var(--surface-2)); border-color:transparent; }
.ing-ico .ico-food{ width:32px; height:32px; }
.modal.c-legumes, .modal.c-herbes, .modal.c-fruits, .modal.c-feculents, .modal.c-laitiers, .modal.c-viande, .modal.c-poisson, .modal.c-epicerie{ border-top:6px solid var(--cc); }
.cat-label{ font-size:12px; font-weight:600; color:var(--cci, var(--muted)); }

/* Accueil chaleureux */
.hero{
  background:linear-gradient(135deg,#FDEBD8,#FBDFC8); border-radius:22px; padding:26px 22px; margin-bottom:14px;
  display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.hero h2{ font-size:26px; line-height:1.15; margin:0; color:#5A3520; }
.hero p{ margin:6px 0 0; color:#6B4630; font-size:14.5px; }
.hero .hero-ico{ width:64px; height:64px; flex:none; }
.hero .btn.primary{ padding:12px 20px; font-size:15px; }
.hero .hero-ico .ico-food{ width:64px; height:64px; vertical-align:0; }
.hero .hero-ico{ display:inline-flex; }

/* ===== Réglages : sections, barre d'enregistrement, sélecteur d'ingrédients ===== */
.card-head h3{ font-size:18px; margin:0 0 2px; }
.card-head p{ margin:0; color:var(--muted); font-size:13.5px; }
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
@media (max-width:460px){ .grid-3{ grid-template-columns:repeat(2, minmax(0,1fr)); } .grid-3 .field:nth-child(3){ grid-column:1 / -1; } }
.save-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:10px 12px 10px 16px; box-shadow:var(--shadow); margin-top:8px;
}
.save-bar .hint{ font-size:13px; color:var(--muted); }
.save-bar.dirty{ border-color:var(--accent); }
.save-bar.dirty .hint{ color:var(--accent-text); font-weight:600; }
.linklike{ background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--accent-text); text-decoration:underline; cursor:pointer; }

.picker{ display:flex; flex-direction:column; gap:8px; }
.picker-input{ width:100%; padding:10px 11px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--ink); }
.pick-chip{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; background:var(--ccs, var(--surface-2)); color:var(--cci, var(--ink)); border-color:transparent; font-size:12.5px; padding:4px 10px 4px 6px; }
.pick-chip .ico-food{ width:18px; height:18px; vertical-align:0; }
.pick-chip .ico{ width:.9em; height:.9em; margin:0; }
.pick-list{ max-height:260px; overflow-y:auto; border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:4px; }
.pick-item{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left; background:none; border:0;
  border-radius:10px; padding:5px 8px; color:var(--ink); font-size:14px;
}
.pick-item:hover:not([disabled]){ background:var(--surface-2); }
.pick-item .ing-ico{ width:34px; height:34px; border-radius:10px; }
.pick-item .ing-ico .ico-food{ width:24px; height:24px; }
.pick-item .ing-ico.none .ico{ width:16px; height:16px; }
.pick-name{ flex:1; min-width:0; }
.pick-item.off{ opacity:.5; cursor:default; }
.pick-why{ font-size:11.5px; color:var(--muted); white-space:nowrap; }
.pick-empty{ padding:10px; font-size:13px; color:var(--muted); }

/* Nav : largeur stable quelle que soit la page (la barre de défilement ne doit plus la faire varier) */
html{ scrollbar-gutter:stable; }
nav.tabs{ left:0; right:0; width:100%; padding-left:max(10px, calc((100% - 720px) / 2)); padding-right:max(10px, calc((100% - 720px) / 2)); }

/* Bords de défilement : entête et menu opaques, sans fondu. Marges internes pour que rien ne colle aux bords. */
header.top{ background:var(--bg); backdrop-filter:none; }
nav.tabs{ border-radius:0; background:var(--surface); box-shadow:none; }

/* Mise en page verticale : le contenu respire autant en haut (sous l'entête) qu'en bas (au-dessus du menu).
   Le body réserve la hauteur du menu fixe ; main garde la même marge de 24px des deux côtés. */
main.container{ padding-top:24px; padding-bottom:24px; }
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:34px; margin:0 0 14px; }
.page-head .section-title{ line-height:1.15; }

/* Bouton inactif (rien à enregistrer) : gris neutre, aucun effet au survol ni au clic. */
.btn:disabled, .btn:disabled:hover, .btn:disabled:active,
.btn.primary:disabled, .btn.primary:disabled:hover, .btn.primary:disabled:active{
  background:#E4E2DE; border-color:#E4E2DE; color:#9A968F; opacity:1; filter:none; transform:none;
  box-shadow:none; cursor:default; pointer-events:none;
}
/* Trio adultes / enfants / repas : étiquettes sur une ligne, champs toujours alignés. */
.grid-3{ align-items:start; }
.grid-3 .field label{ white-space:nowrap; }

/* Puces et sélecteurs d'ingrédients : icônes de catégorie en traits (Lucide), lisibles avec ou sans fond coloré. */
.pick-chip .ico{ width:16px; height:16px; margin:0; flex:none; vertical-align:0; }
.pick-chip .ico:last-child{ width:13px; height:13px; opacity:.7; }
.pick-item .cat-ico{ width:34px; height:34px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--ccs, var(--surface-2)); color:var(--cci, var(--muted)); }
.pick-item .cat-ico .ico{ width:18px; height:18px; vertical-align:0; margin:0; }
.pick-season{ display:inline-flex; color:var(--herbes-ink); }
.pick-season .ico{ width:16px; height:16px; vertical-align:0; margin:0; }
.pivot-chip{ gap:7px; }
.pivot-chip .ico{ width:16px; height:16px; margin:0; vertical-align:0; color:var(--cci, var(--muted)); }
.pivot-chip.on .ico{ color:currentColor; }
/* Ingrédients de saison : bloc mis en avant au-dessus des autres suggestions */
.season-box{ background:var(--surface-2); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:10px; }
.season-head{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink); }
.season-head .ico{ width:17px; height:17px; vertical-align:0; margin:0; color:var(--herbes-ink); }
.season-head span{ color:var(--muted); }
.season-head span::before{ content:'· '; }

/* ===== Flat : pas d'ombres ni de contours sur les cards. Grille unique : tout occupe la pleine largeur du conteneur. ===== */
:root{ --shadow:none; }
.card, .save-bar, .login-card, .receipt, .modal, .icon-panel, .pick-list{ border:0; box-shadow:none; }
.pick-list{ background:var(--surface-2); }
.pick-item:hover:not([disabled]){ background:var(--surface-3); }
.receipt{ background:var(--surface); }
.icon-panel{ background:var(--surface-2); }
.btn, .btn.danger{ border:0; }
.btn.primary{ box-shadow:none; }
.btn:not(.sm):not(.ghost){ min-height:44px; }
.btn.sm{ min-height:34px; }
.pill, .pill.season{ background:var(--surface-2); border:0; color:var(--muted); }
.pill.warn{ background:var(--warn-soft); color:var(--warn); border:0; }
.household-chip{ border:0; }
nav.tabs{ box-shadow:none; }
.toast{ box-shadow:none; }

/* Rythme vertical unique : 12px entre deux blocs de la page */
main.container{ display:flex; flex-direction:column; gap:12px; }
main.container > *{ margin:0; }
main.container .card{ margin:0; }
main.container .stack{ gap:12px; }
.page-head + .section-sub{ margin-top:-6px; }
.stack{ gap:12px; }

/* Barre colorée gauche des cards (régime, catégorie) : un filet intérieur, sans contour qui s'arrondit */
.has-diet, .ing-card{ border-left:0; position:relative; }
.has-diet::before, .ing-card::before{ content:''; position:absolute; left:0; top:16px; bottom:16px; width:5px; border-radius:0 5px 5px 0; background:var(--dc, var(--cc, var(--border))); }
.has-diet{ padding-left:20px; }
.ing-card{ padding-left:20px; }

/* Grilles de formulaire et actions */
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.grid-3.keep{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:460px){ .grid-3.keep{ grid-template-columns:repeat(3, minmax(0,1fr)); } .grid-3.keep .field:nth-child(3){ grid-column:auto; } }
.actions{ display:flex; flex-direction:column; gap:8px; }
.actions-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:12px; }
.actions-2 > .btn:only-child{ grid-column:1 / -1; }
.actions .actions-2{ margin-top:0; }
.btn.block{ width:100%; }
.btn.ghost.block{ color:var(--muted); }

/* Champs de recherche et filtres */
.input{ width:100%; height:44px; padding:0 12px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:15px; }
select.input{ padding-right:8px; }
.filter-bar{ display:flex; gap:10px; align-items:center; }
.filter-bar .input{ flex:1; min-width:0; }
.filter-bar .check-chip{ height:44px; align-items:center; flex:none; }
.filter-bar.recettes{ display:grid; grid-template-columns:minmax(0,1fr) 150px 44px; }
.filter-bar.recettes #f-search{ grid-column:1; }
.filter-bar .btn.sort{ width:44px; padding:0; background:var(--surface); border:1px solid var(--border); font-size:18px; }
@media (max-width:560px){
  .filter-bar.recettes{ grid-template-columns:minmax(0,1fr) 44px; }
  .filter-bar.recettes #f-search{ grid-column:1 / -1; }
}
.inline-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }

/* État vide : bloc plein, pas de texte flottant */
.empty{ background:var(--surface); border-radius:var(--radius); padding:32px 20px; }

/* Liste de courses : grille fixe case | nom | quantité | prix */
.receipt-line{ display:grid; grid-template-columns:22px minmax(0,1fr) auto minmax(52px,auto); align-items:center; column-gap:10px; padding:8px 0; }
.receipt-line.static{ grid-template-columns:minmax(0,1fr) auto minmax(52px,auto); }
.receipt-line .name{ display:flex; flex-direction:column; gap:2px; align-items:flex-start; min-width:0; }
.receipt-line .name .linklike{ font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:5px; text-decoration:none; }
.receipt-line .name .linklike .ico{ width:14px; height:14px; vertical-align:0; }
.receipt-line .qty{ text-align:right; }
.receipt-group{ margin-bottom:16px; }
.receipt-group:last-of-type{ margin-bottom:8px; }
.receipt-total{ align-items:center; }
.receipt-note{ margin-top:8px; }
.btn.danger{ background:var(--accent-soft); color:var(--accent-text); }

.receipt-line .price{ white-space:nowrap; min-width:0; }
.receipt-line .name .linklike{ white-space:nowrap; }
.receipt-line .name .n{ overflow-wrap:anywhere; }
/* Carte ingrédient : icône | nom + badges | Éditer, puis une ligne de stats sur toute la largeur du texte */
.ing-grid{ display:grid; grid-template-columns:48px minmax(0,1fr) auto; column-gap:12px; row-gap:8px; align-items:start; }
.ing-grid .ing-ico{ grid-row:1; }
.ing-grid .ing-main{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ing-grid .ing-name{ font-weight:600; font-size:15px; line-height:1.25; padding-top:2px; }
.ing-grid .recipe-meta{ margin-top:0; }
.ing-grid .ing-stats{ grid-column:2 / -1; font-size:13px; color:var(--muted); }
.wysiwyg-content strong, #m-body strong{ font-weight:600; }

.receipt-line{ grid-template-columns:22px minmax(0,1fr) 92px 72px; }
.receipt-line.static{ grid-template-columns:minmax(0,1fr) 92px 72px; }
.receipt-line .qty{ white-space:nowrap; }

/* ===== Puces (interactives) et étiquettes (lecture seule) : un seul gabarit chacune ===== */
.check-chip, .pick-chip, .season-chip{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; box-sizing:border-box;
  border-radius:999px; border:0; font-size:13px; font-weight:600; line-height:1; white-space:nowrap;
  background:var(--surface-2); color:var(--ink); font-family:inherit; cursor:pointer; user-select:none;
}
.check-chip .ico, .pick-chip .ico, .season-chip .ico{ width:16px; height:16px; flex:none; margin:0; vertical-align:0; color:var(--muted); }
.check-chip.on, .season-chip.on{ background:var(--accent-soft); color:var(--accent-text); font-weight:600; }
.check-chip.on .ico, .season-chip.on .ico{ color:currentColor; }
.pick-chip{ background:var(--ccs, var(--surface-2)); color:var(--cci, var(--ink)); padding:0 12px 0 14px; }
.pick-chip .ico{ color:currentColor; }
.pick-chip .ico:last-child{ width:14px; height:14px; opacity:.6; }
.pivot-chip .ico{ color:var(--cci, var(--muted)); }
.pivot-chip.on .ico{ color:currentColor; }
.filter-bar .check-chip{ height:44px; background:var(--surface); }
.season-chips .season-chip{ height:36px; }

.pill, .dp{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; box-sizing:border-box; border-radius:999px; font-size:11.5px; font-weight:600; line-height:1; white-space:nowrap; }
.dp{ padding:0 10px 0 9px; }
.pill .ico{ width:12px; height:12px; margin:0; vertical-align:0; }

/* Filet de couleur : pleine hauteur de la card, coupé par ses coins arrondis */
.has-diet, .ing-card{ overflow:hidden; padding-left:22px; }
.has-diet::before, .ing-card::before{ top:0; bottom:0; width:6px; border-radius:0; }

/* Fiche recette : l'ingrédient d'abord (gras), la quantité à droite */
.ing-list{ list-style:none; margin:0 0 20px; padding:0; }
.ing-list li{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--surface-2); font-size:14px; }
.ing-list li:last-child{ border-bottom:0; }
.ing-list .ing-n{ min-width:0; }
.ing-list .ing-n .ico{ width:14px; height:14px; vertical-align:-2px; margin-right:4px; color:var(--accent-text); }
.ing-list .ing-n strong{ font-weight:600; }
.ing-list .ing-q{ color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.season-box .check-chip{ background:var(--surface); }
.season-box .check-chip.on{ background:var(--accent-soft); }

/* Aliments choisis (à éviter, ingrédient phare) : même gabarit que les autres puces, état sélectionné */
.pick-chip, .pick-chip.on{ background:var(--accent-soft); color:var(--accent-text); height:36px; padding:0 12px 0 14px; font-size:13px; font-weight:600; }
.pick-chip .ico{ color:currentColor; }

/* Favoris : étoile sur la carte recette, dans la fiche, et filtre dans la barre de recherche */
.recipe-card{ position:relative; }
.recipe-card .recipe-card-body{ padding-right:34px; }
.fav-btn{ position:absolute; top:8px; right:8px; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.fav-btn .ico{ width:20px; height:20px; vertical-align:0; margin:0; }
.fav-btn:hover{ background:var(--surface-2); }
.fav-btn.on{ color:var(--accent); }
.fav-btn.inline{ position:static; flex:none; }
.filter-bar .check-chip.on{ background:var(--accent-soft); }
.filter-bar.recettes{ grid-template-columns:minmax(0,1fr) auto 150px 44px; }
@media (max-width:560px){
  .filter-bar.recettes{ grid-template-columns:auto minmax(0,1fr) 44px; }
  .filter-bar.recettes #f-search{ grid-column:1 / -1; }
}
.ico.fill, .ico.fill path{ fill:currentColor; }

/* Historique : cartes cliquables avec chevron, repas du menu en mini-cartes de recette */
.history-card{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.history-card .txt{ flex:1; min-width:0; }
.history-card .recipe-meta{ margin-top:8px; }
.history-card .meal-actions{ flex:none; }
.recipe-card.mini{ display:flex; align-items:center; gap:12px; padding:10px 12px 10px 20px; margin:0; background:var(--surface-2); cursor:pointer; }
.recipe-card.mini .recipe-card-body{ padding-right:0; }
.recipe-card.mini h3{ font-size:15px; margin:0 0 2px; }
.recipe-card.mini .recipe-thumb{ width:48px; height:48px; border-radius:10px; }
.recipe-card.mini .recipe-thumb.ph .ico-food{ width:30px; height:30px; }
.recipe-card.mini.missing{ color:var(--muted); cursor:default; padding-left:16px; font-size:14px; }
.recipe-card.mini:hover{ background:var(--surface-3); }
.meal-card .recipe-meta{ margin-top:0; }
.meal-card:not([data-view-recipe]){ cursor:default; }
a.btn{ text-decoration:none; }
/* Boutons posés directement sur le fond de page : blancs, pour rester lisibles sur le fond plus soutenu. */
.actions .btn:not(.primary):not(.ghost), .filter-bar .btn:not(.primary):not(.ghost), .page-head .btn:not(.primary):not(.ghost){ background:var(--surface); border-color:transparent; }
.household-chip{ background:var(--surface); border-color:transparent; }
/* En-tête : logo centré, il défile avec la page (plus de barre fixe). */
header.top{ position:static; border-bottom:0; padding-top:max(22px, calc(env(safe-area-inset-top,0px) + 14px)); }
.top-row{ justify-content:center; align-items:center; padding-bottom:0; }
main.container{ padding-top:20px; }

/* Vignettes de recette : carrées, 48 px comme les icônes d'ingrédients, alignées en haut du contenu */
.recipe-thumb{ width:48px; height:48px; aspect-ratio:1/1; border-radius:14px; object-fit:cover; flex:none; }
.recipe-thumb.ph .ico-food{ width:32px; height:32px; }
.recipe-card.has-thumb:not(.mini){ align-items:flex-start; gap:12px; }
.recipe-lead{ display:flex; gap:12px; align-items:flex-start; margin:0 0 14px; }
.recipe-lead-body{ flex:1; min-width:0; }
.recipe-lead .recipe-meta{ margin-top:6px; }
.src-line{ margin:-4px 0 14px; }
.src-line a{ text-decoration:underline; text-underline-offset:2px; }
.modal{ overflow-wrap:anywhere; }

/* Écran de connexion : une seule boîte centrée, sans scroll (pas de barre de navigation à compenser) */
body.is-login{ padding-bottom:0; }
body.is-login .login-screen{ min-height:calc(100vh - env(safe-area-inset-top,0px)); min-height:calc(100dvh - env(safe-area-inset-top,0px)); }

/* iOS zoome sur tout champ dont le texte fait moins de 16 px : on l'évite sur les écrans tactiles. */
@media (hover:none) and (pointer:coarse){
  input, select, textarea, .input, .field input, .field select, .field textarea, .ing-row input, .ing-row select{ font-size:16px !important; }
}
/* Fiche : grande image carrée */
.recipe-hero{ display:block; width:100%; max-width:380px; max-height:none; aspect-ratio:1/1; height:auto; object-fit:cover; border-radius:16px; margin:0 0 14px; background:var(--surface-2); }

/* Assistant : choix manuel des recettes */
.filter-bar.wizpick{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; margin:0; }
.pick-recipe{ user-select:none; }
.pick-recipe .pick-check{ flex:none; width:26px; height:26px; border-radius:50%; border:1.5px solid #CFC5B8; color:transparent; display:flex; align-items:center; justify-content:center; background:var(--surface); }
.pick-recipe .pick-check .ico{ width:15px; height:15px; margin:0; vertical-align:0; }
.pick-recipe.on{ background:var(--accent-soft); }
.pick-recipe.on:hover{ background:var(--accent-soft); }
.pick-recipe.on .pick-check{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.pick-recipe .out-flag{ color:var(--warn); font-weight:600; white-space:nowrap; }
.pick-recipe .out-flag .ico{ width:.95em; height:.95em; vertical-align:-0.15em; }
.recap-list{ margin:0; padding-left:18px; font-size:14px; display:flex; flex-direction:column; gap:4px; }
.modal .grid-2{ align-items:start; }
.mode-card{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; font:inherit; color:var(--ink); background:var(--surface-2); border:0; border-radius:16px; padding:16px; cursor:pointer; }
.mode-card:hover{ background:var(--surface-3); }
.mode-card.on, .mode-card.on:hover{ background:var(--accent-soft); }
.mode-card .mode-ico{ flex:none; width:44px; height:44px; border-radius:12px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--muted); }
.mode-card .mode-ico .ico{ width:22px; height:22px; margin:0; vertical-align:0; }
.mode-card.on .mode-ico{ color:var(--accent-text); }
.mode-card .mode-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; font-size:13.5px; color:var(--muted); line-height:1.4; }
.mode-card .mode-txt strong{ font-size:15.5px; color:var(--ink); }
.mode-card .pick-check{ flex:none; width:26px; height:26px; border-radius:50%; border:1.5px solid #CFC5B8; color:transparent; display:flex; align-items:center; justify-content:center; background:var(--surface); }
.mode-card .pick-check .ico{ width:15px; height:15px; margin:0; vertical-align:0; }
.mode-card.on .pick-check{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.pick-recipe .out-flag{ font-size:12.5px; }
#wp-all{ max-width:100%; }

/* Barre de filtres commune (Recettes, Ingrédients) : recherche + pastille, puis type, tri, sens */
.filter-bar.fb{ display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.filter-bar.fb .fb-row{ display:flex; gap:8px; align-items:center; }
.filter-bar.fb .fb-sel{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px; }
.filter-bar.fb select.input{ text-overflow:ellipsis; padding-right:8px; }

/* Menus : fiche d'un menu, cartes de repas dans le popup */
.modal .meal-card.history-card{ background:var(--surface-2); }
.modal .meal-card.history-card:hover{ background:var(--surface-3); }
.page-head.menu-back{ min-height:0; margin:0 0 4px; }
.page-head.menu-back .btn{ margin-left:-10px; }
.page-head .meal-actions{ flex:none; }
.menu-list-title{ font-size:20px; margin:28px 0 12px; }
.wiz-nav.two{ grid-template-columns:1fr 1.6fr; }
.wiz-nav .btn, .wp-actions .btn{ white-space:nowrap; }

/* Cartes : actions en pastilles rondes (24px, 1/1), posées en haut à droite et centrées sur le bord haut de la card (top -12px).
   Le contenu garde toute la largeur : la marge haute de la card le tient sous les pastilles. */
.history-card, .recipe-card:not(.mini){ position:relative; padding-top:18px; overflow:visible; }
.history-card{ display:block; cursor:pointer; }
.history-card > .txt{ display:block; min-width:0; }
.history-card > .meal-actions{ position:absolute; top:-12px; right:10px; display:flex; gap:4px; z-index:1; }
.history-card > .meal-actions .btn.sm, .recipe-card > .fav-btn:not(.inline){
  width:24px; height:24px; min-width:0; min-height:0; max-width:24px; max-height:24px; aspect-ratio:1/1; flex:none;
  padding:0; margin:0; border:0; border-radius:50%; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; background:var(--surface-3); color:var(--ink);
}
.history-card > .meal-actions .btn.sm:hover, .recipe-card > .fav-btn:not(.inline):hover{ background:#E2DACE; }
.history-card > .meal-actions .btn.sm .ico, .recipe-card > .fav-btn:not(.inline) .ico{ width:13px; height:13px; margin:0; vertical-align:0; }
.recipe-card > .fav-btn:not(.inline){ position:absolute; top:-12px; right:10px; z-index:1; }
.recipe-card > .fav-btn.on:not(.inline){ color:var(--accent); }
.recipe-card:not(.mini) .recipe-card-body{ padding-right:0; }

/* Frise colorée : peinte en fond de card (donc arrondie avec elle) pour que la card puisse laisser dépasser ses pastilles. */
.has-diet::before{ display:none; }
.has-diet{
  overflow:visible;
  background-image:linear-gradient(var(--dc), var(--dc)) !important; background-size:6px 100% !important;
  background-repeat:no-repeat !important; background-position:left top !important;
}
.photo-actions .btn:not(.ghost){ background:var(--surface); border-color:transparent; }

/* Ingrédients : bouton Éditer en pastille ronde, comme sur les autres cards. */
.ing-card{ position:relative; overflow:visible; padding-top:18px; }
.ing-card::before{ display:none; }
.ing-card{
  background-image:linear-gradient(var(--cc, var(--border)), var(--cc, var(--border))) !important; background-size:6px 100% !important;
  background-repeat:no-repeat !important; background-position:left top !important;
}
.ing-grid{ grid-template-columns:48px minmax(0,1fr); }
.ing-card .ing-edit{
  position:absolute; top:-12px; right:10px; z-index:1;
  width:24px; height:24px; min-width:0; min-height:0; max-width:24px; max-height:24px; aspect-ratio:1/1;
  padding:0; margin:0; border:0; border-radius:50%; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; background:var(--surface-3); color:var(--ink);
}
.ing-card .ing-edit:hover{ background:#E2DACE; }
.ing-card .ing-edit .ico{ width:13px; height:13px; margin:0; vertical-align:0; }

/* Les pastilles dépassent de 12px : on laisse de la place au-dessus de chaque card (entre cards et sous la barre de filtres). */
main.container .history-card, main.container .recipe-card:not(.mini), main.container .ing-card, .modal .history-card{ margin-top:8px; }

/* Accueil : icône centrée en haut, texte et bouton sur toute la largeur. */
.hero{ flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:18px; text-align:center; }
.hero .hero-top{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.hero .btn.primary{ width:100%; justify-content:center; }

/* Photo de recette : image à gauche (croix ronde en haut à droite), boutons empilés à droite. */
.photo-frame{ position:relative; flex:none; }
.photo-remove{
  position:absolute; top:-8px; right:-8px; z-index:1; width:24px; height:24px; aspect-ratio:1/1; padding:0; border:0; border-radius:50%;
  background:var(--surface); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.photo-remove .ico{ width:13px; height:13px; margin:0; vertical-align:0; }
.photo-remove:hover{ background:var(--surface-3); }
.photo-side{ flex:1; }
.photo-actions{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; }
.photo-actions .btn{ justify-content:center; white-space:nowrap; }
.photo-hint:empty{ display:none; }
.photo-hint{ font-size:12.5px; }
/* Zone de collage de secours (apparaît seulement si Safari refuse la lecture directe). */
.photo-catcher{
  min-height:44px; padding:10px 12px; border-radius:12px; background:var(--surface); border:1.5px dashed var(--accent);
  font-size:14px; color:var(--ink); outline:none; -webkit-user-select:text; user-select:text;
}
.photo-catcher:empty::before{ content:'Touche ici, puis « Coller »'; color:var(--muted); }

/* Ingrédients de la recette : poignée de déplacement à gauche de chaque ligne. */
.ing-row{ grid-template-columns:18px minmax(0,1fr) 60px 84px 28px; gap:6px; }
.ing-grip{
  width:18px; height:34px; padding:0; border:0; background:none; color:var(--muted); cursor:grab;
  display:flex; align-items:center; justify-content:center; touch-action:none; -webkit-user-select:none; user-select:none;
}
.ing-grip .ico{ width:16px; height:16px; margin:0; vertical-align:0; }
.ing-grip:hover, .ing-grip:focus-visible{ color:var(--ink); }
.ing-grip:active{ cursor:grabbing; }
.ing-row.dragging{ background:var(--accent-soft); border-radius:10px; outline:2px solid var(--accent); outline-offset:3px; position:relative; z-index:2; }
.ing-row.dragging .ing-grip{ color:var(--accent-text); }

/* Type de plat : filtres sur deux lignes (type + régime, puis tri) et sélecteur du choix manuel */
.filter-bar.fb .fb-sel.fb-two{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.filter-bar.fb .fb-sel.fb-sort{ grid-template-columns:minmax(0,1fr) 44px; }
.filter-bar.wizpick .wp-course{ grid-column:1 / -1; }