/* ══════════════════════════════════════════════════════════════════
   POLICES AUTO-HÉBERGÉES
   Fichiers variables servis depuis /fonts/ : aucune requête vers
   fonts.googleapis.com ni fonts.gstatic.com avant consentement.
   Les unicode-range proviennent de la feuille css2 de Google.
   latin-ext est déclaré avant latin : à plage égale, la dernière
   déclaration gagne, donc le fichier latin (plus léger) est préféré.
══════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══════════════════════════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════════════════════════ */
:root {
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: blur(16px);
  --clr-bg:             #F5F0E8;
  --clr-surface:        #FFFFFF;
  --clr-surface-2:      #FDF9F5;
  --clr-primary:        #C8553D;
  --clr-primary-hover:  #A84330;
  --clr-primary-light:  #FCEAE6;
  --clr-secondary:      #2C6E49;
  --clr-text:           #1C1612;
  --clr-text-muted:     #6B5E57;
  --clr-border:         #EAE0D5;
  --clr-border-strong:  #C8B5A8;
  --clr-success:        #2C6E49;
  --clr-error:          #C8553D;
  --clr-warning:        #D97706;
  --clr-danger-bg:      #FEF2F2;
  --clr-danger-border:  #FECACA;
  --clr-info-bg:        #F0F9FF;
  --clr-info-border:    #BAE6FD;

  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  --shadow-xs:  0 1px 2px rgba(28,22,18,.06);
  --shadow-sm:  0 2px 6px rgba(28,22,18,.07), 0 1px 2px rgba(28,22,18,.04);
  --shadow-md:  0 4px 14px rgba(28,22,18,.09), 0 2px 4px rgba(28,22,18,.05);
  --shadow-lg:  0 8px 28px rgba(28,22,18,.11), 0 4px 8px rgba(28,22,18,.07);
  --shadow-xl:  0 20px 50px rgba(28,22,18,.14), 0 8px 16px rgba(28,22,18,.08);

  --sidebar-w:   240px;
  --bottom-nav-h: 64px;
  /* Hauteur réelle de .mobile-header. Repli statique ici, remesuré au boot par
     UI.syncMobileHeaderHeight() : le badge d’auth injecté et le zoom texte la
     font varier, et trois barres collantes s’y accrochent. */
  --mobile-header-h: 56px;
  /* Bande couverte par .rbrowse-bar quand elle se colle sur desktop : doit
     rester égale au padding-top de .main-content (voir ce sélecteur). */
  --rbrowse-band: 36px;
  --transition:  150ms ease;
  --transition-md: 250ms ease;
}

/* ══════════════════════════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--clr-text);
  background: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
svg { flex-shrink: 0; }

/* Visible clavier sur tout élément interactif (cartes/tags/liens custom inclus) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════════════ */
#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 100vh;
  grid-template-rows: 100dvh;
  grid-template-areas: "sidebar main";
  min-height: 100vh;
  min-height: 100dvh;
  zoom: var(--ui-zoom, 1);
}

.main-content {
  grid-area: main;
  overflow-y: auto;
  padding: var(--rbrowse-band) 40px 60px;
  min-height: 100vh;
  min-height: 100dvh;
}

.bottom-nav { display: none; }
.mobile-header { display: none; }

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════════════ */
.sidebar {
  grid-area: sidebar;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  padding: 28px 0 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 28px;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 16px;
}

.logo-icon {
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--clr-primary-light);
  border-radius: var(--radius-md);
}

/* Le logo est une image SVG qui porte déjà son fond arrondi : on neutralise
   le carré coloré prévu pour l'ancien emoji. */
img.logo-icon {
  background: none;
  padding: 0;
  object-fit: contain;
}

img.install-banner-icon {
  width: 28px;
  height: 28px;
  display: block;
}

.logo-text {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--clr-text);
}

.sidebar-nav { padding: 0 12px; }

.sidebar-nav li { margin-bottom: 2px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--clr-text-muted);
  font-weight: 500;
  font-size: 14px;
  transition: background var(--transition), color var(--transition);
}

.nav-link:hover {
  background: var(--clr-bg);
  color: var(--clr-text);
}

.nav-link.active {
  background: var(--clr-primary-light);
  color: var(--clr-primary);
}

.nav-icon { display: flex; align-items: center; }

/* En mode application (PWA installée / standalone), Accueil redirige de toute façon
   vers Recettes : on masque l'entrée plutôt que de garder un lien mort. */
.is-app-mode .sidebar [data-section="home"],
.is-app-mode .bottom-nav [data-section="home"] {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  border: 1.5px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  white-space: nowrap;
}

.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--clr-primary);
  color: #fff;
  border-color: var(--clr-primary);
}
.btn-primary:hover { background: var(--clr-primary-hover); border-color: var(--clr-primary-hover); box-shadow: var(--shadow-sm); }

.btn-secondary {
  background: var(--clr-surface);
  color: var(--clr-text);
  border-color: var(--clr-border-strong);
}
.btn-secondary:hover { background: var(--clr-bg); box-shadow: var(--shadow-xs); }

.btn-ghost {
  background: transparent;
  color: var(--clr-text-muted);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--clr-bg); color: var(--clr-text); }

.btn-danger {
  background: var(--clr-danger-bg);
  color: var(--clr-error);
  border-color: var(--clr-danger-border);
}
.btn-danger:hover { background: #fee2e2; }

.btn-success {
  background: var(--clr-success);
  color: #fff;
  border-color: var(--clr-success);
}
.btn-success:hover { background: #245a3c; border-color: #245a3c; box-shadow: var(--shadow-sm); }

.btn-sm { padding: 5px 12px; font-size: 13px; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--clr-text-muted);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.btn-icon:hover { background: var(--clr-bg); color: var(--clr-error); }

.btn-add-row {
  margin-top: 10px;
  font-size: 13px;
  color: var(--clr-primary);
}
.btn-add-row:hover { background: var(--clr-primary-light); color: var(--clr-primary); }

/* ══════════════════════════════════════════════════════════════════
   VIEW HEADER
══════════════════════════════════════════════════════════════════ */
.view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.view-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.2;
}

.view-subtitle {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin-top: 3px;
}

.header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════
   FILTER BAR
   `.search-wrap`, `.search-dropdown` et `.select-filter` servent au picker du
   planning, au batch et aux équivalences. La liste des recettes, elle, utilise
   `.rbrowse-*` (voir « NAVIGATION DANS LES RECETTES »).
══════════════════════════════════════════════════════════════════ */

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-text-muted);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  font-size: 14px;
  color: var(--clr-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search-input:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(200,85,61,.12);
}

/* ── Search clear button ──────────────────────────────────────────*/
.search-clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--clr-text-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 4px 6px;
  border-radius: var(--radius-full);
  transition: color .15s, background .15s;
}
.search-clear-btn:hover { color: var(--clr-text); background: var(--clr-bg); }
.search-clear-btn.hidden { display: none; }
.search-wrap:has(.search-clear-btn:not(.hidden)) .search-input { padding-right: 36px; }

/* ── Search autocomplete dropdown ─────────────────────────────────*/
.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  z-index: 200;
  overflow: hidden;
  animation: sdropIn .12s ease;
}
.search-dropdown.hidden { display: none; }

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

.sdrop-section {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  padding: 10px 14px 4px;
}

.sdrop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--clr-text);
  transition: background .1s;
}
.sdrop-item:hover { background: var(--clr-bg); }
.sdrop-item:focus-visible { background: var(--clr-bg); outline: 2px solid var(--clr-primary); outline-offset: -2px; }
.sdrop-emoji { font-size: 1rem; flex-shrink: 0; }

.select-filter {
  padding: 10px 36px 10px 14px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  font-size: 14px;
  color: var(--clr-text);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236B5E57' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color var(--transition);
}

.select-filter:focus {
  outline: none;
  border-color: var(--clr-primary);
}

/* ══════════════════════════════════════════════════════════════════
   RECIPE GRID & CARDS
══════════════════════════════════════════════════════════════════ */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.recipe-card {
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-md), box-shadow var(--transition-md);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.recipe-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.card-thumb {
  position: relative;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-emoji {
  font-size: 52px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
}

.fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  border: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-muted);
  transition: background var(--transition), color var(--transition), transform var(--transition);
  z-index: 1;
}

.fav-btn:hover { background: #fff; color: var(--clr-error); transform: scale(1.1); }
.fav-btn.active { color: var(--clr-error); background: #fff; }

.card-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.card-category {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.card-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--clr-text);
  line-height: 1.3;
}

.card-desc {
  font-size: 13px;
  color: var(--clr-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
  color: var(--clr-text-muted);
}

.card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   RECIPE DETAIL
══════════════════════════════════════════════════════════════════ */
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fav-btn-detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fav-btn-detail.active { color: var(--clr-error); }

.detail-hero {
  display: flex;
  gap: 28px;
  margin-bottom: 36px;
  align-items: flex-start;
  background: var(--clr-surface);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--clr-border);
}

.detail-emoji {
  width: 90px;
  height: 90px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  flex-shrink: 0;
}

.detail-info { flex: 1; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  margin-bottom: 8px;
}

.badge-batch {
  background: #0D948818;
  color: #0D9488;
  border-color: #0D948840;
}

.badge-batch svg {
  width: 13px;
  height: 13px;
}

.detail-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--clr-text);
  margin-bottom: 6px;
}

.detail-author {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: -8px 0 8px;
}
.detail-author a { color: var(--clr-primary); text-decoration: none; }
.detail-author a:hover { text-decoration: underline; }
.detail-desc {
  font-size: 14px;
  color: var(--clr-text-muted);
  margin-bottom: 16px;
}

.detail-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.meta-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 13px;
  color: var(--clr-text-muted);
}

.meta-chip span { font-weight: 600; color: var(--clr-text); }
.meta-chip small { font-size: 11px; }

.servings-chip { gap: 4px; }

.serving-btn {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text);
  transition: background var(--transition), border-color var(--transition);
  position: relative;
}

/* Zone tactile agrandie (~40px) sans changer la taille visuelle du bouton */
.serving-btn::after {
  content: '';
  position: absolute;
  inset: -8px;
}
.serving-btn:hover { background: var(--clr-primary-light); border-color: var(--clr-primary); color: var(--clr-primary); }

#servings-value { font-weight: 600; color: var(--clr-text); min-width: 20px; text-align: center; }

.detail-columns {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 24px;
}

.ingredients-section,
.steps-section {
  background: var(--clr-surface);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--clr-border);
}

.utensils-section {
  background: var(--clr-surface);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--clr-border);
  margin-bottom: 24px;
}

.utensil-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.utensil-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-full);
  font-size: 13px;
  color: var(--clr-text);
  font-weight: 500;
}

.utensil-chip::before {
  content: '🔧';
  font-size: 12px;
}

.section-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--clr-text);
}

.ingredient-list { display: flex; flex-direction: column; gap: 8px; }

.ingredient-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--clr-bg);
  font-size: 14px;
}

.ing-qty {
  font-weight: 600;
  color: var(--clr-primary);
  min-width: 36px;
  text-align: right;
}

.ing-unit {
  color: var(--clr-text-muted);
  font-size: 12px;
  min-width: 40px;
}

/* Le select d'unité dans le formulaire hérite du style form-select, pas du span détail */
.ing-row select.ing-unit {
  color: var(--clr-text);
  font-size: 14px;
  min-width: unset;
}

/* ── Photo dans les cartes ── */
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}

/* ── Photo dans le détail ── */
.detail-photo-wrap {
  width: 90px;
  height: 90px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
}

.detail-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Photo dans le formulaire ── */
.photo-form-area {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.photo-upload-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 48px;
  border: 2px dashed var(--clr-border-strong);
  border-radius: var(--radius-lg);
  color: var(--clr-text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.photo-upload-label:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: var(--clr-primary-light);
}

.form-photo-preview {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
}

.photo-actions {
  display: flex;
  gap: 8px;
}

.ing-name { color: var(--clr-text); }

.step-list { display: flex; flex-direction: column; gap: 14px; counter-reset: steps; }

.step-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--clr-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.step-item p { font-size: 14px; line-height: 1.65; }

/* ══════════════════════════════════════════════════════════════════
   FORM
══════════════════════════════════════════════════════════════════ */
.form-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.form-header .view-title { margin: 0; }

.recipe-form { display: flex; flex-direction: column; gap: 20px; max-width: 820px; }

.form-card {
  background: var(--clr-surface);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--clr-border);
}

.form-section-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 18px;
  color: var(--clr-text);
}

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-text-muted);
}

.form-input,
.form-textarea,
.form-select {
  padding: 10px 14px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface-2);
  font-size: 14px;
  color: var(--clr-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--clr-primary);
  background: var(--clr-surface);
  box-shadow: 0 0 0 3px rgba(200,85,61,.1);
}

.form-textarea { resize: vertical; min-height: 70px; line-height: 1.5; }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236B5E57' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ── Form utensil picker ──────────────────────────────────────────*/
.utensil-picker-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.utensil-search {
  font-size: 13px;
}

.utensil-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px;
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.04);
  max-height: 188px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.utensil-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 500;
  border: 1.5px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease,
              transform 100ms ease, box-shadow 140ms ease;
  line-height: 1;
}

.utensil-btn:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: var(--clr-primary-light);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--clr-primary) 15%, transparent);
}

.utensil-btn:active { transform: translateY(0); }

.utensil-btn.active {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: #fff;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--clr-primary) 32%, transparent);
}

.utensil-btn.active:hover {
  transform: scale(1.02) translateY(-1px);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--clr-primary) 38%, transparent);
}

.utensil-btn[hidden] { display: none; }

.form-hint {
  font-size: 12px;
  color: var(--clr-text-muted);
  line-height: 1.4;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

/* ── Carte « Batch cooking » du formulaire ───────────────────── */
.batch-form-switch,
.batch-form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--clr-text);
}

.batch-form-switch {
  font-weight: 600;
}

.batch-form-check {
  margin-top: 14px;
}

.batch-form-switch input,
.batch-form-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--clr-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.batch-form-intro {
  margin: 6px 0 0 28px;
  font-size: 12px;
  color: var(--clr-text-muted);
  line-height: 1.5;
}

/* Le corps ne s'ouvre qu'une fois l'interrupteur coché. */
.batch-form-body { display: none; }
.batch-form-card.batch-on .batch-form-body {
  display: block;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--clr-border);
}

/* ── Section batch de la fiche recette ───────────────────────── */
.batch-detail-section {
  background: var(--clr-surface);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--clr-border);
  margin-bottom: 24px;
}

.batch-detail-section .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.batch-detail-note {
  margin: -4px 0 14px;
  font-size: 13px;
  color: var(--clr-text-muted);
}

.batch-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.batch-detail-fact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
}

.batch-detail-icon {
  font-size: 18px;
  line-height: 1.2;
}

.batch-detail-label,
.batch-detail-value {
  display: block;
}

.batch-detail-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--clr-text-muted);
}

.batch-detail-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-text);
}

.batch-detail-line {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--clr-text);
}

/* Ingredient rows */
.ing-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.ing-row-main {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ing-row-main .form-input { flex: 1; }

.ing-drag-handle {
  cursor: grab;
  color: var(--clr-text-muted);
  opacity: 0.35;
  flex-shrink: 0;
  touch-action: none;
  padding: 4px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
}

.ing-drag-handle:hover { opacity: 0.9; }

.ing-drag-handle:active { cursor: grabbing; }

.ing-row.ing-dragging {
  opacity: 0.65;
  background: var(--clr-bg-card, #fff);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-sm, 4px);
  outline: 2px dashed var(--clr-primary, #4f46e5);
  outline-offset: 2px;
}

/* ── Boutons ↑/↓ réordonnancement ingrédients/étapes ── */
.row-move-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.btn-move {
  width: 28px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--clr-border);
  border-radius: 4px;
  color: var(--clr-text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn-move:hover { background: var(--clr-bg); color: var(--clr-text); }

/* Quantité et unité : largeurs en CSS plutôt qu'inline (surchargeables en mobile).
   Portée au formulaire (.ing-row) : ces largeurs dimensionnent des champs de
   saisie. Non portées, elles s'appliquaient aussi aux <span> de la fiche
   recette, où 80 px + 150 px de colonnes fixes ne laissaient plus la place au
   nom de l'ingrédient sur un écran de téléphone. */
.ing-row .ing-qty { width: 80px; }
.ing-row .ing-unit { width: 150px; }

/* ── Estimation calorique par ingrédient ─────────────────────────────────── */
.ing-kcal-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 32px; /* aligné sous le champ nom, après la poignée de tri */
}

.ing-kcal-badge {
  flex: 1;
  font-size: 12px;
  color: var(--clr-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ing-kcal-badge.kcal-computed { color: var(--clr-text-muted); }
.ing-kcal-badge.kcal-manual   { color: var(--clr-primary); font-weight: 600; }
.ing-kcal-badge.kcal-unknown  { color: var(--clr-warning); }

.ing-kcal-override-input {
  flex: 0 0 150px;
  width: 150px;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  color: var(--clr-text);
}

.ing-row.has-kcal-override .ing-kcal-override-input {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}

.kcal-clear-btn {
  width: 20px;
  height: 20px;
  opacity: 0;
  pointer-events: none;
  color: var(--clr-text-muted);
  transition: opacity .15s;
}
.kcal-clear-btn svg { width: 12px; height: 12px; }

.ing-row.has-kcal-override .kcal-clear-btn {
  opacity: 0.7;
  pointer-events: auto;
}
.ing-row.has-kcal-override .kcal-clear-btn:hover { opacity: 1; }

/* ── Chip calories (fiche détail) ────────────────────────────────────────── */

.kcal-info-btn {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--clr-text-muted);
  font-size: 13px;
  line-height: 1;
  padding: 0 0 0 2px;
}
.kcal-info-btn:hover { color: var(--clr-primary); }

/* ── Modal « Détail des calories » ───────────────────────────────────────── */
.kcal-detail-summary {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

.kcal-detail-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}

.kcal-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--clr-border);
  font-size: 13px;
}

.kcal-detail-name   { flex: 1; color: var(--clr-text); }
.kcal-detail-kcal    { font-weight: 600; color: var(--clr-text); min-width: 60px; text-align: right; }
.kcal-detail-source  { font-size: 11px; color: var(--clr-text-muted); min-width: 80px; text-align: right; }

.kcal-detail-row.kcal-detail-manual .kcal-detail-kcal { color: var(--clr-primary); }
.kcal-detail-row.kcal-detail-unresolved { opacity: 0.6; }

.kcal-detail-empty {
  color: var(--clr-text-muted);
  font-size: 13px;
  text-align: center;
  padding: 12px 0;
}

/* Step rows */
.step-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.step-row-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--clr-bg);
  border: 1.5px solid var(--clr-border);
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-text-muted);
  flex-shrink: 0;
  margin-top: 10px;
}

.step-text { flex: 1; }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   WEEKLY PLANNER
══════════════════════════════════════════════════════════════════ */

/* ── Conteneur scrollable ── */
.week-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 3px 2px 4px;
}

/* ── Grille 7 jours ── */
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(90px, 1fr));
  gap: 8px;
}

/* ── Carte par jour ── */
.week-day-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
}

.week-day-hd {
  padding: 9px 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--clr-text);
  background: var(--clr-surface-2);
  border-bottom: 1px solid var(--clr-border);
}

/* ── Ligne repas dans la carte ── */
.week-meal-row {
  display: flex;
  flex-direction: column;
  padding: 6px 7px;
  border-bottom: 1px solid var(--clr-border);
}
.week-meal-row:last-child { border-bottom: none; }

.week-meal-label-v {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--meal-accent);
  border-left: 2px solid var(--meal-accent);
  padding-left: 4px;
  margin-bottom: 4px;
  line-height: 1.3;
}

.week-meal-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 26px;
}

/* ── Item row inside a cell ── */
.week-item {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 4px 5px;
  position: relative;
}

.week-item-emoji {
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1;
}

.week-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.week-item-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--clr-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.week-item-servings {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
}

.week-srv-btn {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.12);
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text);
  flex-shrink: 0;
  transition: background var(--transition);
}
.week-srv-btn:hover { background: #fff; }

.week-item-del {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--clr-text-muted);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.week-item:hover .week-item-del { opacity: 1; }
.week-item-del:hover { background: #fff; color: var(--clr-error); }

/* ── Add button ── */
.week-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 5px 6px;
  border: 1.5px dashed var(--clr-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-text-muted);
  font-size: 11px;
  font-weight: 500;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.week-add-btn:hover {
  border-color: var(--meal-accent, var(--clr-primary));
  color: var(--meal-accent, var(--clr-primary));
  background: rgba(200, 85, 61, 0.08);
  background: color-mix(in srgb, var(--meal-accent, var(--clr-primary)) 8%, transparent);
}

.week-add-btn.compact {
  padding: 3px 6px;
  border-style: dotted;
}

.week-hint {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--clr-text-muted);
  padding: 16px;
}

/* ── Today indicator on desktop card ── */
.week-day-card.today { box-shadow: 0 0 0 2px var(--clr-primary); }
.week-today-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--clr-primary);
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 4px;
  margin-bottom: 1px;
}

/* ── Toggle vue semaine / jour (mobile only) ── */
.week-view-toggle  { display: none; }
.week-global-scroll { display: none; }

/* ── Séparateur entre jours dans la vue globale ── */
.week-global-scroll .week-active-day-panel + .week-active-day-panel {
  border-top: 1px solid var(--clr-border);
  padding-top: 16px;
}
.week-global-today {
  box-shadow: 0 0 0 2px var(--clr-primary);
  border-radius: var(--radius-md);
}
.week-global-today > .week-active-day-title { color: var(--clr-primary); }

/* ── Day tabs (hidden on desktop, shown on mobile) ── */
.week-day-tabs-wrap {
  display: none;
  margin-bottom: 14px;
}
.week-day-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.week-day-tabs::-webkit-scrollbar { display: none; }

.week-day-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 12px 7px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  color: var(--clr-text-muted);
  min-width: 52px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.week-day-tab.today:not(.active) {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}
.week-day-tab.active {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: #fff;
}
.week-day-tab-abbr {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}
.week-day-tab-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid currentColor;
  opacity: .4;
  flex-shrink: 0;
}
.week-day-tab-dot.filled {
  background: currentColor;
  opacity: 1;
}
.week-day-tab.active .week-day-tab-dot { opacity: .6; }
.week-day-tab.active .week-day-tab-dot.filled { opacity: 1; }

/* ── Active day panel (hidden on desktop, shown on mobile) ── */
.week-active-day-panel {
  display: none;
  animation: weekDayFade .18s ease-out;
}
@keyframes weekDayFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.week-active-day-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.week-today-badge {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  letter-spacing: .02em;
}

/* ══════════════════════════════════════════════════════════════════
   SHOPPING LIST
══════════════════════════════════════════════════════════════════ */
.shop-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  background: var(--clr-surface);
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: var(--clr-bg);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--clr-secondary);
  border-radius: var(--radius-full);
  transition: width 300ms ease;
}

.progress-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text-muted);
  white-space: nowrap;
}

.shop-list {
  background: var(--clr-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--clr-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Flex : .shop-label occupe toute la largeur, les boutons ✎/✕ des articles
   manuels retombaient sinon sur une seconde ligne sous l'article. */
.shop-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--clr-border);
  transition: background var(--transition);
}

.shop-item > .shop-label { flex: 1; min-width: 0; }
.shop-item.is-manual { padding-right: 10px; }

.shop-item:last-child { border-bottom: none; }

.shop-item.checked { background: var(--clr-bg); }

.shop-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
}

.shop-check { display: none; }

