/* ==========================================================================
   BatchCook Hub — Design System
   Theme: Équiterra (crème & terracotta) — boutique-equiterra.fr
   Primary burgundy #73273F · accent terracotta #8A4B24 · cream #FBF8F3
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* --- Surfaces (warm cream ladder) --- */
  --cream-0:    #FFFFFF;   /* cards, modals */
  --cream-50:   #FEFCF9;   /* raised surface */
  --cream-100:  #FBF8F3;   /* page background */
  --cream-200:  #F5EFE6;   /* subtle fill, inputs */
  --cream-300:  #EDE4D6;   /* pressed / hover fill */
  --sand:       #F3E7CE;   /* accent fill */

  /* --- Lines --- */
  --line:        #EFE7DA;
  --line-strong: #E0D4BF;
  --line-ink:    #2E2A26;

  /* --- Ink (warm charcoal) --- */
  --ink:      #2E2A26;
  --ink-80:   #4A453F;
  --ink-70:   #6E6A63;   /* muted body */
  --ink-50:   #78736C;   /* dim / placeholder — 4.7:1 on cream */

  /* --- Brand --- */
  --burgundy:        #73273F;   /* 10.0:1 on cream — primary */
  --burgundy-hover:  #5C1F32;
  --burgundy-active: #4A1928;
  --burgundy-soft:   #F3EAED;   /* tinted fill */
  --burgundy-ring:   rgba(115, 39, 63, 0.28);

  --terracotta:      #8A4B24;   /* 6.7:1 on cream — accent */
  --terracotta-soft: #F7EDE4;
  --terracotta-line: #E4CFBC;

  --ochre:      #8A6A18;
  --ochre-soft: #FBF3DE;
  --ochre-line: #E9D9A8;

  --gold: #B98A2E;
  /* Ochre on the sand fill is only 4.1:1 — this deeper tone clears AA (6.0:1) */
  --ochre-deep: #6B520F;

  /* --- Semantic (warm-harmonised, all >= 4.5:1 on their own tint) --- */
  --sea:        #1D5866;   /* poisson / mer */
  --sea-soft:   #E6F0F2;
  --sea-line:   #C3DBE0;

  --sage:       #4E6152;   /* végétarien / éco */
  --sage-soft:  #EAEFE9;
  --sage-line:  #CFDBD0;

  --success:      #3F6B45;
  --success-soft: #EAF1E9;
  --success-line: #CBDCC9;

  --warning:      #8A6A18;
  --warning-soft: #FBF3DE;
  --warning-line: #E9D9A8;

  --danger:       #8C2F1F;
  --danger-soft:  #FBEAE6;
  --danger-line:  #EFCFC7;

  --info:         #1D5866;
  --info-soft:    #E6F0F2;
  --info-line:    #C3DBE0;

  /* --- Typography --- */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-xs:   0.75rem;    /* 12 — micro labels, counts */
  --fs-sm:   0.8125rem;  /* 13 — secondary UI */
  --fs-base: 0.875rem;   /* 14 — default UI (matches Équiterra) */
  --fs-md:   1rem;       /* 16 — body copy */
  --fs-lg:   1.125rem;   /* 18 — card titles */
  --fs-xl:   1.375rem;   /* 22 — section titles */
  --fs-2xl:  1.75rem;    /* 28 — page titles */
  --fs-3xl:  2.25rem;    /* 36 — hero */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.55;

  /* --- Spacing (4px base) --- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* --- Radius (Équiterra: 6 controls / 8 cards / pill chips) --- */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-full: 9999px;

  /* --- Elevation (borders do most of the work, shadows stay whisper-quiet) --- */
  /* Fonds de marque : distincts de l'encre de marque, qui s'eclaircit en
     mode sombre alors que ces aplats doivent rester sombres. */
  --burgundy-fill:   #73273F;
  --terracotta-fill: #8A4B24;
  --sage-fill:       #4E6152;
  --on-brand:        #FFFFFF;

  --burgundy-line:     var(--burgundy-line);
  --terracotta-hover:  #733D1D;
  --sage-hover-fill:   #DDE7DC;

  /* Surfaces translucides et voiles : elles supposent un fond clair derriere,
     et doivent donc basculer avec le theme. */
  --surface-frost:        rgba(255, 255, 255, 0.92);
  --surface-frost-strong: rgba(255, 255, 255, 0.96);
  --overlay:              rgba(46, 42, 38, 0.5);
  --hero-sheen:           rgba(255, 255, 255, 0.55);
  --hatch:                rgba(138, 75, 36, 0.05);
  --glow:                 rgba(255, 255, 255, 0.95);
  --glow-soft:            rgba(255, 255, 255, 0.90);
  --fill-dim:             rgba(0, 0, 0, 0.08);
  --fill-dim-soft:        rgba(0, 0, 0, 0.06);
  --fill-bright:          rgba(255, 255, 255, 0.22);

  --shadow-sm:    0 1px 2px rgba(46, 42, 38, 0.04);
  --shadow-md:    0 4px 12px rgba(46, 42, 38, 0.06);
  --shadow-lg:    0 12px 32px rgba(46, 42, 38, 0.10);
  --shadow-modal: 0 24px 60px rgba(46, 42, 38, 0.22);
  --shadow-ink:      rgba(46, 42, 38, 0.20);
  --shadow-ink-soft: rgba(46, 42, 38, 0.06);

  /* --- Motion --- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      180ms;

  /* --- Layout --- */
  --wrap: 1200px;
  --tap:  44px;   /* minimum touch target */
  --header-h: 0px;
}

