/* ════════════════════════════════════════════
   MON ASSIETTE TRANQUILLE — STYLE
   Fonts: Lora (display) + DM Sans (body)
   Nature-inspired pastel palette
   ════════════════════════════════════════════ */

/* ── Variables ── */
:root {

  /* ── Bleu — Aujourd'hui ── */
  --blue:        #3a78c9;
  --blue-m:      #6ba4eb;
  --blue-l:      #a8d5f7;
  --blue-l2:     #d0e8fc;
  --blue-xl:     #e8f3fd;
  --blue-text:   #1a3f7a;
  --blue-glow:   rgba(58,120,201,.1);
  --blue-grad:   linear-gradient(145deg, #a8d5f7 0%, #d5c8f7 100%);

  /* ── Corail — Semaine ── */
  --coral:       #d4603a;
  --coral-m:     #e88a6a;
  --coral-l:     #f5c4b0;
  --coral-l2:    #fae0d6;
  --coral-xl:    #fdf0eb;
  --coral-text:  #7a2e1a;
  --coral-glow:  rgba(212,96,58,.1);
  --coral-grad:  linear-gradient(145deg, #f5c4b0 0%, #f7c8b8 100%);

  /* ── Teal — Aliments ── */
  --teal:        #2a8a7a;
  --teal-m:      #52b0a0;
  --teal-l:      #a8ddd4;
  --teal-l2:     #ceeee9;
  --teal-xl:     #e6f6f3;
  --teal-text:   #145048;
  --teal-glow:   rgba(42,138,122,.1);
  --teal-grad:   linear-gradient(145deg, #a8ddd4 0%, #a8d5f7 100%);

  /* ── Orange — Objectifs ── */
  --orange:      #e07a00;
  --orange-m:    #f0a040;
  --orange-l:    #f5d4a0;
  --orange-l2:   #fae8cc;
  --orange-xl:   #fdf4e8;
  --orange-text: #7a4400;
  --orange-glow: rgba(224,122,0,.1);
  --orange-grad: linear-gradient(145deg, #f5d4a0 0%, #f7dbb0 100%);

  /* ── Violet — Stats ── */
  --violet:      #7c4dbd;
  --violet-m:    #a070d0;
  --violet-l:    #d6c8e8;
  --violet-l2:   #ebe4f5;
  --violet-xl:   #f4f0fa;
  --violet-text: #4a2e7a;
  --violet-glow: rgba(124,77,189,.08);
  --violet-grad: linear-gradient(145deg, #e0d4f0 0%, #e8daf4 100%);

  /* ── Gris — Réglages ── */
  --gray:        #5a6b5e;
  --gray-m:      #8a9e8e;
  --gray-l:      #c8d4ca;
  --gray-l2:     #dfe8e0;
  --gray-xl:     #f0f4f1;
  --gray-text:   #2e3d30;
  --gray-glow:   rgba(90,107,94,.08);
  --gray-grad:   linear-gradient(145deg, #dfe8e0 0%, #e8eee9 100%);

  /* ── Vert — repas internes (Déjeuner, éléments nature) ── */
  --green:       #2e9e6b;
  --green-m:     #5ec49a;
  --green-l:     #b2e5d0;
  --green-l2:    #d6f2e6;
  --green-xl:    #eaf8f1;
  --green-text:  #1a5e3f;
  --green-glow:  rgba(46,158,107,.1);

  /* ── Rose — usage interne lipides ── */
  --rose:        #c0529a;
  --rose-light:  #faf0f6;

  /* ── Neutres ── */
  --bg:          #FEFEFE;
  --bg-card:     #FFFFFF;
  --ink:         #1a2e1c;
  --ink-soft:    #2d4a30;
  --muted:       #6b826d;

  /* Alias legacy pour compatibilité */
  --text-dark:   var(--ink);
  --text-muted:  var(--muted);
  --red:         var(--coral);

  /* ── Ombres & rayons ── */
  --card-shadow: 0 4px 16px rgba(0,0,0,.07);
  --radius:      14px;
  --radius-lg:   18px;
  --radius-xl:   24px;

  /* ── Page active (défaut : Bleu / Aujourd'hui) ── */
  --page-color:  var(--blue);
  --page-light:  var(--blue-xl);
  --page-border: var(--blue-l);
  --page-text:   var(--blue-text);
  --page-glow:   var(--blue-glow);
  --page-grad:   var(--blue-grad);
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: 'DM Sans', sans-serif;
  color: var(--text-dark);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 99px; opacity: .5; }
[data-page="0"] ::-webkit-scrollbar-thumb { background: #3a78c9; opacity: .5; }
[data-page="1"] ::-webkit-scrollbar-thumb { background: #d4603a; opacity: .5; }
[data-page="2"] ::-webkit-scrollbar-thumb { background: #2a8a7a; opacity: .5; }
[data-page="3"] ::-webkit-scrollbar-thumb { background: #e07a00; opacity: .5; }
[data-page="4"] ::-webkit-scrollbar-thumb { background: #7c4dbd; opacity: .5; }
[data-page="5"] ::-webkit-scrollbar-thumb { background: #5a6b5e; opacity: .5; }

/* ════════════════════════════════════════════
   TOP BAR
   ════════════════════════════════════════════ */
/* ════════ TOP BAR CONTENT — dots seulement ════════ */
#topBarContent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(76px + var(--safe-top, 0px));
  z-index: 50;
  background: transparent;
  pointer-events: none;
}
#topBarContent button,
#topBarContent a { pointer-events: auto; }

/* Fond coloré — premier enfant de chaque page, glisse avec le swipe */
.top-bg {
  height: calc(76px + var(--safe-top, 0px));
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  contain: layout style;
}

/* Gradients par page */
[data-page="0"] .top-bg { background: linear-gradient(145deg, #a8d5f7 0%, #d5c8f7 100%); }
[data-page="1"] .top-bg { background: linear-gradient(145deg, #f5c4b0 0%, #f7c8b8 100%); }
[data-page="2"] .top-bg { background: linear-gradient(145deg, #a8ddd4 0%, #a8d5f7 100%); }
[data-page="3"] .top-bg { background: linear-gradient(145deg, #f5d4a0 0%, #f7dbb0 100%); }
[data-page="4"] .top-bg { background: linear-gradient(145deg, #e0d4f0 0%, #e8daf4 100%); }
[data-page="5"] .top-bg { background: linear-gradient(145deg, #dfe8e0 0%, #e8eee9 100%); }

.top-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
}
.top-circle-1 { width: 160px; height: 160px; top: -70px; right: -30px; }
.top-circle-2 { width: 80px; height: 80px; bottom: -30px; left: 20px; background: rgba(255,255,255,.14); }

.top-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--safe-top, 0px) 16px 0;
  height: 100%;
}

.top-left {
  position: absolute;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.top-date-block {
  text-align: center;
  position: relative;
  min-width: 140px;
  height: 52px; /* hauteur fixe : titre toujours à la même position */
}

/* Titre : toujours centré verticalement en haut du bloc fixe */
.top-date-block .top-title {
  position: absolute;
  top: 8px;
  left: 0; right: 0;
}

.top-date-block .top-date-sub {
  position: absolute;
  top: 30px;
  left: 0; right: 0;
}

.top-right {
  position: absolute;
  right: 28px;
  display: flex;
  align-items: center;
}

.top-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.top-arrow {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.top-arrow:active { transform: scale(.92); }
.top-arrow.disabled { opacity: .35; pointer-events: none; }

.top-title {
  display: block;
  font-family: 'Lora', serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.top-date-sub {
  display: block;
  font-size: .58rem;
  opacity: .5;
  line-height: 1;
}

/* Only show day arrows on page 0 */
.top-arrow { transition: opacity .2s; }
body.hide-day-nav .top-arrow { opacity: 0; pointer-events: none; }

/* ════════════════════════════════════════════
   SWIPE CONTAINER
   ════════════════════════════════════════════ */
#swipeContainer {
  flex: 1;
  overflow: hidden;
  position: relative;
}

#swipeTrack {
  display: flex;
  height: 100%;
  transition: transform .3s cubic-bezier(.25, .46, .45, .94);
  will-change: transform;
}

#swipeTrack.dragging {
  transition: none;
}

.page {
  display: flex;
  flex-direction: column;
  min-width: 100%;
  height: 100%;
  overflow: hidden;
}
.page-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px 20px;
  scroll-behavior: smooth;
}

/* ════════════════════════════════════════════
   BOTTOM NAV
   ════════════════════════════════════════════ */
#bottomNav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 2px 10px;
  border-top: 1.5px solid var(--page-border);
  background: var(--bg);
  flex-shrink: 0;
  height: 60px;
  z-index: 10;
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}

.nav-indicator {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  border-radius: 0 0 99px 99px;
  background: transparent;
  transition: background .2s;
}
.nav-btn.active .nav-indicator { background: var(--page-color); }

.nav-icon { font-size: 1rem; line-height: 1; }
.nav-label { font-size: .56rem; font-weight: 500; color: var(--text-muted); transition: color .2s, font-weight .2s; }
.nav-btn.active .nav-label { font-weight: 700; color: var(--page-color); }

/* ════ Couleurs header par page (statiques — pas de var dynamique) ════ */
[data-page="0"] .top-title,
[data-page="0"] .top-date-sub,
[data-page="0"] .top-arrow { color: #1a3f7a; }
[data-page="1"] .top-title,
[data-page="1"] .top-date-sub,
[data-page="1"] .top-arrow { color: #7a2e1a; }
[data-page="2"] .top-title,
[data-page="2"] .top-date-sub,
[data-page="2"] .top-arrow { color: #145048; }
[data-page="3"] .top-title,
[data-page="3"] .top-date-sub,
[data-page="3"] .top-arrow { color: #7a4400; }
[data-page="4"] .top-title,
[data-page="4"] .top-date-sub,
[data-page="4"] .top-arrow { color: #4a2e7a; }
[data-page="5"] .top-title,
[data-page="5"] .top-date-sub,
[data-page="5"] .top-arrow { color: #2e3d30; }
/* ════════════════════════════════════════════
   PAGE DOTS
   ════════════════════════════════════════════ */
.page-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  transition: background .3s, transform .2s;
}
.dot.active { transform: scale(1.3); }

[data-page="0"] .dot.active { background: #3a78c9; }
[data-page="1"] .dot.active { background: #d4603a; }
[data-page="2"] .dot.active { background: #2a8a7a; }
[data-page="3"] .dot.active { background: #e07a00; }
[data-page="4"] .dot.active { background: #7c4dbd; }
[data-page="5"] .dot.active { background: #5a6b5e; }

/* ════════════════════════════════════════════
   PAGE 0: AUJOURD'HUI
   ════════════════════════════════════════════ */

/* Weight banner */
.weight-banner {
  background: linear-gradient(135deg, #e8f3fd, #f0e8f6);
  border: 1.5px solid var(--violet-l);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  animation: fadeIn .4s ease;
}
.weight-banner-title { font-size: .82rem; font-weight: 600; color: var(--violet-text); }
.weight-banner-sub { font-size: .62rem; color: var(--violet); margin-top: 2px; }
.weight-banner-btn {
  background: linear-gradient(135deg, #a070d0, var(--violet));
  color: #fff;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.weight-badge {
  text-align: center;
  font-size: .68rem;
  font-weight: 600;
  color: var(--violet);
  margin-bottom: 10px;
  padding: 6px 0;
  background: var(--violet-xl);
  border-radius: 10px;
}

/* Calorie Card */
.calorie-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 14px 20px 14px;
  border: 1.5px solid #a8d5f7;
  box-shadow: var(--card-shadow);
  margin-bottom: 12px;
  text-align: center;
}

.calorie-card-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #1a3f7a;
  margin-bottom: 4px;
}

.calorie-ring-wrap {
  position: relative;
  width: 125px;
  height: 125px;
  margin: 0 auto 8px;
}

.calorie-ring-svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.calorie-ring-bg { fill: none; stroke: #e8f3fd; stroke-width: 11; }
.calorie-ring-fill {
  fill: none;
  stroke: #3a78c9;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 0 308;
  transition: stroke-dasharray .6s ease, stroke .4s ease;
}

.calorie-ring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.calorie-ring-value {
  font-family: 'Lora', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #3a78c9;
  line-height: 1.1;
  transition: color .4s;
}

.calorie-ring-obj { font-size: .58rem; color: var(--text-muted); font-weight: 500; }

.calorie-remaining {
  font-size: .78rem;
  font-weight: 600;
  color: #3a78c9;
  transition: color .3s;
}
.calorie-remaining.over { color: var(--red); }

/* Macro Row */
.macro-row { display: flex; gap: 8px; margin-top: 10px; }

.macro-box {
  flex: 1;
  border-radius: 12px;
  padding: 8px 8px 7px;
  text-align: center;
}
.macro-prot { background: var(--blue-xl); }
.macro-gluc { background: var(--orange-xl); }
.macro-lip { background: var(--rose-light); }

.macro-label {
  font-size: .52rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.macro-prot .macro-label { color: var(--blue); }
.macro-gluc .macro-label { color: var(--orange); }
.macro-lip .macro-label { color: var(--rose); }

.macro-value {
  font-family: 'Lora', serif;
  font-size: .85rem;
  font-weight: 700;
  margin: 3px 0;
}
.macro-prot .macro-value { color: var(--blue); }
.macro-gluc .macro-value { color: var(--orange); }
.macro-lip .macro-value { color: var(--rose); }

.macro-obj { font-size: .55rem; opacity: .5; }

.macro-bar-bg {
  height: 4px;
  border-radius: 99px;
  background: rgba(0,0,0,.06);
  overflow: hidden;
}
.macro-bar-fill {
  height: 100%;
  border-radius: 99px;
  width: 0%;
  transition: width .4s ease;
}
.macro-prot .macro-bar-fill { background: var(--blue); }
.macro-gluc .macro-bar-fill { background: var(--orange); }
.macro-lip .macro-bar-fill { background: var(--rose); }

/* ── Meal Sections ── */
.meal-section { margin-bottom: 14px; }

.meal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 6px;
  cursor: pointer;
  user-select: none;
}
.meal-header-icon { font-size: 1rem; }
.meal-header-label {
  font-family: 'Lora', serif;
  font-size: .82rem;
  font-weight: 700;
}
.meal-header-line {
  flex: 1;
  height: 1px;
}
.meal-header-cal {
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-muted);
}
/* ── Chevrons unifiés : taille identique partout ── */
.meal-header-chevron,
.plan-day-chevron,
.semaine-prefs-chevron,
.facteurs-chevron {
  font-size: 14px !important;
  font-family: sans-serif !important;
  line-height: 1;
}
.acc-chevron,
.aliments-accordion-icon {
  font-size: 14px;
  font-family: sans-serif;
  line-height: 1;
}

.meal-header-chevron {
  font-size: 14px;
  font-family: sans-serif;
  color: var(--text-muted);
  transition: transform .25s ease;
  margin-left: 2px;
}
.meal-section.collapsed .meal-header-chevron {
  transform: rotate(-90deg);
}
.meal-body {
  overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease;
  max-height: 2000px;
  opacity: 1;
}
.meal-section.collapsed .meal-body {
  max-height: 0;
  opacity: 0;
}

/* Meal item */
.meal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: #fff;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,.025);
  margin-bottom: 6px;
  animation: fadeIn .25s ease;
}

.meal-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
}

.meal-item-info { flex: 1; min-width: 0; }
.meal-item-name {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meal-item-detail {
  font-size: .58rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.meal-item-cal {
  text-align: right;
  flex-shrink: 0;
}
.meal-item-cal-value {
  font-family: 'Lora', serif;
  font-size: .88rem;
  font-weight: 700;
}
.meal-item-cal-unit {
  font-size: .5rem;
  color: var(--text-muted);
  margin-left: 2px;
}

.meal-item-delete {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,.05);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background .15s;
}
.meal-item-delete:hover { background: rgba(212,96,58,.12); color: var(--red); }

/* Add button */
.meal-add-btn {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1.5px dashed transparent;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: transform .1s, opacity .15s;
}
.meal-add-btn:active { transform: scale(.97); }

/* Meal color variants */
.meal-petit-dej .meal-header-label { color: var(--orange); }
.meal-petit-dej .meal-header-line { background: linear-gradient(90deg, var(--orange-l), transparent); }
.meal-petit-dej .meal-item { border-color: var(--orange-l); }
.meal-petit-dej .meal-item-icon { background: linear-gradient(135deg, var(--orange-xl), var(--orange-l)); border: 1px solid var(--orange-l); }
.meal-petit-dej .meal-item-cal-value { color: var(--orange); }
.meal-petit-dej .meal-add-btn { border-color: var(--orange-l); background: var(--orange-xl); color: var(--orange); }

.meal-dejeuner .meal-header-label { color: var(--green); }
.meal-dejeuner .meal-header-line { background: linear-gradient(90deg, var(--green-l), transparent); }
.meal-dejeuner .meal-item { border-color: var(--green-l); }
.meal-dejeuner .meal-item-icon { background: linear-gradient(135deg, var(--green-xl), var(--green-l)); border: 1px solid var(--green-l); }
.meal-dejeuner .meal-item-cal-value { color: var(--green); }
.meal-dejeuner .meal-add-btn { border-color: var(--green-l); background: var(--green-xl); color: var(--green); }

.meal-encas .meal-header-label { color: var(--violet); }
.meal-encas .meal-header-line { background: linear-gradient(90deg, var(--violet-l), transparent); }
.meal-encas .meal-item { border-color: var(--violet-l); }
.meal-encas .meal-item-icon { background: linear-gradient(135deg, var(--violet-xl), var(--violet-l)); border: 1px solid var(--violet-l); }
.meal-encas .meal-item-cal-value { color: var(--violet); }
.meal-encas .meal-add-btn { border-color: var(--violet-l); background: var(--violet-xl); color: var(--violet); }

.meal-diner .meal-header-label { color: var(--blue); }
.meal-diner .meal-header-line { background: linear-gradient(90deg, var(--blue-l), transparent); }
.meal-diner .meal-item { border-color: var(--blue-l); }
.meal-diner .meal-item-icon { background: linear-gradient(135deg, var(--blue-xl), var(--blue-l)); border: 1px solid var(--blue-l); }
.meal-diner .meal-item-cal-value { color: var(--blue); }
.meal-diner .meal-add-btn { border-color: var(--blue-l); background: var(--blue-xl); color: var(--blue); }

/* ════════════════════════════════════════════
   PLACEHOLDER PAGES
   ════════════════════════════════════════════ */

.page-placeholder-icon { font-size: 3.5rem; margin-bottom: 16px; }
.page-placeholder-title {
  font-family: 'Lora', serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.page-placeholder-text {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 280px;
}
.page-placeholder-badge {
  margin-top: 20px;
  padding: 6px 16px;
  border-radius: 99px;
  font-size: .68rem;
  font-weight: 700;
  background: var(--green-xl);
  color: var(--green);
  border: 1.5px solid var(--green-l);
}

/* Page color variants */
[data-color="blue"] .page-placeholder-title { color: var(--blue); }
[data-color="blue"] .page-placeholder-badge { background: var(--blue-xl); color: var(--blue); border-color: var(--blue-l); }
[data-color="coral"] .page-placeholder-title { color: var(--coral); }
[data-color="coral"] .page-placeholder-badge { background: var(--coral-xl); color: var(--coral); border-color: var(--coral-l); }
[data-color="orange"] .page-placeholder-title { color: var(--orange); }
[data-color="orange"] .page-placeholder-badge { background: var(--orange-xl); color: var(--orange); border-color: var(--orange-l); }
[data-color="violet"] .page-placeholder-title { color: var(--violet); }
[data-color="violet"] .page-placeholder-badge { background: var(--violet-xl); color: var(--violet); border-color: var(--violet-l); }
[data-color="teal"] .page-placeholder-title { color: var(--teal); }
[data-color="teal"] .page-placeholder-badge { background: var(--teal-xl); color: var(--teal); border-color: var(--teal-l); }
[data-color="gray"] .page-placeholder-title { color: var(--gray); }
[data-color="gray"] .page-placeholder-badge { background: var(--gray-xl); color: var(--gray); border-color: var(--gray-l); }

/* ════════════════════════════════════════════
   PAGE SEMAINE
   ════════════════════════════════════════════ */

/* Poids du lundi */
.semaine-weight-card {
  background: #fff;
  border: 1.5px solid var(--coral-l);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px var(--coral-glow);
}
.semaine-weight-cols {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  width: 100%;
}
.semaine-weight-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.semaine-weight-col-right {
  align-items: flex-end;
}
.semaine-weight-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--coral-text);
  opacity: .55;
  white-space: nowrap;
}
.semaine-weight-value {
  font-family: 'Lora', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--coral);
  line-height: 1.1;
  align-self: flex-start;
}
.semaine-weight-actions {
  display: flex;
  gap: 10px;
}
.semaine-weight-vs {
  text-align: center;
  font-size: .68rem;
  color: var(--coral-text);
  opacity: .7;
  line-height: 1.5;
  margin-left: auto;
}
.semaine-weight-prev-val {
  font-family: 'Lora', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--coral-text);
  opacity: .5;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.semaine-weight-diff {
  display: inline-block;
  margin-top: 3px;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
}
.semaine-weight-diff.negative { background: var(--teal-xl); color: var(--teal); }
.semaine-weight-diff.positive { background: var(--coral-xl); color: var(--coral); }
.semaine-weight-diff.zero { background: var(--gray-xl); color: var(--gray); }

.semaine-weight-btn {
  flex: 1;
  background: var(--coral-xl);
  border: 1.5px solid var(--coral-l);
  color: var(--coral);
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 99px;
  cursor: pointer;
  transition: background .15s;
  text-align: center;
}
.semaine-weight-btn:active { background: var(--coral-l2); }

.semaine-weight-del {
  flex: 1;
  background: none;
  border: 1.5px solid var(--gray-l);
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 99px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  text-align: center;
}
.semaine-weight-del:active { border-color: var(--coral); color: var(--coral); }
.semaine-weight-del.btn-confirming { border-color: var(--coral); color: var(--coral); background: rgba(212,96,58,.08); }

.settings-del-btn {
  background: none;
  border: 1.5px solid var(--gray-l);
  color: var(--muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: .65rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.settings-del-btn:active { border-color: var(--red); color: var(--red); }

.semaine-weight-reminder {
  background: var(--coral-xl);
  border: 1.5px dashed var(--coral-l);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: .75rem;
  color: var(--coral-text);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.semaine-reminder-btn {
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 5px 12px;
  font-size: .72rem;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Préférences alimentaires ── */
.semaine-prefs-wrap {
  background: #fff;
  border: 1.5px solid var(--coral-l);
  border-radius: var(--radius-lg);
  margin-bottom: 18px;
  overflow: hidden;
}
.semaine-prefs-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--coral);
  text-align: left;
}
.semaine-prefs-chevron {
  font-size: 14px;
  font-family: sans-serif;
  transition: transform .2s;
}
.semaine-prefs-chevron.open { transform: rotate(180deg); }
.semaine-prefs-body {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--coral-l2);
}
.prefs-row { display: flex; flex-direction: column; gap: 8px; }
.prefs-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--coral-text);
  opacity: .6;
}
.prefs-hint { font-size: .65rem; opacity: .7; text-transform: none; letter-spacing: 0; font-weight: 400; }
.prefs-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.prefs-btn {
  background: var(--coral-xl);
  border: 1.5px solid var(--coral-l);
  color: var(--coral-text);
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 99px;
  cursor: pointer;
  transition: all .15s;
}
.prefs-btn.active {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.prefs-checkboxes { display: flex; flex-wrap: wrap; gap: 6px; }
.prefs-check {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--coral-xl);
  border: 1.5px solid var(--coral-l);
  border-radius: 99px;
  padding: 4px 10px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--coral-text);
  cursor: pointer;
  transition: all .15s;
}
.prefs-check:has(input:checked) {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.prefs-check input { display: none; }
.prefs-section { margin-bottom: 14px; }
.prefs-section:last-child { margin-bottom: 0; }
.prefs-btn-group { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.prefs-label-hint { font-size: .62rem; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .7; }
.prefs-input {
  width: 100%; margin-top: 6px;
  border: 1.5px solid var(--coral-l);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: .85rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--coral-xl);
  box-sizing: border-box;
}
.prefs-input:focus { outline: none; border-color: var(--coral); }
.prefs-textarea {
  width: 100%;
  border: 1.5px solid var(--coral-l);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  color: var(--ink);
  background: var(--coral-xl);
  resize: none;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}
.prefs-textarea:focus { border-color: var(--coral); }

.semaine-courses-facteurs {
  background: var(--coral-xl);
  border: 1px solid var(--coral-l);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.facteurs-title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--coral);
  margin-bottom: 8px;
}
.facteurs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 8px;
}
.facteurs-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
}
.facteurs-key {
  color: var(--coral-text);
  opacity: .6;
  font-weight: 600;
}
.facteurs-key::after { content: " :"; }
.facteurs-val {
  color: var(--coral-text);
  font-weight: 700;
}
.facteurs-note {
  font-size: .62rem;
  color: var(--coral-text);
  opacity: .55;
  font-style: italic;
}

.semaine-item-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 2px;
}
.semaine-item-delete-btn {
  background: none;
  border: none;
  font-size: .72rem;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  opacity: .6;
  transition: opacity .15s;
}
.semaine-item-delete-btn:active { opacity: 1; }

.modal-comp-ignore {
  width: 100%;
  margin-top: 4px;
  background: var(--coral-xl);
  border: 1.5px solid var(--coral-l);
  border-radius: var(--radius);
  color: var(--coral);
  font-size: .82rem;
  font-weight: 700;
  padding: 12px;
  cursor: pointer;
  transition: background .15s;
}
.modal-comp-ignore:active { background: var(--coral-l2); }

.semaine-macros-bar {
  background: #fff;
  border: 1.5px solid var(--coral-l);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.smb-title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--coral);
  margin-bottom: 10px;
}
.smb-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.smb-item { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.smb-label {
  font-size: .55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
}
.smb-value {
  font-size: .82rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}
.smb-unit { font-size: .58rem; font-weight: 600; color: var(--muted); }
.smb-bar-wrap {
  height: 4px;
  background: var(--coral-xl);
  border-radius: 4px;
  overflow: hidden;
  margin: 3px 0;
}
.smb-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--coral-l);
  transition: width .4s ease;
}
.macro-ok .smb-bar-fill { background: #5ba99e; }
.macro-warn .smb-bar-fill { background: var(--orange, #FFB366); }
.macro-off .smb-bar-fill { background: var(--coral); }
.smb-target {
  font-size: .55rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.macro-ok .smb-target { color: #5ba99e; }
.macro-warn .smb-target { color: var(--orange, #e09050); }
.macro-off .smb-target { color: var(--coral); }
.smb-note {
  font-size: .58rem;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  margin-top: 4px;
}

.facteurs-coherence {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--coral-l);
  font-size: .65rem;
  line-height: 1.4;
}
.coherence-ok { color: var(--teal, #5ba99e); font-weight: 600; }
.coherence-warn { color: var(--coral); font-weight: 600; font-style: italic; }

/* Section header */
.modal-comp-panel {
  border-top: 2px solid var(--coral);
}

.modal-comp-desc {
  font-size: .80rem;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.5;
}
.modal-comp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  max-height: 45vh;
  overflow-y: auto;
}
.modal-comp-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--coral-xl);
  border: 1.5px solid var(--coral-l);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  transition: background .15s;
}
.modal-comp-item:active { background: var(--coral-l2); }
.modal-comp-rank {
  font-size: .65rem;
  font-weight: 800;
  color: #fff;
  background: var(--coral);
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.modal-comp-info { flex: 1; min-width: 0; }
.modal-comp-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
}
.modal-comp-detail {
  font-size: .72rem;
  color: var(--coral);
  font-weight: 600;
  margin-top: 1px;
}
.modal-comp-reason {
  font-size: .66rem;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}
.modal-comp-loading {
  text-align: center;
  padding: 20px;
  color: var(--coral);
  font-size: .82rem;
}

/* Section header */
.semaine-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.semaine-section-title {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--coral);
}
.semaine-generate-btn {
  background: linear-gradient(135deg, var(--coral-m), var(--coral));
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 3px 12px var(--coral-glow);
  transition: opacity .15s;
  min-width: 150px;
  text-align: center;
}
.semaine-generate-btn:active { opacity: .85; }

/* État vide */
.semaine-empty {
  text-align: center;
  padding: 40px 20px;
  background: var(--coral-xl);
  border: 1.5px dashed var(--coral-l);
  border-radius: var(--radius-lg);
}
.semaine-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.semaine-empty-title {
  font-family: 'Lora', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--coral);
  margin-bottom: 8px;
}
.semaine-empty-text {
  font-size: .78rem;
  color: var(--coral-text);
  opacity: .75;
  line-height: 1.5;
}

/* Liste générée */
.semaine-courses-meta {
  font-size: .72rem;
  color: var(--coral-text);
  opacity: .7;
  margin-bottom: 12px;
  font-weight: 500;
}
/* ── Progression courses ── */
.courses-progress-bar { margin-bottom: 14px; }
.courses-progress-info {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 7px;
}
.courses-progress-label { font-size: .75rem; font-weight: 600; color: var(--ink); }
.courses-toggle-all {
  background: none; border: 1.5px solid var(--gray-l); color: var(--muted);
  border-radius: 20px; font-size: .68rem; padding: 4px 12px; cursor: pointer;
  font-family: inherit; transition: border-color .15s, color .15s;
}
.courses-toggle-all:active { border-color: var(--coral); color: var(--coral); }
.courses-progress-track {
  height: 6px; background: var(--gray-l); border-radius: 99px; overflow: hidden;
}
.courses-progress-fill {
  height: 100%; background: #4caf50; border-radius: 99px;
  transition: width .3s ease;
}

.semaine-course-category {
  font-family: 'Lora', serif;
  font-size: .85rem;
  font-weight: 700;
  color: var(--coral);
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--coral-l);
}
.semaine-course-category--acc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1.5px solid var(--coral-l);
  cursor: pointer;
  text-align: left;
}
.semaine-course-category--acc .acc-chevron { font-size: 14px; font-family: sans-serif; color: var(--muted); }
.semaine-course-cat-body { margin-bottom: 4px; }
.semaine-course-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1.5px solid var(--coral-l2);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: opacity .2s;
}
.semaine-course-item.checked {
  opacity: 1;
  background: transparent;
  border-color: transparent;
  padding: 4px 14px;
  margin-bottom: 2px;
  box-shadow: none;
}
.semaine-course-item.checked .semaine-item-name {
  text-decoration: line-through;
  color: #c0b8b4;
  font-weight: 400;
  font-size: .78rem;
}
.semaine-course-item.checked .semaine-item-qty,
.semaine-course-item.checked .semaine-item-qty-display,
.semaine-course-item.checked .semaine-item-row,
.semaine-course-item.checked .semaine-item-price-display,
.semaine-course-item.checked .semaine-item-actions {
  display: none;
}
.semaine-course-item.checked .semaine-course-check {
  width: 16px;
  height: 16px;
  font-size: .6rem;
  flex-shrink: 0;
}
.semaine-course-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--coral-l);
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  transition: background .15s, border-color .15s;
  margin-top: 1px;
}
.semaine-course-item.checked .semaine-course-check {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.semaine-course-body { flex: 1; min-width: 0; }
.semaine-item-name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.semaine-item-qty {
  font-size: .72rem;
  color: var(--muted);
}
.semaine-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 4px;
}
.semaine-item-qty-display {
  font-size: .75rem;
  color: var(--coral);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px dashed var(--coral-l);
  padding-bottom: 1px;
  transition: color .15s;
}
.semaine-item-qty-display:active { color: var(--coral-text); }
.semaine-item-price-display {
  font-size: .72rem;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px dashed var(--gray-l);
  padding-bottom: 1px;
  margin-left: auto;
  transition: color .15s;
}
.semaine-item-price-display:active { color: var(--ink); }

/* Zones d'édition inline */
.semaine-item-qty-edit,
.semaine-item-price-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
}
.semaine-qty-input,
.semaine-price-input {
  flex: 1;
  border: 1.5px solid var(--coral-l);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: .78rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--coral-xl);
  outline: none;
  min-width: 0;
}
.semaine-qty-input:focus,
.semaine-price-input:focus { border-color: var(--coral); }
.semaine-price-unit {
  font-size: .75rem;
  color: var(--muted);
  flex-shrink: 0;
}
.semaine-qty-confirm,
.semaine-price-confirm {
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  font-size: .8rem;
  cursor: pointer;
  flex-shrink: 0;
}
.semaine-qty-cancel,
.semaine-price-cancel {
  background: var(--gray-xl);
  color: var(--gray);
  border: none;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  font-size: .8rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* Total */
.semaine-courses-total {
  margin-top: 20px;
  background: var(--coral-xl);
  border: 1.5px solid var(--coral-l);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  text-align: center;
}
.semaine-total-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--coral-text);
  opacity: .6;
  margin-bottom: 4px;
}
.semaine-total-value {
  font-family: 'Lora', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--coral);
}
.semaine-total-note {
  font-size: .68rem;
  color: var(--muted);
  margin-top: 4px;
}

.semaine-item-replace {
  background: none;
  border: none;
  font-size: .68rem;
  color: var(--coral);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  padding: 2px 0;
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* ════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-overlay.hidden { display: none; }

.modal-panel {
  background: #fff;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: 480px;
  padding: 20px 16px 28px;
  max-height: 85vh;
  overflow-y: auto;
  animation: slideUp .3s ease;
  border-top: 2px solid var(--page-color);
}

/* Modale ajout aliment — flex column fixe, bouton scan toujours en bas */
#modalAddFood {
  height: 72vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}

#modalScrollArea {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 25px; /* espace entre dernier aliment et bouton */
}

#btnCreateManual {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: 1.5px dashed var(--green-l);
  border-radius: 12px;
  color: var(--green-text);
  font-size: .85rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  margin-bottom: 8px;
  transition: background .15s;
}
#btnCreateManual:active { background: var(--green-xl); }

#btnScanBarcode {
  flex-shrink: 0;
  margin-top: 0;
  margin-bottom: 25px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.modal-title {
  font-family: 'Lora', serif;
  font-size: 1rem;
  font-weight: 700;
}

.modal-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1.5px solid #e0e0e0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: var(--text-muted);
  cursor: pointer;
}

.modal-label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.modal-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: .85rem;
  color: var(--text-dark);
  padding: 8px 0;
  border-bottom: 1.5px solid var(--green-l);
  background: transparent;
  font-family: 'DM Sans', sans-serif;
}

/* Search results */
.search-results {
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: background .15s;
}
.search-result-item:hover { background: var(--green-xl); }

.search-result-fav {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  padding: 0;
  line-height: 1;
}

.search-result-info { flex: 1; }
.search-result-name { font-size: .8rem; font-weight: 500; color: var(--text-dark); }
.search-result-meta { font-size: .58rem; color: var(--text-muted); }
.search-result-macros { font-size: .58rem; color: var(--text-muted); font-weight: 600; }

/* No results */
.no-results {
  text-align: center;
  padding: 20px 0;
}
.no-results p { font-size: .82rem; color: var(--text-muted); margin-bottom: 10px; }

/* Custom food form */
.custom-form {
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--radius);
  animation: fadeIn .25s ease;
}
.custom-form-title {
  font-family: 'Lora', serif;
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.custom-field { margin-bottom: 8px; }
.custom-field label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}
.custom-field input {
  width: 100%;
  border: none;
  outline: none;
  font-size: .82rem;
  color: var(--text-dark);
  padding: 6px 0;
  border-bottom: 1px solid var(--green-l);
  background: transparent;
  font-family: 'DM Sans', sans-serif;
}

/* Portion section */
.portion-section { margin-top: 16px; }

.portion-presets {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.portion-preset-btn {
  padding: 8px 12px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  transition: all .2s;
}
.portion-preset-btn.active {
  border-color: var(--page-color);
  color: var(--page-color);
}

.portion-preset-unit {
  border-color: var(--teal-l);
  color: var(--teal);
  background: var(--teal-xl);
}
.portion-preset-unit.active {
  border-color: var(--teal);
  background: var(--teal-l);
}

.portion-preset-save-unit {
  border-style: dashed;
  color: var(--text-muted);
  font-style: italic;
  font-size: .68rem;
  width: 100%;
}
.portion-preset-save-unit:hover {
  border-color: var(--teal-l);
  color: var(--teal);
  background: var(--teal-xl);
}

.portion-input-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 16px;
}
.portion-input {
  width: 80px;
  border: none;
  outline: none;
  font-size: 1.2rem;
  font-family: 'Lora', serif;
  font-weight: 700;
  padding: 4px 0;
  border-bottom: 1.5px solid var(--green-l);
  background: transparent;
  text-align: center;
}
.portion-unit {
  font-family: 'Lora', serif;
  font-size: .88rem;
  font-weight: 700;
  opacity: .45;
}

.portion-macros {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  padding: 14px 12px;
  border-radius: var(--radius);
}
.portion-macro { flex: 1; text-align: center; }
.portion-macro-label {
  font-size: .5rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.portion-macro-value {
  font-family: 'Lora', serif;
  font-size: .82rem;
  font-weight: 700;
}
.portion-macro-value span { font-size: .5rem; opacity: .5; }
.portion-macro:first-child .portion-macro-value { font-size: 1.1rem; }

/* Primary button */
.btn-primary {
  width: 100%;
  padding: 15px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  color: #fff;
  font-family: 'Lora', serif;
  font-size: .95rem;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  transition: transform .1s;
  background: linear-gradient(135deg, var(--green-l), var(--green));
}
.btn-primary:active { transform: scale(.97); }

/* Weight modal */
.modal-weight { max-height: 50vh; }
.modal-meal-dejeuner#modalEditNutrition { max-height: 96vh; }
#modalEditNutrition { max-height: 96vh; }
.modal-title-weight { color: var(--page-text); }
.modal-label-weight { color: var(--page-text); }
.weight-input-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 20px;
}
.weight-input {
  width: 120px;
  border: none;
  outline: none;
  font-size: 2rem;
  font-family: 'Lora', serif;
  font-weight: 700;
  color: var(--page-color);
  padding: 4px 0;
  border-bottom: 2px solid var(--page-border);
  background: transparent;
  text-align: center;
}
.weight-unit {
  font-family: 'Lora', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--page-color);
  opacity: .45;
}
.btn-weight { background: linear-gradient(135deg, var(--page-border), var(--page-color)); }

/* ════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .78rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius);
  z-index: 9998;
  white-space: normal;
  min-width: 280px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  animation: toastIn .3s ease;
}
.toast.hidden { display: none; }
.toast.toast-green { background: #e6f7ef; color: var(--green); }
.toast.toast-coral { background: var(--coral-xl); color: var(--coral); }
.toast.toast-gray { background: var(--gray-xl); color: var(--gray); }
.toast.toast-red { background: #fde8e4; color: var(--red); }
.toast.toast-violet { background: var(--violet-xl); color: var(--violet); }

/* ════════════════════════════════════════════
   UTILITY
   ════════════════════════════════════════════ */
.hidden { display: none !important; }

/* ════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════ */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ════════════════════════════════════════════
   DYNAMIC MODAL COLORS (set via JS classes)
   ════════════════════════════════════════════ */
.modal-meal-petit-dej .modal-panel { border-top-color: var(--orange); }
.modal-meal-petit-dej .modal-title { color: var(--orange); }
.modal-meal-petit-dej .modal-label { color: var(--orange); }
.modal-meal-petit-dej .modal-input { border-bottom-color: var(--orange-l); }
.modal-meal-petit-dej .search-result-item:hover { background: var(--orange-xl); }
.modal-meal-petit-dej .custom-form { background: var(--orange-xl); border: 1px solid var(--orange-l); }
.modal-meal-petit-dej .custom-form-title { color: var(--orange); }
.modal-meal-petit-dej .custom-field label { color: var(--orange); }
.modal-meal-petit-dej .custom-field input { border-bottom-color: var(--orange-l); }
.modal-meal-petit-dej .portion-preset-btn.active { border-color: var(--orange); color: var(--orange); background: linear-gradient(135deg, var(--orange-xl), var(--orange-l)); }
.modal-meal-petit-dej .portion-input { color: var(--orange); border-bottom-color: var(--orange-l); }
.modal-meal-petit-dej .portion-unit { color: var(--orange); }
.modal-meal-petit-dej .portion-macros { background: var(--orange-xl); border: 1px solid var(--orange-l); }
.modal-meal-petit-dej .portion-macro-value { color: var(--orange); }
.modal-meal-petit-dej .btn-primary { background: linear-gradient(135deg, var(--orange-l), var(--orange)); }

.modal-meal-dejeuner .modal-panel { border-top-color: var(--green); }
.modal-meal-dejeuner .modal-title { color: var(--green); }
.modal-meal-dejeuner .modal-label { color: var(--green); }
.modal-meal-dejeuner .modal-input { border-bottom-color: var(--green-l); }
.modal-meal-dejeuner .search-result-item:hover { background: var(--green-xl); }
.modal-meal-dejeuner .custom-form { background: var(--green-xl); border: 1px solid var(--green-l); }
.modal-meal-dejeuner .custom-form-title { color: var(--green); }
.modal-meal-dejeuner .custom-field label { color: var(--green); }
.modal-meal-dejeuner .custom-field input { border-bottom-color: var(--green-l); }
.modal-meal-dejeuner .portion-preset-btn.active { border-color: var(--green); color: var(--green); background: linear-gradient(135deg, var(--green-xl), var(--green-l)); }
.modal-meal-dejeuner .portion-input { color: var(--green); border-bottom-color: var(--green-l); }
.modal-meal-dejeuner .portion-unit { color: var(--green); }
.modal-meal-dejeuner .portion-macros { background: var(--green-xl); border: 1px solid var(--green-l); }
.modal-meal-dejeuner .portion-macro-value { color: var(--green); }
.modal-meal-dejeuner .btn-primary { background: linear-gradient(135deg, var(--green-l), var(--green)); }

.modal-meal-encas .modal-panel { border-top-color: var(--violet); }
.modal-meal-encas .modal-title { color: var(--violet); }
.modal-meal-encas .modal-label { color: var(--violet); }
.modal-meal-encas .modal-input { border-bottom-color: var(--violet-l); }
.modal-meal-encas .search-result-item:hover { background: var(--violet-xl); }
.modal-meal-encas .custom-form { background: var(--violet-xl); border: 1px solid var(--violet-l); }
.modal-meal-encas .custom-form-title { color: var(--violet); }
.modal-meal-encas .custom-field label { color: var(--violet); }
.modal-meal-encas .custom-field input { border-bottom-color: var(--violet-l); }
.modal-meal-encas .portion-preset-btn.active { border-color: var(--violet); color: var(--violet); background: linear-gradient(135deg, var(--violet-xl), var(--violet-l)); }
.modal-meal-encas .portion-input { color: var(--violet); border-bottom-color: var(--violet-l); }
.modal-meal-encas .portion-unit { color: var(--violet); }
.modal-meal-encas .portion-macros { background: var(--violet-xl); border: 1px solid var(--violet-l); }
.modal-meal-encas .portion-macro-value { color: var(--violet); }
.modal-meal-encas .btn-primary { background: linear-gradient(135deg, var(--violet-l), var(--violet)); }

.modal-meal-diner .modal-panel { border-top-color: var(--blue); }
.modal-meal-diner .modal-title { color: var(--blue); }
.modal-meal-diner .modal-label { color: var(--blue); }
.modal-meal-diner .modal-input { border-bottom-color: var(--blue-l); }
.modal-meal-diner .search-result-item:hover { background: var(--blue-xl); }
.modal-meal-diner .custom-form { background: var(--blue-xl); border: 1px solid var(--blue-l); }
.modal-meal-diner .custom-form-title { color: var(--blue); }
.modal-meal-diner .custom-field label { color: var(--blue); }
.modal-meal-diner .custom-field input { border-bottom-color: var(--blue-l); }
.modal-meal-diner .portion-preset-btn.active { border-color: var(--blue); color: var(--blue); background: linear-gradient(135deg, var(--blue-xl), var(--blue-l)); }
.modal-meal-diner .portion-input { color: var(--blue); border-bottom-color: var(--blue-l); }
.modal-meal-diner .portion-unit { color: var(--blue); }
.modal-meal-diner .portion-macros { background: var(--blue-xl); border: 1px solid var(--blue-l); }
.modal-meal-diner .portion-macro-value { color: var(--blue); }
.modal-meal-diner .btn-primary { background: linear-gradient(135deg, var(--blue-l), var(--blue)); }

/* ════════════════════════════════════════════
   EDIT MODAL
   ════════════════════════════════════════════ */
.edit-food-name {
  font-family: 'Lora', serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--green-xl);
  border-radius: 10px;
  border: 1px solid var(--green-l);
}

.edit-override-btn:hover { border-color: var(--green); color: var(--green); }
.edit-override-btn.active { border-color: var(--orange); color: var(--orange); border-style: solid; }

.edit-macro-field label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--green);
  display: block;
  margin-bottom: 2px;
}
.edit-macro-field input {
  width: 100%;
  border: none;
  outline: none;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-dark);
  padding: 6px 30px 6px 0;
  border-bottom: 1.5px solid var(--green-l);
  background: transparent;
  font-family: 'DM Sans', sans-serif;
}

/* ════════════════════════════════════════════
   PAGE 4: MES ALIMENTS
   ════════════════════════════════════════════ */
.aliments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.aliments-title {
  font-family: 'Lora', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--teal);
}
.aliments-add-btn {
  background: linear-gradient(135deg, var(--teal-l), var(--teal));
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}

.aliments-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  margin-top: 4px;
  overflow-x: auto;
  padding-bottom: 2px; /* évite le clip sur le scroll horizontal */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.aliments-tabs::-webkit-scrollbar { display: none; }
.aliments-tab {
  padding: 7px 14px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 600;
  border: 1.5px solid var(--teal-l);
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
  transition: all .15s;
}
.aliments-tab.active {
  background: linear-gradient(135deg, var(--teal-xl), var(--teal-l));
  color: var(--teal);
  border-color: var(--teal);
}
/* Onglet Repas Semaine — couleur corail pour le lien visuel avec la page Semaine */
.aliments-tab-semaine {
  border-color: var(--coral-l);
  color: var(--coral);
}
.aliments-tab-semaine.active {
  background: linear-gradient(135deg, var(--coral-xl), var(--coral-l2));
  color: var(--coral);
  border-color: var(--coral);
}

.aliments-search {
  width: 100%;
  border: 1.5px solid var(--teal-l);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: .82rem;
  color: var(--text-dark);
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  margin-bottom: 14px;
  transition: border-color .15s;
}
.aliments-search:focus { border-color: var(--teal); }

.aliments-category { margin-bottom: 16px; }
.aliments-cat-header {
  font-family: 'Lora', serif;
  font-size: .8rem;
  font-weight: 700;
  color: var(--teal);
  padding: 6px 0;
  border-bottom: 1px solid var(--teal-l);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.aliments-cat-count {
  font-family: 'DM Sans', sans-serif;
  font-size: .6rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--teal-xl);
  padding: 2px 8px;
  border-radius: 99px;
}

.aliment-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-radius: var(--radius);
  border: 1.5px solid var(--teal-l);
  margin-bottom: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.025);
}
.aliment-card-fav {
  background: none;
  border: none;
  font-size: .95rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.aliment-card-semaine {
  background: none;
  border: none;
  font-size: .85rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  opacity: .3;
  transition: opacity .15s, transform .15s;
}
.aliment-card-semaine.active {
  opacity: 1;
}
.aliment-card-semaine:active { transform: scale(.85); }
.aliment-card-info { flex: 1; min-width: 0; }
.aliment-card-name {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aliment-card-macros {
  font-size: .58rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.aliment-card-cal {
  font-family: 'Lora', serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--teal);
  flex-shrink: 0;
}
.aliment-card-cal span { font-size: .5rem; color: var(--text-muted); margin-left: 1px; }
.aliment-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.aliment-card-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(0,0,0,.04);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  color: var(--text-muted);
  transition: background .15s;
}
.aliment-card-btn:hover { background: rgba(42,138,122,.12); color: var(--teal); }
.aliment-card-btn.delete-btn:hover { background: rgba(42,138,122,.12); color: var(--teal); }
.aliment-card-btn.delete-btn.btn-confirming { background: rgba(212,96,58,.12); color: var(--red); }
.aliment-card-btn.delete-btn.btn-confirming:hover { background: rgba(212,96,58,.18); color: var(--red); }

.aliment-card-badge {
  font-size: .5rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  background: var(--orange-xl);
  color: var(--orange);
  flex-shrink: 0;
}

.aliments-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}
.aliments-empty-icon { font-size: 2.5rem; margin-bottom: 10px; }
.aliments-empty-text { font-size: .82rem; }