.shop-checkmark {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--clr-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.shop-check:checked ~ .shop-checkmark {
  background: var(--clr-secondary);
  border-color: var(--clr-secondary);
  color: #fff;
}

.shop-text {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex: 1;
}

.shop-qty {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-primary);
  white-space: nowrap;
}

.shop-name {
  font-size: 14px;
  color: var(--clr-text);
  transition: color var(--transition);
}

.shop-item.checked .shop-name {
  color: var(--clr-text-muted);
  text-decoration: line-through;
}

.shop-divider {
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  background: var(--clr-bg);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}

/* ══════════════════════════════════════════════════════════════════
   SETTINGS
══════════════════════════════════════════════════════════════════ */
.tools-page {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.pz-tab-wrapper {
  width: 100%;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
  align-items: start;
}

/* Wrapper unique de la page Paramètres : centre le titre, la carte compte,
   les onglets, la grille et le format-doc dans la même colonne. Sans lui,
   view-header et format-doc restent collés à gauche pendant que le reste
   est centré à 900px, ce qui désaligne tout à partir de 1200px. */
.settings-page {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.settings-page .settings-grid,
.settings-page .settings-card-account,
.settings-page .format-doc {
  max-width: none;
  margin-inline: 0;
}

.settings-card {
  background: var(--clr-surface);
  border-radius: var(--radius-xl);
  padding: 24px;
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-card-danger { border-color: var(--clr-danger-border); background: var(--clr-danger-bg); }
.settings-card-info   { border-color: var(--clr-info-border);   background: var(--clr-info-bg); }
.settings-card-wide   { grid-column: 1 / -1; }

.settings-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.settings-desc {
  font-size: 13px;
  color: var(--clr-text-muted);
  line-height: 1.6;
  flex: 1;
}

.settings-version {
  font-size: 11px;
  color: var(--clr-text-muted);
  opacity: 0.6;
  margin-top: 8px;
}

/* ── Préférences : interrupteurs ── */
.settings-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-text);
  cursor: pointer;
  min-height: 44px; /* cible tactile */
}

.settings-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--clr-primary);
  cursor: pointer;
}

/* ── Sélecteur de zoom ── */
.scale-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.scale-btn {
  padding: 8px 16px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  min-height: 44px;
}
.scale-btn:hover { border-color: var(--clr-primary); }
.scale-btn.active {
  background: var(--clr-primary);
  color: #fff;
  border-color: var(--clr-primary);
}

/* ── Objectifs nutritionnels (réglages) ── */
.goal-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px 18px;
  margin: 14px 0 16px;
}

.goal-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--clr-text);
}

.goal-field-label { min-width: 0; flex: 1 1 auto; }

.goal-field-input {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.goal-field-input input {
  width: 78px;
  padding: 6px 8px;
  font-size: 16px; /* < 16px déclencherait le zoom iOS au focus */
  text-align: right;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-bg);
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
}

.goal-field-input input:focus {
  outline: none;
  border-color: var(--clr-primary);
}

.goal-field-unit {
  font-size: 12px;
  color: var(--clr-text-muted);
  min-width: 30px;
}

/* ── Nutrition du jour (vue Semaine) ── */
.week-nutrition {
  margin: 0 0 10px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-bg);
  padding: 8px 12px;
}

.week-nutrition > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
}

.week-nutrition > summary::-webkit-details-marker { display: none; }

.week-nutrition-kcal   { font-weight: 700; color: var(--clr-text); }
.week-nutrition-target { font-size: 12px; color: var(--clr-text-muted); }
.week-nutrition-more   { margin-left: auto; font-size: 11px; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: .03em; }

.week-nutri-table { margin-top: 8px; font-size: 13px; }
.week-nutri-table td small { font-weight: 400; color: var(--clr-text-muted); }

.goal-bar-cell { width: 90px; padding-left: 10px; }

.goal-bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--clr-border);
  overflow: hidden;
}

.goal-bar-fill {
  height: 100%;
  background: var(--clr-primary);
  border-radius: var(--radius-full);
  transition: width .3s ease;
}

/* Dépassement de l'objectif : la barre reste pleine mais change de teinte. */
.goal-bar.over .goal-bar-fill { background: #C0392B; }

/* Grille desktop 7 colonnes : une ligne kcal compacte suffit, 8 barres dans
   110 px seraient illisibles. (Conservé pour compatibilité, plus émis
   par ui-planner.js depuis v7 : le tableau complet est désormais utilisé
   partout, avec un style compact ci-dessous quand il est dans une carte
   de la grille desktop.) */
.week-kcal-compact {
  font-size: 11px;
  font-weight: 600;
  color: var(--clr-text-muted);
  text-align: center;
  padding: 3px 0 5px;
  border-bottom: 1px dashed var(--clr-border);
  margin-bottom: 6px;
}

/* Nutrition dans les cartes jour de la grille desktop 7 colonnes :
   colonnes ~90-200px, on comprime le details/summary et le tableau pour
   que tout tienne. Sur mobile, .week-day-card est masquée et la
   nutrition s'affiche via les vues jour/scroll (styles pleine largeur
   plus haut), donc ces règles n'affectent que le rendu 7 colonnes. */
.week-day-card .week-nutrition {
  padding: 5px 7px;
  margin-bottom: 6px;
}
.week-day-card .week-nutrition > summary {
  font-size: 11px;
  gap: 4px;
  flex-wrap: wrap;
}
.week-day-card .week-nutrition-kcal { font-size: 12px; }
.week-day-card .week-nutrition-target { font-size: 10px; }
.week-day-card .week-nutrition-more { display: none; }
.week-day-card .week-nutri-table { font-size: 10px; }
.week-day-card .week-nutri-table th,
.week-day-card .week-nutri-table td { padding: 2px 3px; }
.week-day-card .goal-bar-cell { width: 32px; padding-left: 3px; }
.week-day-card .nutri-note,
.week-day-card .nutri-warn { font-size: 10px; margin: 4px 0 0; }

/* ── Tableau nutritionnel (fiche recette) ── */
.nutrition-panel {
  margin-top: 28px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}

.nutri-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
}

.nutri-table th,
.nutri-table td {
  padding: 9px 4px;
  border-bottom: 1px solid var(--clr-border);
  text-align: left;
}

.nutri-table th { font-weight: 500; color: var(--clr-text); }
.nutri-table td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.nutri-table tr:last-child th,
.nutri-table tr:last-child td { border-bottom: none; }

.nutri-energy th,
.nutri-energy td { font-weight: 700; font-size: 15px; }

/* Sous-lignes « dont … » : décalées et atténuées, comme sur un emballage. */
.nutri-sub th {
  padding-left: 18px;
  font-weight: 400;
  color: var(--clr-text-muted);
  font-size: 13px;
}
.nutri-sub td { font-weight: 500; color: var(--clr-text-muted); }

.nutri-partial {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  font-size: 10px;
  font-weight: 500;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nutri-note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--clr-text-muted);
}

.hp-section-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.settings-hint {
  font-size: 12px;
  color: var(--clr-text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* ── Settings tabs ── */
.settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 28px;
  background: var(--clr-surface);
  padding: 4px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-xs);
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Ombres de défilement : n'apparaissent que s'il y a vraiment plus de contenu
     à faire glisser (les deux calques "local" masquent les calques "scroll"
     tant que le contenu tient dans le conteneur). */
  background-image:
    linear-gradient(to right, var(--clr-surface) 0, transparent 16px),
    linear-gradient(to left,  var(--clr-surface) 0, transparent 16px),
    linear-gradient(to right, rgba(28,22,18,.12), transparent 16px),
    linear-gradient(to left,  rgba(28,22,18,.12), transparent 16px);
  background-repeat: no-repeat;
  background-size: 16px 100%, 16px 100%, 16px 100%, 16px 100%;
  background-position: left, right, left, right;
  background-attachment: local, local, scroll, scroll;
}
.settings-tabs::-webkit-scrollbar { display: none; }

/* Programmer (Semaine/Batch) utilise de vraies icônes SVG plutôt que des emoji :
   sans alignement flex explicite, l'icône (bloc de 20px) et le texte se calent
   sur la ligne de base et paraissent décalés l'un par rapport à l'autre. */
.programmer-tabs .settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.programmer-tabs .settings-tab svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.settings-tab {
  padding: 8px 22px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--clr-text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.settings-tab.active {
  background: var(--clr-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.settings-tab:hover:not(.active) {
  background: var(--clr-surface-2);
  color: var(--clr-text);
}

/* ── Format JSON doc ── */
.format-doc {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.format-section { display: flex; flex-direction: column; gap: 10px; }

.format-section-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--clr-text);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--clr-border);
}

.format-subsection-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-text);
  margin-top: 20px;
}

.format-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  border: 1px solid #F5C4BC;
  margin-left: 6px;
  vertical-align: middle;
}

.format-intro {
  font-size: 14px;
  color: var(--clr-text-muted);
  line-height: 1.7;
}

.format-doc pre {
  background: #1C1612;
  color: #EDE8E0;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  overflow-x: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
  box-shadow: var(--shadow-md);
}

.format-doc pre .json-key   { color: #F5A97C; }
.format-doc pre .json-str   { color: #A9D9A4; }
.format-doc pre .json-num   { color: #79C0FF; }
.format-doc pre .json-bool  { color: #D2A8FF; }
.format-doc pre .json-null  { color: #8B949E; }

/* La table des champs a 4 colonnes dont des <code> en white-space:nowrap :
   elle ne peut pas se réduire indéfiniment. On la fait défiler dans son
   propre conteneur plutôt que de laisser la page défiler horizontalement. */
.format-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.format-field-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-xs);
}

.format-field-table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--clr-surface-2);
  border-bottom: 2px solid var(--clr-border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--clr-text-muted);
}

.format-field-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--clr-border);
  vertical-align: top;
  line-height: 1.5;
}

.format-field-table tr:last-child td { border-bottom: none; }
.format-field-table tr:nth-child(even) td { background: var(--clr-surface-2); }

.format-field-table code {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  background: var(--clr-bg);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--clr-border);
  white-space: nowrap;
}

.format-required {
  color: var(--clr-primary);
  font-weight: 700;
}

.format-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.format-cat-pill {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
}

.lia-prompt-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lia-prompt-pre {
  background: #1C1612;
  color: #EDE8E0;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  overflow-x: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  margin: 0;
  box-shadow: var(--shadow-md);
  white-space: pre-wrap;
  word-break: break-word;
}

.lia-copy-btn {
  align-self: flex-start;
}

/* ══════════════════════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28,22,18,.45);
  backdrop-filter: blur(3px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn .2s ease;
}

.modal-overlay.hidden { display: none; }

.modal-drag-handle { display: none; }

.modal {
  background: var(--clr-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp .25s ease;
}

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--clr-border);
}

.modal-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--clr-bg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-muted);
  transition: background var(--transition), color var(--transition);
}
.modal-close:hover { background: var(--clr-border); color: var(--clr-text); }

.modal-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--clr-border);
}

/* Recipe picker in modal */
.picker-recipes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--clr-border);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.picker-item:hover { background: var(--clr-bg); }

.picker-item:has(.picker-radio:checked),
.picker-item.selected {
  background: var(--clr-primary-light);
  border-color: var(--clr-primary);
}

.picker-thumb {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.picker-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.picker-info strong { font-size: 14px; }
.picker-info small  { font-size: 12px; color: var(--clr-text-muted); }

.picker-radio { display: none; }

.picker-servings {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.picker-servings .form-input { max-width: 100px; }

/* ── Picker filter bar (inside modal) ─────────────────────────── */
.picker-search-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.picker-search-bar .search-wrap { flex: 1; min-width: 140px; }
.picker-empty { text-align: center; color: var(--clr-text-muted); padding: 24px 0; font-size: 14px; }

/* ══════════════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════════════ */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  background: var(--clr-text);
  color: #fff;
  max-width: 320px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: auto;
}

.toast.show { opacity: 1; transform: translateY(0); }
.toast-error   { background: var(--clr-error); }
.toast-success { background: var(--clr-secondary); }

/* ── Notification de fin de minuteur ───────────────────────────── */
.timer-end-notif {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--clr-primary);
  color: #fff;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 16px;
  font-weight: 600;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: auto;
}
.timer-end-notif.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.timer-end-notif.hide {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
}
.timer-end-notif-icon {
  font-size: 22px;
  animation: timer-pulse 0.5s ease-in-out infinite alternate;
}
@keyframes timer-pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.3); }
}
.timer-end-notif-close {
  background: rgba(255,255,255,0.25);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}
.timer-end-notif-close:hover {
  background: rgba(255,255,255,0.45);
}

/* ══════════════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 20px;
  gap: 12px;
}

.empty-icon { font-size: 56px; }

.empty-state h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.empty-state p {
  font-size: 14px;
  color: var(--clr-text-muted);
  max-width: 300px;
}

/* ══════════════════════════════════════════════════════════════════
   LOADING
══════════════════════════════════════════════════════════════════ */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--clr-text-muted);
  font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════════
   TOUCH OPTIMISATIONS (toutes tailles)
══════════════════════════════════════════════════════════════════ */
button, a, label, select, input[type="checkbox"], input[type="radio"] {
  touch-action: manipulation; /* supprime le délai 300 ms */
}

/* ══════════════════════════════════════════════════════════════════
   TABLET : sidebar icônes seules (769 : 1080px)
══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1080px) {
  :root { --sidebar-w: 68px; }

  .sidebar {
    padding-top: 20px;
    align-items: center;
  }

  .sidebar-logo {
    padding: 0 0 20px;
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: 12px;
    justify-content: center;
    width: 100%;
  }

  .logo-text { display: none; }

  .sidebar-nav { padding: 0 8px; width: 100%; }

  .nav-link {
    justify-content: center;
    padding: 10px;
    position: relative;
  }

  /* Label affiché en tooltip au survol */
  .nav-link span:not(.nav-icon) {
    position: absolute;
    left: calc(100% + 10px);
    background: var(--clr-text);
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
    z-index: 200;
  }
  .nav-link:hover span:not(.nav-icon) { opacity: 1; }

  /* Badge utilisateur : rail de 68px, pas de place pour le texte */
  #sidebar-user-badge { padding: 12px 8px; display: flex; justify-content: center; }

  .sidebar-user-link { padding: 8px; justify-content: center; }
  .sidebar-user-name  { display: none; }

  #sidebar-user-badge .btn-google {
    width: auto !important;
    padding: 8px;
    font-size: 0 !important; /* masque le libellé, l'icône Google reste visible */
  }
  #sidebar-user-badge .btn-google svg { flex-shrink: 0; }

  /* Grille recettes moins large */
  .recipe-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

  /* Détail : colonnes équilibrées */
  .detail-columns { grid-template-columns: 1fr 1fr; }
  .detail-hero { padding: 20px; }

  /* Contenu principal moins de padding */
  .main-content { padding: 28px 28px 48px; }

  /* Homepage tablet */
  .homepage.homepage-visitor { margin: -28px -28px -48px; }
  .homepage-visitor .hp-hero { padding: 52px 36px 48px; }
  .homepage-visitor .hp-section { padding: 44px 36px; }
  .homepage-visitor .hp-cta { padding: 52px 36px; }
  .homepage-visitor .hp-features-grid { grid-template-columns: repeat(2, 1fr); }
  .homepage-visitor .hp-stats { grid-template-columns: repeat(4, 1fr); }

  /* Modal légèrement plus large sur tablette */
  .modal { max-width: 680px; }

  /* Planificateur : colonnes scrollables à partir de 110px minimum */
  .week-grid {
    grid-template-columns: repeat(7, minmax(110px, 1fr));
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE (≤ 768px)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Layout ── */
  #app {
    display: block;               /* plus de grid, on empile */
    min-height: 100vh;            /* fallback anciens navigateurs */
    min-height: 100dvh;           /* moderne : suit la barre d'adresse */
  }

  .sidebar { display: none; }

  .mobile-header {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mobile-header-h);
    background: rgba(253, 249, 245, 0.85); /* var(--clr-surface-2) with alpha */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--clr-border);
    padding: 0 16px;
    z-index: 400;
  }

  .mobile-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }

  .mobile-logo .logo-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--clr-primary-light);
    border-radius: var(--radius-md);
  }

  .mobile-logo .logo-text {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--clr-text);
  }

  .main-content {
    padding: calc(var(--mobile-header-h) + 20px) 16px calc(var(--bottom-nav-h) + 24px);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: clip;
  }

  /* ── Bottom navigation ── */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-h);
    background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-top: 1px solid var(--glass-border);
    box-shadow: 0 -4px 20px rgba(28,22,18,.1);
    z-index: 100;
    /* Safe area iPhone notch */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .bn-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--clr-text-muted);
    font-size: 11px;             /* seuil de lisibilité HIG/WCAG */
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: color var(--transition);
    min-height: 44px;            /* tap target */
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 2px;
  }

  .bn-link.active { color: var(--clr-primary); }
  .bn-icon { display: flex; align-items: center; }

  /* ── Swipe indicator (non-standalone: hidden) ── */
  .swipe-track { display: none; }

  /* ── View header ── */
  .view-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
  }

  .view-title  { font-size: 24px; }
  .view-subtitle { font-size: 12px; }

  .header-actions {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 6px;
    padding-bottom: 2px;
    /* Ombres de défilement (même technique que .detail-actions) */
    background-image:
      linear-gradient(to right, var(--clr-bg) 0, transparent 16px),
      linear-gradient(to left,  var(--clr-bg) 0, transparent 16px),
      linear-gradient(to right, rgba(28,22,18,.12), transparent 16px),
      linear-gradient(to left,  rgba(28,22,18,.12), transparent 16px);
    background-repeat: no-repeat;
    background-size: 16px 100%, 16px 100%, 16px 100%, 16px 100%;
    background-position: left, right, left, right;
    background-attachment: local, local, scroll, scroll;
  }

  .header-actions .btn { flex-shrink: 0; font-size: 13px; padding: 8px 14px; }

  /* ── Filter bar (picker planning, batch, équivalences) ── */
  .search-wrap { min-width: 0; }
  .select-filter { width: 100%; }

  /* ── Anti-zoom iOS : tout input < 16px déclenche le zoom Safari au focus ── */
  .search-input,
  .form-input,
  .form-textarea,
  .form-select,
  .select-filter { font-size: 16px; }

  /* ── Recipe grid ── */
  .recipe-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .card-thumb  { height: 100px; }
  .card-emoji  { font-size: 38px; }
  .card-body   { padding: 12px; }
  .card-title  { font-size: 14px; }
  .card-desc   { display: none; }  /* trop petit pour la desc */

  /* ── Recipe detail ── */
  .detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
  }

  .detail-actions {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    padding-bottom: 2px;
    /* Même technique d'ombres de défilement que .settings-tabs */
    background-image:
      linear-gradient(to right, var(--clr-bg) 0, transparent 16px),
      linear-gradient(to left,  var(--clr-bg) 0, transparent 16px),
      linear-gradient(to right, rgba(28,22,18,.12), transparent 16px),
      linear-gradient(to left,  rgba(28,22,18,.12), transparent 16px);
    background-repeat: no-repeat;
    background-size: 16px 100%, 16px 100%, 16px 100%, 16px 100%;
    background-position: left, right, left, right;
    background-attachment: local, local, scroll, scroll;
  }

  .detail-actions .btn { flex-shrink: 0; font-size: 12px; padding: 7px 12px; }

  .detail-hero {
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    margin-bottom: 16px;
  }

  .detail-photo-wrap {
    width: 100%;
    height: 200px;
    border-radius: var(--radius-lg);
  }
  .detail-emoji { width: 64px; height: 64px; font-size: 30px; }
  .detail-title { font-size: 22px; }
  .detail-desc  { margin-bottom: 10px; }

  .detail-meta {
    gap: 8px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .meta-chip {
    padding: 6px 12px;
    font-size: 12px;
    flex: 1 1 auto;
    justify-content: center;
  }
  .servings-chip {
    justify-content: space-between;
    flex-grow: 2;
  }

  .detail-columns { grid-template-columns: 1fr; gap: 12px; }

  .ingredients-section,
  .steps-section { padding: 16px; border-radius: var(--radius-lg); }

  .section-title { font-size: 17px; margin-bottom: 12px; }

  .step-list { gap: 18px; }
  .step-item { gap: 10px; }
  /* `min-width: 0` sur le conteneur et coupure autorisée sur le texte : sans
     ça une instruction longue (ou un mot non sécable) fait déborder l'étape
     hors de la carte au lieu de se replier. */
  .step-content { min-width: 0; }
  .step-item p { font-size: 15.5px; line-height: 1.7; overflow-wrap: anywhere; }
  .step-num { width: 30px; height: 30px; font-size: 13px; }

  /* Idem côté ingrédients : la quantité garde sa colonne, le nom prend ce qui
     reste et passe à la ligne plutôt que de pousser la ligne hors cadre. */
  .ingredient-item { flex-wrap: wrap; }
  .ing-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

  /* ── Recipe form ── */
  .form-input,
  .form-textarea,
  .form-select,
  .search-input,
  .select-filter {
    font-size: 16px; /* Prévient le zoom automatique sur iOS */
  }

  .form-header {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }

  .form-header .view-title { font-size: 20px; }

  .recipe-form { gap: 14px; }
  .form-card   { padding: 16px; border-radius: var(--radius-lg); }
  .form-section-title { font-size: 16px; margin-bottom: 14px; }

  /* Zone d'upload photo : padding réduit sur mobile */
  .photo-upload-label { padding: 18px 20px; }
  .form-photo-preview { max-height: 220px; }

  /* Ligne ingrédient : nom pleine largeur, qté+unité+suppr en dessous */
  .ing-row-main {
    flex-wrap: wrap;
    gap: 6px;
  }
  .ing-row .ing-name { flex: 1 1 100%; width: auto !important; }
  .ing-row .ing-qty  { flex: 0 0 70px; width: 70px !important; }
  .ing-row .ing-unit { flex: 1 1 auto; width: auto !important; }

  /* Cibles tactiles ≥ 44px sur mobile */
  .btn-icon,
  .ing-drag-handle,
  .btn-remove-ing,
  .btn-remove-step,
  .food-fix-btn { min-width: 44px; min-height: 44px; }
  .ing-drag-handle { opacity: 0.7; }
  .btn-move { min-width: 36px; min-height: 28px; }
  /* Masquer le drag handle sur mobile (les boutons ↑/↓ sont plus fiables) */
  .ing-drag-handle { display: none; }

  .form-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; justify-content: center; }

  /* ── Weekly planner : onglets jour + panneau actif ── */
  .week-day-tabs-wrap { display: block; }
  .week-active-day-panel { display: block; }
  .week-scroll-wrap { display: none; }
  .week-view-toggle { display: inline-flex; }
  .week-global-scroll { display: flex; flex-direction: column; gap: 20px; }
  .week-hint { margin-top: 12px; }

  .week-active-day-panel .week-meal-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    margin-bottom: 6px;
    border-bottom: none;
    border: 1px solid transparent;
  }
  .week-active-day-panel .week-meal-row:last-child { margin-bottom: 0; }

  .week-active-day-panel .week-meal-label-v {
    width: 80px;
    flex-shrink: 0;
    border-left: none;
    border-right: 2.5px solid var(--meal-accent);
    padding-left: 0;
    padding-right: 8px;
    text-align: right;
    margin-bottom: 0;
    padding-top: 3px;
    font-size: 10px;
  }

  .week-active-day-panel .week-meal-content { flex: 1; }
  .week-active-day-panel .week-item-name { font-size: 13px; white-space: normal; }
  .week-active-day-panel .week-item { padding: 6px 8px; }
  .week-active-day-panel .week-add-btn { font-size: 13px; padding: 9px 12px; }

  /* Boutons de portée: plus grands sur mobile */
  .week-active-day-panel .week-srv-btn {
    width: 22px;
    height: 22px;
    font-size: 14px;
  }

  /* Toujours visible sur touch (pas de hover) */
  .week-item-del {
    opacity: 1;
    width: 24px;
    height: 24px;
  }

  /* ── Shopping list ── */
  .shop-label  { padding: 12px 14px; }
  .shop-progress { padding: 12px 14px; }

  /* ── Settings ── */
  .settings-grid { grid-template-columns: 1fr; gap: 12px; }
  .settings-card { padding: 18px; border-radius: var(--radius-lg); }

  /* ── Homepage ── */
  .homepage.homepage-visitor { margin: -20px -16px calc(-(var(--bottom-nav-h) + 24px)); }
  .homepage-visitor .hp-hero { padding: 44px 24px 40px; }
  .homepage-visitor .hp-hero-badge { margin-bottom: 16px; }
  .homepage-visitor .hp-hero-logo { font-size: 48px; margin-bottom: 14px; }
  .homepage-visitor .hp-section { padding: 36px 24px; }
  .homepage-visitor .hp-section-title { font-size: 22px; margin-bottom: 24px; }
  .homepage-visitor .hp-features-grid { grid-template-columns: 1fr; gap: 14px; }
  .homepage-visitor .hp-stats { grid-template-columns: repeat(2, 1fr); }
  .homepage-visitor .hp-stat { padding: 24px 16px; border-right: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); }
  .homepage-visitor .hp-stat:nth-child(2), .homepage-visitor .hp-stat:nth-child(4) { border-right: none; }
  .homepage-visitor .hp-stat:nth-child(3), .homepage-visitor .hp-stat:nth-child(4) { border-bottom: none; }
  .homepage-visitor .hp-stat-num { font-size: 26px; }
  .homepage-visitor .hp-cta { padding: 44px 24px; }
  .homepage-visitor .hp-cta h2 { font-size: 22px; }
  .homepage-visitor .hp-cta p { margin-bottom: 20px; }

  /* ── Modal : slide depuis le bas ── */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal-drag-handle {
    display: block;
    width: 36px;
    height: 4px;
    background: var(--clr-border-strong);
    border-radius: var(--radius-full);
    margin: 10px auto 0;
    opacity: 0.6;
    flex-shrink: 0;
  }

  .modal {
    max-width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    animation: slideUpMobile .3s cubic-bezier(.32,.72,0,1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  @keyframes slideUpMobile {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  .modal-header { padding: 16px 20px 14px; }
  .modal-body   { padding: 16px 20px 20px; }

  /* ── Toast ── */
  #toast-container {
    bottom: calc(var(--bottom-nav-h) + 12px);
    right: 12px;
    left: 12px;
  }

  .toast { max-width: 100%; }

  /* ── Bannière install ── */
  .install-banner {
    bottom: calc(var(--bottom-nav-h) + 10px);
    width: calc(100% - 24px);
    border-radius: var(--radius-lg);
  }

  .install-banner-text span { display: none; }
  .install-banner-icon { font-size: 22px; }
}

/* ── Swipe indicator (PWA installée mobile) ─────────────────────────────── */
@media (max-width: 768px) and (display-mode: standalone) {
  .bottom-nav {
    border-top: none;
  }

  .swipe-track {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--clr-border);
  }

  .swipe-track::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    /* --nav-count est posé par UI.updateActiveNav : 4 onglets en mode app
       (« Accueil » masqué), 5 sinon. */
    width: calc(100% / var(--nav-count, 5));
    height: 100%;
    background: var(--clr-primary);
    border-radius: 0 0 3px 3px;
    transform: translateX(calc(var(--nav-idx, 0) * 100%));
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.2s ease;
    box-shadow: 0 2px 8px rgba(200, 85, 61, 0.35);
  }

  .bottom-nav.bn-indicator-hidden .swipe-track::after { opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   INSTALL : Bannière & bouton
══════════════════════════════════════════════════════════════════ */
.install-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 32px));
  z-index: 500;
  width: calc(100% - 40px);
  max-width: 500px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  transition: transform .4s cubic-bezier(.32,.72,0,1), opacity .4s ease;
  opacity: 0;
  pointer-events: none;
}