/* --------------------------------------------------------------------------
   1b. MODE SOMBRE — « nuit creme »
   --------------------------------------------------------------------------
   Le mode suit le reglage du systeme, sauf si l'utilisateur a tranche : son
   choix pose data-theme sur <html> et l'emporte dans les deux sens.

   Le bordeaux #73273F est une couleur sombre : sur fond sombre il devient
   illisible. L'encre de marque s'eclaircit donc en rose, tandis que
   --burgundy-fill reste un aplat profond qui porte du blanc. Ne fusionnez pas
   ces deux tokens.

   Les deux blocs ci-dessous sont identiques et generes ensemble : toute
   retouche doit porter sur les deux.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;

  /* --- Surfaces : brun nuit, pas gris neutre --- */
  --cream-0:    #211A15;
  --cream-50:   #1C1712;
  --cream-100:  #17120F;
  --cream-200:  #2A221B;
  --cream-300:  #362B22;
  --sand:       #33281C;

  /* --- Lignes --- */
  --line:        #34291F;
  --line-strong: #4A3A2C;
  --line-ink:    #F2EAE0;

  /* --- Encre --- */
  --ink:      #F2EAE0;
  --ink-80:   #DBD0C3;
  --ink-70:   #BEB1A2;
  --ink-50:   #A2957F;

  /* --- Marque : l'encre s'eclaircit, l'aplat reste sombre sous le blanc --- */
  --burgundy:        #E89BB0;
  --burgundy-hover:  #F2B4C4;
  --burgundy-active: #F8C8D5;
  --burgundy-soft:   #3A2029;
  --burgundy-ring:   rgba(232, 155, 176, 0.35);
  --burgundy-fill:   #8E3550;
  --burgundy-line:   #58333F;

  --terracotta:       #E0A176;
  --terracotta-soft:  #33241A;
  --terracotta-line:  #56402F;
  --terracotta-fill:  #A85B2C;
  --terracotta-hover: #C06D38;

  --ochre:      #DDB95F;
  --ochre-soft: #302713;
  --ochre-line: #55461F;
  --ochre-deep: #E8C978;
  --gold:       #DDB95F;

  /* --- Semantique --- */
  --sea:        #86C2D2;
  --sea-soft:   #16272C;
  --sea-line:   #2E4A52;

  --sage:            #9CC0A4;
  --sage-soft:       #1D2721;
  --sage-line:       #35473B;
  --sage-fill:       #47765A;
  --sage-hover-fill: #2A382E;

  --success:      #92C79C;
  --success-soft: #1C2620;
  --success-line: #33463A;

  --warning:      #DDB95F;
  --warning-soft: #302713;
  --warning-line: #55461F;

  --danger:       #F0A08C;
  --danger-soft:  #2E1913;
  --danger-line:  #56312A;

  --info:         #86C2D2;
  --info-soft:    #16272C;
  --info-line:    #2E4A52;

  /* --- Voiles : ils supposaient un fond clair derriere --- */
  --surface-frost:        rgba(33, 26, 21, 0.92);
  --surface-frost-strong: rgba(23, 18, 15, 0.96);
  --overlay:              rgba(8, 6, 4, 0.66);
  --hero-sheen:           rgba(255, 255, 255, 0.06);
  --hatch:                rgba(224, 161, 118, 0.06);
  --glow:                 rgba(0, 0, 0, 0.85);
  --glow-soft:            rgba(0, 0, 0, 0.70);
  --fill-dim:             rgba(0, 0, 0, 0.28);
  --fill-dim-soft:        rgba(255, 255, 255, 0.08);
  --fill-bright:          rgba(255, 255, 255, 0.20);

  /* --- Ombres : sur fond sombre, seul le noir se voit --- */
  --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:       0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg:       0 12px 32px rgba(0, 0, 0, 0.50);
  --shadow-modal:    0 24px 60px rgba(0, 0, 0, 0.65);
  --shadow-ink:      rgba(0, 0, 0, 0.60);
  --shadow-ink-soft: rgba(0, 0, 0, 0.40);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* --- Surfaces : brun nuit, pas gris neutre --- */
  --cream-0:    #211A15;
  --cream-50:   #1C1712;
  --cream-100:  #17120F;
  --cream-200:  #2A221B;
  --cream-300:  #362B22;
  --sand:       #33281C;

  /* --- Lignes --- */
  --line:        #34291F;
  --line-strong: #4A3A2C;
  --line-ink:    #F2EAE0;

  /* --- Encre --- */
  --ink:      #F2EAE0;
  --ink-80:   #DBD0C3;
  --ink-70:   #BEB1A2;
  --ink-50:   #A2957F;

  /* --- Marque : l'encre s'eclaircit, l'aplat reste sombre sous le blanc --- */
  --burgundy:        #E89BB0;
  --burgundy-hover:  #F2B4C4;
  --burgundy-active: #F8C8D5;
  --burgundy-soft:   #3A2029;
  --burgundy-ring:   rgba(232, 155, 176, 0.35);
  --burgundy-fill:   #8E3550;
  --burgundy-line:   #58333F;

  --terracotta:       #E0A176;
  --terracotta-soft:  #33241A;
  --terracotta-line:  #56402F;
  --terracotta-fill:  #A85B2C;
  --terracotta-hover: #C06D38;

  --ochre:      #DDB95F;
  --ochre-soft: #302713;
  --ochre-line: #55461F;
  --ochre-deep: #E8C978;
  --gold:       #DDB95F;

  /* --- Semantique --- */
  --sea:        #86C2D2;
  --sea-soft:   #16272C;
  --sea-line:   #2E4A52;

  --sage:            #9CC0A4;
  --sage-soft:       #1D2721;
  --sage-line:       #35473B;
  --sage-fill:       #47765A;
  --sage-hover-fill: #2A382E;

  --success:      #92C79C;
  --success-soft: #1C2620;
  --success-line: #33463A;

  --warning:      #DDB95F;
  --warning-soft: #302713;
  --warning-line: #55461F;

  --danger:       #F0A08C;
  --danger-soft:  #2E1913;
  --danger-line:  #56312A;

  --info:         #86C2D2;
  --info-soft:    #16272C;
  --info-line:    #2E4A52;

  /* --- Voiles : ils supposaient un fond clair derriere --- */
  --surface-frost:        rgba(33, 26, 21, 0.92);
  --surface-frost-strong: rgba(23, 18, 15, 0.96);
  --overlay:              rgba(8, 6, 4, 0.66);
  --hero-sheen:           rgba(255, 255, 255, 0.06);
  --hatch:                rgba(224, 161, 118, 0.06);
  --glow:                 rgba(0, 0, 0, 0.85);
  --glow-soft:            rgba(0, 0, 0, 0.70);
  --fill-dim:             rgba(0, 0, 0, 0.28);
  --fill-dim-soft:        rgba(255, 255, 255, 0.08);
  --fill-bright:          rgba(255, 255, 255, 0.20);

  /* --- Ombres : sur fond sombre, seul le noir se voit --- */
  --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:       0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg:       0 12px 32px rgba(0, 0, 0, 0.50);
  --shadow-modal:    0 24px 60px rgba(0, 0, 0, 0.65);
  --shadow-ink:      rgba(0, 0, 0, 0.60);
  --shadow-ink-soft: rgba(0, 0, 0, 0.40);
}


/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  background-color: var(--cream-100);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Explicit sizes: an unstyled heading otherwise falls back to the browser
   default (1.17em, 0.83em…) and lands off the type scale. */
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5 { font-size: var(--fs-base); }

p { line-height: var(--lh-base); }

img, svg, video { max-width: 100%; display: block; }

ul, ol { list-style: none; }

a { color: var(--burgundy); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  cursor: pointer;
}

/* Visible keyboard focus everywhere — the old sheet killed outlines with no
   replacement, which left keyboard users with no position indicator. */
:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--sand);
  color: var(--ink);
}

/* Skip link for keyboard / screen-reader users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10001;
  background: var(--burgundy-fill);
  color: var(--on-brand);
  padding: var(--s-3) var(--s-5);
  font-weight: 600;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus {
  left: 0;
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. UTILITIES  (replace the 291 inline style= attributes)
   -------------------------------------------------------------------------- */

.u-row     { display: flex; align-items: center; gap: var(--s-3); }
.u-row-wrap{ display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.u-col     { display: flex; flex-direction: column; gap: var(--s-3); }
.u-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.u-end     { display: flex; justify-content: flex-end; gap: var(--s-3); flex-wrap: wrap; }
.u-center  { display: flex; align-items: center; justify-content: center; }
.u-grow    { flex: 1; min-width: 0; }
.u-2col    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.u-full    { width: 100%; }

.u-gap-1 { gap: var(--s-1); } .u-gap-2 { gap: var(--s-2); }
.u-gap-3 { gap: var(--s-3); } .u-gap-4 { gap: var(--s-4); }

.u-mt-0 { margin-top: 0; }      .u-mt-1 { margin-top: var(--s-1); }
.u-mt-2 { margin-top: var(--s-2); } .u-mt-3 { margin-top: var(--s-3); }
.u-mt-4 { margin-top: var(--s-4); } .u-mt-5 { margin-top: var(--s-5); }
.u-mb-0 { margin-bottom: 0; }   .u-mb-2 { margin-bottom: var(--s-2); }
.u-mb-3 { margin-bottom: var(--s-3); } .u-mb-4 { margin-bottom: var(--s-4); }
.u-mb-5 { margin-bottom: var(--s-5); } .u-mb-6 { margin-bottom: var(--s-6); }

.u-text-xs   { font-size: var(--fs-xs); }
.u-text-sm   { font-size: var(--fs-sm); }
.u-text-base { font-size: var(--fs-base); }
.u-text-md   { font-size: var(--fs-md); }
.u-text-lg   { font-size: var(--fs-lg); }

.u-muted  { color: var(--ink-70); }
.u-dim    { color: var(--ink-50); }
.u-strong { font-weight: 600; }
.u-bold   { font-weight: 700; }
.u-serif  { font-family: var(--font-serif); }
.u-accent { color: var(--burgundy); }
.u-terra  { color: var(--terracotta); }
.u-center-text { text-align: center; }

.u-hidden { display: none !important; }

/* Emoji / icon glyph — isolated so the browser never renders it as a
   native OS control and so it never shifts the text baseline. */
.gl {
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   4. HEADER & BRAND
   -------------------------------------------------------------------------- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--surface-frost);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-container {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s-3) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.brand-symbol {
  font-size: 1.5rem;
  line-height: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--burgundy-soft);
  border-radius: var(--r-lg);
  flex-shrink: 0;
}