/* ════════════════════════════════════════════
   PAGE 5: RÉGLAGES
   ════════════════════════════════════════════ */
.settings-title {
  font-family: 'Lora', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gray);
  margin-bottom: 16px;
}

.settings-section { margin-bottom: 18px; }

.settings-section-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray);
  margin-bottom: 8px;
  padding-left: 2px;
}

.settings-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  border: 1.5px solid var(--gray-l);
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.settings-card-tdee {
  background: linear-gradient(135deg, #f8faf8, #f0f4f0);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.settings-row:last-child { border-bottom: none; }

.settings-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-dark);
  flex-shrink: 0;
  margin-right: 12px;
}

.settings-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-input {
  width: 70px;
  border: none;
  outline: none;
  font-size: .95rem;
  font-family: 'Lora', serif;
  font-weight: 700;
  color: var(--gray);
  padding: 0;
  border-bottom: 1.5px solid var(--gray-l);
  background: transparent;
  text-align: center;
  transition: border-color .15s;
  line-height: 1;
}
.settings-input:focus { border-color: var(--gray); }
.settings-input-accent { color: var(--gray); width: 80px; }
.settings-input-accent:focus { border-color: var(--gray); }

.settings-unit {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.settings-computed {
  font-size: .72rem;
  font-weight: 700;
  color: var(--green);
  margin-left: 4px;
  white-space: nowrap;
}

.settings-select {
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-dark);
  border: 1.5px solid var(--gray-l);
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
  outline: none;
  max-width: 200px;
  cursor: pointer;
  transition: border-color .15s;
}
.settings-select:focus { border-color: var(--gray); }