.install-banner.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.install-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.install-banner-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}

.install-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.install-banner-text strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.install-banner-text span {
  font-size: 12px;
  color: var(--clr-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.install-banner-cta {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 13px;
}

.install-banner-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--clr-text-muted);
  border-radius: var(--radius-md);
  transition: background var(--transition), color var(--transition);
  padding: 0;
}

.install-banner-close:hover {
  background: var(--clr-bg);
  color: var(--clr-text);
}

.install-banner-close:active {
  background: rgba(0,0,0,0.1);
}

/* ══════════════════════════════════════════════════════════════════
   BANDEAU DE REPRISE DU MODE CUISINE RÉDUIT
══════════════════════════════════════════════════════════════════ */
.cook-resume-banner {
  position: fixed;
  bottom: calc(var(--bottom-nav-h, 0px) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 32px));
  z-index: 1000;
  width: calc(100% - 40px);
  max-width: 500px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  transition: transform .4s cubic-bezier(.32,.72,0,1), opacity .4s ease;
  opacity: 0;
  pointer-events: none;
}

.cook-resume-banner.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.cook-resume-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}

.cook-resume-banner-icon {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1;
}

.cook-resume-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cook-resume-banner-text strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cook-resume-banner-text span {
  font-size: 12px;
  color: var(--clr-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cook-resume-banner-cta {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 13px;
}

.cook-resume-banner-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--clr-text-muted);
  border-radius: var(--radius-md);
  transition: background var(--transition), color var(--transition);
  padding: 0;
}

.cook-resume-banner-close:hover {
  background: var(--clr-bg);
  color: var(--clr-text);
}

/* ══════════════════════════════════════════════════════════════════
   MULTI-TIMERS (FAB & DRAWER)
══════════════════════════════════════════════════════════════════ */
.timers-fab {
  position: fixed;
  bottom: calc(var(--bottom-nav-h, 0px) + 16px);
  right: 16px;
  background: var(--clr-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 24px;
  box-shadow: 0 4px 12px rgba(200, 85, 61, 0.4);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 900;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}

.timers-fab.hidden {
  display: none;
}

.timers-fab-time {
  font-weight: 700;
  font-family: monospace;
  font-size: 15px;
}

.timers-fab-badge {
  background: #fff;
  color: var(--clr-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 12px;
}

.timers-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 950;
  opacity: 1;
  transition: opacity 0.2s;
}

.timers-drawer-overlay.hidden {
  display: none;
  opacity: 0;
}

.timers-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--clr-surface);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  z-index: 960;
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.timers-drawer.hidden {
  transform: translateY(100%);
}

.timers-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--clr-border);
}

.timers-drawer-title {
  margin: 0;
  font-size: 16px;
}

.timers-drawer-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--clr-text-muted);
  cursor: pointer;
  padding: 4px;
}

.timers-drawer-list {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--clr-surface-2);
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
}

.timer-item.ringing {
  border-color: var(--clr-primary);
  background: var(--clr-primary-light);
  animation: timerPulse 1s infinite alternate;
}

@keyframes timerPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.02); }
}

.timer-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timer-item-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text);
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timer-item-time {
  font-size: 18px;
  font-weight: 700;
  font-family: monospace;
}

.timer-item-actions {
  display: flex;
  gap: 6px;
}

.timer-btn {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}

.timer-btn:active { background: var(--clr-border); }

.timers-drawer-foot {
  padding: 16px;
  border-top: 1px solid var(--clr-border);
  display: flex;
  justify-content: center;
}

/* Bouton install dans la homepage */
.btn-install {
  background: var(--clr-surface);
  color: var(--clr-primary);
  border: 1.5px solid var(--clr-primary);
}

.btn-install:hover {
  background: var(--clr-primary-light);
}

.install-btn-wrap {
  display: contents; /* transparent dans le flex, ne perturbe pas le layout */
}

/* Guide iOS */
.ios-install-guide {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ios-install-intro {
  font-size: 14px;
  color: var(--clr-text-muted);
  line-height: 1.65;
}

.ios-install-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ios-install-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
}

.ios-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--clr-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE : VISITOR LANDING PAGE
══════════════════════════════════════════════════════════════════ */

/* ── Animations ── */
@keyframes hp-fade-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hp-slide-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes hp-slide-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes hp-bounce-arrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
@keyframes hp-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 85, 61, 0.35); }
  50%      { box-shadow: 0 0 0 10px rgba(200, 85, 61, 0); }
}
@keyframes hp-word-enter {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hp-word-exit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-100%); }
}
@keyframes hp-mockup-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 85, 61, 0.2); }
  50%      { box-shadow: 0 0 0 8px rgba(200, 85, 61, 0); }
}

/* ── Scroll-reveal base ── */
.hp-anim {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.hp-anim[data-anim="slide-left"] { transform: translateX(-40px); }
.hp-anim[data-anim="slide-right"] { transform: translateX(40px); }
.hp-anim.hp-anim-visible {
  opacity: 1;
  transform: none;
}

/* ── Container ── */
.homepage.homepage-visitor {
  max-width: none;
  margin: -36px -40px -60px;
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════════════════════════════
   HERO
═════════════════════════════════════════════════════════════════ */
.homepage-visitor .hp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 72px max(24px, calc(50% - 480px)) 48px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,85,61,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(44,110,73,0.08) 0%, transparent 70%),
    linear-gradient(180deg, var(--clr-surface) 0%, var(--clr-bg) 100%);
  border-bottom: 1px solid var(--clr-border);
  position: relative;
  overflow: hidden;
}

/* Decorative floating shapes */
.homepage-visitor .hp-hero::before,
.homepage-visitor .hp-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.6;
}
.homepage-visitor .hp-hero::before {
  width: 300px; height: 300px;
  top: -100px; right: -80px;
  background: radial-gradient(circle, rgba(200,85,61,0.08) 0%, transparent 70%);
}
.homepage-visitor .hp-hero::after {
  width: 200px; height: 200px;
  bottom: -60px; left: -40px;
  background: radial-gradient(circle, rgba(44,110,73,0.06) 0%, transparent 70%);
}

.homepage-visitor .hp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  border-radius: var(--radius-full);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--clr-text-muted);
  letter-spacing: .04em;
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
}

.homepage-visitor .hp-hero-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 7.5vw, 56px);
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.2;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.homepage-visitor .hp-hero-title-line {
  display: block;
}

/* Rotating words */
.homepage-visitor .hp-hero-rotating {
  display: inline-grid;
  justify-items: center;
  height: 1.4em;
  padding-bottom: 0.1em;
  overflow: hidden;
  color: var(--clr-primary);
  text-align: center;
}

.hp-rotating-word {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
  white-space: nowrap;
}

.hp-rotating-word.hp-rotating-active {
  opacity: 1;
  transform: translateY(0);
}

.homepage-visitor .hp-hero-tagline {
  font-size: clamp(14px, 2vw, 17px);
  color: var(--clr-text-muted);
  max-width: 580px;
  line-height: 1.75;
  margin-bottom: 36px;
}

.homepage-visitor .hp-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.homepage-visitor .hp-hero-actions .btn {
  padding: 14px 28px;
  font-size: 15px;
  border-radius: var(--radius-full);
}

.hp-pulse {
  animation: hp-pulse-glow 2.5s ease infinite;
}

/* Scroll hint */
.hp-hero-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 40px;
  font-size: 12px;
  color: var(--clr-text-muted);
  opacity: 0.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.hp-scroll-arrow {
  font-size: 20px;
  animation: hp-bounce-arrow 2s ease infinite;
}

/* ══════════════════════════════════════════════════════════════
   SECTIONS : shared
═════════════════════════════════════════════════════════════════ */
.homepage-visitor .hp-section {
  padding: 64px max(24px, calc(50% - 540px));
  border-bottom: 1px solid var(--clr-border);
}

.homepage-visitor .hp-section-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 12px;
  text-align: center;
  display: block;
}

.homepage-visitor .hp-section-title-center {
  text-align: center;
}

.homepage-visitor .hp-section-title-center {
  text-align: center;
}

.homepage-visitor .hp-section-intro {
  text-align: center;
  color: var(--clr-text-muted);
  font-size: 15px;
  max-width: 600px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════
   FEATURES GRID (8 cards)
═════════════════════════════════════════════════════════════════ */
.homepage-visitor .hp-features-grid.hp-grid-8 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

.homepage-visitor .hp-feature-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: 28px 22px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.homepage-visitor .hp-feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.3s ease;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

@media (hover: hover) {
  .homepage-visitor .hp-feature-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--clr-border-strong);
  }
  .homepage-visitor .hp-feature-card:hover::before {
    background: var(--clr-primary);
  }
}

.homepage-visitor .hp-feature-card:active {
  transform: scale(0.97);
}

.homepage-visitor .hp-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 20px;
}

.homepage-visitor .hp-feature-icon svg { width: 24px; height: 24px; }

.homepage-visitor .hp-icon-recipes    { background: #FEF3EB; color: #C8553D; }
.homepage-visitor .hp-icon-batch      { background: #E0F5EE; font-size: 22px; }
.homepage-visitor .hp-icon-week       { background: #EBF5EF; color: #2C6E49; }
.homepage-visitor .hp-icon-shopping   { background: #EFF6FF; color: #3B82F6; }
.homepage-visitor .hp-icon-cook       { background: #FEF3C7; font-size: 22px; }
.homepage-visitor .hp-icon-pizza      { background: #FFF7ED; font-size: 22px; }
.homepage-visitor .hp-icon-bread      { background: #FEF3EB; font-size: 22px; }
.homepage-visitor .hp-icon-nutrition  { background: #EDE9FE; font-size: 22px; }
.homepage-visitor .hp-icon-favorites  { background: #FEE2E2; color: #EF4444; }

.homepage-visitor .hp-feature-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--clr-text);
}

.homepage-visitor .hp-feature-card p {
  font-size: 13px;
  color: var(--clr-text-muted);
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════════════
   BATCH COOKING SPOTLIGHT
═════════════════════════════════════════════════════════════════ */
.hp-batch-spotlight {
  padding: 64px max(48px, calc(50% - 540px));
  background: linear-gradient(135deg, #0D9488 0%, #065F53 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.hp-batch-spotlight::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hp-batch-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hp-batch-label {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 16px;
}

.hp-batch-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 14px;
}

.hp-batch-desc {
  font-size: 16px;
  opacity: 0.9;
  line-height: 1.6;
  margin-bottom: 28px;
}

.hp-batch-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hp-batch-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 14px;
  line-height: 1.5;
}

.hp-batch-list-icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.hp-batch-list li strong {
  display: block;
  font-size: 15px;
  margin-bottom: 2px;
}

.hp-batch-cta {
  background: #fff !important;
  color: #065F53 !important;
  font-weight: 700;
  border-radius: var(--radius-full);
}

.hp-batch-cta:hover {
  background: #f0faf8 !important;
  transform: translateY(-2px);
}

/* Batch mockup (fake UI) */
.hp-batch-visual {
  display: flex;
  justify-content: center;
}

.hp-batch-mockup {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  overflow: hidden;
  max-width: 380px;
  width: 100%;
  color: var(--clr-text);
  transform: perspective(800px) rotateY(-3deg) rotateX(2deg);
  transition: transform 0.4s ease;
}

.hp-batch-mockup:hover {
  transform: perspective(800px) rotateY(0) rotateX(0);
}

.hp-mockup-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: #F5F0E8;
  border-bottom: 1px solid var(--clr-border);
}

.hp-mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.hp-mockup-title {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-text-muted);
}

.hp-mockup-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hp-mockup-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--clr-surface-2);
  transition: background 0.2s;
}

.hp-mockup-task.hp-mockup-done {
  opacity: 0.55;
  text-decoration: line-through;
}

.hp-mockup-task.hp-mockup-active {
  background: var(--clr-primary-light);
  border: 2px solid var(--clr-primary);
  font-weight: 600;
  animation: hp-mockup-pulse 2s ease infinite;
}

.hp-mockup-check {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  font-weight: 700;
  color: var(--clr-primary);
}

.hp-mockup-done .hp-mockup-check { color: var(--clr-secondary); }

.hp-mockup-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--clr-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.hp-mockup-footer {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  background: #F5F0E8;
  border-top: 1px solid var(--clr-border);
  font-size: 11px;
  font-weight: 600;
  color: var(--clr-text-muted);
}

/* ══════════════════════════════════════════════════════════════
   TOOLS SPOTLIGHT
═════════════════════════════════════════════════════════════════ */
.homepage-visitor .hp-tools-intro {
  text-align: center;
  color: var(--clr-text-muted);
  font-size: 15px;
  max-width: 580px;
  margin: -8px auto 32px;
  line-height: 1.65;
}

.homepage-visitor .hp-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.homepage-visitor .hp-tool-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: 28px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
}

/* Accent bar at top */
.hp-tool-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

@media (hover: hover) {
  .homepage-visitor .hp-tool-card:hover {
    border-color: var(--clr-primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
  }
}

.homepage-visitor .hp-tool-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.homepage-visitor .hp-tool-emoji { font-size: 38px; line-height: 1; flex-shrink: 0; }

.homepage-visitor .hp-tool-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 3px;
}

.homepage-visitor .hp-tool-sub {
  font-size: 12px;
  color: var(--clr-text-muted);
  font-weight: 500;
}

.homepage-visitor .hp-tool-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.homepage-visitor .hp-tool-list li {
  font-size: 13px;
  color: var(--clr-text-muted);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.homepage-visitor .hp-tool-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--clr-primary);
  font-weight: 700;
  font-size: 12px;
}

.homepage-visitor .hp-tool-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  border-radius: var(--radius-full);
}

/* ══════════════════════════════════════════════════════════════
   HOW IT WORKS : STEPS
═════════════════════════════════════════════════════════════════ */
.homepage-visitor .hp-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 28px auto 0;
}

.homepage-visitor .hp-step {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: 28px 22px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow 0.3s, transform 0.3s;
}

@media (hover: hover) {
  .homepage-visitor .hp-step:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
  }
}

.homepage-visitor .hp-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--clr-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.homepage-visitor .hp-step-body h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 6px;
}

.homepage-visitor .hp-step-body p {
  font-size: 13px;
  color: var(--clr-text-muted);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   STATS
═════════════════════════════════════════════════════════════════ */
.homepage-visitor .hp-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: linear-gradient(135deg, var(--clr-primary) 0%, #A84330 100%);
  color: #fff;
}

.homepage-visitor .hp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 16px;
  gap: 6px;
  border-right: 1px solid rgba(255,255,255,.12);
  transition: background 0.3s;
}

.homepage-visitor .hp-stat:last-child { border-right: none; }

@media (hover: hover) {
  .homepage-visitor .hp-stat:hover {
    background: rgba(255,255,255,0.08);
  }
}

.homepage-visitor .hp-stat-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

.homepage-visitor .hp-stat-label {
  font-size: 12px;
  opacity: .75;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════════
   TRUST BADGES
═════════════════════════════════════════════════════════════════ */
.hp-trust {
  padding: 56px max(48px, calc(50% - 540px));
  border-bottom: 1px solid var(--clr-border);
}

.hp-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.hp-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  transition: box-shadow 0.3s, transform 0.3s;
}

@media (hover: hover) {
  .hp-trust-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

.hp-trust-icon {
  font-size: 28px;
  flex-shrink: 0;
  margin-top: 2px;
}

.hp-trust-item strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 4px;
}

.hp-trust-item p {
  font-size: 13px;
  color: var(--clr-text-muted);
  line-height: 1.55;
}

/* ══════════════════════════════════════════════════════════════
   CTA FINAL
═════════════════════════════════════════════════════════════════ */
.homepage-visitor .hp-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 72px max(48px, calc(50% - 480px));
  background: linear-gradient(180deg, var(--clr-surface-2) 0%, var(--clr-bg) 100%);
}

.hp-cta-emoji {
  font-size: 48px;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 12px rgba(200,85,61,.25));
}

/* Le CTA affiche désormais le logo, pas un emoji. */
img.hp-cta-emoji {
  width: 56px;
  height: 56px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 640px) {
  img.hp-cta-emoji { width: 44px; height: 44px; }
}

.homepage-visitor .hp-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--clr-text);
}

.homepage-visitor .hp-cta p {
  font-size: 15px;
  color: var(--clr-text-muted);
  max-width: 480px;
  line-height: 1.65;
  margin-bottom: 32px;
}

.homepage-visitor .hp-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.homepage-visitor .hp-cta-actions .btn {
  padding: 14px 28px;
  font-size: 15px;
  border-radius: var(--radius-full);
}

/* btn-lg shared */
.btn-lg {
  padding: 14px 28px !important;
  font-size: 15px !important;
}

/* Sidebar logo as link */
.sidebar-logo {
  text-decoration: none;
  transition: opacity var(--transition);
}
.sidebar-logo:hover { opacity: .75; }

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE : TABLET (≤ 1024px)
═════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .homepage-visitor .hp-features-grid.hp-grid-8 {
    grid-template-columns: repeat(2, 1fr);
  }
  .hp-batch-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .homepage-visitor .hp-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .homepage-visitor .hp-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .hp-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE : MOBILE (≤ 768px)
═════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .homepage.homepage-visitor {
    margin: calc((var(--mobile-header-h) + 20px) * -1) -16px calc((var(--bottom-nav-h) + 24px) * -1);
  }

  /* Hero */
  .homepage-visitor .hp-hero { padding: calc(var(--mobile-header-h) + 40px) 20px 36px; }
  .homepage-visitor .hp-hero-badge { font-size: 10px; padding: 4px 12px; margin-bottom: 24px; }
  .homepage-visitor .hp-hero-title { font-size: 28px; }
  .homepage-visitor .hp-hero-rotating { min-width: 200px; }
  .homepage-visitor .hp-hero-tagline { font-size: 14px; margin-bottom: 28px; }
  .homepage-visitor .hp-hero-actions { gap: 8px; }
  .homepage-visitor .hp-hero-actions .btn { padding: 11px 20px; font-size: 14px; }
  .homepage-visitor .hp-hero-scroll-hint { margin-top: 28px; }

  /* Sections */
  .homepage-visitor .hp-section { padding: 36px 20px; }
  .homepage-visitor .hp-section-title { font-size: 22px; }
  .homepage-visitor .hp-section-intro { font-size: 14px; margin-bottom: 28px; }

  /* Feature cards: compact list layout */
  .homepage-visitor .hp-features-grid.hp-grid-8 {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .homepage-visitor .hp-feature-card {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 3px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
  }

  .homepage-visitor .hp-feature-card::before { display: none; }

  .homepage-visitor .hp-feature-card::after {
    content: "→";
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    color: var(--clr-primary);
    font-weight: bold;
    font-size: 18px;
    opacity: 0.5;
  }

  .homepage-visitor .hp-feature-card:active::after {
    transform: translateX(4px);
    opacity: 1;
  }

  .homepage-visitor .hp-feature-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    margin-bottom: 0;
    width: 42px;
    height: 42px;
  }

  .homepage-visitor .hp-feature-card h3 {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px;
    margin-bottom: 0;
    align-self: end;
  }

  .homepage-visitor .hp-feature-card p {
    grid-column: 2;
    grid-row: 2;
    font-size: 12px;
    padding-right: 8px;
  }

  /* Batch spotlight */
  .hp-batch-spotlight { padding: 36px 20px; }
  .hp-batch-inner { grid-template-columns: 1fr; gap: 28px; }
  .hp-batch-title { font-size: 24px; }
  .hp-batch-mockup { transform: none; max-width: 100%; }
  .hp-batch-mockup:hover { transform: none; }

  /* Tools */
  .homepage-visitor .hp-tool-grid { grid-template-columns: 1fr; gap: 14px; }
  .homepage-visitor .hp-tool-card { padding: 20px; }
  .homepage-visitor .hp-tool-card:hover { transform: none; }
  .homepage-visitor .hp-tool-emoji { font-size: 30px; }
  .homepage-visitor .hp-tool-title { font-size: 16px; }
  .homepage-visitor .hp-tool-cta { font-size: 14px; padding: 10px 18px; }

  /* Steps */
  .homepage-visitor .hp-steps { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .homepage-visitor .hp-step {
    flex-direction: row;
    align-items: flex-start;
    padding: 18px;
    gap: 14px;
  }
  .homepage-visitor .hp-step-num { width: 32px; height: 32px; font-size: 13px; }
  .homepage-visitor .hp-step-body h3 { font-size: 15px; margin-bottom: 4px; }
  .homepage-visitor .hp-step-body p  { font-size: 13px; }

  /* Stats */
  .homepage-visitor .hp-stats { grid-template-columns: repeat(3, 1fr); }
  .homepage-visitor .hp-stat { padding: 24px 12px; }
  .homepage-visitor .hp-stat-num { font-size: 28px; }

  /* Trust */
  .hp-trust { padding: 36px 20px; }
  .hp-trust-grid { grid-template-columns: 1fr; gap: 12px; }
  .hp-trust-item { padding: 16px; }

  /* CTA */
  .homepage-visitor .hp-cta { padding: 40px 20px; }
  .homepage-visitor .hp-cta h2 { font-size: 24px; }
  .homepage-visitor .hp-cta p  { font-size: 14px; margin-bottom: 24px; }

  .homepage-visitor .hp-cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .homepage-visitor .hp-cta-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
    font-size: 15px;
  }
}