.brand-text h1 {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

.brand-tagline {
  font-size: var(--fs-xs);
  color: var(--ink-70);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: 2px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0 var(--s-5);
  min-height: var(--tap);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--burgundy-fill);
  border-color: var(--burgundy-fill);
  color: var(--on-brand);
}
.btn-primary:hover:not(:disabled) {
  background: var(--burgundy-hover);
  border-color: var(--burgundy-hover);
}
.btn-primary:active:not(:disabled) {
  background: var(--burgundy-active);
  border-color: var(--burgundy-active);
}

.btn-secondary {
  background: var(--cream-0);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--cream-200);
  border-color: var(--ink-50);
}
.btn-secondary:active:not(:disabled) { background: var(--cream-300); }

.btn-accent {
  background: var(--terracotta-fill);
  border-color: var(--terracotta-fill);
  color: var(--on-brand);
}
.btn-accent:hover:not(:disabled) { background: var(--terracotta-hover); border-color: var(--terracotta-hover); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--burgundy);
}
.btn-ghost:hover:not(:disabled) { background: var(--burgundy-soft); }

.btn-danger {
  background: var(--cream-0);
  border-color: var(--danger-line);
  color: var(--danger);
}
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); }

.btn:disabled, .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-sm {
  min-height: 40px;
  padding: 0 var(--s-3);
  font-size: var(--fs-sm);
}
.btn-lg {
  min-height: 52px;
  padding: 0 var(--s-8);
  font-size: var(--fs-md);
}
.btn-block { width: 100%; }

/* Icon-only button — always keeps a 44px hit area */
.btn-icon-only {
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   6. TABS / NAVIGATION
   -------------------------------------------------------------------------- */

.nav-tabs {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s-6);
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-4);
  min-height: var(--tap);
  border: none;
  background: transparent;
  border-radius: var(--r-md) var(--r-md) 0 0;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink-70);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tab-btn:hover { color: var(--ink); background: var(--cream-200); }

.tab-btn.active {
  color: var(--burgundy);
  font-weight: 600;
}
/* Underline indicator sits on the border, not on a shifting border-top */
.tab-btn.active::after {
  content: '';
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: -1px;
  height: 2px;
  background: var(--burgundy);
  border-radius: var(--r-full) var(--r-full) 0 0;
}

.tab-icon { font-size: 1rem; line-height: 1; }
.tab-short { display: none; }

.tab-badge {
  background: var(--burgundy-fill);
  color: var(--on-brand);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
  min-width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Aplat, pas encre : --sage s'eclaircit en mode sombre et le blanc du badge
   ne tiendrait plus dessus. */
.tab-badge-secondary { background: var(--sage-fill); }
.tab-badge-outline {
  background: var(--cream-200);
  color: var(--ink-70);
  border: 1px solid var(--line-strong);
}

/* --------------------------------------------------------------------------
   7. LAYOUT
   -------------------------------------------------------------------------- */

main {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s-6) var(--s-6) var(--s-16);
}

.tab-content { display: none; }
.tab-content.active { display: block; animation: fade-in var(--dur) var(--ease); }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}

.section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.section-subtitle {
  font-size: var(--fs-sm);
  color: var(--ink-70);
  margin-top: var(--s-1);
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0;
}

.section-tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

footer {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s-8) var(--s-6) var(--s-10);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-70);
}

/* --------------------------------------------------------------------------
   8. CARDS & SURFACES
   -------------------------------------------------------------------------- */

.card {
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.panel {
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-5);
}

.callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--burgundy);
  border-radius: var(--r-md);
  background: var(--cream-50);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.callout-sage  { border-left-color: var(--sage);       background: var(--sage-soft);  border-color: var(--sage-line); color: var(--sage); }
.callout-ochre { border-left-color: var(--ochre);      background: var(--ochre-soft); border-color: var(--ochre-line); color: var(--ochre); }
.callout-terra { border-left-color: var(--terracotta); background: var(--terracotta-soft); border-color: var(--terracotta-line); }
.callout-danger { border-left-color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }

/* Precision sous une valeur de la fiche recette. */
.fact-note {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ink-70);
  line-height: var(--lh-snug);
}

/* Empty state */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--s-12) var(--s-6);
  background: var(--cream-50);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-xl);
}
.empty-state-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: var(--s-3);
  opacity: 0.7;
}
.empty-state h3 {
  font-size: var(--fs-lg);
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.empty-state p {
  font-size: var(--fs-sm);
  color: var(--ink-70);
  max-width: 46ch;
  margin: 0 auto var(--s-4);
}

/* --------------------------------------------------------------------------
   9. BADGES, CHIPS & PILLS
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 3px var(--s-2);
  border-radius: var(--r-full);
  border: 1px solid transparent;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.badge-neutral { background: var(--cream-200); color: var(--ink-70);   border-color: var(--line-strong); }
.badge-sea     { background: var(--sea-soft);  color: var(--sea);      border-color: var(--sea-line); }
.badge-sage    { background: var(--sage-soft); color: var(--sage);     border-color: var(--sage-line); }
.badge-ochre   { background: var(--ochre-soft);color: var(--ochre);    border-color: var(--ochre-line); }
.badge-terra   { background: var(--terracotta-soft); color: var(--terracotta); border-color: var(--terracotta-line); }
.badge-burgundy{ background: var(--burgundy-soft); color: var(--burgundy); border-color: var(--burgundy-line); }
.badge-success { background: var(--success-soft); color: var(--success); border-color: var(--success-line); }

/* Legacy aliases kept so app.js markup keeps rendering */
.sauce-badge          { display: inline-flex; align-items: center; gap: var(--s-1); padding: 3px var(--s-2); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; border: 1px solid transparent; }
.sauce-badge.poisson    { background: var(--sea-soft);  color: var(--sea);  border-color: var(--sea-line); }
.sauce-badge.vegetarien { background: var(--sage-soft); color: var(--sage); border-color: var(--sage-line); }
.badge-eco            { background: var(--sea-soft);  color: var(--sea);  border-color: var(--sea-line); }
.badge-in-season      { background: var(--success-soft); color: var(--success); border-color: var(--success-line); }
.badge-pesca {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  background: var(--sage-soft);
  color: var(--sage);
  border: 1px solid var(--sage-line);
  padding: 3px var(--s-2);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.eco-badge-clickable {
  cursor: pointer;
  min-height: 28px;
  transition: background-color var(--dur) var(--ease);
}
.eco-badge-clickable:hover { background: var(--sage-hover-fill); }

.base-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-3); }
.base-chip {
  background: var(--cream-200);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 3px var(--s-2);
  color: var(--ink-70);
}
.base-chip.chip-official { background: var(--ochre-soft); border-color: var(--ochre-line); color: var(--ochre); font-weight: 600; }
.base-chip.chip-mine     { background: var(--burgundy-soft); border-color: var(--burgundy-line); color: var(--burgundy); font-weight: 600; }
.base-chip.chip-shared   { background: var(--sea-soft); border-color: var(--sea-line); color: var(--sea); font-weight: 600; }

.protein-tag { color: var(--terracotta); font-weight: 600; }

.qty-pill {
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--burgundy-soft);
  border: 1px solid var(--burgundy-line);
  color: var(--burgundy);
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  white-space: nowrap;
}

.source-pill {
  font-size: var(--fs-xs);
  color: var(--ink-70);
  background: var(--cream-200);
  border: 1px solid var(--line);
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caddy-badge, .pantry-green-badge {
  font-size: var(--fs-xs);
  background: var(--sage-soft);
  color: var(--sage);
  border: 1px solid var(--sage-line);
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  font-weight: 600;
  margin-left: var(--s-1);
}

.shopping-source-tag {
  font-size: var(--fs-xs);
  color: var(--ink-50);
  background: var(--cream-200);
  border: 1px solid var(--line);
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  margin-left: var(--s-1);
}

/* --------------------------------------------------------------------------
   10. FORMS
   -------------------------------------------------------------------------- */

.form-group { margin-bottom: var(--s-4); }

.form-group label,
.field-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-80);
  margin-bottom: var(--s-1);
  letter-spacing: 0;
  text-transform: none;
}