.settings-toggle-group {
  display: flex;
  gap: 4px;
}
.settings-toggle-3 { gap: 3px; }

.settings-toggle {
  padding: 7px 14px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 600;
  border: 1.5px solid var(--gray-l);
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .15s;
  white-space: nowrap;
}
.settings-toggle.active {
  background: linear-gradient(135deg, var(--gray-xl), var(--gray-l2));
  color: var(--gray);
  border-color: var(--gray-l);
}

.settings-note {
  font-size: .62rem;
  color: var(--text-muted);
  margin-top: 6px;
  font-style: italic;
  padding-left: 2px;
}

/* Poids — coral comme la page Semaine */
.settings-row:has(#settingWeight) .settings-input { color: var(--coral); }
.settings-row:has(#settingWeight) .settings-input:focus { border-color: var(--coral); }
.settings-row:has(#settingWeight) .settings-unit { color: var(--coral); }
.settings-input-api {
  flex: 1;
  min-width: 0;
  width: auto;
  font-family: 'DM Sans', monospace;
  font-size: .72rem;
  letter-spacing: .02em;
  text-align: left;
}

.settings-macro-prot .settings-label { color: var(--blue); }
.settings-macro-prot .settings-input { color: var(--blue); }
.settings-macro-prot .settings-input:focus { border-color: var(--blue); }
.settings-macro-prot .settings-computed { color: var(--blue); opacity: .7; }

.settings-macro-gluc .settings-label { color: var(--orange); }
.settings-macro-gluc .settings-input { color: var(--orange); }
.settings-macro-gluc .settings-input:focus { border-color: var(--orange); }
.settings-macro-gluc .settings-computed { color: var(--orange); opacity: .7; }

.settings-macro-lip .settings-label { color: var(--rose); }
.settings-macro-lip .settings-input { color: var(--rose); }
.settings-macro-lip .settings-input:focus { border-color: var(--rose); }
.settings-macro-lip .settings-computed { color: var(--rose); opacity: .7; }

/* TDEE display */
.tdee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}
.tdee-row + .tdee-row { border-top: 1px solid rgba(0,0,0,.06); }

.tdee-label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-dark);
}
.tdee-value {
  font-family: 'Lora', serif;
  font-size: .9rem;
  font-weight: 700;
  color: var(--gray);
}
.tdee-value-main {
  font-size: 1.1rem;
  color: var(--green);
}
.tdee-note {
  font-size: .58rem;
  color: var(--text-muted);
  margin-top: 6px;
  font-style: italic;
}