/* ══════════════════════════════════════════════════════════════
   SMALL MOBILE (≤ 430px) : Homepage overrides
═════════════════════════════════════════════════════════════════ */
@media (max-width: 430px) {
  .homepage.homepage-visitor { margin: calc((var(--mobile-header-h) + 20px) * -1) -12px calc((var(--bottom-nav-h) + 24px) * -1); }
  .homepage-visitor .hp-hero { padding: calc(var(--mobile-header-h) + 28px) 16px 28px; }
  .homepage-visitor .hp-hero-title { font-size: 24px; }
  .homepage-visitor .hp-hero-rotating { min-width: 160px; }
  .homepage-visitor .hp-hero-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .homepage-visitor .hp-hero-actions .btn { justify-content: center; }
  .homepage-visitor .hp-stats { grid-template-columns: repeat(2, 1fr); }
  .homepage-visitor .hp-stat:nth-child(2n) { border-right: none; }
  .hp-cta-emoji { font-size: 36px; }
}

/* ══════════════════════════════════════════════════════════════════
   SMALL MOBILE (≤ 430px)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 430px) {
  .main-content { padding-left: 12px; padding-right: 12px; }

  .view-title  { font-size: 21px; }
  .detail-title { font-size: 19px; }

  /* Grille 2 colonnes fixes */
  .recipe-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card-thumb  { height: 88px; }
  .card-emoji  { font-size: 34px; }
  .card-body   { padding: 10px; gap: 3px; }
  .card-title  { font-size: 13px; }

  /* Form row 1 colonne sur les tout petits écrans */
  .form-row { grid-template-columns: 1fr; }

  /* Boutons de header en icon-only */
  .header-actions .btn-text-label { display: none; }

  /* Semaine : onglets et repas plus compacts */
  .week-day-tab { min-width: 46px; padding: 7px 8px 6px; }
  .week-day-tab-abbr { font-size: 10px; }
  .week-active-day-title { font-size: 17px; }
  .week-active-day-panel .week-meal-label-v { width: 66px; font-size: 9px; }
  .week-active-day-panel .week-meal-row { padding: 9px 10px; gap: 8px; }

  /* Modal pleine hauteur */
  .modal { max-height: 96vh; max-height: 96dvh; }

  /* Meta chips sur 2 lignes */
  .detail-meta { gap: 6px; }
  .meta-chip   { font-size: 11px; padding: 4px 8px; }

  /* Aperçu photo encore plus compact */
  .form-photo-preview { max-height: 180px; }

  /* Boutons CTA en colonne sur les très petits écrans */
  .homepage-visitor .hp-cta-actions { flex-direction: column; align-items: stretch; }
  .homepage-visitor .hp-cta-actions .btn { width: 100%; justify-content: center; }

  /* Correction du margin homepage (padding-left/right réduit à 12px sur ce breakpoint) */
  .homepage.homepage-visitor { margin: calc((var(--mobile-header-h) + 20px) * -1) -12px calc((var(--bottom-nav-h) + 24px) * -1); }
  .homepage-visitor .hp-hero-title { font-size: 24px; }

  /* Hero plus compact */
  .homepage-visitor .hp-hero { padding: calc(var(--mobile-header-h) + 32px) 20px 28px; }
  .homepage-visitor .hp-hero-logo { font-size: 40px; margin-bottom: 10px; }
  .homepage-visitor .hp-hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .homepage-visitor .hp-hero-actions .btn { justify-content: center; }

  /* Sections plus compactes */
  .homepage-visitor .hp-section { padding: 28px 20px; }
  .homepage-visitor .hp-section-title { font-size: 20px; margin-bottom: 20px; }
  .homepage-visitor .hp-cta { padding: 32px 20px; }
}

/* ══════════════════════════════════════════════════════════════════
   IMPRESSION / EXPORT PDF
══════════════════════════════════════════════════════════════════ */
@media print {
  /* ── Mise en page A4 ─────────────────────────────────────────── */
  @page {
    size: A4 portrait;
    margin: 14mm 18mm 16mm;
  }

  /* Préserver les couleurs (numéros d'étapes, badges, etc.) */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── Reset layout ────────────────────────────────────────────── */
  html, #app { display: block; }

  html, body, .main-content {
    background: #fff;
    color: #111;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 10pt;
    line-height: 1.45;
  }

  /* Éviter les coupures au milieu d'un élément */
  .step-item,
  .ingredient-item,
  .detail-hero { break-inside: avoid; }

  .main-content {
    overflow: visible;
    height: auto;
    padding: 0;
    max-width: none;
  }

  /* ── Masquer l'interface ─────────────────────────────────────── */
  .sidebar,
  .mobile-header,
  .bottom-nav,
  #toast-container,
  #modal-overlay,
  .install-btn-wrap,
  .install-banner,
  .detail-header,
  .fav-btn,
  .fav-btn-detail,
  .serving-btn,
  .nutrition-panel,
  .timers-fab,
  .timers-drawer,
  .timers-drawer-overlay,
  .batch-detail-section { display: none !important; }

  /* Ne pas imprimer les URL des liens */
  a { color: inherit; text-decoration: none; }
  a[href]::after { content: none !important; }

  /* ── Hero : photo à gauche, infos à droite ───────────────────── */
  .detail-hero {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 22px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    align-items: start;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1.5pt solid #222;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .detail-photo-wrap { width: 150px; height: 150px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
  .detail-photo      { width: 150px; height: 150px; object-fit: cover; border-radius: 6px; display: block; }
  .detail-emoji      { width: 150px; height: 150px; font-size: 68px; border-radius: 6px;
                       display: flex; align-items: center; justify-content: center;
                       background: #f3f3f3 !important; }

  /* ── Badges & tags ───────────────────────────────────────────── */
  .detail-badges { margin-bottom: 6px; }
  .badge {
    border: 1px solid #777;
    background: none !important;
    color: #333 !important;
    font-size: 8.5pt;
    padding: 2px 7px;
  }
  .tag-chip {
    border: 1px solid #aaa !important;
    background: none !important;
    color: #444 !important;
    font-size: 8.5pt;
    padding: 2px 7px;
    box-shadow: none !important;
    transform: none !important;
  }

  /* ── Titre & description ─────────────────────────────────────── */
  .detail-info { display: flex; flex-direction: column; justify-content: center; }
  .detail-title {
    font-size: 21pt;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    margin: 4px 0 6px;
    line-height: 1.15;
  }
  .detail-desc { font-size: 10.5pt; color: #444; margin-bottom: 10px; }

  /* ── Méta (temps, portions) ──────────────────────────────────── */
  .detail-meta { flex-wrap: wrap; gap: 8px; }
  .meta-chip {
    border: 1px solid #ccc;
    font-size: 9.5pt;
    background: none;
    box-shadow: none;
    padding: 3px 10px;
    color: #444;
  }
  .meta-chip span  { font-weight: 700; color: #111; }
  .meta-chip small { color: #555; font-size: 8.5pt; }
  .servings-chip #servings-value { margin: 0 3px; }

  /* ── Colonnes ingrédients + étapes ──────────────────────────── */
  .detail-columns {
    display: grid;
    grid-template-columns: 1fr 1.9fr;
    gap: 22px;
    margin-top: 14px;
  }

  .ingredients-section,
  .steps-section {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .section-title {
    font-size: 12.5pt;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    border-bottom: 1pt solid #888;
    padding-bottom: 4px;
    margin-bottom: 10px;
    break-after: avoid;
    page-break-after: avoid;
  }

  /* ── Ingrédients ─────────────────────────────────────────────── */
  .ingredient-list { gap: 0; display: flex; flex-direction: column; }
  .ingredient-item {
    font-size: 10pt;
    padding: 4px 4px;
    background: none;
    border-radius: 0;
    border-bottom: 1px dotted #ccc;
    break-inside: avoid;
  }
  .ing-qty  { font-weight: 700; color: #111; min-width: 36px; }
  .ing-unit { color: #555; font-size: 9.5pt; min-width: 44px; }
  .ing-name { color: #111; }

  /* ── Étapes ──────────────────────────────────────────────────── */
  .step-item {
    font-size: 10.5pt;
    margin-bottom: 9px;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .step-item p { margin: 0; orphans: 3; widows: 3; }
  .step-num {
    background: #222;
    color: #fff;
    min-width: 22px;
    height: 22px;
    font-size: 8.5pt;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
  }
}

/* ── Share feature ─────────────────────────────────────────────────────────── */
.share-modal-desc {
  color: var(--clr-text-muted);
  font-size: 14px;
  margin: 0 0 16px;
  line-height: 1.5;
}

.share-url-wrap {
  margin-bottom: 8px;
}

.share-shorten-note {
  font-size: 12px;
  color: var(--clr-text-muted);
  margin-bottom: 20px;
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--clr-primary);
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.btn-link:disabled {
  opacity: 0.5;
  cursor: default;
}

.share-url-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-bg);
  color: var(--clr-text);
  font-size: 12px;
  font-family: monospace;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-url-input:focus {
  outline: none;
  border-color: var(--clr-primary);
}

.share-names {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.share-names li {
  padding: 8px 12px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-text);
}

.share-names-more {
  color: var(--clr-text-muted) !important;
  font-weight: 400 !important;
  font-style: italic;
}

@media (max-width: 400px) {
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; justify-content: center; }
}

/* ── Import preview modal ─────────────────────────────────────── */
.import-preview-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.import-preview-list { list-style: none; padding: 0; margin: 0 0 16px; max-height: 50vh; overflow-y: auto; }
.import-preview-row { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--clr-border); }
.import-preview-row label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.import-preview-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-preview-cat { color: var(--clr-text-muted); font-size: 12px; }
.import-dup { background: var(--clr-warn-bg, #FFF3CD); }
.import-dup-badge { font-size: 11px; color: #856404; background: #FFEEBA; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }

/* ── Notebook settings ───────────────────────────────────────── */
.notebook-list { list-style: none; padding: 0; margin: 0 0 12px; }
.notebook-item { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--clr-border); }
/* Sans flex:1, le nom se comprime en colonne d'une lettre dans une carte étroite. */
.notebook-item .notebook-name { flex: 1 1 100px; min-width: 0; }
.notebook-emoji { font-size: 20px; }
.notebook-name { flex: 1; font-weight: 500; }
.notebook-empty { color: var(--clr-text-muted); font-style: italic; padding: 8px 0; }
.btn-danger-text { color: var(--clr-error) !important; }
.notebook-picker { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Notebook modal (quick-add from detail) ─────────────────── */
.notebook-modal-list { display: flex; flex-direction: column; gap: 8px; }
.notebook-modal-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-md, 8px);
  border: 1px solid var(--clr-border); cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.notebook-modal-item:hover { background: var(--clr-bg); }
.notebook-modal-item:has(input:checked) {
  border-color: #6366F1;
  background: color-mix(in srgb, #6366F1 8%, var(--clr-surface));
}
.notebook-modal-check { accent-color: #6366F1; width: 18px; height: 18px; }
.notebook-modal-emoji { font-size: 20px; }
.notebook-modal-name { font-weight: 500; flex: 1; }

/* ── Notebook badge in detail view ──────────────────────────── */
.detail-notebook-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--radius-full, 20px);
  border: 1px solid color-mix(in srgb, #6366F1 25%, transparent);
  background: color-mix(in srgb, #6366F1 10%, var(--clr-surface));
  color: #6366F1;
  font-size: 12px; font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════
   TAG SYSTEM
══════════════════════════════════════════════════════════════════ */

/* ── Tag filter bar ───────────────────────────────────────────────*/
/* Seul le picker de recettes du planning s'en sert désormais : la liste des
   recettes est passée à `.rbrowse-*` / `.chip`. */
.tag-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding: 8px 4px;
}

.notebook-add-chip {
  border-style: dashed !important;
  opacity: .7;
}
.notebook-add-chip:hover { opacity: 1; }

.batch-filter-chip svg,
.favorite-filter-chip svg {
  width: 14px;
  height: 14px;
}

/* ── Tag chip (shared: filter bar + form picker) ─────────────────*/
.tag-chip {
  --active-shadow: color-mix(in srgb, var(--tag-color) 35%, transparent);
  --hover-shadow: color-mix(in srgb, var(--tag-color) 15%, transparent);
  
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--tag-color) 20%, transparent);
  background: color-mix(in srgb, var(--tag-color) 8%, var(--clr-surface));
  color: var(--tag-color);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.02);
  white-space: nowrap;
  line-height: 1.4;
  transition: 
    background 200ms ease, 
    border-color 200ms ease, 
    color 200ms ease, 
    transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), 
    box-shadow 200ms ease;
}

.tag-chip:hover {
  background: color-mix(in srgb, var(--tag-color) 14%, var(--clr-surface));
  border-color: color-mix(in srgb, var(--tag-color) 45%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px var(--hover-shadow);
}

.tag-chip:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,.02);
}

.tag-chip.active {
  background: var(--tag-color);
  color: #fff;
  border-color: var(--tag-color);
  transform: scale(1.02) translateY(-1px);
  box-shadow: 0 4px 12px var(--active-shadow);
}

.tag-chip.active:hover {
  transform: scale(1.02) translateY(-3px);
  box-shadow: 0 6px 16px var(--active-shadow);
}

.tag-chip-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1px dashed var(--clr-border-strong);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text-muted);
  cursor: pointer;
  transition: 
    background 200ms ease, 
    color 200ms ease, 
    border-color 200ms ease,
    transform 200ms ease;
  white-space: nowrap;
}

.tag-chip-clear:hover {
  background: var(--clr-danger-bg);
  color: var(--clr-error);
  border-color: var(--clr-error);
  border-style: solid;
  transform: translateY(-1px);
}

.tag-chip-clear:active {
  transform: translateY(0);
}

/* ── Recipe card tags ─────────────────────────────────────────────*/
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.recipe-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--tag-color) 20%, transparent);
  background: color-mix(in srgb, var(--tag-color) 8%, var(--clr-surface-2));
  color: color-mix(in srgb, var(--tag-color) 90%, var(--clr-text));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

.recipe-tag-batch svg {
  width: 12px;
  height: 12px;
}

.recipe-tag-more {
  background: var(--clr-bg);
  color: var(--clr-text-muted);
  border: 1px solid var(--clr-border);
}

/* ── Ingredient match badge (search results) ──────────────────────*/
.card-ing-match {
  font-size: 0.72rem;
  color: var(--clr-text-muted);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════
   NAVIGATION DANS LES RECETTES
   Barre collante + puces de filtres + feuille de filtres.
   Namespace dédié (.chip, .rbrowse-*, .fsheet-*) : `.tag-chip`,
   `.search-wrap` et `.select-filter` restent tels quels, ils servent
   aussi au formulaire de recette, au picker du planning et au batch.
══════════════════════════════════════════════════════════════════ */

/* ── Puces ────────────────────────────────────────────────────────*/
/* Une seule primitive pour tous les filtres. `--c` porte la couleur du
   filtre (tag, catégorie, carnet…) et tout en dérive : bordure, fond,
   texte, halo à l'état actif. */
.chip {
  --c: var(--clr-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid color-mix(in srgb, var(--c) 22%, transparent);
  background: color-mix(in srgb, var(--c) 7%, var(--clr-surface));
  color: color-mix(in srgb, var(--c) 88%, var(--clr-text));
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s, border-color .16s, color .16s, box-shadow .16s, transform .1s;
}

.chip svg { width: 15px; height: 15px; flex-shrink: 0; }

.chip[aria-checked="true"],
.chip--active {
  background: var(--c);
  border-color: var(--c);
  color: #fff;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--c) 32%, transparent);
}

/* Le survol n'existe que pour les pointeurs fins : sur tactile il resterait
   « collé » après le tap. */
@media (hover: hover) {
  .chip:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
  .chip[aria-checked="true"]:hover,
  .chip--active:hover { background: color-mix(in srgb, var(--c) 88%, #000); }
}

.chip:active { transform: scale(.97); }

.chip:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.chip--removable::after {
  content: '✕';
  font-size: 11px;
  opacity: .75;
  margin-left: 1px;
}

.chip--clear {
  --c: var(--clr-text-muted);
  background: transparent;
  border-style: dashed;
  font-weight: 500;
}

.rbrowse > .onb-hint,
.rbrowse > .onb-tip { margin-bottom: 12px; }

/* ── Barre collante ───────────────────────────────────────────────*/
.rbrowse-bar {
  position: sticky;
  top: 0;
  /* Entre la bottom-nav (100) et le header mobile (400). Indispensable pour
     que #search-dropdown, enfant de cette barre, passe au-dessus de la
     bottom-nav : son z-index:200 s'applique DANS ce contexte d'empilement. */
  z-index: 300;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0 12px;
  background: var(--clr-bg);
}

.rsearch {
  position: relative;
  flex: 1;
  min-width: 0;
}

.rsearch > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-text-muted);
  pointer-events: none;
}

.rsearch-input {
  width: 100%;
  height: 48px;
  padding: 0 42px 0 42px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-full);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-family: var(--font-sans);
  font-size: 15px;
  transition: border-color .16s, box-shadow .16s;
}

.rsearch-input::placeholder { color: var(--clr-text-muted); }

.rsearch-input:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--clr-primary) 12%, transparent);
}

.rsearch-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--clr-text-muted);
  cursor: pointer;
}
.rsearch-clear svg { width: 16px; height: 16px; }
.rsearch-clear:hover { background: var(--clr-bg); color: var(--clr-text); }
.rsearch-clear.hidden { display: none; }

.rbrowse-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-full);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .16s, background .16s, color .16s;
}
.rbrowse-filters-btn svg { width: 17px; height: 17px; }
.rbrowse-filters-btn:hover { border-color: var(--clr-primary); }

.rbrowse-filters-btn.has-filters {
  border-color: var(--clr-primary);
  background: color-mix(in srgb, var(--clr-primary) 8%, var(--clr-surface));
  color: var(--clr-primary);
}

.rbrowse-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--clr-primary);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}
.rbrowse-badge.hidden { display: none; }

/* ── Rangée des filtres actifs ────────────────────────────────────*/
.rbrowse-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rbrowse-chips:not(:empty) { margin-bottom: 18px; }

.rbrowse-count {
  margin: 0 0 14px;
  color: var(--clr-text-muted);
  font-size: 13.5px;
  font-weight: 500;
}

.rbrowse-sentinel { height: 1px; }

/* Surlignage des termes trouvés */
mark.hl {
  background: color-mix(in srgb, var(--clr-primary) 22%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

/* Vignette : sans `src` tant qu'ImageLoader n'a pas croisé la carte, d'où
   le fondu à l'arrivée plutôt qu'un rectangle vide qui clignote. */
.card-img:not(.loaded):not(.placeholder) { opacity: 0; }
.card-img { transition: opacity .25s ease; }
.card-img.loaded, .card-img.placeholder { opacity: 1; }

/* ── Historique de recherche (dropdown) ───────────────────────────*/
.sdrop-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sdrop-clear {
  border: none;
  background: none;
  color: var(--clr-primary);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}

.sdrop-row { display: flex; align-items: center; }
.sdrop-row .sdrop-item { flex: 1; min-width: 0; }

.sdrop-forget {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 6px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--clr-text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.sdrop-forget svg { width: 13px; height: 13px; }
.sdrop-forget:hover { background: var(--clr-bg); color: var(--clr-text); }

/* ── Feuille de filtres ───────────────────────────────────────────*/
.modal--sheet-full .modal-body { padding: 0; }

.fsheet-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--clr-border);
}
.fsheet-section:last-of-type { border-bottom: none; }

.fsheet-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.fsheet-section-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}

.fsheet-add {
  border: none;
  background: none;
  color: var(--clr-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.fsheet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fsheet-hint {
  margin: 0;
  color: var(--clr-text-muted);
  font-size: 13px;
}

/* Pied collant : .modal-body est déjà le scrollport (overflow-y:auto). */
.fsheet-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
}
.fsheet-foot .fsheet-apply { flex: 1; justify-content: center; }

@media (min-width: 769px) {
  .modal--sheet-full { max-width: 640px; }

  /* Sur desktop le scrollport est `.main-content`, qui porte --rbrowse-band de
     padding-top : une barre collée à `top: 0` laisserait les cartes défiler
     dans cette bande, au-dessus d'elle. On rallonge donc la barre de
     --rbrowse-band vers le haut (padding) en annulant l'effet sur la mise en
     page (marge négative). Une fois collée, l'excédent sort du scrollport et
     plus rien ne passe.
     Cette marge négative remonte jusqu'au parent .rbrowse par fusion des
     marges (il n'a ni padding ni bordure) : à l'état NON collé, elle mange
     --rbrowse-band de hauteur sur ce qui précède. La règle sur .view-header
     juste en dessous compense exactement ce recouvrement. */
  .rbrowse-bar {
    top: calc(var(--rbrowse-band) * -1);
    margin-top: calc(var(--rbrowse-band) * -1);
    padding-top: calc(var(--rbrowse-band) + 10px);   /* bande + les 10 d'origine */
  }

  /* Compense la fusion de marge ci-dessus : sans elle, le fond opaque de
     .rbrowse-bar peint sur le bas du .view-header à l'état non collé. */
  .view-header:has(~ .rbrowse) {
    margin-bottom: var(--rbrowse-band);
  }
}

/* ── Navigation recettes : mobile ─────────────────────────────────*/
@media (max-width: 768px) {
  /* `position: sticky` ne s'active pas si un ancêtre est un scrollport qui ne
     défile pas lui-même. `.main-content` porte `overflow-y: auto` depuis le
     desktop, alors que sur mobile c'est la fenêtre qui défile (#app repasse en
     display:block). Sans ce retour à `visible`, la barre ne colle jamais. */
  .main-content { overflow-y: visible; }

  /* Fond opaque et non flouté : la barre se colle juste sous .mobile-header,
     qui porte déjà un backdrop-filter. Deux couches de flou superposées se
     rendent de façon incohérente sur iOS. */
  .rbrowse-bar {
    top: var(--mobile-header-h);
    margin: 0 -16px;
    padding: 10px 16px;
    background: var(--clr-bg);
    border-bottom: 1px solid var(--clr-border);
  }

  .rsearch-input,
  .rbrowse-filters-btn { height: 46px; }

  /* 16px minimum : en dessous, iOS zoome le viewport à la mise au point. */
  .rsearch-input { font-size: 16px; }

  /* Le libellé disparaît, l'icône et le badge suffisent à identifier le bouton. */
  .rbrowse-filters-label { display: none; }
  .rbrowse-filters-btn { padding: 0 14px; gap: 6px; }

  /* Les filtres actifs défilent horizontalement plutôt que d'empiler des
     rangées qui repousseraient les cartes hors de l'écran. */
  .rbrowse-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    margin: 0 -16px;
    padding: 10px 16px 2px;
  }
  .rbrowse-chips::-webkit-scrollbar { display: none; }
  .rbrowse-chips > .chip { scroll-snap-align: start; }
  .rbrowse-chips:not(:empty) { margin-bottom: 10px; }

  .chip { min-height: 40px; font-size: 13px; padding: 0 13px; }

  .modal--sheet-full { height: 92dvh; }
  .fsheet-section { padding: 14px 18px; }
  .fsheet-foot { padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); }

  /* Carte en ligne : la vignette carrée à gauche libère assez de largeur pour
     rendre la description : masquée jusqu'ici faute de place dans la grille à
     deux colonnes. */
  .recipe-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .recipe-card {
    display: grid;
    grid-template-columns: 104px 1fr;
    align-items: stretch;
  }

  .card-thumb {
    height: 100%;
    min-height: 104px;
    border-radius: 0;
  }

  .card-body {
    padding: 10px 13px;
    min-width: 0;
    gap: 3px;
    justify-content: center;
  }

  /* La catégorie est déjà lisible dans la vignette (emoji + fond teinté) :
     la répéter en texte coûtait une ligne entière sur une carte de 130px. */
  .card-category { display: none; }

  .card-title {
    font-size: 15px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Une seule ligne : elle situe la recette d'un coup d'œil sans faire tomber
     la densité de la liste sous ~5 cartes par écran. */
  .card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.4;
  }

  /* Les tags défilent horizontalement plutôt que de passer à la ligne : une
     deuxième rangée de puces ferait grandir toutes les cartes. */
  .card-tags {
    margin: 2px 0 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .card-tags::-webkit-scrollbar { display: none; }
  .card-tags .recipe-tag { flex-shrink: 0; }

  .card-meta { margin-top: 4px; padding-top: 4px; }

  .card-emoji { font-size: 38px; }
  .fav-btn { top: 6px; right: 6px; width: 30px; height: 30px; }
}