.form-hint {
  font-size: var(--fs-xs);
  color: var(--ink-70);
  margin-top: var(--s-1);
}

.req { color: var(--burgundy); }

.form-group input,
.form-group textarea,
.form-group select,
.custom-select,
.base-input,
.input {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  background: var(--cream-0);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.form-group textarea { min-height: 76px; padding: var(--s-3); resize: vertical; }

.form-group input::placeholder,
.form-group textarea::placeholder,
.input::placeholder { color: var(--ink-50); }

.form-group input:hover,
.custom-select:hover,
.input:hover { border-color: var(--ink-50); }

.form-group input:focus,
.form-group textarea:focus,
.custom-select:focus,
.base-input:focus,
.input:focus {
  outline: none;
  border-color: var(--burgundy);
  box-shadow: 0 0 0 3px var(--burgundy-ring);
}

/* Native select gets a custom chevron so it stops looking like an OS widget */
.custom-select, select.input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: var(--s-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236E6A63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
  cursor: pointer;
}

.input-search { padding-left: var(--s-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236E6A63' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='M9.5 9.5 13 13'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left var(--s-3) center; }

input[type="checkbox"] { accent-color: var(--burgundy); cursor: pointer; }

.form-error {
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid var(--danger-line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
}

/* Lien d'action au fil du texte : c'est un bouton (il declenche une action,
   il ne navigue pas), habille comme un lien. */
.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--burgundy);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.link-button:hover { color: var(--burgundy-hover); }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   11. ONBOARDING
   -------------------------------------------------------------------------- */

.onboarding-card {
  background: linear-gradient(180deg, var(--cream-0), var(--cream-50));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
  box-shadow: var(--shadow-sm);
}

.onboarding-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.onboarding-header h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--s-1);
}

.onboarding-header p {
  font-size: var(--fs-sm);
  color: var(--ink-70);
  max-width: 70ch;
}

.btn-close-onboarding {
  width: var(--tap);
  height: var(--tap);
  flex-shrink: 0;
  border-radius: var(--r-md);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ink-70);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-close-onboarding:hover { background: var(--cream-300); color: var(--ink); }

.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3);
}

.onboarding-step {
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.step-badge {
  background: var(--burgundy-fill);
  color: var(--on-brand);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-weight: 700;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-text strong {
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.step-text span {
  font-size: var(--fs-sm);
  color: var(--ink-70);
  line-height: var(--lh-snug);
}

/* --------------------------------------------------------------------------
   12. CONTEXT BAR (season + stats)
   -------------------------------------------------------------------------- */

/* Encart saison. Il occupait autrefois une barre fixe au-dessus des cinq
   onglets ; il ne renseigne que le passage au marche, il vit donc dans la
   liste de courses. Autonome, il porte desormais son propre habillage. */
.season-box {
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  margin-bottom: var(--s-5);
  overflow: hidden;
}

.season-slim-header {
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  min-height: var(--tap);
}

.season-slim-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--sage);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.season-slim-highlights {
  font-weight: 500;
  color: var(--ink-70);
  font-size: var(--fs-sm);
}

.season-actions-wrapper {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

.season-pill-link,
.season-slim-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  color: var(--burgundy);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0 var(--s-3);
  min-height: 40px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.season-pill-link:hover,
.season-slim-toggle:hover { background: var(--burgundy-soft); border-color: var(--burgundy); }

.season-slim-toggle { color: var(--ink-70); border-color: transparent; }
.season-slim-toggle:hover { color: var(--ink); background: var(--cream-200); border-color: transparent; }

.season-details-content {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--cream-50);
  width: 100%;
}

.season-tags { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.season-tag {
  background: var(--sage-soft);
  color: var(--sage);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-full);
  padding: 3px var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 500;
}

/* Compteurs du congelo. La grille a gouttiere de 1px sur fond --line dessine
   les separateurs sans bordure par cellule : quatre traits au lieu de huit,
   et aucun doublon la ou deux cellules se touchent. */
.freezer-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: var(--s-5);
}

.freezer-stat {
  background: var(--cream-0);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.freezer-stat dt {
  font-size: var(--fs-xs);
  color: var(--ink-70);
  line-height: 1.3;
}

.freezer-stat-value {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--burgundy);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   13. RECIPE / SAUCE CARDS
   -------------------------------------------------------------------------- */

.freezer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-5);
}

.sauce-card {
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sauce-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.sauce-card:focus-within { border-color: var(--burgundy); }

.sauce-card-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cream-200);
}

.sauce-card-img-wrapper .sauce-card-img,
.sauce-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.sauce-card:hover .sauce-card-img { transform: scale(1.03); }

/* Typographic stand-in for recipes with no photo of their own.
   Costs nothing to load and never misrepresents the dish. */
.sauce-card-img-wrapper.is-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4);
  text-align: center;
  background:
    radial-gradient(circle at 50% 38%, var(--hero-sheen), transparent 62%),
    var(--sand);
  border-bottom: 1px solid var(--line);
}

/* Faint diagonal weave so the tile reads as a designed surface, not a gap */
.sauce-card-img-wrapper.is-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    var(--hatch) 0 1px,
    transparent 1px 9px
  );
  pointer-events: none;
}

.card-placeholder-glyph {
  font-size: 2rem;
  line-height: 1;
  filter: saturate(0.85);
}

.card-placeholder-title {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--terracotta);
  max-width: 22ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-overlay-badges {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  right: var(--s-2);
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
  z-index: 2;
}

.card-overlay-badge {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 3px var(--s-2);
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  background: var(--surface-frost);
  color: var(--ink);
  border: 1px solid transparent;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
}

.sauce-card-content {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
}

.sauce-card-header-clean h3,
.sauce-meta h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: var(--lh-snug);
}

.sauce-details-clean {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--ink-70);
  flex-wrap: wrap;
}

.sauce-protein-highlight { font-weight: 600; color: var(--terracotta); }
.sauce-details-bullet { color: var(--ink-50); }
.sauce-conservation-text { font-size: var(--fs-sm); color: var(--ink-70); }
.sauce-details { font-size: var(--fs-sm); color: var(--ink-70); }

.sauce-card-header { display: flex; align-items: flex-start; gap: var(--s-3); }

.sauce-emoji {
  font-size: 1.5rem;
  background: var(--cream-200);
  border-radius: var(--r-lg);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sauce-pills-row { display: flex; flex-direction: column; gap: var(--s-2); margin-top: auto; }

.sauce-pill-highlight {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-weight: 500;
  line-height: var(--lh-snug);
}
.sauce-pill-highlight.cheese-pill { background: var(--ochre-soft); border-color: var(--ochre-line); color: var(--ochre); }
.sauce-pill-highlight.side-pill   { background: var(--cream-100); border-color: var(--line); color: var(--ink-70); }
.sauce-pill-highlight.service-pill { background: var(--terracotta-soft); border-color: var(--terracotta-line); color: var(--terracotta); }
.sauce-pill-highlight.expiry-pill.is-soon { background: var(--ochre-soft);  border-color: var(--ochre-line);  color: var(--ochre); }
.sauce-pill-highlight.expiry-pill.is-over { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }

/* Age du lot, a la suite de la duree de conservation annoncee. */
.sauce-freezer-age { color: var(--ink-70); }

.freezer-alert-list {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-4);
  line-height: var(--lh-snug);
}
.freezer-alert-list li { margin-top: 2px; }

/* Cheese pairing box */
.cheese-pairing-box {
  background: var(--ochre-soft);
  border: 1px solid var(--ochre-line);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
}
.cheese-title {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ochre);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.cheese-qty-tag {
  background: var(--sand);
  color: var(--ochre-deep);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  white-space: nowrap;
}
.cheese-desc { font-size: var(--fs-sm); color: var(--ochre); margin-top: var(--s-1); }

/* Stock / portion counter */
.stock-control-clean,
.stock-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  background: var(--cream-100);
  padding: var(--s-2) var(--s-4);
  min-height: 56px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.stock-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-70);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.portion-counter-clean,