/* Action buttons */
.settings-action-btn {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--gray-l);
  background: #fff;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  transition: background .15s;
  margin-bottom: 6px;
}
.settings-action-btn:hover { background: var(--gray-xl); }
.settings-action-btn:last-child { margin-bottom: 0; }
.settings-action-btn--danger { color: #e53e3e; }
.settings-action-btn--danger:hover { background: var(--gray-xl); }
.settings-action-btn--danger.btn-confirming { background: #fff5f5; color: #e53e3e; }
.settings-action-btn--danger.btn-confirming:hover { background: #ffe5e5; }

/* ── Badge progression jour ── */
.plan-day-progress {
  font-size: .75rem;
  font-weight: 600;
  color: var(--gray);
  min-width: 28px;
  text-align: center;
  margin-left: auto;
  margin-right: 6px;
}
.plan-day-progress--started { color: var(--orange); }
.plan-day-all-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #48bb78;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}
.settings-import-label { cursor: pointer; }

.settings-version {
  text-align: center;
  font-size: .62rem;
  color: var(--text-muted);
  margin-top: 20px;
  padding-bottom: 20px;
}

/* ── Optional field labels ── */
.field-optional {
  font-weight: 400;
  font-size: .55rem;
  color: var(--text-muted);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Marque/Magasin badge in food cards ── */
.aliment-card-sub {
  font-size: .55rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.aliment-card-sub span {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--gray-xl);
  margin-right: 3px;
  font-weight: 500;
}
/* ════════════════════════════════════════════
   SEMAINE — SOUS-PAGES REPAS / COURSES
   ════════════════════════════════════════════ */

.semaine-sub-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0 6px;
}
.semaine-sub-tab {
  flex: 1;
  padding: 8px 4px;
  border-radius: var(--radius);
  border: 1.5px solid var(--coral-l);
  background: none;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all .2s;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}
.semaine-sub-tab.active {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.semaine-sub-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 10px;
}
.semaine-sub-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--coral-l);
  transition: background .2s;
}
.semaine-sub-dot.active { background: var(--coral); }
.semaine-sub-container { width: 100%; }
.semaine-sub-track { width: 100%; }
.semaine-sub-page { width: 100%; display: none; }
.semaine-sub-page.active { display: block; }
.semaine-repas-generate {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 10px 0 12px;
}
.semaine-reset-btn {
  background: transparent;
  border: 1.5px solid #f5c4b0;
  color: var(--muted);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: .78rem;
  cursor: pointer;
  white-space: nowrap;
  min-width: 120px;
  text-align: center;
}
.semaine-reset-btn:active { opacity: .75; }

/* ════════════════════════════════════════════
   GARDE-MANGER
   ════════════════════════════════════════════ */
.gm-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.gm-intro { font-size: 14px; color: var(--muted); line-height: 1.4; flex: 1; }
.gm-clear-btn {
  background: none; border: 1.5px solid var(--gray-l); color: var(--muted);
  border-radius: 8px; font-size: .68rem; padding: 5px 10px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0; transition: border-color .15s, color .15s;
  min-width: 120px; text-align: center;
}
.gm-clear-btn:active { border-color: var(--coral); color: var(--coral); }
.gm-category { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 6px; }
.gm-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: #fff; border: 1.5px solid #c8e6c9; border-radius: 10px; margin-bottom: 6px;
}
.gm-item-name { font-size: .78rem; font-weight: 600; color: var(--ink); }
.gm-item-qty { font-size: .74rem; font-weight: 700; color: #4caf50; cursor: pointer; white-space: nowrap; }
.gm-item-edit { display: none; align-items: center; gap: 6px; margin-top: 6px; }
.gm-item.editing .gm-item-edit { display: flex; }
.gm-qty-input { width: 80px; border: 1.5px solid var(--gray-l); border-radius: 6px; padding: 4px 8px; font-size: .76rem; font-family: inherit; }
.gm-qty-confirm, .gm-qty-cancel, .gm-item-del {
  background: none; border: 1.5px solid var(--gray-l); border-radius: 50%;
  width: 24px; height: 24px; font-size: .6rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; color: var(--muted); transition: border-color .15s, color .15s; flex-shrink: 0;
}
.gm-qty-confirm:active { border-color: #4caf50; color: #4caf50; }
.gm-qty-cancel:active, .gm-item-del:active { border-color: var(--coral); color: var(--coral); }

/* ── Validation repas ── */
.plan-repas-valider {
  background: none; border: 1.5px solid var(--gray-l); color: var(--muted);
  width: 22px; height: 22px; border-radius: 50%; font-size: .65rem;
  cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: border-color .15s, color .15s, background .15s; margin-left: 4px;
}
.plan-repas-valider.valide { background: #4caf50; border-color: #4caf50; color: #fff; }
.plan-repas-valide .plan-repas-label,
.plan-repas-valide .plan-repas-name,
.plan-repas-valide .plan-repas-kcal { opacity: .45; }
.plan-repas-valide .plan-repas-ings { opacity: .4; pointer-events: none; }

/* ── Badges stock dans courses ── */
.gm-stock-badge {
  font-size: .6rem; background: #e8f5e9; color: #388e3c;
  border: 1px solid #c8e6c9; border-radius: 5px; padding: 1px 5px;
  margin-left: 5px; font-weight: 600; vertical-align: middle;
}
.gm-stock-partial { background: #fff8e1; color: #f57f17; border-color: #ffe082; }

/* ── Plan accordéon ── */
.plan-day {
  background: #fff;
  border: 1.5px solid var(--coral-l);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.plan-day-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.plan-day-top { display: flex; align-items: center; gap: 8px; }
.plan-day-name { font-family: 'Lora', serif; font-size: .88rem; font-weight: 700; color: var(--ink); flex: 1; }
.plan-day-stats { font-size: .68rem; color: var(--coral); font-weight: 600; }
.plan-day-chevron { font-size: 14px; font-family: sans-serif; color: var(--muted); }
.plan-day-macros { display: flex; gap: 10px; padding-left: 2px; }
.day-macro { font-size: .64rem; color: var(--muted); }
.day-macro b { color: var(--ink); font-weight: 700; }
.day-macro-obj { color: var(--muted); opacity: .7; }
.day-diff-over  { color: #e07a5f; font-weight: 600; }
.day-diff-under { color: #f2a65a; font-weight: 600; }
.day-diff-ok    { color: #81b29a; font-weight: 600; }
.plan-day-body { padding: 0 14px 12px; }
.plan-repas { margin-bottom: 12px; }
.plan-repas:last-child { margin-bottom: 0; }
.plan-repas-header { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.plan-repas-label { font-size: .66rem; font-weight: 700; color: var(--coral); text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
.plan-ing-tiret { color: var(--muted); font-size: .75rem; flex-shrink: 0; margin-right: 4px; }
.plan-repas-name-unused { font-size: .76rem; font-weight: 600; color: var(--ink); flex: 1; }
.plan-repas-kcal { font-size: .64rem; color: var(--muted); white-space: nowrap; }
.plan-repas-ings { border-left: 2px solid var(--coral-xl); padding-left: 8px; display: flex; flex-direction: column; gap: 2px; }
.plan-ing { display: flex; align-items: baseline; flex-wrap: wrap; font-size: .75rem; padding: 2px 0; }
.plan-ing-nom { color: var(--ink); flex: none; }
.plan-ing-qty {
  color: var(--coral); font-weight: 600; font-size: .72rem;
  margin-left: 5px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  border-bottom: 1px dashed transparent; transition: border-color .15s;
}
.plan-ing-qty:hover { border-bottom-color: var(--coral); }
.plan-ing-edit { display: flex; align-items: center; gap: 4px; margin-left: 5px; }
.plan-ing-input {
  width: 52px; border: 1.5px solid var(--gray-l); border-radius: 6px;
  padding: 2px 6px; font-size: .72rem; font-family: inherit; text-align: center;
}
.plan-ing-input:focus { border-color: var(--coral); outline: none; }
.plan-ing-confirm, .plan-ing-cancel {
  background: none; border: 1.5px solid var(--gray-l); border-radius: 50%;
  width: 20px; height: 20px; font-size: .55rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; color: var(--muted); flex-shrink: 0;
}
.plan-ing-confirm:active { border-color: #4caf50; color: #4caf50; }
.plan-ing-cancel:active  { border-color: var(--coral); color: var(--coral); }

/* ── Macros bar repas ── */
.smb-title { font-size: .68rem; font-weight: 700; color: var(--coral); margin-bottom: 10px; }
.smb-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.smb-label { font-size: .54rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.smb-value { font-size: .82rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.smb-unit { font-size: .56rem; font-weight: 600; color: var(--muted); }
.smb-bar-wrap { height: 4px; background: var(--coral-xl); border-radius: 4px; overflow: hidden; margin: 3px 0; }
.smb-bar-fill { height: 100%; border-radius: 4px; background: var(--coral-l); transition: width .4s; }
.smb-ok .smb-bar-fill  { background: #5ba99e; }
.smb-warn .smb-bar-fill { background: #FFB366; }
.smb-off .smb-bar-fill  { background: var(--coral); }
.smb-target { font-size: .54rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smb-ok .smb-target  { color: #5ba99e; }
.smb-warn .smb-target { color: #e09050; }
.smb-off .smb-target  { color: var(--coral); }

/* ── Vue Repas Semaine (onglet Aliments) ── */
.semaine-aliments-header {
  background: linear-gradient(135deg, var(--coral-xl), var(--coral-l2));
  border: 1.5px solid var(--coral-l);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.semaine-aliments-info {
  font-size: .74rem;
  color: var(--coral);
  line-height: 1.4;
}
.semaine-aliments-count {
  font-size: .72rem;
  font-weight: 700;
  color: var(--coral);
}
.aliment-semaine-remove {
  background: none;
  border: 1.5px solid var(--gray-l);
  color: var(--muted);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: .6rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, color .15s;
}
.aliment-semaine-remove:active { border-color: var(--coral); color: var(--coral); }
.aliments-empty-sub {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
  text-align: center;
}

/* ── Configuration plan de repas (page Semaine) ── */
.plan-config-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.plan-config-section {
  background: #fff;
  border: 1.5px solid var(--coral-l);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.plan-config-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--coral);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.plan-config-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.plan-config-accordion-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
  color: var(--coral);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 0;
  text-align: left;
}
.plan-config-accordion-btn .acc-chevron { font-size: 12px !important; font-family: sans-serif; color: var(--muted); text-transform: none; letter-spacing: 0; }
.plan-config-accordion-body { margin-top: 10px; }
.plan-structure-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-structure-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--coral-xl);
  border: 1.5px solid var(--coral-l);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .15s;
  text-align: left;
}
.plan-structure-btn.active {
  background: linear-gradient(135deg, var(--coral-l2), var(--coral-l));
  border-color: var(--coral);
}
.plan-structure-name {
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
}
.plan-structure-btn.active .plan-structure-name { color: var(--coral); }
.plan-structure-sub {
  font-size: .66rem;
  color: var(--muted);
  white-space: nowrap;
  margin-left: 8px;
}
.plan-aliments-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.plan-aliments-link-text {
  font-size: .76rem;
  color: var(--ink);
  flex: 1;
  line-height: 1.4;
}
.plan-aliments-link-text.warn { color: var(--coral); font-weight: 600; }
.plan-aliments-link-btn {
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 7px 14px;
  font-size: .72rem;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Habitudes fixes (onglet Repas Semaine) ── */
.habitudes-section {
  margin-top: 20px;
  border-top: 1.5px solid var(--coral-l);
  padding-top: 16px;
}
.habitudes-header { margin-bottom: 12px; }
.habitudes-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--coral);
  margin-bottom: 4px;
}
.habitudes-desc {
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.4;
}
.habitude-row {
  background: var(--coral-xl);
  border: 1.5px solid var(--coral-l);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.habitude-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.habitude-name {
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink);
}
.habitude-cal {
  font-size: .72rem;
  font-weight: 700;
  color: var(--coral);
}
.habitude-jours {
  display: flex;
  gap: 5px;
}
.habitude-jour {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--coral-l2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.habitude-jour.active {
  background: var(--coral);
  color: #fff;
}
.habitude-del {
  position: absolute;
  bottom: 12px; right: 18px;
  background: none;
  border: 1.5px solid var(--gray-l);
  color: var(--muted);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: .6rem;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, color .15s;
}
.habitude-del:active { border-color: var(--coral); color: var(--coral); }

/* Formulaire ajout habitude */
.habitude-add-form {
  background: #fff;
  border: 1.5px dashed var(--coral-l);
  border-radius: 10px;
  padding: 12px;
  margin-top: 10px;
}
.habitude-add-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--coral);
  margin-bottom: 8px;
}
.habitude-search-input {
  width: 100%;
  border: 1.5px solid var(--coral-l);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: .78rem;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  box-sizing: border-box;
}
.habitude-search-results {
  background: #fff;
  border: 1.5px solid var(--coral-l);
  border-radius: 8px;
  margin-top: 4px;
  overflow: hidden;
}
.habitude-search-results.hidden { display: none; }
.hab-search-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: .76rem;
  cursor: pointer;
  border-bottom: 1px solid var(--coral-xl);
}
.hab-search-item:last-child { border-bottom: none; }
.hab-search-item:active { background: var(--coral-xl); }
.hab-search-cal { color: var(--coral); font-weight: 600; font-size: .7rem; }
.habitude-form-row { margin-top: 10px; }
.habitude-form-row.hidden { display: none; }
.habitude-selected-name {
  font-size: .76rem;
  font-weight: 700;
  color: var(--coral);
  margin-bottom: 8px;
}
.habitude-form-inputs { display: flex; flex-direction: column; gap: 8px; }
.habitude-qty-input {
  border: 1.5px solid var(--coral-l);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: .78rem;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.habitude-repas-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.habitude-repas-btn {
  background: var(--coral-xl);
  border: 1.5px solid var(--coral-l);
  border-radius: 99px;
  padding: 5px 10px;
  font-size: .68rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  color: var(--muted);
  transition: all .15s;
}
.habitude-repas-btn.active {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.habitude-jours-row {
  display: flex;
  gap: 5px;
}
.habitude-jour-pick {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--coral-xl);
  border: 1.5px solid var(--coral-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.habitude-jour-pick.active {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.habitude-add-btn {
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 8px 16px;
  font-size: .76rem;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  width: 100%;
}

/* ── Portions habitudes ── */
.habitude-qty-row { display: flex; flex-direction: column; gap: 6px; }
.habitude-portion-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.habitude-portion-btn {
  background: var(--coral-xl);
  border: 1.5px solid var(--coral-l);
  border-radius: 99px;
  padding: 4px 10px;
  font-size: .66rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  color: var(--muted);
  transition: all .15s;
}
.habitude-portion-btn.active {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}

/* ── Toggle petit-déjeuner sucré/salé ── */
.plan-bf-toggle { display: flex; gap: 8px; }
.plan-bf-btn {
  flex: 1;
  background: var(--coral-xl);
  border: 1.5px solid var(--coral-l);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: .78rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  color: var(--muted);
  transition: all .15s;
}
.plan-bf-btn.active {
  background: linear-gradient(135deg, var(--coral-l2), var(--coral-l));
  border-color: var(--coral);
  color: var(--coral);
}

/* ── Accordéon aliments ── */
.aliments-accordion-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--teal-l);
  margin-bottom: 6px;
  margin-top: 12px;
  cursor: pointer;
  user-select: none;
}
.aliments-accordion-icon {
  font-size: 14px;
  font-family: sans-serif;
  color: var(--teal);
  width: 14px;
  flex-shrink: 0;
}
.facteurs-chevron { font-size: 14px; font-family: sans-serif; color: var(--muted); }
.aliments-accordion-cat {
  flex: 1;
  font-family: 'Lora', serif;
  font-size: .8rem;
  font-weight: 700;
  color: var(--teal);
}
.aliments-accordion-count {
  font-family: 'DM Sans', sans-serif;
  font-size: .6rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--teal-xl);
  padding: 2px 8px;
  border-radius: 99px;
}
.aliments-accordion-body {
  display: none;
  margin-bottom: 8px;
}
.aliments-accordion-body.open {
  display: block;
}
/* ═══════════════════════════════════════
   AUTH OVERLAY
   ═══════════════════════════════════════ */

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(145deg, var(--teal-xl), #f0fdf4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 10px 24px;
  background: white;
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(0,0,0,.08);
}

.auth-logo {
  text-align: center;
  margin-bottom: 12px;
}

.auth-logo-img {
  display: block;
  margin: 0 auto 6px;
  width: 200px;
  height: 200px;
  border-radius: 24px;
}

.auth-logo-name {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--teal-text);
  margin-bottom: 40px;
}

.auth-title {
  font-family: 'Lora', serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}

.auth-desc {
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.4;
}

.auth-input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--teal-l);
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  color: var(--ink);
  background: var(--bg-card);
  outline: none;
  margin-bottom: 10px;
  transition: border-color .2s;
  box-sizing: border-box;
}

.auth-input:focus { border-color: var(--teal); }
.auth-input::placeholder { color: var(--muted); }

.auth-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--teal-m), var(--teal));
  color: white;
  font-family: 'Lora', serif;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  transition: opacity .2s;
}

.auth-btn:active { opacity: .85; }
.auth-btn:disabled { opacity: .5; cursor: default; }

.auth-btn-google {
  background: #fff;
  color: var(--ink);
  border: 1.5px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
}

.auth-btn-google:hover { background: #f8f8f8; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
  color: var(--muted);
  font-size: .75rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--teal-l);
}

.auth-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.auth-links a {
  font-size: .76rem;
  color: var(--teal);
  text-decoration: none;
  font-weight: 600;
}

.auth-links a:active { opacity: .7; }

.auth-skip {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  border: none;
  background: none;
  font-family: 'DM Sans', sans-serif;
  font-size: .76rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
}

.auth-message {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .78rem;
  margin-bottom: 14px;
  text-align: center;
}

.auth-message-error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.auth-message-success {
  background: var(--teal-xl);
  color: var(--teal-text);
  border: 1px solid var(--teal-l);
}

/* ═══════════════════════════════════════
   CLOUD SECTION (Réglages)
   ═══════════════════════════════════════ */

.cloud-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--teal-xl);
  border-radius: 12px;
  margin-bottom: 10px;
}

.cloud-user-email {
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
}

.cloud-user-status {
  font-size: .68rem;
  font-weight: 700;
  color: var(--teal);
  background: rgba(42,138,122,.12);
  padding: 3px 10px;
  border-radius: 20px;
}

.cloud-info {
  text-align: center;
  font-size: .68rem;
  color: var(--muted);
  padding: 6px 0;
}

.cloud-guest {
  text-align: center;
  padding: 16px;
}

.cloud-guest-text {
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.4;
}

.cloud-login-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--teal-m), var(--teal));
  color: white;
  font-family: 'Lora', serif;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
}

.cloud-login-btn:active { opacity: .85; }

.settings-link-danger { color: var(--coral) !important; }
.settings-link-danger .settings-arrow { color: var(--coral); }
/* ── Scanner code-barres ────────────────────────── */
.btn-scan-barcode {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 16px;
  background: var(--green-xl); border: 1.5px solid var(--green-l);
  border-radius: 12px; color: var(--green-text);
  font-size: .9rem; font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer; margin-bottom: 10px;
  transition: background .15s;
}
.btn-scan-barcode:active { background: var(--green-l2); }

.scanner-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-end; }
.scanner-modal.hidden { display: none; }
.scanner-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.scanner-container {
  position: relative; z-index: 1; width: 100%;
  background: var(--bg, #fff); border-radius: 20px 20px 0 0;
  padding: 0 0 24px; overflow: hidden;
}
.scanner-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--gray-l, #eee);
}
.scanner-title { font-size: 1rem; font-weight: 700; }
.scanner-close {
  background: none; border: none; font-size: 1.1rem;
  color: var(--gray, #888); cursor: pointer; padding: 4px 8px;
}
.scanner-video-wrap {
  position: relative; width: 100%; aspect-ratio: 4/3;
  background: #000; overflow: hidden;
}
.scanner-video-wrap video { width: 100%; height: 100%; object-fit: cover; }
.scanner-crosshair {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 220px; height: 110px;
  border: 2.5px solid rgba(255,255,255,.9);
  border-radius: 8px;
  box-shadow: 0 0 0 2000px rgba(0,0,0,.35);
}
.scanner-status {
  text-align: center; padding: 12px 16px 4px;
  font-size: .85rem; color: var(--gray, #888);
}
.scanner-result {
  margin: 10px 16px 0; padding: 14px 16px;
  background: var(--green-xl, #e8f5e9); border-radius: 12px;
  border: 1.5px solid var(--green-l, #a5d6a7);
}
.scanner-result.hidden { display: none; }
.scanner-result-name { font-weight: 700; font-size: .95rem; margin-bottom: 6px; }
.scanner-result-macros { font-size: .82rem; color: var(--gray-d, #555); margin-bottom: 12px; }
.scanner-result .btn-primary { width: 100%; }

/* ── Header aliments avec scan ───────────────────── */
/* ── Bouton Ajouter (page Aliments) ─────────────── */
.aliments-header { justify-content: center; margin-bottom: 16px; }

#btnAjouter {
  background: linear-gradient(135deg, var(--teal-l), var(--teal));
  color: #fff;
  border: none;
  padding: 11px 28px;
  border-radius: 99px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 3px 10px var(--teal-glow);
  transition: opacity .15s, transform .1s;
}
#btnAjouter:active { opacity: .85; transform: scale(.97); }

/* ── Bottom sheet Ajouter — calqué sur .modal-panel ─ */
.aliments-bs-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.45);
  animation: bsOverlayIn .2s ease;
}
.aliments-bs-overlay.hidden { display: none; }
@keyframes bsOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.aliments-bs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 301;
  background: #fff;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 20px 16px 36px;
  border-top: 2px solid var(--teal);
  box-shadow: 0 -4px 24px rgba(0,0,0,.10);
  animation: bsSlideIn .25s cubic-bezier(.2,.9,.4,1);
}
.aliments-bs.hidden { display: none; }
@keyframes bsSlideIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.aliments-bs-title { color: var(--teal); }

/* Bouton Scanner — identique à .btn-scan-barcode de Aujourd'hui mais teal */
.aliments-bs-scan {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 16px;
  background: var(--teal-xl); border: 1.5px solid var(--teal-l);
  border-radius: 12px; color: var(--teal-text);
  font-size: .9rem; font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer; margin-bottom: 10px; justify-content: center;
  transition: background .15s;
}
.aliments-bs-scan:active { background: var(--teal-l2); }

/* Créer manuellement — discret */
.aliments-bs-create {
  display: block; width: 100%; padding: 11px;
  background: none; border: 1.5px solid var(--teal-l2);
  border-radius: 12px; color: var(--muted);
  font-size: .85rem; font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer; text-align: center;
  transition: background .15s, color .15s;
}
.aliments-bs-create:active { background: var(--teal-xl); color: var(--teal); }

/* ── Sous-filtres onglet Mes Aliments ────────────── */
.aliments-subfiler-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 4px 0 12px;
}
.aliments-subfiler-btn {
  padding: 5px 13px; border-radius: 20px; font-size: .8rem; font-weight: 600;
  border: 1.5px solid var(--gray-l, #ddd); background: var(--bg, #fff);
  color: var(--gray-d, #555); cursor: pointer; transition: all .15s;
}
.aliments-subfiler-btn.active {
  background: var(--teal-d, #00695c); border-color: var(--teal-d, #00695c);
  color: #fff;
}
/* ── Badge version deploy ── */
.app-version-badge {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: "DM Sans", sans-serif;
  color: #FFE000;
  text-align: center;
  letter-spacing: 0.05em;
  margin-top: 2px;
  text-shadow: 0 0 6px rgba(255,200,0,0.6);
}

/* ════════════════════════════════════════════
   BANNIÈRE PROFIL INCOMPLET (Page Aujourd'hui)
   ════════════════════════════════════════════ */
.profile-incomplete-banner {
  background: #e8f3fd;
  border: 1px solid #a8d5f7;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .82rem;
  color: #1a3f7a;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-banner-btn {
  background: #3a78c9;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: .8rem;
  cursor: pointer;
  white-space: nowrap;
}

/* ════════════════════════════════════════════
   PAGE OBJECTIFS
   ════════════════════════════════════════════ */

.obj-motivation-card {
  background: linear-gradient(135deg, var(--orange-xl), var(--orange-l2));
  border: 1.5px solid var(--orange-l);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: .82rem;
  color: var(--orange-text);
  line-height: 1.5;
  text-align: center;
}
.obj-motivation-text strong { font-weight: 700; }

.obj-section-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--orange-text);
  margin: 0 0 8px 2px;
  padding-left: 2px;
}

.obj-card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--orange-l);
  box-shadow: 0 2px 10px var(--orange-glow);
  padding: 14px 16px;
  margin-bottom: 18px;
}

.obj-weight-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 14px;
}
.obj-weight-col { text-align: center; flex: 1; }
.obj-weight-col-current { flex: 1.2; }
.obj-weight-label {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.obj-weight-val {
  font-family: 'Lora', serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-dark);
}
.obj-weight-current { font-size: 1.15rem; color: var(--orange); }