@media (max-width: 430px) {
  .rbrowse-bar   { margin: 0 -12px; padding: 10px 12px; }
  .rbrowse-chips { margin: 0 -12px; padding: 10px 12px 2px; }
  .recipe-card   { grid-template-columns: 92px 1fr; }
  .card-thumb    { min-height: 92px; }
  .card-body     { padding: 10px 12px; }
}

/* ── Detail view tags ─────────────────────────────────────────────*/
.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

.detail-badges .badge {
  margin-bottom: 0;
}

.detail-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--tag-color) 25%, transparent) !important;
  background: color-mix(in srgb, var(--tag-color) 10%, var(--clr-surface)) !important;
  color: color-mix(in srgb, var(--tag-color) 95%, var(--clr-text)) !important;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .01em;
}

/* ── Form tag picker ──────────────────────────────────────────────*/
.tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px;
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.03);
}

/* ── Boîte à Outils : base commune ────────────────────────────────*/

/* Les cartes d'outils s'étendent sur toute la largeur de la grille */
.settings-grid:has(.converter-box),
.settings-grid:has(.timer-container),
.settings-grid:has(.equivalences-container),
.settings-grid:has(.pizza-calc-form) {
  grid-template-columns: 1fr;
  max-width: 720px;
}

.settings-tab { flex-shrink: 0; white-space: nowrap; }

/* Sur mobile, les 5 onglets Outils ne tiennent pas sur une ligne : plutôt que de les
   cacher derrière un défilement horizontal peu visible, on les fait passer à la ligne
   pour que les 5 outils restent tous visibles d'un coup d'œil. */
@media (max-width: 768px) {
  .tools-page .settings-tabs {
    flex-wrap: wrap;
    width: 100%;
    overflow-x: visible;
    justify-content: center;
  }
  .tools-page .settings-tab { flex-shrink: 1; white-space: nowrap; }
}

/* ── Convertisseur ────────────────────────────────────────────────*/
.converter-box {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}

.conv-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.conv-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.conv-swap-btn {
  align-self: flex-end;
  margin-bottom: 6px;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--clr-primary-light);
  border: 1.5px solid var(--clr-primary);
  color: var(--clr-primary);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.conv-swap-btn:hover { background: var(--clr-primary); color: #fff; transform: rotate(180deg); }

.conv-result-field {
  background: var(--clr-bg);
  font-weight: 700;
  font-size: 15px;
  color: var(--clr-primary);
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 2px var(--clr-primary-light);
}

.conv-history {
  margin-top: 24px;
  border-top: 1px solid var(--clr-border);
  padding-top: 16px;
}
.conv-history-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--clr-text-muted);
  margin-bottom: 10px;
}
.conv-history-empty {
  font-size: 13px;
  color: var(--clr-text-muted);
  font-style: italic;
}
.conv-history-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--clr-border);
}
.conv-history-item:last-child { border-bottom: none; }
.conv-h-from  { color: var(--clr-text); font-weight: 500; }
.conv-h-arrow { color: var(--clr-text-muted); }
.conv-h-to    { color: var(--clr-primary); font-weight: 600; }
.conv-h-ing   { flex-basis: 100%; font-size: 11px; color: var(--clr-text-muted); font-style: italic; }

/* ── Minuteur ─────────────────────────────────────────────────────*/
.timer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  width: 100%;
}

.timer-display-container {
  position: relative;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
}

.timer-circle-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer-circle-bg {
  fill: none;
  stroke: var(--clr-border);
  stroke-width: 6;
}

.timer-circle-progress {
  fill: none;
  stroke: var(--clr-primary);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 282.74;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease;
}

.timer-text-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#timer-display {
  --timer-size: 40px;
  font-size: var(--timer-size);
  font-weight: 700;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Au-delà de l'heure l'affichage passe en H:MM:SS, soit deux caractères de
   plus à faire tenir dans le même cadran. La règle porte un id + une classe :
   elle gagne sur les redéfinitions de taille des media queries, qui n'ont
   qu'à mettre --timer-size à jour. */
#timer-display.timer-display-long {
  font-size: calc(var(--timer-size) * .72);
  letter-spacing: -0.03em;
}

#timer-label-status {
  font-size: 11px;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-top: 5px;
}

/* Contrôles principaux : [- 1min] [Démarrer] [+ 1min] */
.timer-main-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.timer-adj-btn {
  min-width: 78px;
  justify-content: center;
}

.btn-timer-main {
  min-width: 130px;
  justify-content: center;
}

/* Bouton réinitialiser seul, centré */
.timer-reset-btn {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin-top: -4px;
}

/* Ajustements fins groupés avec séparateur */
.timer-fine-adjust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 0;
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}

.fine-adj-group {
  display: flex;
  gap: 6px;
}

.fine-adj-sep {
  width: 1px;
  height: 22px;
  background: var(--clr-border);
  flex-shrink: 0;
}

.btn-fine-adj {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  min-width: 46px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  color: var(--clr-text-muted);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.btn-fine-adj:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: var(--clr-primary-light);
}

.timer-presets-section {
  width: 100%;
  border-top: 1px solid var(--clr-border);
  padding-top: 20px;
  margin-top: 4px;
}

.presets-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 12px;
}

.timer-presets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.timer-presets-grid .btn-preset {
  text-align: left;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.timer-presets-grid .btn-preset:hover {
  background: var(--clr-primary-light);
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}
.timer-presets-grid .btn-preset small {
  font-size: 11px;
  color: var(--clr-text-muted);
  font-weight: 400;
}

/* ── Équivalences ─────────────────────────────────────────────────*/
.equivalences-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}

.equivalences-card {
  background: var(--clr-surface-2);
  border-radius: var(--radius-md);
  padding: 18px;
  border: 1px solid var(--clr-border);
  overflow: hidden;
}

.eq-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--clr-secondary);
}

.eq-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
}

.eq-table {
  width: 100%;
  min-width: 260px;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
.eq-table th {
  font-weight: 600;
  color: var(--clr-text-muted);
  padding: 8px 10px;
  border-bottom: 1.5px solid var(--clr-border-strong);
  white-space: nowrap;
}
.eq-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--clr-border);
  color: var(--clr-text);
}
.eq-table tr:last-child td { border-bottom: none; }
.eq-table tr:hover td      { background: rgba(0,0,0,0.015); }

.eq-search-wrap { margin-bottom: 14px; }
.eq-search-wrap .eq-search-input { padding-right: 14px; }
.eq-search-wrap:has(.search-clear-btn:not(.hidden)) .eq-search-input { padding-right: 36px; }

.eq-quicknav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.eq-quicknav-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-2);
  color: var(--clr-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.eq-quicknav-pill:hover   { background: var(--clr-bg); border-color: var(--clr-border-strong); }
.eq-quicknav-pill:active  { transform: scale(0.96); }

.eq-no-results {
  text-align: center;
  color: var(--clr-text-muted);
  font-size: 14px;
  padding: 24px 0;
}
.eq-no-results.hidden { display: none; }

.equivalences-card { scroll-margin-top: 16px; }

/* ── Pizza Calculator Pro ─────────────────────────────────────────*/
.pz-calculator { max-width: 900px; margin: 0 auto; }

.pz-section {
  background: var(--clr-surface);
  border-radius: var(--radius-xl);
  padding: 24px;
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  animation: pzFadeIn .35s ease both;
}
.pz-section:nth-child(2) { animation-delay: .05s; }
.pz-section:nth-child(3) { animation-delay: .10s; }
.pz-section:nth-child(4) { animation-delay: .15s; }
.pz-section:nth-child(5) { animation-delay: .20s; }

@keyframes pzFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pz-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.pz-section-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--clr-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.pz-section-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--clr-text);
}

/* ── Style selector ── */
.pz-style-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
/* 8 styles de pizza contre 7 types de pain : la grille pizza a sa propre
   colonne supplémentaire en desktop uniquement. En dessous de 1025px, les
   règles responsive de .pz-style-grid reprennent la main. */
@media (min-width: 1025px) {
  #pz-style-grid { grid-template-columns: repeat(8, 1fr); }
}
.pz-style-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: var(--radius-md);
  border: 2px solid var(--clr-border);
  background: var(--clr-surface-2);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
  text-align: center;
}
.pz-style-card:hover {
  border-color: var(--clr-primary);
  background: var(--clr-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.pz-style-card.active {
  border-color: var(--clr-primary);
  background: var(--clr-primary-light);
  box-shadow: 0 0 0 3px rgba(200,85,61,.15);
}
.pz-style-emoji { font-size: 28px; line-height: 1.2; }
.pz-style-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text);
  line-height: 1.2;
}
.pz-style-hint {
  font-size: 11px;
  color: var(--clr-text-muted);
  line-height: 1.3;
}

/* ── Method selector ── */
.pz-method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pz-method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 8px;
  border-radius: var(--radius-md);
  border: 2px solid var(--clr-border);
  background: var(--clr-surface-2);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  text-align: center;
}
.pz-method-card:hover {
  border-color: var(--clr-secondary);
  background: #e8f5e9;
}
.pz-method-card.active {
  border-color: var(--clr-secondary);
  background: #e8f5e9;
  box-shadow: 0 0 0 3px rgba(44,110,73,.15);
}
.pz-method-card.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.pz-method-emoji { font-size: 22px; }
.pz-method-name { font-size: 12px; font-weight: 600; color: var(--clr-text); }
.pz-method-hint { font-size: 10px; color: var(--clr-text-muted); line-height: 1.3; }

/* ── Yeast selector ── */
.pz-yeast-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--clr-border);
}
.pz-yeast-label {
  display: block;
  margin-bottom: 10px;
}
.pz-yeast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.pz-yeast-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  border: 2px solid var(--clr-border);
  background: var(--clr-surface-2);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  text-align: center;
}
.pz-yeast-card:hover {
  border-color: var(--clr-primary);
  background: var(--clr-primary-light);
}
.pz-yeast-card.active {
  border-color: var(--clr-primary);
  background: var(--clr-primary-light);
  box-shadow: 0 0 0 3px rgba(200,85,61,.15);
}
.pz-yeast-emoji { font-size: 22px; }
.pz-yeast-name  { font-size: 11px; font-weight: 600; color: var(--clr-text); line-height: 1.3; }
.pz-yeast-card.active .pz-yeast-name { color: var(--clr-primary); }

/* ── Config row ── */
.pz-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pz-config-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* ── Slider group ── */
.pz-slider-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pz-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.pz-slider-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-text-muted);
}
.pz-slider-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-primary);
  min-width: 52px;
  text-align: right;
}
.pz-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--clr-border);
  outline: none;
  transition: background var(--transition);
  touch-action: pan-y;
}
.pz-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--clr-primary);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: transform var(--transition), box-shadow var(--transition);
}
.pz-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(200,85,61,.35);
}
.pz-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--clr-primary);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

/* ── Preferment card ── */
.pz-preferment-section {
  display: none;
  margin-top: 16px;
}
.pz-preferment-section.visible { display: block; }
.pz-preferment-card {
  background: linear-gradient(135deg, #f0f7f2 0%, var(--clr-surface-2) 100%);
  border-radius: var(--radius-lg);
  border: 1.5px solid #b5d6c1;
  padding: 20px;
}
.pz-preferment-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--clr-secondary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pz-pref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.pz-pref-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  background: rgba(255,255,255,.7);
  border-radius: var(--radius-sm);
  border: 1px solid #d4e6d9;
}
.pz-pref-item-label {
  font-size: 11px;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.pz-pref-item-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--clr-secondary);
}
.pz-pref-note {
  font-size: 12px;
  color: var(--clr-text-muted);
  font-style: italic;
  margin-top: 10px;
  line-height: 1.5;
}
.pz-pref-rest {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 4px 10px;
  background: rgba(44,110,73,.08);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  color: var(--clr-secondary);
}

/* ── Results section ── */
.pz-results-section {
  background: var(--clr-surface);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--clr-primary);
  padding: 24px;
  box-shadow: 0 4px 20px rgba(200,85,61,.08);
  animation: pzResultsIn .4s ease both;
}
@keyframes pzResultsIn {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: scale(1); }
}
.pz-results-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--clr-border);
}
.pz-results-icon { font-size: 24px; }
.pz-results-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--clr-text);
}
.pz-results-subtitle {
  font-size: 13px;
  color: var(--clr-text-muted);
}

/* ── Ingredient pills ── */
.pz-ingredients-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.pz-ing-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--clr-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  transition: background var(--transition), transform var(--transition);
}
.pz-ing-pill:hover {
  background: var(--clr-surface-2);
  transform: translateX(2px);
}
.pz-ing-emoji { font-size: 20px; flex-shrink: 0; }
.pz-ing-info { flex: 1; min-width: 0; }
.pz-ing-name {
  font-size: 13px;
  color: var(--clr-text-muted);
  line-height: 1.2;
}
.pz-ing-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--clr-text);
}
.pz-ing-pill.pz-ing-total {
  grid-column: 1 / -1;
  background: var(--clr-primary-light);
  border-color: var(--clr-primary);
}
.pz-ing-pill.pz-ing-total .pz-ing-value {
  color: var(--clr-primary);
  font-size: 18px;
}

/* ── Timeline ── */
.pz-timeline-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--clr-border);
}
.pz-timeline-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pz-timeline {
  position: relative;
  padding-left: 36px;
}
.pz-timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(to bottom, var(--clr-primary), var(--clr-secondary));
  border-radius: 1px;
}
.pz-tl-step {
  position: relative;
  padding: 0 0 20px;
}
.pz-tl-step:last-child { padding-bottom: 0; }
.pz-tl-dot {
  position: absolute;
  left: -36px;
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--clr-surface);
  border: 2.5px solid var(--clr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  z-index: 1;
}
.pz-tl-content {
  padding: 2px 0 0;
}
.pz-tl-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 2px;
}
.pz-tl-desc {
  font-size: 13px;
  color: var(--clr-text-muted);
  line-height: 1.5;
}
.pz-tl-duration {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 10px;
  background: var(--clr-bg);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  color: var(--clr-primary);
}

/* ── Intelligence / Scores ── */
.pz-intel-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--clr-border);
}
.pz-intel-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pz-intel-gauges {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-bottom: 16px;
}
.pz-gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pz-gauge-svg {
  width: 90px;
  height: 90px;
  transform: rotate(-90deg);
}
.pz-gauge-bg {
  fill: none;
  stroke: var(--clr-border);
  stroke-width: 7;
}
.pz-gauge-fill {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1), stroke .3s;
}
.pz-gauge-fill.success { stroke: var(--clr-secondary); }
.pz-gauge-fill.stability { stroke: #3b82f6; }
.pz-gauge-value-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  margin-top: -90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pz-gauge-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--clr-text);
}
.pz-gauge-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pz-state-desc {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-text);
  margin-bottom: 12px;
  padding: 8px 14px;
  background: var(--clr-bg);
  border-radius: var(--radius-md);
}