.portion-counter { display: flex; align-items: center; gap: var(--s-2); }

.btn-counter, .btn-square {
  position: relative;
  width: 32px;
  height: 32px;
  background: var(--cream-0);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Invisible padding grows the hit area to 44px without growing the control */
.btn-counter::after, .btn-square::after {
  content: '';
  position: absolute;
  inset: -6px;
}
.btn-counter:hover, .btn-square:hover {
  background: var(--burgundy-fill);
  color: var(--on-brand);
  border-color: var(--burgundy-fill);
}

.portion-qty {
  font-size: var(--fs-sm);
  color: var(--ink-70);
  min-width: 78px;
  text-align: center;
}
.portion-qty strong, .portion-number {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--burgundy);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   14. PLANNER
   -------------------------------------------------------------------------- */

.planner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
}

.day-card {
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}

.day-header {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
}

.meal-slot { margin-bottom: var(--s-4); }

.meal-slot-label, .slot-title-row {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-70);
  margin-bottom: var(--s-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.meal-select-group { display: flex; flex-direction: column; gap: var(--s-2); }

.meal-slot-box {
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.meal-slot-box.is-consumed-slot {
  background: var(--success-soft);
  border-color: var(--success-line);
}

.side-chips-wrapper { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-2) 0; }

.side-chip-btn {
  background: var(--cream-0);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  color: var(--burgundy);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 0 var(--s-3);
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.side-chip-btn:hover { background: var(--burgundy-soft); border-color: var(--burgundy); }

.consumed-btn {
  width: 100%;
  margin-top: var(--s-2);
  min-height: 40px;
  padding: 0 var(--s-3);
  background: var(--cream-0);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.consumed-btn:hover { background: var(--cream-200); border-color: var(--ink-50); }
.consumed-btn.is-consumed {
  background: var(--success-soft);
  color: var(--success);
  border-color: var(--success-line);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   15. SESSION WIZARD
   -------------------------------------------------------------------------- */

.wizard-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-3) var(--s-5);
  margin-bottom: var(--s-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.wizard-stepper::-webkit-scrollbar { display: none; }

.step-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  min-height: var(--tap);
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--ink-70);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.step-item:hover { background: var(--cream-200); color: var(--ink-70); }
.step-item.step-active { color: var(--ink); font-weight: 600; }
.step-item.step-done   { color: var(--ink-70); }

.step-number {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--cream-200);
  color: var(--ink-70);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
}
.step-active .step-number { background: var(--burgundy-fill); color: var(--on-brand); border-color: var(--burgundy-fill); }
.step-done   .step-number { background: var(--sage-fill); color: var(--on-brand); border-color: var(--sage-fill); }

.step-label { font-size: var(--fs-sm); }

.step-line { flex: 0 1 48px; height: 1px; background: var(--line-strong); min-width: 16px; }

.prep-container { display: flex; flex-direction: column; gap: var(--s-5); }

.prep-step-card {
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.prep-step-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: var(--lh-base);
}

.prep-step-number {
  background: var(--burgundy-soft);
  color: var(--burgundy);
  border: 1px solid var(--burgundy-line);
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: var(--fs-xs);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 3px;
}

/* Step intro banner */
.step-intro {
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-left: 3px solid var(--burgundy);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.step-intro.is-done { border-left-color: var(--sage); }
.step-intro h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-1);
}
.step-intro p { font-size: var(--fs-sm); color: var(--ink-70); max-width: 74ch; }

/* Recipe picker (step 1) */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.pick-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  min-height: 64px;
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pick-card:hover { border-color: var(--line-strong); background: var(--cream-50); }
.pick-card:focus-within { border-color: var(--burgundy); box-shadow: 0 0 0 3px var(--burgundy-ring); }
.pick-card.is-picked { background: var(--burgundy-soft); border-color: var(--burgundy); }
.pick-card input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }

.pick-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: var(--lh-snug);
}
.pick-meta { font-size: var(--fs-xs); color: var(--ink-70); margin-top: 2px; }
.pick-printed { color: var(--sage); font-weight: 600; }

/* Session summary (step 2) */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.summary-card {
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.summary-card h4 {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  line-height: var(--lh-snug);
}
.summary-card dl { font-size: var(--fs-sm); color: var(--ink-70); display: grid; gap: var(--s-1); }
.summary-card dt { font-weight: 600; color: var(--ink-80); display: inline; }
.summary-card dd { display: inline; }

/* Generic action row that closes a step */
.action-bar {
  background: var(--cream-200);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* Ingredient roll-up list */
.ingredient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-2);
}
/* Deux etages plutot qu'une ligne : a 224 px de large, le nom, la quantite et
   le prix ne tiennent pas cote a cote sans casser quelque part. */
.ingredient-item {
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-1);
}
.ingredient-item strong { color: var(--burgundy); font-variant-numeric: tabular-nums; }

.ingredient-name { min-width: 0; }

/* Rappel de la quantite au lot simple, sous le nom : « base 300 g ». */
.ingredient-base {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-70);
  font-weight: 500;
}

.ingredient-figures {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
}

/* Un nombre ne se separe jamais de son unite, ni un prix de son symbole. */
.ingredient-qty, .ingredient-price { white-space: nowrap; }

/* Step editor rows in the create-recipe modal */
.step-input-row { display: flex; align-items: center; gap: var(--s-2); }
.step-input-row .step-index {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--burgundy-soft);
  color: var(--burgundy);
  border: 1px solid var(--burgundy-line);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 600;
}
.step-input-row input { flex: 1; }

.u-emoji-lg { font-size: 2.5rem; line-height: 1; }

/* Placeholder row shown when a shopping column has nothing in it */
.list-empty {
  color: var(--ink-70);
  font-size: var(--fs-sm);
  padding: var(--s-3);
  background: var(--cream-100);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  text-align: center;
}

/* Item already in the pantry */
.is-stock-text { color: var(--sage); }
.qty-pill.is-stock-pill {
  background: var(--sage-soft);
  border-color: var(--sage-line);
  color: var(--sage);
}

.prep-card-footer {
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
}

.prep-steps-list .prep-step-card:last-child { margin-bottom: 0; }


/* Sticky action bar — keeps the primary CTA reachable without scrolling */
.sticky-cta-bar {
  position: sticky;
  bottom: var(--s-4);
  z-index: 800;
  background: var(--surface-frost-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--s-3) var(--s-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.sticky-cta-info {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--ink-70);
}

/* --------------------------------------------------------------------------
   16. SHOPPING
   -------------------------------------------------------------------------- */

.shopping-mode-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}

.shopping-mode-switcher {
  display: inline-flex;
  background: var(--cream-200);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}

.shopping-mode-btn {
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  padding: 0 var(--s-3);
  min-height: 36px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-70);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.shopping-mode-btn:hover { color: var(--ink); }
.shopping-mode-btn.active {
  background: var(--cream-0);
  color: var(--burgundy);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.shopping-category-filters { display: flex; gap: var(--s-1); flex-wrap: wrap; }

.shop-filter-btn, .filter-btn {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  color: var(--ink-70);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0 var(--s-3);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.shop-filter-btn:hover, .filter-btn:hover { border-color: var(--ink-50); color: var(--ink); }
.shop-filter-btn.active, .filter-btn.active {
  background: var(--burgundy-fill);
  border-color: var(--burgundy-fill);
  color: var(--on-brand);
  font-weight: 600;
}

.filter-count {
  background: var(--fill-dim);
  padding: 0 6px;
  font-size: var(--fs-xs);
  border-radius: var(--r-full);
  font-variant-numeric: tabular-nums;
}
.filter-btn.active .filter-count { background: var(--fill-bright); color: var(--on-brand); }

.shopping-sync-banner {
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-left: 3px solid var(--burgundy);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.shopping-sync-banner:empty { display: none; }

.shopping-sync-info { font-size: var(--fs-sm); color: var(--ink-70); }

.shopping-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  background: var(--cream-200);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 2px var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-70);
}

.shopping-market-progress-box {
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}
.shopping-market-progress-box:empty { display: none; }

.market-progress-bar-bg, .ocr-progress-bar-bg {
  width: 100%;
  height: 8px;
  background: var(--cream-300);
  border-radius: var(--r-full);
  margin-top: var(--s-2);
  overflow: hidden;
}
.market-progress-bar-fill, .ocr-progress-bar-fill {
  height: 100%;
  background: var(--burgundy);
  border-radius: var(--r-full);
  width: 0%;
  transition: width 300ms var(--ease);
}

.shopping-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

.shopping-card-col, .shopping-section {
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-4);
}