.obj-progress-bar-bg {
  height: 10px;
  background: var(--orange-xl);
  border-radius: 99px;
  position: relative;
  overflow: visible;
  margin-bottom: 8px;
}
.obj-progress-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--orange);
  transition: width .5s ease;
  min-width: 4px;
}
.obj-progress-bar-fill.on-track  { background: var(--teal); }
.obj-progress-bar-fill.off-track { background: var(--orange-m); }
.obj-progress-cursor {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--orange);
  transition: left .5s ease;
}
.obj-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.obj-estimate {
  font-size: .72rem;
  color: var(--teal);
  text-align: center;
  padding-top: 6px;
  border-top: 1px solid var(--orange-xl);
}
.obj-estimate.hidden { display: none; }

.obj-card-input .obj-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.obj-input-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-dark);
  flex: 1;
}
.obj-input-group { display: flex; gap: 6px; align-items: center; }
.obj-input {
  width: 72px;
  border: 1.5px solid var(--orange-l);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: .88rem;
  font-family: inherit;
  text-align: center;
  outline: none;
}
.obj-input:focus { border-color: var(--orange); }
.obj-input-btn {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 34px; height: 34px;
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.obj-cal-card .obj-cal-row {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.obj-cal-label {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.obj-cal-val {
  font-family: 'Lora', serif;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-dark);
}
.obj-cal-val.on-track { color: var(--teal); }
.obj-cal-val.over     { color: var(--coral); }

/* ════════════════════════════════════════════
   PAGE STATISTIQUES
   ════════════════════════════════════════════ */

.stats-message-card {
  background: linear-gradient(135deg, var(--violet-xl), #f0eaf8);
  border: 1.5px solid var(--violet-l);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 10px rgba(124,77,189,.08);
  padding: 14px 18px;
  margin-bottom: 18px;
  font-size: .82rem;
  color: #4a2e7a;
  text-align: center;
  font-style: italic;
  line-height: 1.5;
}

.stats-section-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #4a2e7a;
  margin: 0 0 8px 2px;
  padding-left: 2px;
}

.stats-card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--violet-l);
  box-shadow: 0 2px 10px rgba(124,77,189,.08);
  padding: 14px 16px;
  margin-bottom: 18px;
}