/* ── Risk badges ── */
.pz-risks { display: flex; flex-direction: column; gap: 6px; }
.pz-risk {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
}
.pz-risk-icon { font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.pz-risk.danger  { background: var(--clr-danger-bg); color: #991b1b; border: 1px solid var(--clr-danger-border); }
.pz-risk.warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.pz-risk.info    { background: var(--clr-info-bg); color: #075985; border: 1px solid var(--clr-info-border); }
.pz-risk.success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* ── Summary badge ── */
.pz-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.pz-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  background: var(--clr-bg);
  color: var(--clr-text-muted);
  border: 1px solid var(--clr-border);
}
.pz-summary-chip strong { color: var(--clr-text); }

/* ── Responsive outils : tablette (≤ 700px) ──────────────────────*/
@media (max-width: 700px) {
  .equivalences-container {
    grid-template-columns: 1fr;
  }
  .timer-presets-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .timer-display-container {
    width: 185px;
    height: 185px;
  }
  #timer-display { --timer-size: 34px; }

  /* Pizza : tablette */
  .pz-calculator { max-width: 100%; }
  .pz-section { padding: 20px; margin-bottom: 16px; border-radius: var(--radius-lg); }
  .pz-section-title { font-size: 16px; }
  .pz-section-header { margin-bottom: 16px; }

  .pz-style-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
  .pz-style-card { padding: 12px 8px; }
  .pz-style-emoji { font-size: 24px; }
  .pz-style-name { font-size: 12px; }

  .pz-method-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pz-yeast-grid  { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: 6px; }
  .pz-config-grid-3 { grid-template-columns: 1fr 1fr; }

  .pz-results-section { padding: 20px; border-radius: var(--radius-lg); }
  .pz-results-title { font-size: 16px; }
  .pz-ingredients-grid { gap: 8px; }

  .pz-intel-gauges { gap: 24px; }
  .pz-gauge-svg { width: 84px; height: 84px; }
  .pz-gauge-value-wrap { width: 84px; height: 84px; margin-top: -84px; }

  .pz-preferment-card { padding: 16px; }
  .pz-pref-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

  .pz-summary-bar { gap: 6px; }
  .pz-summary-chip { font-size: 11px; padding: 4px 10px; }
}

/* ── Responsive outils : mobile (≤ 768px) : pizza spécifique ─────*/
@media (max-width: 768px) {

  /* Pizza : mobile */
  .pz-section {
    padding: 16px;
    margin-bottom: 14px;
    border-radius: var(--radius-lg);
  }
  .pz-section-num { width: 26px; height: 26px; font-size: 12px; }
  .pz-section-title { font-size: 15px; }
  .pz-section-header { margin-bottom: 14px; gap: 8px; }

  .pz-style-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pz-style-card { padding: 10px 6px; gap: 3px; }
  .pz-style-emoji { font-size: 22px; }
  .pz-style-name { font-size: 11px; }
  .pz-style-hint { font-size: 10px; }

  .pz-method-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pz-method-card { padding: 10px 6px; }
  .pz-method-emoji { font-size: 20px; }
  .pz-method-name { font-size: 11px; }
  .pz-yeast-grid  { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
  .pz-yeast-card  { padding: 8px 6px; }
  .pz-yeast-emoji { font-size: 20px; }
  .pz-yeast-name  { font-size: 10px; }
  .pz-method-hint { font-size: 9px; }

  .pz-config-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pz-config-grid-3 { grid-template-columns: 1fr 1fr; }
  .pz-slider-label { font-size: 12px; }
  .pz-slider-value { font-size: 13px; min-width: 46px; }

  /* Slider thumb plus gros pour le touch */
  .pz-range { height: 8px; }
  .pz-range::-webkit-slider-thumb { width: 24px; height: 24px; }
  .pz-range::-moz-range-thumb { width: 24px; height: 24px; }

  .pz-results-section { padding: 16px; border-radius: var(--radius-lg); }
  .pz-results-header { margin-bottom: 16px; padding-bottom: 12px; gap: 8px; }
  .pz-results-icon { font-size: 20px; }
  .pz-results-title { font-size: 16px; }
  .pz-results-subtitle { font-size: 12px; }

  .pz-ingredients-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pz-ing-pill { padding: 10px 12px; gap: 8px; }
  .pz-ing-emoji { font-size: 18px; }
  .pz-ing-name { font-size: 12px; }
  .pz-ing-value { font-size: 15px; }
  .pz-ing-pill.pz-ing-total .pz-ing-value { font-size: 16px; }

  .pz-preferment-card { padding: 14px; }
  .pz-preferment-title { font-size: 14px; margin-bottom: 10px; }
  .pz-pref-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
  .pz-pref-item { padding: 8px; }
  .pz-pref-item-value { font-size: 14px; }
  .pz-pref-note { font-size: 11px; margin-top: 8px; }
  .pz-pref-rest { font-size: 11px; }

  .pz-summary-bar { gap: 6px; margin-top: 10px; }
  .pz-summary-chip { font-size: 11px; padding: 4px 10px; }

  .pz-timeline-section { margin-top: 20px; padding-top: 16px; }
  .pz-timeline-title { font-size: 15px; margin-bottom: 14px; }
  .pz-timeline { padding-left: 32px; }
  .pz-timeline::before { left: 12px; }
  .pz-tl-dot {
    left: -32px;
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  .pz-tl-title { font-size: 13px; }
  .pz-tl-desc { font-size: 12px; }
  .pz-tl-duration { font-size: 10px; padding: 2px 8px; }

  .pz-intel-section { margin-top: 20px; padding-top: 16px; }
  .pz-intel-title { font-size: 15px; margin-bottom: 14px; }
  .pz-intel-gauges { gap: 24px; margin-bottom: 14px; }
  .pz-gauge-svg { width: 80px; height: 80px; }
  .pz-gauge-value-wrap { width: 80px; height: 80px; margin-top: -80px; }
  .pz-gauge-value { font-size: 20px; }
  .pz-gauge-label { font-size: 10px; }
  .pz-state-desc { font-size: 13px; padding: 7px 12px; }
  .pz-risk { padding: 7px 10px; font-size: 12px; }
}

/* ── Responsive outils : petit mobile (≤ 480px) ──────────────────*/
@media (max-width: 480px) {
  .settings-tab {
    padding: 7px 14px;
    font-size: 13px;
  }

  /* Convertisseur : empilement vertical */
  .conv-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .conv-col { gap: 6px; }
  .conv-col + .conv-swap-btn { margin-top: 12px; }
  .conv-swap-btn {
    align-self: center;
    margin-bottom: 12px;
    transform: rotate(90deg);
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
  .conv-swap-btn:hover { transform: rotate(90deg) scale(1.1); }
  .conv-result-field { font-size: 14px; }

  /* Équivalences : cartes empilées (supprime le scroll horizontal du tableau) */
  .equivalences-card { padding: 14px; }
  .eq-quicknav-pill { padding: 5px 11px; font-size: 12px; }
  .eq-table-wrap { overflow-x: visible; margin: 0; }
  .eq-table { min-width: 0; display: block; font-size: 13px; }
  .eq-table thead { display: none; }
  .eq-table tbody { display: block; }

  .eq-table tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 12px 0;
    border-bottom: 1px solid var(--clr-border);
  }
  .eq-table tr:first-child { padding-top: 2px; }
  .eq-table tr:last-child  { border-bottom: none; padding-bottom: 2px; }

  .eq-table td {
    padding: 0;
    border: none;
  }
  .eq-table td:first-child {
    grid-column: 1 / -1;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--clr-secondary);
    margin-bottom: 4px;
  }
  .eq-table td:not(:first-child) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    padding: 6px 4px;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.25;
  }
  /* Libellés de colonne repris en tête de chaque chip (tables à structure identique) */
  .eq-table td:not(:first-child)::before {
    font-size: 9.5px;
    font-weight: 500;
    color: var(--clr-text-muted);
  }
  .eq-table td:nth-child(2)::before { content: "c. à café"; }
  .eq-table td:nth-child(3)::before { content: "c. à soupe"; }
  .eq-table td:nth-child(4)::before { content: "1 tasse"; }
  /* Neutralise le survol du tableau (garde le fond stable des chips) */
  .eq-table tr:hover td:not(:first-child) { background: var(--clr-bg); }

  /* Minuteur : taille cercle */
  .timer-display-container {
    width: 160px;
    height: 160px;
  }
  #timer-display { --timer-size: 30px; }
  #timer-label-status { font-size: 10px; }

  /* Minuteur : contrôles compacts */
  .timer-adj-btn { min-width: 68px; font-size: 13px; padding: 8px 10px; }
  .btn-timer-main { min-width: 108px; font-size: 14px; }
  .timer-reset-btn { font-size: 12px; }
  .timer-fine-adjust { gap: 8px; padding: 10px 0; }
  .fine-adj-group { gap: 5px; }
  .btn-fine-adj { padding: 5px 8px; min-width: 42px; font-size: 11px; }

  .timer-presets-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pizza : petit mobile */
  .pz-section { padding: 14px; margin-bottom: 12px; }

  .pz-style-grid { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: 6px; }
  .pz-style-card { padding: 10px 6px; border-width: 1.5px; }
  .pz-style-emoji { font-size: 20px; }
  .pz-style-name { font-size: 11px; }
  .pz-style-hint { display: none; }

  .pz-method-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .pz-method-card { padding: 10px 6px; border-width: 1.5px; }
  .pz-method-hint { display: none; }
  .pz-yeast-grid  { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .pz-yeast-card  { padding: 8px 4px; border-width: 1.5px; }
  .pz-yeast-name  { font-size: 10px; }

  .pz-config-grid,
  .pz-config-grid-3 { grid-template-columns: 1fr; gap: 10px; }

  .pz-results-section { padding: 14px; }
  .pz-ingredients-grid { grid-template-columns: 1fr; gap: 6px; }
  .pz-ing-pill.pz-ing-total { grid-column: 1; }
  .pz-ing-pill { padding: 10px 12px; }
  .pz-ing-value { font-size: 15px; }

  .pz-pref-grid { grid-template-columns: 1fr 1fr; gap: 6px; }

  .pz-summary-bar { flex-direction: column; gap: 4px; }
  .pz-summary-chip { justify-content: space-between; }

  .pz-timeline { padding-left: 28px; }
  .pz-timeline::before { left: 10px; }
  .pz-tl-dot {
    left: -28px;
    width: 22px;
    height: 22px;
    font-size: 10px;
    border-width: 2px;
  }
  .pz-tl-step { padding-bottom: 16px; }

  .pz-intel-gauges { gap: 20px; }
  .pz-gauge-svg { width: 72px; height: 72px; }
  .pz-gauge-value-wrap { width: 72px; height: 72px; margin-top: -72px; }
  .pz-gauge-value { font-size: 18px; }
  .pz-state-desc { font-size: 12px; }
  .pz-risk { font-size: 11px; padding: 6px 8px; }
  .pz-risk-icon { font-size: 12px; }
}

/* ── Responsive outils : très petit mobile (≤ 360px) ─────────────*/
@media (max-width: 360px) {
  .settings-tabs { gap: 2px; padding: 3px; }
  .settings-tab { padding: 6px 10px; font-size: 12px; }

  /* Minuteur : très petit écran */
  .timer-display-container { width: 140px; height: 140px; }
  #timer-display { --timer-size: 26px; }
  .timer-main-controls { gap: 6px; }
  .timer-adj-btn { min-width: 58px; font-size: 12px; padding: 7px 8px; }
  .btn-timer-main { min-width: 96px; font-size: 13px; }
  .timer-fine-adjust { gap: 6px; }
  .fine-adj-group { gap: 4px; }
  .btn-fine-adj { padding: 5px 6px; min-width: 38px; font-size: 11px; }

  .pz-section { padding: 12px; margin-bottom: 10px; }
  .pz-section-num { width: 24px; height: 24px; font-size: 11px; }
  .pz-section-title { font-size: 14px; }
  .pz-section-header { margin-bottom: 12px; }

  .pz-style-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .pz-style-card { padding: 8px 4px; }
  .pz-style-emoji { font-size: 18px; }
  .pz-style-name { font-size: 10px; }

  .pz-method-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .pz-method-card { padding: 8px 4px; }
  .pz-method-emoji { font-size: 18px; }
  .pz-method-name { font-size: 10px; }

  .pz-results-section { padding: 12px; }
  .pz-results-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pz-results-title { font-size: 15px; }

  .pz-ing-pill { padding: 8px 10px; gap: 6px; }
  .pz-ing-emoji { font-size: 16px; }
  .pz-ing-name { font-size: 11px; }
  .pz-ing-value { font-size: 14px; }

  .pz-preferment-card { padding: 12px; }
  .pz-pref-grid { grid-template-columns: 1fr; }
  .pz-pref-item-value { font-size: 13px; }

  .pz-timeline { padding-left: 24px; }
  .pz-timeline::before { left: 8px; }
  .pz-tl-dot { left: -24px; width: 18px; height: 18px; font-size: 9px; }
  .pz-tl-title { font-size: 12px; }
  .pz-tl-desc { font-size: 11px; }

  .pz-intel-gauges { gap: 16px; flex-direction: row; }
  .pz-gauge-svg { width: 64px; height: 64px; }
  .pz-gauge-value-wrap { width: 64px; height: 64px; margin-top: -64px; }
  .pz-gauge-value { font-size: 16px; }
  .pz-gauge-label { font-size: 9px; }
}

/* ── Responsive ───────────────────────────────────────────────────*/
@media (max-width: 480px) {
  .tag-filter-bar { gap: 6px; }
  .tag-chip       { font-size: 12px; padding: 7px 13px; }
  .tag-chip-clear { padding: 7px 13px; }
  .tag-picker     { gap: 6px; padding: 10px; }
}

/* ── SW update toast ─────────────────────────────────────────────*/
#sw-update-toast {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  padding: 10px 10px 10px 16px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 2000;
  animation: _swToastIn var(--transition-md) ease both;
}
#sw-update-toast button {
  background: var(--clr-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
#sw-update-toast button:hover { background: var(--clr-primary-hover); }
@keyframes _swToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (max-width: 600px) {
  #sw-update-toast { bottom: calc(var(--bottom-nav-h) + 8px); font-size: 13px; }
}

/* Disable animations when not navigating internally */
.tools-page.no-anim .pz-section,
.tools-page.no-anim .pz-results-section {
  animation: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   AUTH : Compte Google & Synchronisation
══════════════════════════════════════════════════════════════════ */

/* ── Carte compte dans les Paramètres ─────────────────────────── */
.settings-card-account {
  border-color: var(--clr-primary);
  background: color-mix(in srgb, var(--clr-primary) 5%, var(--clr-surface));
  margin-bottom: 28px;
}

/* ── Titre avec bouton info ───────────────────────────────────── */
.settings-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.settings-card-title-row .settings-card-title {
  margin-bottom: 0;
}

.btn-sync-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--clr-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.btn-sync-info:hover {
  background: var(--clr-border);
  color: var(--clr-text);
}

/* ── Modal info sync ──────────────────────────────────────────── */
.sync-info-modal {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sync-info-section {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.sync-info-section--warn {
  background: color-mix(in srgb, var(--clr-warning, #f59e0b) 8%, var(--clr-surface));
  border: 1px solid color-mix(in srgb, var(--clr-warning, #f59e0b) 30%, transparent);
  border-radius: var(--radius-md);
  padding: 14px;
}

.sync-info-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-border);
  border-radius: 50%;
  color: var(--clr-primary);
}
.sync-info-section--warn .sync-info-icon {
  background: color-mix(in srgb, var(--clr-warning, #f59e0b) 20%, transparent);
  color: var(--clr-warning, #f59e0b);
}

.sync-info-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--clr-text);
  margin-bottom: 4px;
}

.sync-info-text {
  font-size: 13px;
  color: var(--clr-text-muted);
  line-height: 1.6;
}

.sync-info-list {
  font-size: 13px;
  color: var(--clr-text-muted);
  line-height: 1.6;
  padding-left: 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sync-info-close {
  align-self: flex-end;
  margin-top: 4px;
}

/* ── Bouton Google Sign-In ────────────────────────────────────── */
.btn-google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow .15s, background .15s;
  font-family: inherit;
  white-space: nowrap;
}
.btn-google:hover  { background: #f8f9fa; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.btn-google:active { background: #f1f3f4; }

/* ── Bouton Google Sign-In compact (header mobile) ───────────── */
.btn-google-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 12px;
  background: var(--clr-surface);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.btn-google-sm:hover  { background: var(--clr-bg); }
.btn-google-sm:active { box-shadow: inset 0 0 0 1px var(--clr-border-strong); }

/* ── Infos utilisateur connecté ───────────────────────────────── */
.auth-user-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.auth-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--clr-border);
}
.auth-avatar-initial {
  background: var(--clr-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
}
.auth-user-info { flex: 1; min-width: 0; }
.auth-user-name  { font-weight: 600; font-size: 15px; color: var(--clr-text); margin: 0 0 2px; }
.auth-user-email { font-size: 13px; color: var(--clr-text-muted); margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; }
.auth-sync-time  { font-size: 12px; color: var(--clr-text-muted); margin: 0; }
.auth-actions    { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Badge avatar (header mobile + sidebar) ───────────────────── */
#auth-header-badge {
  margin-left: auto;
  display: flex;
  align-items: center;
}
.auth-header-link {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 50%;
  transition: background .15s;
}
.auth-header-link:hover { background: var(--clr-bg); }
.auth-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--clr-border);
  flex-shrink: 0;
}
.auth-avatar-sm.auth-avatar-initial {
  background: var(--clr-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}

/* ── Sidebar user section (desktop) ──────────────────────────── */
#sidebar-user-badge {
  margin-top: auto;
  padding: 12px 16px;
  border-top: 1px solid var(--clr-border);
}
.sidebar-user-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--clr-text);
  transition: background .15s;
}
.sidebar-user-link:hover { background: var(--clr-bg); }
.sidebar-user-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-text-muted);
  flex-shrink: 0;
}
.auth-sync-dot.active { background: #34a853; }

/* ── Modal de fusion ─────────────────────────────────────────── */
.merge-modal    { display: flex; flex-direction: column; gap: 14px; }
.merge-desc     { margin: 0; font-size: 15px; color: var(--clr-text); line-height: 1.5; }
.merge-options  { display: flex; flex-direction: column; gap: 10px; }
.merge-option   {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 16px;
  text-align: left;
  height: auto;
  white-space: normal;
  line-height: 1.3;
}
.merge-option strong { font-size: 14px; }
.merge-option span   { font-size: 12px; opacity: .8; }

/* ══════════════════════════════════════════════════════════════════
   BATCH COOKING : Session, timeline, répartition frigo/congélateur
══════════════════════════════════════════════════════════════════ */
.batch-tab-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Le sélecteur de jour du planning classique est réservé au mobile ;
   ici il sert à choisir le jour de session, à toutes les tailles. */
.batch-page .week-day-tabs-wrap { display: block; }

/* ── Paramètres de session ── */
.batch-params {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 16px 0 4px;
}

.batch-param {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Le choix des repas passe la ligne : quatre chips ne tiennent pas à côté
   des steppers sur mobile. */
.batch-param-wide {
  flex-basis: 100%;
  gap: 10px;
}

.batch-param-hint {
  margin: 0;
  font-size: 13px;
  color: var(--clr-text-muted);
}

.tag-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--tag-color) 18%, transparent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.tag-chip.active .tag-chip-count {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

.batch-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--clr-text);
}

.batch-constraints {
  margin: 14px 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  background: var(--clr-surface-2);
}

.batch-constraints > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text-muted);
}

.batch-constraints-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.batch-constraints-grid .form-input { margin-top: 4px; }

.batch-generate-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* ── Cartes de plats ── */
/* Colonne unique, y compris en large : le glisser-déposer par poignée ne
   raisonne que verticalement, comme la liste d'ingrédients qui l'a inspiré :
   une grille à plusieurs colonnes rendrait le geste imprévisible. */
.batch-dish-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}

.batch-dish-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.batch-dish-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.batch-dish-emoji { font-size: 26px; line-height: 1; }

.batch-dish-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.batch-dish-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--clr-text);
  line-height: 1.25;
}

.batch-dish-name:hover { color: var(--clr-primary); }

.batch-dish-role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--clr-text-muted);
}

.batch-dish-actions { display: flex; gap: 4px; flex-shrink: 0; }

.batch-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
  cursor: pointer;
  transition: all var(--transition);
}

.batch-icon-btn:hover {
  background: var(--clr-surface-2);
  color: var(--clr-text);
  border-color: var(--clr-border-strong);
}

.batch-icon-btn.danger:hover {
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  border-color: var(--clr-primary);
}

/* ── Réordonnancement des plats : par quoi commencer la session ── */
.batch-dish-list-hint {
  font-size: 12px;
  color: var(--clr-text-muted);
  margin: 10px 0;
}

.batch-dish-handle {
  cursor: grab;
  color: var(--clr-text-muted);
  opacity: 0.35;
  flex-shrink: 0;
  touch-action: none;
  padding: 4px;
  margin-top: 2px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
}

.batch-dish-handle:hover { opacity: 0.9; }
.batch-dish-handle:active { cursor: grabbing; }

.batch-dish-card.batch-dish-dragging {
  opacity: 0.65;
  box-shadow: var(--shadow-lg);
}

.batch-dish-chips,
.batch-storage-summary,
.batch-unassigned {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.batch-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  color: var(--chip-color, var(--clr-text-muted));
  background: color-mix(in srgb, var(--chip-color, #888) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip-color, #888) 30%, transparent);
  white-space: nowrap;
}

.batch-dish-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dashed var(--clr-border);
}

.batch-batches-label {
  font-size: 12px;
  color: var(--clr-text-muted);
}

.batch-remaining {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--clr-primary);
}

.batch-remaining.ok { color: var(--clr-secondary); }

.batch-placeholder {
  grid-column: 1 / -1;
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed var(--clr-border-strong);
  border-radius: var(--radius-lg);
  color: var(--clr-text-muted);
  background: var(--clr-surface-2);
}

.batch-placeholder-hint { font-size: 13px; margin-top: 6px; }

/* ── Diagramme d'occupation des postes ── */
.batch-gantt-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 14px;
}

.batch-gantt { min-width: max(1000px, 100%); }

.batch-gantt-ruler {
  position: relative;
  height: 18px;
  margin-left: 96px;
  border-bottom: 1px solid var(--clr-border);
}

.batch-gantt-tick {
  position: absolute;
  top: 0;
  font-size: 10px;
  color: var(--clr-text-muted);
  transform: translateX(-50%);
  white-space: nowrap;
}

.batch-gantt-lane {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.batch-gantt-label {
  width: 88px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--clr-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.batch-gantt-track {
  position: relative;
  flex: 1;
  height: 30px;
  background: var(--clr-surface-2);
  border-radius: var(--radius-sm);
}

.batch-gantt-block {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: var(--radius-sm);
  background: var(--block-color, var(--clr-primary));
  color: #fff;
  font-size: 10.5px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  overflow: hidden;
}

.batch-gantt-block span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Progression de la session ── */
.batch-progress-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 14px;
}

.batch-progress-card .progress-bar { flex: 1; min-width: 140px; }

/* ── Étapes du déroulé ── */
.batch-step-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.batch-task-check {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--clr-secondary);
  cursor: pointer;
}

.pz-tl-step.batch-step.done .pz-tl-title { text-decoration: line-through; }
.pz-tl-step.batch-step.done { opacity: .55; }

.batch-step-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.batch-step-at {
  font-size: 11px;
  font-weight: 600;
  color: var(--clr-text-muted);
  background: var(--clr-surface-2);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}

.batch-timer-btn { font-size: 12px; padding: 4px 10px; }

.pz-tl-step.batch-step-gap {
  opacity: .8;
}

.batch-step-gap .pz-tl-content {
  border: 1px dashed var(--clr-border-strong);
  border-radius: var(--radius-md);
  background: var(--clr-surface-2);
  padding: 10px 12px;
}

/* ── Répartition sur la semaine ── */
.batch-unassigned {
  align-items: center;
  padding: 10px 14px;
  background: var(--clr-primary-light);
  border-radius: var(--radius-md);
}

.batch-unassigned-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-primary);
  margin-right: 4px;
}

.batch-days {
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px; /* For scrollbar */
  -webkit-overflow-scrolling: touch;
}

.batch-days::-webkit-scrollbar {
  height: 8px;
}
.batch-days::-webkit-scrollbar-track {
  background: var(--clr-border);
  border-radius: 4px;
}
.batch-days::-webkit-scrollbar-thumb {
  background: var(--clr-text-muted);
  border-radius: 4px;
}

/* .week-active-day-panel est masqué au-delà de 768px (le planning classique
   bascule alors sur sa grille 7 colonnes). La répartition batch garde ses
   panneaux à toutes les tailles : on rétablit l'affichage. */
.batch-day-panel {
  display: block;
  margin: 0;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 12px;
  flex: 0 0 auto;
  width: 88vw;
  max-width: 360px;
  scroll-snap-align: start;
}

.batch-day-panel .week-meal-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  border-radius: var(--radius-md);
  padding: 10px;
  margin-bottom: 8px;
  transition: background-color 0.2s, outline 0.2s;
}

.batch-day-panel .week-meal-row.drag-over {
  outline: 2px dashed var(--clr-primary);
  background-color: var(--clr-primary-light) !important;
}

.batch-day-panel .week-meal-row:last-child { margin-bottom: 0; }

.batch-day-panel .week-meal-label-v {
  writing-mode: horizontal-tb;
  transform: none;
  flex-shrink: 0;
  width: auto;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--meal-accent);
  display: flex;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--meal-accent) 20%, transparent);
  padding-bottom: 4px;
}

.batch-day-panel .week-meal-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.batch-session-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff;
  background: var(--clr-primary);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  vertical-align: middle;
}

.batch-reminder {
  font-size: 12.5px;
  line-height: 1.4;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
  background: var(--clr-info-bg);
  color: #075985;
  border-left: 3px solid #0369A1;
}

.batch-reminder.direct {
  background: #FEF3C7;
  color: #92400E;
  border-left-color: #D97706;
}

.batch-assign-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  width: 100%;
}

.batch-assign-item.at-risk {
  outline: 2px solid #DC2626;
  outline-offset: -2px;
}

.batch-assign-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* La grille batch a des colonnes étroites : mieux vaut deux lignes
   qu'un nom de plat coupé par une ellipse. */
.batch-assign-body .week-item-name {
  font-size: 12.5px;
  white-space: normal;
  overflow: visible;
  line-height: 1.3;
}

.batch-assign-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.batch-assign-portions {
  font-size: 11.5px;
  color: var(--clr-text-muted);
}

.batch-assign-reheat,
.batch-assign-finish {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--clr-text-muted);
}

.batch-assign-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.batch-foot-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.batch-merge-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 10px 0 14px;
  cursor: pointer;
}

.batch-merge-label input { margin-top: 2px; accent-color: var(--clr-secondary); }

/* L'aperçu n'a pas de case à cocher : il lui faut le padding que
   .shop-label apporte d'ordinaire, sinon le texte touche les bords. */
.batch-shop-preview {
  opacity: .9;
  pointer-events: none;
}

.batch-shop-preview .shop-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 18px;
}

.batch-shop-preview .shop-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── Bureau : comportement standard ── */
@media (min-width: 1024px) {
  /* Supprimé : on garde le carrousel horizontal à toutes les tailles */
}

@media (max-width: 640px) {
  .batch-params { gap: 14px; }
  .batch-gantt-label { width: 64px; font-size: 11px; }
  .batch-gantt-ruler { margin-left: 72px; }
}

/* ══════════════════════════════════════════════════════════════════
   ONGLET PRÉPARATION : MISE EN PLACE, DÉROULÉ DÉTAILLÉ, MODE CUISINE
══════════════════════════════════════════════════════════════════ */

/* ── Barre collante : progression toujours visible pendant le scroll ── */
.prep-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 12px 0;
  margin-bottom: 8px;
  background: var(--clr-bg);
  border-bottom: 1px solid var(--clr-border);
}

/* Sous le header mobile fixe (--mobile-header-h), sinon la barre se colle derrière lui */
@media (max-width: 768px) {
  .prep-toolbar { top: var(--mobile-header-h); }
}

.prep-toolbar-progress {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.prep-toolbar-progress .progress-bar { flex: 1; min-width: 80px; }
.prep-toolbar-progress .progress-label { white-space: nowrap; }

.prep-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Blocs dépliables (plan de charge, mise en place) ── */
.prep-fold {
  margin: 14px 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-surface-2);
  overflow: hidden;
}

.prep-fold > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-text);
  list-style: none;
}

.prep-fold > summary::-webkit-details-marker { display: none; }

.prep-fold > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  color: var(--clr-text-muted);
  transition: transform var(--transition);
}

.prep-fold[open] > summary::before { transform: rotate(90deg); }

.prep-fold-body { padding: 0 16px 16px; }

/* ── Mise en place : tout peser et sortir avant de démarrer ── */
.prep-mep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.prep-mep-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-left: 4px solid var(--recipe-color, var(--clr-primary));
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.prep-mep-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.prep-mep-emoji { font-size: 18px; }

.prep-mep-name-main {
  font-weight: 600;
  font-size: 15px;
  color: var(--clr-text);
  overflow-wrap: anywhere;
}

.prep-mep-scale {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--recipe-color, var(--clr-primary));
  white-space: nowrap;
}

.prep-mep-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prep-mep-item > label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 14px;
}

.prep-mep-check {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  accent-color: var(--clr-secondary);
  cursor: pointer;
  align-self: center;
}

.prep-mep-qty {
  flex-shrink: 0;
  min-width: 68px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--clr-text);
}

.prep-mep-name {
  color: var(--clr-text-muted);
  overflow-wrap: anywhere;
}

.prep-mep-item.checked > label { opacity: .5; text-decoration: line-through; }

.prep-mep-empty { font-size: 13px; color: var(--clr-text-muted); }

.prep-mep-card .prep-utensils { margin-top: 12px; }