.shopping-col-header, .shopping-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}

.shop-count-badge {
  background: var(--burgundy-soft);
  color: var(--burgundy);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  border: 1px solid var(--burgundy-line);
  font-variant-numeric: tabular-nums;
}

.shopping-sub-header {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-70);
  margin: var(--s-4) 0 var(--s-2);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--line);
}
.shopping-sub-header.pantry-header { color: var(--sage); border-bottom-color: var(--sage-line); }

.shopping-list-clean, .shopping-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.clean-shop-item, .shopping-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  min-height: var(--tap);
  background: var(--cream-50);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.clean-shop-item:hover, .shopping-item:hover { border-color: var(--line-strong); background: var(--cream-0); }

/* "Deja achete" is carried by the strikethrough and the muted colour.
   An opacity here would quietly drag every child back under 4.5:1. */
.clean-shop-item.checked, .shopping-item.checked {
  background: var(--cream-200);
  border-color: var(--line-strong);
}
.clean-shop-item.checked .item-title,
.shopping-item.checked span { text-decoration: line-through; color: var(--ink-70); }

.clean-shop-item.is-stock,
.shopping-item.is-pantry,
.shopping-item.is-pantry-green {
  background: var(--sage-soft);
  border-color: var(--sage-line);
  border-left: 3px solid var(--sage);
}

.clean-shop-left {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1;
  min-width: 0;
}
.clean-shop-left input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }

.clean-shop-info { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }

.single-stock-btn, .pantry-toggle-btn {
  background: var(--cream-0);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  color: var(--ink-70);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 0 var(--s-3);
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.single-stock-btn:hover, .pantry-toggle-btn:hover {
  background: var(--sage-soft);
  color: var(--sage);
  border-color: var(--sage-line);
}
.single-stock-btn.active-stock, .pantry-toggle-btn.in-pantry {
  background: var(--sage-fill);
  color: var(--on-brand);
  border-color: var(--sage-fill);
  font-weight: 600;
}

/* Groupe segmente generique : meme habillage, sans le nom lie au bac a sauces
   (les lots x1/x2/x3 de l'etape 2 s'en servent aussi). */
.segmented-group,
.segmented-stock-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  background: var(--cream-200);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}
.segmented-btn {
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  padding: 0 var(--s-3);
  min-height: 38px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-70);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented-btn.is-active     { background: var(--burgundy-fill); color: var(--on-brand); font-weight: 600; }

/* Lots de l'etape 2 : le multiplicateur seul n'apprend rien, chaque bouton
   annonce donc sous son libelle le nombre de repas qu'il produit. Pas
   d'opacity sur la seconde ligne : elle ferait chuter le contraste herite. */
.segmented-group-stacked { display: flex; width: 100%; }
.segmented-btn-stacked {
  flex: 1;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-2) var(--s-1);
  min-height: 52px;
  line-height: 1.15;
}
.segmented-btn-main { font-weight: 700; }
.segmented-btn-sub { font-size: var(--fs-xs); color: inherit; }
.segmented-btn.active-buy    { background: var(--burgundy-fill); color: var(--on-brand); font-weight: 600; }
.segmented-btn.active-pantry { background: var(--sage-fill); color: var(--on-brand); font-weight: 600; }

.pantry-sublist .shopping-item { background: var(--sage-soft); border-color: var(--sage-line); }

/* --------------------------------------------------------------------------
   17. RECIPE DETAIL MODAL
   -------------------------------------------------------------------------- */

.recipe-hero-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-4);
}

/* Recipe detail modal header */
.recipe-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--s-4);
}
.recipe-modal-chips {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-2);
}
.recipe-modal-icon { font-size: 1.375rem; }
.recipe-modal-title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: var(--lh-tight);
}
.recipe-modal-facts {
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  font-size: var(--fs-sm);
  display: grid;
  gap: var(--s-1);
  flex-shrink: 0;
}
.recipe-modal-facts dt { color: var(--ink-70); font-size: var(--fs-xs); }
.recipe-modal-facts dd { font-weight: 600; color: var(--ink); }

.base-chip.chip-season { background: var(--sage-soft); border-color: var(--sage-line); color: var(--sage); font-weight: 600; }

.recipe-ingredient-list {
  font-size: var(--fs-base);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.recipe-ingredient-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-1) 0;
  border-bottom: 1px solid var(--line);
}
.recipe-ingredient-list li:last-child { border-bottom: none; }

.recipe-detail-section.is-full-height { height: 100%; }

.ocr-raw-text {
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
}

.recipe-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--s-5);
}

.recipe-detail-section {
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}

.recipe-detail-section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
}

.step-timeline { display: flex; flex-direction: column; gap: var(--s-2); }

.step-timeline-item {
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-left: 3px solid var(--burgundy);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
}

.sommelier-box {
  background: var(--terracotta-soft);
  border: 1px solid var(--terracotta-line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-3);
}
.sommelier-title {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--terracotta);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
}

/* --------------------------------------------------------------------------
   18. MODALS
   -------------------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--s-4);
}
.modal-overlay.active { display: flex; animation: fade-in var(--dur) var(--ease); }

.modal-content {
  position: relative;
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  max-width: 560px;
  width: 100%;
  max-height: min(90vh, 900px);
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
  scrollbar-width: thin;
}
.modal-content.modal-lg { max-width: 880px; }
.modal-content.modal-sm { max-width: 480px; }

/* Empty-state can carry more than one way out */
.empty-state-actions {
  display: flex;
  gap: var(--s-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* Recap of what a signed-out visitor had already built */
.carry-over-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.carry-over-list li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  font-weight: 500;
}
.carry-over-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--burgundy);
  flex-shrink: 0;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  padding-right: var(--s-8);
}

.modal-header h2, .modal-header h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
}

.modal-body { font-size: var(--fs-base); line-height: var(--lh-base); }

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: var(--s-4);
  margin-top: var(--s-4);
}

.close-modal {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-md);
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-70);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.close-modal:hover { background: var(--cream-300); color: var(--ink); }

/* Auth modal tabs */
.auth-tabs {
  display: flex;
  gap: var(--s-1);
  background: var(--cream-200);
  border-radius: var(--r-md);
  padding: 3px;
  margin-bottom: var(--s-4);
}

.auth-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  min-height: 40px;
  padding: 0 var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink-70);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.auth-tab-btn.active {
  background: var(--cream-0);
  color: var(--burgundy);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.auth-tab-btn:hover:not(.active) { color: var(--ink); }

/* User widget & cheese toggle */
.user-widget-btn {
  background: var(--cream-0);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0 var(--s-3);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.user-widget-btn:hover { background: var(--cream-200); border-color: var(--ink-50); }

.user-logged-box {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--cream-200);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0 var(--s-2) 0 var(--s-3);
  min-height: 40px;
  font-size: var(--fs-sm);
}
.user-logged-name { font-weight: 600; color: var(--ink); }

/* Pastille de reglage de l'en-tete. Le bouton fromage en est l'original ;
   « Prix estimes » partage la meme forme, avec l'accent sauge pour qu'on
   distingue les deux reglages actifs d'un coup d'oeil. */
.btn-pill-toggle,
.btn-cheese-toggle {
  background: var(--cream-0);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink-70);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0 var(--s-3);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-cheese-toggle:hover { background: var(--ochre-soft); color: var(--ochre); border-color: var(--ochre-line); }
.btn-pill-toggle:hover { background: var(--sage-soft); color: var(--sage); border-color: var(--sage-line); }

/* Variante sans libelle visible : l'en-tete porte deja deux pastilles
   ecrites, une troisieme les ferait deborder sous 400 px. */
.btn-pill-icon { padding: 0 var(--s-3); min-width: 44px; justify-content: center; }
.btn-pill-icon .gl { font-size: 1.05rem; }
.btn-pill-toggle.active {
  background: var(--sage-soft);
  color: var(--sage);
  border-color: var(--sage-line);
  font-weight: 600;
}
.btn-cheese-toggle.active {
  background: var(--ochre-soft);
  color: var(--ochre);
  border-color: var(--ochre-line);
  font-weight: 600;
}

/* --- Accords Fromages : incitation et apparition ------------------------ */

.cheese-toggle-wrap {
  position: relative;
  display: inline-flex;
}

/* Le chevron doit toucher le bouton : toute interface glissee entre les deux
   et c'est elle que l'oeil designe. Pose sous l'en-tete entier, il semblait
   pointer l'onglet « Carte des sauces ».
   Il ne reste que 24 px entre le bas du bouton et le texte des onglets : d'ou
   un chevron large et court plutot qu'une fleche a hampe, et pas de libelle,
   qui ne tiendrait pas sans recouvrir la navigation. Le bouton porte deja son
   texte ; le chevron n'a qu'a designer. */
.cheese-hint {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--terracotta);
  pointer-events: none;
  z-index: 5;
  animation: cheese-hint-bob 1.4s var(--ease) infinite;
}