.stats-streak-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--violet-xl), #ede8f8);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--violet-l);
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
}
.stats-streak-icon { font-size: 1.8rem; line-height: 1; }
.stats-streak-body { flex: 1; }
.stats-streak-count {
  font-family: 'Lora', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--violet);
  line-height: 1;
}
.stats-streak-label {
  font-size: .72rem;
  color: #4a2e7a;
  font-weight: 600;
}
.stats-streak-sub {
  font-size: .68rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
.stats-tile {
  background: #fff;
  border: 1.5px solid var(--violet-l);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 10px rgba(124,77,189,.06);
  padding: 10px 10px;
  text-align: center;
}
.stats-tile-icon { font-size: 1.2rem; margin-bottom: 6px; }
.stats-tile-val {
  font-family: 'Lora', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--violet);
  line-height: 1;
  margin-bottom: 4px;
}
.stats-tile-label {
  font-size: .65rem;
  color: var(--text-muted);
  font-weight: 500;
}

.stats-food-card { display: flex; flex-direction: column; gap: 12px; }
.stats-food-item { display: flex; align-items: center; gap: 12px; }
.stats-food-icon { font-size: 1.2rem; flex-shrink: 0; }
.stats-food-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.stats-food-val {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-dark);
}

.stats-weight-card { padding: 14px 16px; }
.stats-chart-empty {
  text-align: center;
  font-size: .8rem;
  color: var(--text-muted);
  padding: 12px 0;
  line-height: 1.6;
}
.stats-chart-labels-top,
.stats-chart-labels-bottom {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  color: var(--text-muted);
  font-weight: 500;
}
.stats-chart-labels-top { margin-bottom: 4px; }
.stats-chart-labels-bottom { margin-top: 4px; }
.stats-chart-svg {
  width: 100%;
  height: 80px;
  display: block;
}