/* ── Ingrédients communs à plusieurs plats ── */
.prep-shared-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-secondary);
  border-left: 4px solid var(--clr-secondary);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 14px;
}

.prep-shared-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-secondary);
  margin-bottom: 8px;
}

.prep-shared-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }

.prep-shared-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
}

.prep-shared-for {
  margin-left: auto;
  font-size: 12px;
  color: var(--clr-text-muted);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   Carte d'étape et groupement par plat

   L'ordonnanceur entrelace les plats : une étape de bolognaise peut être
   suivie d'une étape de riz. Pour rester lisible, chaque instruction est
   une carte, et les instructions consécutives d'un même plat se soudent en
   un bloc portant la couleur de la recette.
══════════════════════════════════════════════════════════════════ */

/* Étapes plus resserrées : elles sont trois fois plus nombreuses qu'avant. */
.prep-step { padding-bottom: 10px; }

.prep-step > .pz-tl-content {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-left: 3px solid var(--recipe-color, var(--clr-primary));
  border-radius: var(--radius-md);
  padding: 12px 16px;
}

/* Le titre est l'instruction elle-même : une phrase, pas un libellé.
   Elle doit rester lisible sur plusieurs lignes plutôt que crier en gras. */
.prep-step .pz-tl-title {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Le point de la timeline prend la couleur du plat : on suit une recette
   à la trace même quand les étapes des autres s'intercalent. */
.prep-step > .pz-tl-dot {
  border-color: var(--recipe-color, var(--clr-primary));
  top: 8px;
}

/* ── Soudure du bloc ── */

/* Une continuation colle à la carte précédente : on annule l'espacement
   et les arrondis mitoyens pour n'obtenir qu'un seul rectangle. */
.prep-step-cont { margin-top: -10px; }

.prep-step-cont > .pz-tl-content {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.prep-step-open > .pz-tl-content {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Un séparateur discret marque la limite entre deux instructions du bloc,
   sans le refermer comme le ferait une bordure pleine. */
.prep-step-cont > .pz-tl-content::before {
  content: '';
  display: block;
  height: 1px;
  margin: -12px -16px 12px;
  background: var(--clr-border);
  opacity: .5;
}

/* Les continuations s'effacent au profit de la tête de bloc, qui seule
   porte le nom de la recette. */
.prep-step-cont > .pz-tl-dot {
  width: 22px;
  height: 22px;
  left: -33px;
  top: 12px;
  font-size: 11px;
  border-width: 2px;
  opacity: .7;
}

/* La tête de bloc est la seule à annoncer le plat : elle mérite d'être vue. */
.prep-step-lead > .pz-tl-content { border-top-width: 2px; }

.prep-step-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--clr-text-muted);
}

.prep-step-body:empty { display: none; }
.prep-step-body:not(:empty) { margin-top: 10px; }

.prep-recipe-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-weight: 600;
  color: var(--recipe-color, var(--clr-primary));
  background: color-mix(in srgb, var(--recipe-color, var(--clr-primary)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--recipe-color, var(--clr-primary)) 30%, transparent);
}

/* Sans bordure : quatre pastilles cerclées par étape, sur une trentaine
   d'étapes, écrasaient le texte des instructions. */
.prep-temp,
.prep-portions,
.prep-step-tags .batch-step-at,
.prep-step-tags .pz-tl-duration {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--clr-surface-2);
  border: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* La température est la seule information qu'on ne peut pas se tromper à lire. */
.prep-temp {
  background: color-mix(in srgb, var(--clr-primary) 12%, transparent);
  color: var(--clr-primary);
  font-weight: 600;
}

/* ── Correction manuelle de la durée d'une étape ── */
.prep-dur-stepper {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.prep-dur-btn {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}

/* Zone tactile agrandie sans changer la taille visuelle du bouton ;
   inset limité (vs. 44px std) car les boutons -/+ sont collés (gap 3px) */
.prep-dur-btn::after {
  content: '';
  position: absolute;
  inset: -6px;
}

.prep-dur-btn:hover {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: #fff;
}

/* La pastille de durée qu'on a soi-même corrigée doit se distinguer de
   l'estimation automatique, sans devenir criarde pour autant. */
.prep-dur-overridden {
  color: var(--clr-secondary);
  background: color-mix(in srgb, var(--clr-secondary) 14%, transparent);
  font-weight: 700;
}

.prep-step-body { display: flex; flex-direction: column; gap: 10px; }

/* ── Quantités mises à l'échelle ── */
.prep-ing-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
}

.prep-ing-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--clr-text-muted);
  margin-right: 2px;
}

.prep-ing-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 11px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  font-size: 13px;
  color: var(--clr-text-muted);
  overflow-wrap: anywhere;
}

.prep-ing-chip strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--clr-primary);
}

.prep-step .pz-tl-desc {
  font-size: 13px;
  font-style: italic;
  color: var(--clr-text-muted);
}

.prep-utensils {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ══════════════════════════════════════════════════════════════════
   MODE CUISINE : une étape à la fois, plein écran
══════════════════════════════════════════════════════════════════ */
body.cook-mode-open { overflow: hidden; }

/* Au-dessus du contenu et des modales (1000), sous les toasts (2000)
   et la notification de fin de minuteur (3000), qui doivent rester lisibles. */
#cook-mode {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  background: var(--clr-bg);
}

/* Réduit : reste dans le DOM (config/index conservés) mais invisible,
   le bandeau #cook-resume-banner prend le relais. */
#cook-mode.cook-minimized { display: none; }

.cook-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.cook-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  background: var(--clr-surface-2);
  color: var(--clr-text);
  cursor: pointer;
  transition: background var(--transition);
}

.cook-close:hover { background: var(--clr-border); }

/* Compteur, libellé et jauge sur leurs propres lignes : en une seule ligne la
   puce du minuteur venait manger la jauge dès que l'écran se resserrait. */
.cook-head-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.cook-head-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.cook-counter {
  font-weight: 700;
  font-size: 14px;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cook-progress-label {
  font-size: 12px;
  color: var(--clr-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Deux jauges superposées : la claire marque l'avancement dans le parcours
   (elle bouge à chaque étape, cochée ou non), la pleine les étapes cochées.
   Une seule jauge ne pouvait pas dire les deux, d'où l'impression qu'elle
   n'avançait pas au rythme des étapes. */
.cook-progress {
  position: relative;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--clr-bg);
  overflow: hidden;
}

.cook-progress-seen,
.cook-progress-done {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--radius-full);
  transition: width 300ms ease;
}

.cook-progress-seen { background: var(--clr-border); }
.cook-progress-done { background: var(--clr-secondary); }

.cook-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cook-minimize {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  background: var(--clr-surface-2);
  color: var(--clr-text);
  cursor: pointer;
  transition: background var(--transition);
}

.cook-minimize:hover { background: var(--clr-border); }

.cook-timer-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  background: var(--clr-surface-2);
  color: var(--clr-text);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--transition);
}

.cook-timer-chip:hover { background: var(--clr-border); }
.cook-timer-chip.hidden { display: none; }

/* Le tiroir des minuteurs doit rester utilisable par-dessus le mode cuisine
   (1500) une fois ouvert depuis la puce, mais sous les toasts (2000) et la
   notification de fin de minuteur (3000). */
body.cook-mode-open .timers-drawer-overlay,
body.cook-mode-open .timers-drawer {
  z-index: 1600;
}

.cook-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px 32px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cook-body.done { opacity: .62; }

.cook-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cook-icon { font-size: 34px; line-height: 1; flex-shrink: 0; }

.cook-title {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--clr-text);
  overflow-wrap: anywhere;
}

.cook-body .cook-timer { align-self: flex-start; }

.cook-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-top: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.cook-foot .btn { min-height: 48px; }
.cook-foot .cook-main-btn { font-size: 16px; font-weight: 600; min-width: 180px; }
.cook-foot .btn[disabled] { opacity: .4; pointer-events: none; }

@media (max-width: 640px) {
  .prep-toolbar { gap: 10px; }
  .prep-toolbar-actions { width: 100%; }
  .prep-toolbar-actions .btn { flex: 1; }
  .prep-mep-grid { grid-template-columns: 1fr; }
  .prep-mep-qty { min-width: 58px; }
  .cook-title { font-size: 22px; }
  .cook-body { padding: 18px 16px 28px; }
  .cook-step-para { font-size: 17px; line-height: 1.6; }
  .cook-step-ings { padding: 12px 14px; }

  /* La barre du haut porte quatre éléments : on resserre pour que la jauge
     garde une largeur utile sur un écran de téléphone. */
  .cook-head { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .cook-close,
  .cook-minimize { width: 36px; height: 36px; }
  .cook-timer-chip { padding: 6px 10px; font-size: 12px; }
  .cook-counter { font-size: 13px; }
  .cook-progress-label { font-size: 11px; }
  .cook-icon { font-size: 28px; }
  .cook-step-num { width: 34px; height: 34px; font-size: 16px; }
  /* Sur mobile, le bouton principal prime : les flèches passent en icônes. */
  .cook-foot { padding-left: 14px; padding-right: 14px; }
  .cook-foot .btn:not(.cook-main-btn) { font-size: 0; padding: 0 14px; }
  .cook-foot .btn:not(.cook-main-btn)::before {
    content: '←';
    font-size: 20px;
  }
  .cook-foot .btn:not(.cook-main-btn):last-child::before { content: '→'; }
}

/* ── Mode cuisine recette : récap ingrédients + numéro d'étape ── */

.cook-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--clr-primary);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

/* Corps d'une étape : du texte de lecture, pas un titre. Mesure limitée à
   ~60 caractères pour rester lisible d'un coup d'œil, à distance du plan de
   travail. */
.cook-step-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 60ch;
}

.cook-step-para {
  font-size: 19px;
  line-height: 1.65;
  color: var(--clr-text);
  overflow-wrap: anywhere;
}

.cook-step-ings {
  align-self: flex-start;
  width: 100%;
  max-width: 60ch;
  padding: 14px 16px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
}

.cook-step-ings-title {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--clr-text-muted);
}

.cook-step-ings .cook-ing-item { font-size: 15px; }
.cook-step-ings .cook-ing-item:last-child { border-bottom: none; }

.cook-ing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cook-ing-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--clr-border);
  font-size: 16px;
}

.cook-ing-qty {
  font-weight: 600;
  white-space: nowrap;
  min-width: 70px;
  color: var(--clr-primary);
}

.cook-ing-name {
  flex: 1;
  color: var(--clr-text);
}

/* ── Bouton minuteur dans la fiche recette ── */

.step-timer-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  padding: 3px 10px;
  margin-top: 6px;
  color: var(--clr-primary);
  cursor: pointer;
}

.step-content {
  flex: 1;
  min-width: 0;
}

/* ── Champ minuteur dans le formulaire d'édition ── */

.step-timer-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.step-timer-label {
  font-size: 16px;
  cursor: default;
}

.step-timer-input {
  width: 56px;
  text-align: center;
  font-size: 13px;
  padding: 4px 2px;
}

/* ══════════════════════════════════════════════════════════════════
   PAGE D'ACCUEIL / HOMEPAGE REDESIGN
══════════════════════════════════════════════════════════════════ */
.homepage {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 40px;
}

/* ── Hero Section ── */
.hp-hero {
  position: relative;
  background: linear-gradient(135deg, rgba(200, 85, 61, 0.08) 0%, rgba(44, 110, 73, 0.06) 100%), var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: 44px 36px;
  box-shadow: var(--shadow-md);
  text-align: center;
  overflow: hidden;
}

.hp-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(200, 85, 61, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
  border: 1px solid rgba(200, 85, 61, 0.2);
}

.hp-hero-header-greeting {
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.hp-hero-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.2;
  margin-bottom: 14px;
}

.hp-hero-tagline {
  max-width: 720px;
  margin: 0 auto 28px;
  color: var(--clr-text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Hero Search Bar */
.hp-search-wrapper {
  max-width: 620px;
  margin: 0 auto 20px;
}

.hp-search-form {
  display: flex;
  gap: 8px;
  background: var(--clr-surface);
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-full);
  padding: 6px 8px 6px 20px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.hp-search-form:focus-within {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 4px var(--clr-primary-light);
}

.hp-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 15px;
  color: var(--clr-text);
}

.hp-search-btn {
  background: var(--clr-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 10px 22px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.hp-search-btn:hover {
  background: var(--clr-primary-hover);
  transform: translateY(-1px);
}

/* Tag Pills */
.hp-tag-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}

.hp-tag-pill {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.hp-tag-pill:hover {
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  border-color: var(--clr-primary);
  transform: translateY(-1px);
}

.hp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ── Live Metrics Dashboard ── */
.hp-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.hp-stat-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}

.hp-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--clr-border-strong);
}

.hp-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.hp-stat-icon-recipes   { background: #FEF3C7; color: #D97706; }
.hp-stat-icon-favorites { background: #FCEAE6; color: #C8553D; }
.hp-stat-icon-week      { background: #E0E7FF; color: #4F46E5; }
.hp-stat-icon-shopping  { background: #DCFCE7; color: #2C6E49; }

.hp-stat-info {
  display: flex;
  flex-direction: column;
}

.hp-stat-card .hp-stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.2;
}

.hp-stat-card .hp-stat-label {
  font-size: 13px;
  color: var(--clr-text-muted);
  font-weight: 500;
}

/* ── Section Header ── */
.hp-section-header {
  margin-bottom: 20px;
}

.hp-section-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hp-section-subtitle {
  color: var(--clr-text-muted);
  font-size: 14px;
}

/* ── Today's Menu Highlight Banner ── */
.hp-today-banner {
  background: linear-gradient(135deg, #2C6E49 0%, #1E4D33 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 24px 30px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hp-today-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.hp-today-title {
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hp-today-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.hp-today-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.hp-today-item {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  transition: var(--transition);
}

.hp-today-item:hover {
  background: rgba(255, 255, 255, 0.22);
}

.hp-today-meal-type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
  font-weight: 600;
}

.hp-today-recipe-name {
  font-weight: 600;
  font-size: 15px;
}

/* ── Interactive Baking Widget ── */
.hp-baking-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-md);
}

.hp-baking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--clr-border);
}

.hp-widget-tabs {
  display: flex;
  background: var(--clr-surface-2);
  padding: 4px;
  border-radius: var(--radius-full);
  border: 1px solid var(--clr-border);
}

.hp-widget-tab {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--clr-text-muted);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hp-widget-tab.active {
  background: var(--clr-primary);
  color: #FFFFFF;
  box-shadow: var(--shadow-xs);
}

.hp-baking-body {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
  align-items: center;
}

@media (max-width: 850px) {
  .hp-baking-body {
    grid-template-columns: 1fr;
  }
}

.hp-baking-inputs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hp-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hp-input-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text);
}

.hp-input-group select,
.hp-input-group input {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  font-size: 14px;
  color: var(--clr-text);
}

.hp-baking-results {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.hp-results-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--clr-text-muted);
  margin-bottom: 14px;
}

.hp-results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.hp-result-item {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}

.hp-result-label {
  font-size: 12px;
  color: var(--clr-text-muted);
}

.hp-result-val {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-primary);
}

/* ── Featured Recipes Grid ── */
.hp-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.hp-recipe-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.hp-recipe-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--clr-border-strong);
}

.hp-recipe-thumb {
  height: 150px;
  background: var(--clr-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  position: relative;
  overflow: hidden;
}

.hp-recipe-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-recipe-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  color: var(--clr-text);
  box-shadow: var(--shadow-xs);
}

.hp-recipe-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hp-recipe-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 8px;
  line-height: 1.3;
}

.hp-recipe-desc {
  font-size: 13px;
  color: var(--clr-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
  flex: 1;
}

.hp-recipe-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--clr-text-muted);
  border-top: 1px solid var(--clr-border);
  padding-top: 10px;
  margin-top: auto;
}

/* ── Features Grid & Steps ── */
.hp-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.hp-feature-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.hp-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--clr-primary);
}

.hp-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--clr-primary-light);
  color: var(--clr-primary);
}

.hp-feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--clr-text);
}

.hp-feature-card p {
  font-size: 14px;
  color: var(--clr-text-muted);
  line-height: 1.5;
}

/* ── Steps ── */
.hp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 800px) {
  .hp-steps {
    grid-template-columns: 1fr;
  }
}

.hp-step {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-xs);
  position: relative;
}

.hp-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--clr-primary);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 14px;
}

.hp-step-body h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.hp-step-body p {
  font-size: 13.5px;
  color: var(--clr-text);
  line-height: 1.5;
}

/* Trust / Privacy Banner */
.hp-trust-footer {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 20px 28px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 16px;
  text-align: center;
}

.hp-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-text);
}

.hp-trust-icon {
  font-size: 20px;
}

/* ══════════════════════════════════════════════════════════════════
   ACCUEIL (mode app) : mobile
   Ce bloc doit rester EN FIN DE FICHIER : les règles .hp-* de base sont
   déclarées plus haut (~6951+) avec la même spécificité, donc seul l'ordre
   source les fait gagner. Le fusionner dans le @media de la ligne ~2388
   serait sans effet.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .homepage .hp-hero {
    padding: 24px 16px 28px;
  }

  .hp-search-wrapper {
    margin: 0 auto 16px;
  }

  /* Champ sur sa propre ligne : sinon le bouton « Rechercher » (libellé +
     icône) écrase la saisie jusqu'à la rendre inutilisable. */
  .hp-search-form {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border-radius: var(--radius-lg);
  }

  .hp-search-input {
    flex: 1 1 100%;
    padding: 8px 10px;
    font-size: 16px; /* < 16px déclencherait le zoom automatique iOS au focus */
  }

  .hp-search-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .hp-tag-pills {
    margin-bottom: 20px;
  }
}


/* Avertissement : ingrédient non identifié, donc non compté dans les totaux. */
.nutri-warn {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(192, 57, 43, .08);
  border: 1px solid rgba(192, 57, 43, .25);
  font-size: 12px;
  line-height: 1.5;
  color: var(--clr-text);
}

/* ══════════════════════════════════════════════════════════════════
   Réglages · Onglet Aliments (éditeur de la base nutritionnelle)
══════════════════════════════════════════════════════════════════ */
.food-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}
.food-toolbar .form-input { flex: 1 1 200px; min-width: 0; }

.food-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.food-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface);
}
.food-row:last-child { border-bottom: none; }
.food-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.food-row-name { font-weight: 500; color: var(--clr-text); }
.food-row-kcal { font-size: 12px; color: var(--clr-text-muted); font-variant-numeric: tabular-nums; }
.food-row-orig { color: var(--clr-text-muted); opacity: 0.75; }
.food-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.food-row-actions .btn-sm { padding: 4px 10px; font-size: 12px; }

.food-row-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  font-size: 10px;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
}
.food-row--modified .food-row-badge { background: rgba(200, 85, 61, .1); border-color: rgba(200, 85, 61, .3); color: var(--clr-primary); }
.food-row--added    .food-row-badge { background: rgba(46, 125, 50, .1); border-color: rgba(46, 125, 50, .3); color: #2E7D32; }
.food-row--hidden   { opacity: 0.55; }
.food-row--hidden .food-row-name { text-decoration: line-through; }

.food-list-empty { padding: 20px; text-align: center; color: var(--clr-text-muted); }
.food-list-more  { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-size: 12px; color: var(--clr-text-muted); }

/* ── Modale d'édition ── */
.food-form { display: flex; flex-direction: column; gap: 8px; }
.food-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--clr-text);
}
.food-form-row--sub .food-form-label { padding-left: 16px; color: var(--clr-text-muted); font-size: 12px; }
.food-form-label { min-width: 0; flex: 1; }
.food-form-input { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.food-form-input input {
  width: 90px;
  padding: 6px 8px;
  font-size: 16px;
  text-align: right;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-bg);
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
}
.food-form-input input[type="text"] { text-align: left; width: 100%; flex: 1; }
.food-form-input input:focus { outline: none; border-color: var(--clr-primary); }
.food-form-unit { font-size: 12px; color: var(--clr-text-muted); min-width: 55px; }
.food-form-sub {
  margin: 12px 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--clr-text-muted);
  font-weight: 600;
}
.food-form-warnings { margin-top: 8px; }
.food-warn-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.food-warn {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(240, 180, 60, .12);
  border: 1px solid rgba(240, 180, 60, .3);
  font-size: 12px;
  line-height: 1.5;
  color: var(--clr-text);
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.food-warn--err { background: rgba(192, 57, 43, .1); border-color: rgba(192, 57, 43, .3); }
.food-form-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }

/* Bouton « corriger cet aliment » aligné avec les autres icônes de la ligne */
.food-fix-btn { opacity: 0.7; }
.food-fix-btn:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   Réglages · carte Profil (calcul automatique des objectifs)
══════════════════════════════════════════════════════════════════ */
.profile-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 18px;
  margin: 14px 0;
}
.profile-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Le libellé passe avant l'input : sans repli, un intitulé long dans une
     carte étroite poussait le champ hors de la carte. */
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--clr-text);
}
/* display:flex écrase l'attribut [hidden] : rétablir le masquage. */
.profile-field[hidden] { display: none; }
.profile-field--wide { grid-column: 1 / -1; }
.profile-field-label { min-width: 0; flex: 1 1 auto; }
.profile-field-input {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.profile-field-input input {
  width: 76px;
  padding: 6px 8px;
  font-size: 16px;
  text-align: right;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-bg);
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
}
.profile-field-input input:focus { outline: none; border-color: var(--clr-primary); }
.profile-field-unit { font-size: 12px; color: var(--clr-text-muted); min-width: 46px; }
.profile-field .form-select { flex: 1; min-width: 0; max-width: 240px; }

.profile-preview {
  margin: 6px 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  font-size: 13px;
  line-height: 1.5;
}
.profile-preview-warn { display: block; margin-top: 6px; color: #C0392B; font-size: 12px; }
.profile-preview-muted { color: var(--clr-text-muted); font-style: italic; }


/* ══════════════════════════════════════════════════════════════════
   BANNIÈRE DE CONSENTEMENT
   z-index 4000 : au-dessus de tout le reste (minuteurs 3000,
   mode cuisine 1500, modales 1000, bannière d'installation 500).
══════════════════════════════════════════════════════════════════ */
.consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(28, 22, 18, 0.55);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}

.consent-overlay.hidden { display: none; }

body.consent-locked { overflow: hidden; }

.consent-panel {
  width: 100%;
  max-width: 520px;
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: 0 24px 60px rgba(28, 22, 18, 0.3);
}

.consent-logo {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
}

.consent-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--clr-text);
}

.consent-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--clr-text-muted);
  margin: 0 0 12px;
}

.consent-category {
  padding: 14px 0;
  border-top: 1px solid var(--clr-border);
}

.consent-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--clr-text-muted);
  margin: 6px 0 0 28px;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.consent-actions .btn { flex: 1 1 auto; }

.consent-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  color: var(--clr-primary);
}