.cheese-hint-arrow {
  display: block;
  width: 56px;
  height: 22px;
  /* Halo clair : le chevron flotte au-dessus de la barre d'onglets. */
  filter:
    drop-shadow(0 0 3px var(--glow))
    drop-shadow(0 0 7px var(--glow-soft))
    drop-shadow(0 2px 3px var(--shadow-ink));
}

/* Le rebond va vers le HAUT : il renforce la direction indiquee, et il eloigne
   le chevron du texte des onglets au lieu de l'y enfoncer. */
@keyframes cheese-hint-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-5px); }
}

/* Apparition des pastilles d'accord, carte par carte. */
.cheese-pill.is-revealing {
  animation: cheese-reveal 420ms var(--ease) both;
  animation-delay: calc(var(--reveal-index, 0) * 45ms);
}

@keyframes cheese-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Le mouvement est ici de la decoration : on le coupe entierement plutot que
   de l'accelerer, la fleche restant lisible a l'arret. */
@media (prefers-reduced-motion: reduce) {
  .cheese-hint { animation: none; }
  .cheese-pill.is-revealing { animation: none; }
}

/* OCR */
.ocr-matched-list { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-3); }
.ocr-matched-item {
  background: var(--sage-soft);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  color: var(--sage);
}
.ocr-preview {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--cream-200);
}

/* Estampille de version, discrete mais atteignable */
.build-badge {
  position: fixed;
  bottom: 6px;
  left: 8px;
  z-index: 9000;
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  color: var(--ink-50);
  font-family: var(--font-sans);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.build-badge:hover { opacity: 1; color: var(--ink); }
.build-badge.is-stale { color: var(--danger); border-color: var(--danger-line); opacity: 1; }

@media (max-width: 768px) {
  /* La barre d'onglets occupe le bas : on remonte au-dessus. */
  .build-badge { bottom: 70px; }
}

@media print { .build-badge { display: none; } }

/* --------------------------------------------------------------------------
   18b. PRIX INDICATIFS
   --------------------------------------------------------------------------
   Tous en sauge, la couleur du bouton qui les revele : le prix se distingue
   ainsi de la quantite sans jamais passer devant elle. Aucune opacite ici,
   elle ferait chuter le contraste des enfants.
   -------------------------------------------------------------------------- */

.pick-price { color: var(--sage); font-weight: 600; }

/* Infobulle « prix par repas ». Le libelle reste dans l'arbre d'accessibilite
   en permanence — masque a l'oeil seulement — et se revele au survol comme au
   focus clavier, sinon l'information serait perdue pour qui n'a pas de souris.
   Pas de transition : le panneau de test fige les animations, et une bulle qui
   ne se verifie pas est une bulle qu'on croit sur parole. */
.price-hint { position: relative; }

.price-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 5;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  background: var(--ink);
  color: var(--cream-0);
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.pick-card:hover .price-tip,
.pick-card:focus-within .price-tip {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  padding: var(--s-2) var(--s-3);
}

/* Sans survol — tactile —, la bulle ne s'ouvrirait jamais : le prix par repas
   s'affiche alors en clair, sur sa propre ligne sous le total. */
@media (hover: none) {
  .price-tip {
    position: static;
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    padding: 0;
    background: none;
    box-shadow: none;
    color: var(--ink-70);
    font-weight: 500;
  }
}

.ingredient-price {
  color: var(--sage);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Detail sauce / fromage : le fromage ne se congele pas avec la sauce, il
   s'achete au moment de servir. Le total les additionne, ces lignes disent
   ce que chacun pese. */
.price-block { margin-top: var(--s-2); }

.price-detail-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-70);
  font-variant-numeric: tabular-nums;
  padding: 2px 0;
}
.price-detail-row + .price-detail-row { border-top: 1px dashed var(--line); }

.price-cheese-part { color: var(--ink-70); font-weight: 500; }

.price-block .price-line {
  margin-top: var(--s-1);
  padding-top: var(--s-1);
  border-top: 1px solid var(--line-strong);
}

.price-line {
  margin-top: var(--s-1);
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--sage);
}
.price-line .u-text-sm { font-family: var(--font-sans); font-weight: 500; color: var(--ink-70); }
.price-line strong { color: var(--sage); }

.sticky-cta-price {
  color: var(--sage);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.price-pill {
  background: var(--sage-soft);
  color: var(--sage);
  border-color: var(--sage-line);
  font-weight: 700;
}

.shop-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-2);
  border-top: 1px solid var(--line-strong);
  font-size: var(--fs-sm);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.shop-total-row strong { color: var(--sage); font-size: var(--fs-md); }
.shop-total-row.is-secondary {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
  font-size: var(--fs-xs);
  color: var(--ink-70);
}

/* --------------------------------------------------------------------------
   18c. EDITEUR DE PRIX
   --------------------------------------------------------------------------
   Le prix se saisit au kilo ou au litre, comme sur une etiquette de rayon :
   personne ne connait le prix d'un gramme. La conversion vit dans app.js.
   -------------------------------------------------------------------------- */

.price-editor-note {
  font-size: var(--fs-sm);
  color: var(--ink-70);
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
}
.price-editor-note strong { color: var(--sage); }

.price-group-title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--s-2);
}

.price-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-3);
}

.price-row {
  background: var(--cream-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.price-row.is-modified { border-color: var(--sage-line); background: var(--sage-soft); }

.price-row-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  line-height: var(--lh-snug);
}
.price-row-state {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-70);
}
.price-row.is-modified .price-row-state { color: var(--sage); font-weight: 600; }

.price-row-input {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.price-row-input .price-input {
  width: 6.5rem;
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.price-row-unit {
  font-size: var(--fs-sm);
  color: var(--ink-70);
  white-space: nowrap;
  flex: 1 1 auto;
}
.price-reset { flex: 0 0 auto; font-size: var(--fs-md); }
/* Etat inerte sans opacity : elle faisait tomber le contraste du chevron a
   2,06:1 sur les 99 lignes non corrigees. On l'obtient par la couleur. */
.price-reset:disabled {
  color: var(--ink-70);
  background: var(--cream-100);
  border-color: var(--line);
  cursor: default;
}

/* --------------------------------------------------------------------------
   19. TOASTS
   -------------------------------------------------------------------------- */

.toast-container {
  position: fixed;
  bottom: var(--s-5);
  right: var(--s-5);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: min(420px, calc(100vw - var(--s-8)));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--cream-0);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--burgundy);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-snug);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* Les diagnostics tiennent sur plusieurs lignes : sans pre-line, les retours
   chariot seraient avales et tout se collerait en un seul paragraphe. */
.toast > span { white-space: pre-line; }
.toast.show { opacity: 1; transform: none; }