/* ── Classement aliments ── */
.stats-ranking-card { padding: 12px 14px; }
.stats-ranking-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.stats-ranking-tab {
  flex: 1;
  padding: 6px 10px;
  border-radius: 99px;
  border: 1.5px solid var(--violet-l);
  background: #fff;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .15s;
}
.stats-ranking-tab.active {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}
.stats-ranking-list { display: flex; flex-direction: column; gap: 10px; }
.stats-ranking-empty {
  font-size: .78rem;
  color: var(--text-muted);
  text-align: center;
  padding: 8px 0;
}
.stats-ranking-row { display: flex; align-items: center; gap: 10px; }
.stats-ranking-pos {
  font-size: .82rem;
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.stats-ranking-body { flex: 1; min-width: 0; }
.stats-ranking-name-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}
.stats-ranking-name {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-ranking-val {
  font-size: .7rem;
  color: var(--violet);
  font-weight: 700;
  flex-shrink: 0;
}
.stats-ranking-bar-bg {
  height: 4px;
  background: var(--violet-xl);
  border-radius: 99px;
  overflow: hidden;
}
.stats-ranking-bar-fill {
  height: 100%;
  background: var(--violet);
  border-radius: 99px;
  transition: width .4s ease;
}

/* ── Drag & drop aliments ── */
.day-reorder-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 10px;
  margin-bottom: 2px;
}
.day-reorder-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.day-reorder-lock {
  background: none;
  border: 1.5px solid var(--gray-l);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: .85rem;
  cursor: pointer;
  line-height: 1;
  transition: border-color .15s, background .15s;
}
.day-reorder-lock:active { background: var(--gray-xl, #f4f4f4); }
.day-reorder-lock.unlocked {
  border-color: var(--blue);
  background: var(--blue-xl, #eaf3fd);
}
.meal-item-drag {
  font-size: 1rem;
  color: var(--gray);
  padding: 0 8px 0 2px;
  cursor: grab;
  flex-shrink: 0;
  touch-action: none;
  user-select: none;
  display: flex;
  align-items: center;
  line-height: 1;
}
.meal-item-drag:active { cursor: grabbing; }

/* ── Chips catégorie ── */
.cat-chips {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 6px;
  margin-top: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chip {
  padding: 4px 10px;
  border-radius: 99px;
  border: 1.5px solid var(--gray-l);
  background: #fff;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  transition: all .12s;
}
.cat-chip.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.cat-chip:active { opacity: .8; }

/* ── Stepper unités ── */
.unit-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 0 2px;
}
.unit-stepper.hidden { display: none; }
.unit-stepper-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
  opacity: .85;
}
.unit-stepper-btn:active { opacity: 1; }
.unit-stepper-count {
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue);
  min-width: 28px;
  text-align: center;
}
/* Couleur selon le repas */
.modal-meal-petit-dej .unit-stepper-btn,
.modal-meal-petit-dej .unit-stepper-count { color: var(--orange); }
.modal-meal-dejeuner .unit-stepper-btn,
.modal-meal-dejeuner .unit-stepper-count  { color: var(--green); }
.modal-meal-encas .unit-stepper-btn,
.modal-meal-encas .unit-stepper-count     { color: var(--violet); }
.modal-meal-diner .unit-stepper-btn,
.modal-meal-diner .unit-stepper-count     { color: var(--blue); }
/* ════════════════════════════════════════════
   COPY TO TODAY MODAL
   ════════════════════════════════════════════ */

/* Label "Ajouter dans..." */
.copy-meal-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 14px 0 8px;
}