@media (max-width: 520px) {
  .consent-panel { padding: 22px 18px; }
  .consent-title { font-size: 21px; }
  .consent-actions { flex-direction: column; }
  /* Premier contact de l'utilisateur avec l'app : on garde la cible tactile
     de 44 px déjà appliquée aux réglages. */
  .consent-actions .btn { min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════
   DESKTOP LARGE (≥ 1200px)
   L'app est pensée mobile + tablette (breakpoints max-width 430 / 640 /
   768 / 1024-1080). Au-delà de 1080px, le layout est figé : cartes
   Semaine calibrées 90-110px, Paramètres plafonnés à 900px. Ce bloc
   ajoute la couche desktop.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  /* ── Vue Semaine : grille 7 colonnes plus large et lisible ── */
  .week-grid {
    grid-template-columns: repeat(7, minmax(140px, 1fr));
    gap: 10px;
  }
  /* Plus besoin de scroll horizontal à cette largeur */
  .week-scroll-wrap { overflow-x: visible; }

  .week-day-hd       { font-size: 12px; padding: 11px 8px; }
  .week-meal-label-v { font-size: 10px; }
  .week-meal-row     { padding: 8px 9px; }

  /* Noms de recettes sur 2 lignes plutôt qu'ellipsis 1 ligne */
  .week-item-name {
    font-size: 13px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
  }
  .week-item-servings { font-size: 11px; }
  .week-srv-btn { width: 20px; height: 20px; font-size: 14px; }
  .week-add-btn { font-size: 12px; padding: 7px 8px; }

  /* Nutrition dans les cartes jour : sur écran large, colonnes 140-200px,
     on peut relâcher la compression appliquée en tablette. */
  .week-day-card .week-nutrition > summary { font-size: 12px; gap: 6px; }
  .week-day-card .week-nutri-table { font-size: 11px; }
  .week-day-card .week-nutri-table th,
  .week-day-card .week-nutri-table td { padding: 3px 4px; }
  .week-day-card .goal-bar-cell { width: 40px; padding-left: 4px; }

  /* Bouton suppression : léger en repos, plein au hover */
  .week-item-del { opacity: .35; }
  .week-item:hover .week-item-del { opacity: 1; }

  /* ── Paramètres : élargir + densifier la grille ── */
  .settings-page { max-width: 1200px; }
  .settings-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
  }
}

@media (min-width: 1400px) {
  .settings-page { max-width: 1320px; }
  .settings-grid { grid-template-columns: repeat(3, 1fr); }
}

@media print {
  .consent-overlay { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   ONBOARDING : bienvenue, visite guidée, hints, aide
   Les overlays (.onb-tour) sont montés sur document.body, FRÈRES de #app :
   ils échappent ainsi au `zoom: var(--ui-zoom)` de #app (ligne 134), et les
   coordonnées de getBoundingClientRect() sont directement utilisables.
   z-index : 1700-1710, intervalle libre entre le mode cuisine (1500, 1600)
   et les toasts (2000) qui doivent rester lisibles par-dessus.
══════════════════════════════════════════════════════════════════ */

/* ── Hints contextuels : bloc dans le flux, pas un overlay ── */
.onb-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--clr-info-bg);
  border: 1px solid var(--clr-info-border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin: 0 0 16px;
}
.onb-hint-icon { flex-shrink: 0; color: var(--clr-primary); margin-top: 1px; }
.onb-hint-text { flex: 1; margin: 0; font-size: 14px; line-height: 1.5; color: var(--clr-text); }
.onb-hint-close {
  flex-shrink: 0;
  display: flex;
  background: none;
  border: none;
  color: var(--clr-text-muted);
  cursor: pointer;
  padding: 2px;
  opacity: .7;
}
.onb-hint-close:hover { opacity: 1; }
.onb-hint--tip { background: color-mix(in srgb, var(--clr-warning, #f59e0b) 8%, var(--clr-surface)); border-color: color-mix(in srgb, var(--clr-warning, #f59e0b) 30%, transparent); }
.onb-hint--tip .onb-hint-icon { color: var(--clr-warning); }
.onb-hint-body { flex: 1; min-width: 0; }
.onb-hint-label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--clr-text-muted); margin-bottom: 2px; }
.onb-hint-body .onb-hint-text { margin: 0; }

/* ── Carrousel de bienvenue : contenu de #modal (variant sheet-full) ── */
.onb-slide { text-align: center; padding: 32px 24px 8px; }
.onb-slide-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  border-radius: var(--radius-full);
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.onb-slide-icon svg { width: 40px; height: 40px; }
.onb-slide-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--clr-text);
}
.onb-slide-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--clr-text-muted);
  margin: 0 auto;
  max-width: 380px;
}
.onb-welcome-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--clr-border);
}
.onb-dots { display: flex; align-items: center; gap: 8px; }
.onb-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--clr-border-strong);
  border: none;
  padding: 0;
  cursor: pointer;
}
.onb-dot.active { background: var(--clr-primary); width: 20px; border-radius: var(--radius-full); }
.onb-skip {
  display: block;
  margin: 4px auto 16px;
  text-align: center;
}

/* ── Visite guidée : overlay frère de #app ── */
.onb-tour {
  position: fixed;
  inset: 0;
  z-index: 1700;
  --onb-scrim: rgba(28, 22, 18, .55);
  --onb-bubble-w: min(320px, calc(100vw - 20px));
}
.onb-hole {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px var(--onb-scrim);
  pointer-events: none;
  transition: all var(--transition-md);
}
.onb-bubble {
  position: fixed;
  z-index: 1710;
  width: var(--onb-bubble-w);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 16px 18px;
  transition: left var(--transition-md), top var(--transition-md);
}
.onb-bubble-arrow {
  position: absolute;
  left: var(--onb-arrow-x, 50%);
  width: 12px;
  height: 12px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  transform: translateX(-50%) rotate(45deg);
}
.onb-bubble[data-place="top"]    .onb-bubble-arrow { bottom: -7px; border-top: none;    border-left: none; }
.onb-bubble[data-place="bottom"] .onb-bubble-arrow { top: -7px;    border-bottom: none; border-right: none; }
.onb-bubble[data-place="center"] .onb-bubble-arrow { display: none; }
.onb-progress {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--clr-primary);
  margin: 0 0 6px;
}
.onb-bubble-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--clr-text);
}
.onb-bubble-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--clr-text-muted);
  margin: 0 0 14px;
}
.onb-bubble-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.onb-bubble-foot .btn-link { margin-right: auto; }
.onb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Page d'aide : entête recentrée (bouton retour en coin, titre au centre) ──
   align-items:center est nécessaire en plus de justify-content : sous 768px,
   .view-header passe en flex-direction:column (styles.css ~2839), ce qui
   échange les rôles des deux axes. */
.onb-help-header {
  position: relative;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.onb-help-header .btn-icon {
  position: absolute;
  left: 0;
  top: 0;
}

/* ── Page d'aide : hero + accordéon natif <details> ── */
.onb-help {
  margin-top: 20px;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.onb-help-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.onb-help-hero-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.onb-help-hero-text { flex: 1 1 220px; min-width: 180px; }
.onb-help-hero-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--clr-text);
}
.onb-help-hero-desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--clr-text-muted); }
.onb-help-hero-actions {
  flex-basis: 100%;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.onb-faq-list { display: flex; flex-direction: column; gap: 10px; }
.onb-faq {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 4px 18px;
  transition: border-color var(--transition);
}
.onb-faq:hover { border-color: var(--clr-border-strong); }
.onb-faq[open] { border-color: var(--clr-primary); }
.onb-faq > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-weight: 600;
  color: var(--clr-text);
  cursor: pointer;
  list-style: none;
}
.onb-faq > summary::-webkit-details-marker { display: none; }
.onb-faq-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.onb-faq-icon svg { width: 17px; height: 17px; }
.onb-faq-title { flex: 1; }
.onb-faq-chev { color: var(--clr-text-muted); transition: transform var(--transition); flex-shrink: 0; }
.onb-faq[open] .onb-faq-chev { transform: rotate(180deg); }
.onb-faq-body {
  padding: 0 0 18px 44px;
  color: var(--clr-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.onb-faq-body p { margin: 0 0 12px; }
.onb-faq-body p:last-child { margin-bottom: 0; }

.onb-qa-list { display: flex; flex-direction: column; }
.onb-qa { padding: 12px 0; border-top: 1px solid var(--clr-border); }
.onb-qa:first-child { border-top: none; padding-top: 0; }
.onb-qa-q { margin: 0 0 4px; font-weight: 600; color: var(--clr-text); font-size: 14px; }
.onb-qa-a { margin: 0; }

.onb-help-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--clr-text-muted);
  margin-top: 4px;
  padding-top: 4px;
}
.onb-help-foot-link { color: var(--clr-primary); text-decoration: none; font-weight: 500; }
.onb-help-foot-link:hover { text-decoration: underline; }
.onb-help-foot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--clr-border-strong); flex-shrink: 0; }

@media (max-width: 768px) {
  .onb-hint { margin: 0 0 12px; padding: 11px 12px; font-size: 13px; }
  .onb-bubble { padding: 14px 16px; }
  .onb-bubble-foot { flex-wrap: wrap; }
  .onb-welcome-foot { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .onb-help-hero { padding: 18px; }
  .onb-help-hero-icon { width: 40px; height: 40px; }
  .onb-help-hero-icon svg { width: 18px; height: 18px; }
  .onb-faq-body { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .onb-hole, .onb-bubble, .onb-hint { transition: none; animation: none; }
}

/* ============================================================================
   Visibilité (formulaire recette) + badge Hub sur les cards
   ============================================================================ */

.visibility-picker {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.visibility-option {
  position: relative;
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 2px solid var(--clr-border);
  border-radius: 12px;
  cursor: pointer;
  background: var(--clr-surface);
  transition: border-color .15s, background .15s;
  user-select: none;
}
.visibility-option input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.visibility-option:has(input:checked) {
  border-color: var(--clr-primary);
  background: color-mix(in srgb, var(--clr-primary) 8%, var(--clr-surface));
}
.visibility-title  { font-weight: 600; font-size: 15px; }
.visibility-desc   { font-size: 13px; color: var(--clr-text-muted); }

.card-badge-public {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  z-index: 2;
}

/* ============================================================================
   Onglet Hub : liste communautaire des recettes publiques
   ============================================================================ */

.hub-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.hub-header h1 { margin: 0; }
.hub-subtitle { color: var(--clr-text-muted); margin: 0; font-size: 14px; }
.hub-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.hub-controls .form-input { flex: 1 1 220px; min-width: 200px; }
.hub-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hub-filter-chips:empty { display: none; }
.hub-author-filter {
  padding: 10px 14px;
  background: color-mix(in srgb, var(--clr-primary) 8%, var(--clr-surface));
  border-radius: var(--radius);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hub-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--clr-text-muted);
}
.hub-locked-hint {
  padding: 12px 14px;
  background: color-mix(in srgb, var(--clr-primary) 8%, var(--clr-surface));
  border-radius: 10px;
  font-size: 14px;
  color: var(--clr-text);
  margin-bottom: 16px;
}
.hub-locked-hint .btn { margin-left: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Ingrédients à éviter (préférences, fiche recette, cards)
   ═══════════════════════════════════════════════════════════════════════════ */

.avoid-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.avoid-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 10px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
}
.avoid-name {
  flex: 1 1 120px;
  min-width: 0;
  font-weight: 500;
}
.avoid-mode {
  flex: 1 1 150px;
  min-width: 0;
}
.avoid-remove {
  color: var(--clr-error);
}
.avoid-empty {
  padding: 10px 12px;
  color: var(--clr-text-muted);
  font-style: italic;
  background: var(--clr-bg);
  border: 1px dashed var(--clr-border);
  border-radius: 10px;
}
/* Flex plutôt que grid : la carte qui contient ce formulaire vit dans une
   grille auto-fill, sa largeur ne suit pas celle du viewport. Un
   grid-template-columns corrigé par media query débordait donc dans une carte
   étroite sur grand écran. Ici les trois champs se replient d'eux-mêmes. */
.avoid-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.avoid-add-form .avoid-add-name { flex: 1 1 180px; min-width: 0; }
.avoid-add-form .avoid-add-mode { flex: 1 1 150px; min-width: 0; }
.avoid-add-form .btn { flex: 0 0 auto; }
.avoid-presets-block { margin-top: 4px; }
.avoid-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.avoid-preset {
  padding: 6px 12px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  color: var(--clr-text);
  transition: background 0.15s, border-color 0.15s;
}
.avoid-preset:hover {
  background: color-mix(in srgb, var(--clr-primary) 10%, var(--clr-surface));
  border-color: var(--clr-primary);
}

/* Bandeau au-dessus de la fiche recette */
.avoid-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  margin: 12px 0 20px;
  border: 1px solid;
}
.avoid-banner--warn {
  background: #FFF4E5;
  border-color: #F5A623;
  color: #8A5100;
}
.avoid-banner--strong,
.avoid-banner--hide {
  background: #FDECEA;
  border-color: #C8553D;
  color: #8A2A1B;
}
.avoid-banner-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.avoid-banner-body { flex: 1; }
.avoid-banner-title {
  margin: 0 0 2px;
  font-weight: 600;
  font-size: 14px;
}
.avoid-banner-list {
  margin: 0;
  font-size: 13px;
  opacity: 0.9;
}
.avoid-banner-link {
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  flex-shrink: 0;
  align-self: center;
}

/* Badge en ligne, à côté du nom d'ingrédient sur la fiche */
.avoid-inline-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 12px;
  color: #fff;
  vertical-align: middle;
}
.avoid-inline-badge--warn   { background: #F5A623; }
.avoid-inline-badge--strong { background: #C8553D; }
.avoid-inline-badge--hide   { background: #7A1F13; }
.ingredient-item.avoid-ing--strong,
.ingredient-item.avoid-ing--hide {
  background: #FDECEA;
  border-radius: 8px;
  padding-left: 6px;
}
.ingredient-item.avoid-ing--warn {
  background: #FFF4E5;
  border-radius: 8px;
  padding-left: 6px;
}

/* Card badge dans la liste */
.card-avoid-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 14px;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 2;
}
.card-avoid-badge--warn   { background: #F5A623; }
.card-avoid-badge--strong { background: #C8553D; }
.recipe-card--avoid-strong .card-thumb {
  outline: 2px solid #C8553D;
  outline-offset: -2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Liste de courses : formulaire d'ajout manuel + items éditables
   ═══════════════════════════════════════════════════════════════════════════ */

/* Flex plutôt que grid : le nom prend la place disponible, la quantité et
   l'unité gardent une largeur lisible et le bouton passe à la ligne tout
   seul quand il n'y a plus de place, sans media query à recaler. */
.shop-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
  padding: 12px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
}
.shop-add-form .form-input { min-width: 0; }
.shop-add-form .shop-add-name { flex: 3 1 180px; }
.shop-add-form .shop-add-qty  { flex: 1 1 80px; }
.shop-add-form .shop-add-unit { flex: 1 1 110px; }
.shop-add-form .btn { flex: 0 0 auto; }
.shop-item.is-manual {
  border-left: 3px solid var(--clr-primary);
  padding-left: 6px;
}
.shop-manual-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: var(--clr-primary);
  opacity: 0.8;
}
.shop-edit-btn,
.shop-remove-btn {
  flex-shrink: 0;
  color: var(--clr-text-muted);
  padding: 4px;
}
.shop-remove-btn:hover { color: var(--clr-error); }
.shop-edit-btn:hover   { color: var(--clr-primary); }


/* ── Modale d'édition d'un article de courses ─────────────────────────────── */
.shop-edit-form .form-group { margin-bottom: 14px; }
.shop-edit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.shop-edit-row .form-group { flex: 1 1 130px; margin-bottom: 14px; }

/* ── Calories dans le formulaire recette : lecture seule ──────────────────── */
/* Le champ de saisie manuelle a été retiré : la valeur vient toujours du
   calcul. Ce bloc en tient lieu, aligné sur la hauteur des .form-input
   voisins pour ne pas casser la rangée. */
.kcal-estimate {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 2px;
  font-size: 14px;
  color: var(--clr-text-muted);
  font-variant-numeric: tabular-nums;
}
.kcal-estimate--partial { color: var(--clr-error); }

.nutri-warn > p { margin: 0 0 6px; }
.nutri-warn > p:last-child { margin-bottom: 0; }
.nutri-warn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Fiche du Hub : elle réutilise le corps de la fiche personnelle ───────── */
.hub-detail .detail-header { margin-bottom: 8px; }
.hub-detail-byline {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--clr-text-muted);
}

/* ── Carnets : cartes de la vue #/notebooks ───────────────────────────────── */
.notebook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.notebook-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.notebook-card:hover {
  border-color: var(--clr-primary);
  box-shadow: var(--shadow-sm);
}
.notebook-card-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 14px 8px 14px 16px;
  text-decoration: none;
  color: inherit;
}
.notebook-card-emoji { font-size: 26px; flex-shrink: 0; }
.notebook-card-body { display: flex; flex-direction: column; min-width: 0; }
.notebook-card-name {
  font-weight: 600;
  color: var(--clr-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notebook-card-count { font-size: 12px; color: var(--clr-text-muted); }
.notebook-card-actions { display: flex; gap: 2px; flex-shrink: 0; }

/* Carnets sur la carte de liste */
.card-notebooks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 0;
}
.card-notebook {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #6366F1 12%, var(--clr-surface));
  color: #4F46E5;
  border: 1px solid color-mix(in srgb, #6366F1 25%, transparent);
  white-space: nowrap;
}

/* Puce « + Carnet » du formulaire recette */
.tag-chip--add {
  border-style: dashed;
  color: var(--clr-text-muted);
}

/* Éditeur de carnet */
.notebook-editor .form-group { margin-bottom: 14px; }
.nb-emoji-input { max-width: 90px; text-align: center; font-size: 20px; }
.nb-emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.nb-emoji-choice {
  width: 36px;
  height: 36px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
}
.nb-emoji-choice:hover { border-color: var(--clr-primary); }

/* ── Option « copie autorisée » du formulaire ─────────────────────────────── */
.copy-option {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--clr-border);
  transition: opacity var(--transition);
}
/* Grisée plutôt que masquée : le lien avec le choix de visibilité reste lisible. */
.copy-option--off { opacity: .45; pointer-events: none; }

/* ── Hub : recette non copiable et recettes rangées par référence ─────────── */
.hub-nocopy-note { color: var(--clr-text-muted); }
.hub-own-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--clr-text-muted);
  font-style: italic;
}
.hub-detail-stats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  font-size: 13px;
  color: var(--clr-text-muted);
}
.hub-detail-stats svg { width: 14px; height: 14px; }

.rbrowse-refs-section { margin-top: 28px; }
.rbrowse-refs-section .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rbrowse-refs-section .section-title small {
  font-size: 13px;
  font-weight: 400;
  color: var(--clr-text-muted);
}
.rbrowse-refs-section .settings-hint { margin: 0 0 14px; }

.recipe-card--ref .card-thumb { position: relative; }
.card-badge-ref {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--clr-surface);
  color: var(--clr-secondary);
  box-shadow: var(--shadow-xs);
}

/* ── Wizard de création de recette ────────────────────────────────────────── */
.wiz-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.wiz-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface);
}

.wiz-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.wiz-progress { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.wiz-progress-labels { display: flex; justify-content: space-between; }
.wiz-progress-label {
  border: none;
  background: none;
  padding: 2px 4px;
  font-size: 12px;
  color: var(--clr-text-muted);
  cursor: pointer;
}
.wiz-progress-label:disabled { cursor: default; opacity: .55; }
.wiz-progress-label.active { color: var(--clr-primary); font-weight: 700; }

.wiz-body {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}

.wiz-foot {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--clr-border);
  background: var(--clr-surface);
  position: sticky;
  bottom: 0;
}
.wiz-foot-btn { width: 100%; }

.wiz-method-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.wiz-method-card:hover { border-color: var(--clr-primary); box-shadow: var(--shadow-sm); }
.wiz-method-card:active { transform: scale(.98); }
.wiz-method-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--clr-primary-light);
  color: var(--clr-primary);
}
.wiz-method-text { display: flex; flex-direction: column; gap: 2px; }
.wiz-method-title { font-weight: 700; font-size: 15px; }
.wiz-method-sub { font-size: 13px; color: var(--clr-text-muted); }

.wiz-resume-banner {
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
}
.wiz-resume-banner p { margin: 0 0 10px; font-size: 14px; }
.wiz-resume-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.wiz-field { display: flex; flex-direction: column; gap: 6px; }
.wiz-field-label { font-size: 13px; font-weight: 600; color: var(--clr-text-muted); }
.wiz-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.wiz-steppers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}

.wiz-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wiz-stepper-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  background: var(--clr-surface);
  font-size: 18px;
  line-height: 1;
  color: var(--clr-text);
  cursor: pointer;
  touch-action: manipulation;
}
.wiz-stepper-btn:active { background: var(--clr-primary-light); border-color: var(--clr-primary); }
.wiz-stepper-value { min-width: 32px; text-align: center; font-weight: 700; font-size: 16px; }

.wiz-more { border-top: 1px solid var(--clr-border); padding-top: 12px; }
.wiz-more summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-secondary);
}
.wiz-more[open] summary { margin-bottom: 12px; }
.wiz-more > .wiz-field + .wiz-field { margin-top: 12px; }

.wiz-photo-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 140px;
  border: 1.5px dashed var(--clr-border-strong);
  border-radius: var(--radius-lg);
  color: var(--clr-text-muted);
  cursor: pointer;
  font-size: 13px;
}
.wiz-photo-drop-lg { height: 220px; }
.wiz-photo-drop svg { width: 28px; height: 28px; }

.wiz-photo-preview { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.wiz-photo-preview img { width: 100%; height: 180px; object-fit: cover; display: block; }
.wiz-photo-preview-lg img { height: 260px; }
.wiz-photo-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(28,22,18,.55);
  color: #fff;
  border-radius: var(--radius-full);
}

.wiz-ing-composer-wrap { position: relative; }
.wiz-ing-composer-input { font-size: 16px; }

.wiz-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.wiz-suggest-item {
  border: none;
  background: none;
  text-align: left;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--clr-text);
  cursor: pointer;
}
.wiz-suggest-item:hover { background: var(--clr-primary-light); }

.wiz-ing-list, .wiz-step-list { display: flex; flex-direction: column; gap: 8px; }

.wiz-ing-row {
  display: grid;
  grid-template-columns: auto 60px 84px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
}
.wiz-ing-row.wiz-ing-dragging { opacity: .5; }
.wiz-ing-drag { touch-action: none; cursor: grab; color: var(--clr-text-muted); }
.wiz-ing-qty, .wiz-ing-unit, .wiz-ing-name {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  font-size: 14px;
  background: var(--clr-surface-2);
  min-width: 0;
}
.wiz-ing-qty:focus, .wiz-ing-unit:focus, .wiz-ing-name:focus {
  border-color: var(--clr-primary);
  outline: none;
  background: var(--clr-surface);
}
.wiz-ing-remove { color: var(--clr-text-muted); }
.wiz-empty-hint { color: var(--clr-text-muted); font-size: 13px; text-align: center; margin: 8px 0; }

.wiz-step-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 6px;
  border-radius: var(--radius-md);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
}
.wiz-step-row.wiz-step-dragging { opacity: .5; }
.wiz-step-drag { touch-action: none; cursor: grab; color: var(--clr-text-muted); margin-top: 6px; }
.wiz-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  border-radius: var(--radius-full);
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.wiz-step-text { resize: vertical; min-height: 44px; }
.wiz-step-remove { color: var(--clr-text-muted); margin-top: 4px; }
.wiz-add-step-btn { align-self: flex-start; }

.wiz-error { color: var(--clr-primary); font-size: 13px; }

.wiz-ai-intro { font-size: 13px; color: var(--clr-text-muted); }
.wiz-ai-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
}
.wiz-ai-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.wiz-ai-prompt-pre {
  white-space: pre-wrap;
  font-size: 12px;
  max-height: 220px;
  overflow: auto;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: 10px;
}

.wiz-done-body {
  align-items: center;
  text-align: center;
  padding-top: 40px;
}
.wiz-done-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--clr-secondary);
  color: #fff;
  margin: 0 auto 8px;
}
.wiz-done-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; margin-top: 12px; }
.wiz-done-actions .btn { text-decoration: none; }

@media (max-width: 480px) {
  .wiz-ing-row { grid-template-columns: auto 52px 70px 1fr auto; }
}
.card-badge-ref svg { width: 15px; height: 15px; }