.toast-success { border-left-color: var(--success); background: var(--success-soft); color: var(--success); border-color: var(--success-line); }
.toast-warning { border-left-color: var(--warning); background: var(--warning-soft); color: var(--warning); border-color: var(--warning-line); }
.toast-error   { border-left-color: var(--danger);  background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger-line); }
.toast-info    { border-left-color: var(--info);    background: var(--info-soft);    color: var(--info);    border-color: var(--info-line); }

.toast-close {
  background: none;
  border: none;
  color: inherit;
  font-size: var(--fs-md);
  cursor: pointer;
  margin-left: auto;
  opacity: 0.6;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.toast-close:hover { opacity: 1; background: var(--fill-dim-soft); }

/* --------------------------------------------------------------------------
   20. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .recipe-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .shopping-grid-2col { grid-template-columns: 1fr; }
  .freezer-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root { --s-6: 16px; }

  main { padding: var(--s-4) var(--s-4) 96px; }
  .header-container { padding: var(--s-2) var(--s-4); }

  /* backdrop-filter creates a containing block for fixed descendants, which
     pins .nav-tabs inside the header instead of the viewport. The bottom bar
     needs the viewport, so the blur goes and a solid background replaces it. */
  .app-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--cream-0);
  }

  .brand-text h1 { font-size: var(--fs-lg); }
  .brand-tagline { display: none; }
  .brand-symbol { width: 34px; height: 34px; font-size: 1.25rem; }

  .section-title { font-size: var(--fs-xl); }
  .section-header { align-items: flex-start; flex-direction: column; gap: var(--s-3); }
  .section-tools { width: 100%; }
  .section-tools > * { flex: 1 1 140px; }

  /* Tabs become a fixed bottom bar — thumb-reachable, no horizontal scrolling */
  .nav-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 950;
    background: var(--surface-frost-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: var(--s-1) var(--s-1) calc(var(--s-1) + env(safe-area-inset-bottom, 0px));
    gap: 0;
    overflow: visible;
    box-shadow: 0 -2px 16px var(--shadow-ink-soft);
  }

  .tab-btn {
    flex: 1;
    flex-direction: column;
    gap: 2px;
    padding: var(--s-1) 2px;
    min-height: 54px;
    font-size: 10px;
    border-radius: var(--r-md);
    min-width: 0;
  }
  .tab-btn.active::after { display: none; }
  .tab-btn.active { background: var(--burgundy-soft); }
  .tab-icon { font-size: 1.15rem; }
  .tab-label { display: none; }
  .tab-short {
    display: block;
    font-size: 10px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .tab-badge {
    position: absolute;
    top: 2px;
    right: 50%;
    margin-right: -22px;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
  }

  .season-slim-header { padding: var(--s-3); align-items: flex-start; flex-direction: column; }
  .season-slim-title { width: 100%; }
  .season-actions-wrapper { width: 100%; flex-wrap: wrap; }
  .season-actions-wrapper > .btn, .season-actions-wrapper > button { flex: 1 1 auto; justify-content: center; }
  .freezer-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .freezer-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .planner-grid { grid-template-columns: 1fr; }

  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-content {
    max-width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-height: 92vh;
    padding: var(--s-5) var(--s-4) var(--s-8);
  }

  .wizard-stepper { justify-content: flex-start; padding: var(--s-2) var(--s-3); }
  .step-label { display: none; }
  .step-item.step-active .step-label { display: block; }

  .sticky-cta-bar { bottom: 68px; flex-direction: column; align-items: stretch; }
  .sticky-cta-bar .btn { width: 100%; }

  .toast-container { bottom: 72px; right: var(--s-3); left: var(--s-3); max-width: none; }

  .shopping-mode-switcher { width: 100%; }
  .shopping-mode-btn { flex: 1; justify-content: center; }

  .u-2col { grid-template-columns: 1fr; }

  footer { padding-bottom: 88px; }

  /* Touch beats a mouse for imprecision: every control reaches 44px here,
     even the ones kept compact on desktop for density. */
  .btn, .btn-sm,
  .shop-filter-btn, .filter-btn,
  .segmented-btn, .shopping-mode-btn,
  .side-chip-btn, .single-stock-btn, .pantry-toggle-btn,
  .season-pill-link, .season-slim-toggle,
  .consumed-btn, .user-widget-btn, .btn-cheese-toggle, .btn-pill-toggle,
  .auth-tab-btn, .custom-select, .base-input, .input,
  .form-group input, .form-group select {
    min-height: var(--tap);
  }

  /* 44px, comme toute cible tactile : les compteurs de portions sont les seuls
     controles a passer sous le seuil, sur le bac a sauces comme sur l'etape 4. */
  .btn-counter, .btn-square { width: 44px; height: 44px; }
  .clean-shop-left input[type="checkbox"] { width: 22px; height: 22px; }
}

@media (max-width: 380px) {
  .tab-short { font-size: 9px; }
  .header-actions .btn span:not(.gl) { display: none; }
}

/* --------------------------------------------------------------------------
   21. PRINT
   -------------------------------------------------------------------------- */

.print-only { display: none; }

@media print {
  body > *:not(#printContainer) { display: none !important; }
  .print-only { display: block !important; }

  body { background: #fff; color: #000; }

  #printContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #fff;
    padding: 0;
    margin: 0;
  }

  .print-recipe-card {
    page-break-after: always;
    border: 1px solid #2E2A26;
    border-radius: 0;
    padding: 24px;
    margin-bottom: 24px;
    background: #fff;
  }

  .print-recipe-header {
    border-bottom: 2px solid #2E2A26;
    padding-bottom: 12px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .print-recipe-title {
    font-family: Georgia, serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: #73273F;
  }

  .print-section-title {
    font-family: Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
    margin: 16px 0 10px;
    color: #2E2A26;
  }

  .print-ingredients-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    font-size: 0.9rem;
    margin-bottom: 16px;
  }

  .print-ingredient-item {
    background: #FBF8F3;
    padding: 6px 10px;
    border: 1px solid #EFE7DA;
  }

  .print-steps-list { margin-left: 20px; font-size: 0.9rem; line-height: 1.6; }

  /* Planning de la semaine : une seule page, pas de saut force comme sur les
     fiches recette. */
  .print-plan-header {
    border-bottom: 2px solid #2E2A26;
    padding-bottom: 12px;
    margin-bottom: 18px;
  }

  .print-plan-title {
    font-family: Georgia, serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: #73273F;
  }

  .print-plan-sub { font-size: 0.85rem; color: #666; margin-top: 4px; }

  .print-plan-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-bottom: 22px;
  }

  .print-plan-table th,
  .print-plan-table td {
    border: 1px solid #CFC7BA;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
  }

  .print-plan-table thead th {
    background: #FBF8F3;
    font-family: Georgia, serif;
    font-weight: 700;
  }

  .print-plan-table tr { page-break-inside: avoid; }

  .print-plan-day {
    background: #FBF8F3;
    font-weight: 700;
    width: 14%;
    white-space: nowrap;
  }

  .print-plan-sauce { font-weight: 600; }
  .print-plan-base { color: #555; font-size: 0.8rem; margin-top: 2px; }
  .print-plan-empty { color: #999; font-style: italic; font-size: 0.8rem; }
  .print-plan-done { color: #666; text-decoration: line-through; }

  .print-plan-section-title {
    font-family: Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
    margin: 0 0 10px;
    color: #2E2A26;
    page-break-after: avoid;
  }

  .print-plan-list,
  .print-plan-service {
    margin: 0 0 20px;
    padding-left: 20px;
    font-size: 0.85rem;
    line-height: 1.6;
  }

  .print-plan-service li { margin-bottom: 8px; page-break-inside: avoid; }
  .print-plan-service li div { color: #555; }

  .print-plan-foot {
    margin-top: 10px;
    font-size: 0.8rem;
    text-align: center;
    color: #888;
    border-top: 1px solid #eee;
    padding-top: 8px;
  }

  .print-chef-tip {
    margin-top: 18px;
    background: #FBF3DE;
    padding: 12px 14px;
    font-size: 0.85rem;
    font-style: italic;
    border-left: 3px solid #8A6A18;
  }
}