/* Chips repas de destination -- style identique aux portion-preset-btn */
.copy-meal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.copy-meal-chip {
  padding: 8px 14px;
  border-radius: 99px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  color: var(--text-muted);
  font-family: "DM Sans", sans-serif;
  transition: all .2s;
}
.copy-meal-chip:active { transform: scale(.96); }
/* Sélectionnée : contour + texte + fond colorés comme les presets de portion */
.copy-meal-chip-petit-dej.active { border-color: var(--orange); color: var(--orange); background: linear-gradient(135deg, var(--orange-xl), var(--orange-l)); }
.copy-meal-chip-dejeuner.active  { border-color: var(--green);  color: var(--green);  background: linear-gradient(135deg, var(--green-xl),  var(--green-l));  }
.copy-meal-chip-encas.active     { border-color: var(--violet); color: var(--violet); background: linear-gradient(135deg, var(--violet-xl), var(--violet-l)); }
.copy-meal-chip-diner.active     { border-color: var(--blue);   color: var(--blue);   background: linear-gradient(135deg, var(--blue-xl),   var(--blue-l));   }

/* Long press feedback visuel */
.meal-item.pressing {
  background: rgba(46,158,107,.08);
  transition: background .2s;
}
/* Badge aliment communautaire */
.community-badge {
  font-size: .7rem;
  opacity: .7;
  vertical-align: middle;
}


/* Scroll hint — dégradé droit sur les zones de chips scrollables */
.chips-scroll-wrap {
  position: relative;
}
.chips-scroll-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 4px;
  width: 28px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.6));
  pointer-events: none;
  border-radius: 0 8px 8px 0;
}
/* ── Filtre catégorie dans la modale de recherche ── */
.search-cat-filter {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 6px;
  padding: 6px 0 14px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.search-cat-filter::-webkit-scrollbar { display: none; }
.search-cat-chip {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 99px;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.search-cat-chip.active {
  border-color: var(--page-color);
  color: var(--page-color);
  background: var(--green-xl);
}
.modal-meal-petit-dej .search-cat-chip.active { border-color: var(--orange); color: var(--orange); background: var(--orange-xl); }
.modal-meal-dejeuner  .search-cat-chip.active { border-color: var(--green);  color: var(--green);  background: var(--green-xl);  }
.modal-meal-encas     .search-cat-chip.active { border-color: var(--violet); color: var(--violet); background: var(--violet-xl); }
.modal-meal-diner     .search-cat-chip.active { border-color: var(--blue);   color: var(--blue);   background: var(--blue-xl);   }