@import url('./fonts.css');

.loading-casserole { display:block; flex:none; object-fit:contain; animation:casserole-breathe 1.8s ease-in-out infinite; }
@keyframes casserole-breathe { 50% { transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce) { .loading-casserole { animation:none; } }

:root {
  color-scheme: light;

  /* Semantic identity */
  --color-bg: #F6FAFA;
  --color-surface: #FFFFFF;
  --color-text: #213E43;
  --color-muted: #5B7276;
  --color-subtle: #7D9699;
  --color-border: #D9E9E8;
  --color-primary: #216E76;
  --color-primary-soft: #DFF1F0;
  --color-raspberry: #BC5A7A;
  --color-raspberry-soft: #F7E8EF;
  --color-apple: #B8D482;
  --color-apple-soft: #EDF4DF;
  --color-focus: #BC5A7A;
  --color-danger: #B94B3F;
  --color-danger-soft: #F9E5E1;

  /* Legacy aliases kept for existing V3/V4 components. */
  --sage:        var(--color-primary);
  --sage-deep:   var(--color-primary);
  --sage-light:  var(--color-primary-soft);
  --coral:       var(--color-raspberry);
  --coral-deep:  var(--color-raspberry);
  --cream:       var(--color-bg);
  --paper:       var(--color-surface);
  --ink:         var(--color-text);
  --ink-2:       var(--color-muted);
  --ink-3:       var(--color-subtle);
  --line:        var(--color-border);
  --danger:      var(--color-danger);

  /* Pastilles cacheroute (CRITIQUE) */
  --parve-bg:    #EDF4DF; --parve-fg:    #4A6F18;
  --laitier-bg:  #DFF1F0; --laitier-fg:  #216E76;
  --viande-bg:   #F7E8EF; --viande-fg:   #9E3F60;

  /* Badges DLC */
  --dlc-urgent-bg:  #F9E5E1; --dlc-urgent-fg:  #A83F32;
  --dlc-bientot-bg: #FFF1D6; --dlc-bientot-fg: #8A5B00;
  --dlc-ambre-bg:   #FFF6DB; --dlc-ambre-fg:   #6F560F;
  --dlc-ok-bg:      #EDF4DF; --dlc-ok-fg:      #4A6F18;

  /* Gradients */
  --grad-marque: linear-gradient(135deg, #2A7D84, #216E76);
  --grad-accent: linear-gradient(135deg, #BC5A7A, #9E3F60);

  /* Typography */
  --font-display: var(--font-body);
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing & shape */
  --radius-card:    18px;
  --radius-pill:    999px;
  --hit-target-min: 44px;

  /* Shadows */
  --shadow-card: 0 4px 10px rgba(33,62,67,.05), 0 12px 30px rgba(33,110,118,.08);
  --shadow-nav:  0 -1px 0 var(--line);

  /* Transitions */
  --trans-fast:   120ms ease;
  --trans-normal: 220ms ease;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #111F24;
  --color-surface: #1C3036;
  --color-text: #EDF7F5;
  --color-muted: #B7CBCB;
  --color-subtle: #8EA7A8;
  --color-border: #344950;
  --color-primary: #78CED0;
  --color-primary-soft: #173E46;
  --color-raspberry: #E18BAC;
  --color-raspberry-soft: #3F2632;
  --color-apple: #BEDD8F;
  --color-apple-soft: #2F402B;
  --color-focus: #78CED0;
  --color-danger: #F0A38F;
  --color-danger-soft: #4A2C28;
  --parve-bg: #2F402B; --parve-fg: #BEDD8F;
  --laitier-bg: #173E46; --laitier-fg: #78CED0;
  --viande-bg: #3F2632; --viande-fg: #E18BAC;
  --dlc-urgent-bg: #4A2C28; --dlc-urgent-fg: #F0A38F;
  --dlc-bientot-bg: #453A25; --dlc-bientot-fg: #F4D38D;
  --dlc-ambre-bg: #403A24; --dlc-ambre-fg: #E6CF82;
  --dlc-ok-bg: #2F402B; --dlc-ok-fg: #BEDD8F;
  --grad-marque: linear-gradient(135deg, #78CED0, #4FA9AE);
  --grad-accent: linear-gradient(135deg, #E18BAC, #C9698D);
  --shadow-card: 0 1px 0 rgba(255,255,255,.03), 0 14px 34px rgba(0,0,0,.22);
}

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

html, body {
  height: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  max-width: 430px; /* iPhone 393 + safe margin */
  margin: 0 auto;
  position: relative;
  background: var(--cream);
  min-height: 100dvh;
}

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

a { color: var(--sage-deep); }

button, input, textarea, select {
  font-family: var(--font-body);
}

button, .btn, input, textarea, select {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea,
select {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-3);
}

button:disabled,
.btn:disabled {
  opacity: .58;
  cursor: not-allowed;
}

/* Safe areas (notch / home bar) */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Primitives ─────────────────────────────────────────── */

.card {
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
}

.appearance-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream);
}

.appearance-control__option {
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-2);
  font: 700 12px var(--font-body);
  cursor: pointer;
}

.appearance-control__option.is-active {
  background: var(--paper);
  color: var(--sage-deep);
  box-shadow: var(--shadow-card);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

/* Pastilles cacheroute */
.pill--parve   { background: var(--parve-bg);   color: var(--parve-fg); }
.pill--laitier { background: var(--laitier-bg); color: var(--laitier-fg); }
.pill--viande  { background: var(--viande-bg);  color: var(--viande-fg); }

/* Badges DLC */
.badge--dlc-urgent  { background: var(--dlc-urgent-bg);  color: var(--dlc-urgent-fg); }
.badge--dlc-bientot { background: var(--dlc-bientot-bg); color: var(--dlc-bientot-fg); }
.badge--dlc-ambre   { background: var(--dlc-ambre-bg);   color: var(--dlc-ambre-fg); }
.badge--dlc-ok      { background: var(--dlc-ok-bg);      color: var(--dlc-ok-fg); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--hit-target-min);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity var(--trans-fast), transform var(--trans-fast);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { opacity: .82; transform: scale(.97); }

.btn--primary {
  background: var(--grad-marque);
  color: #fff;
}
.btn--secondary {
  background: var(--cream);
  color: var(--sage-deep);
  border: 1.5px solid var(--line);
}
.btn--ghost {
  background: transparent;
  color: var(--sage-deep);
}
.btn--accent {
  background: var(--grad-accent);
  color: #fff;
}

/* Typography helpers */
.display { font-family: var(--font-display); }
.text-ink   { color: var(--ink); }
.text-ink-2 { color: var(--ink-2); }
.text-ink-3 { color: var(--ink-3); }

/* ── Screen layout ──────────────────────────────────────── */

.screen {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: var(--cream);
}

.screen__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 18px 12px;
  min-height: 54px;
  background: var(--cream);
  flex-shrink: 0;
  z-index: 10;
}

.screen__heading { flex: 1; min-width: 0; }
.screen__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.12;
  color: var(--sage-deep);
  letter-spacing: -.01em;
}
.screen__subtitle { color: var(--ink-2); font-size: 13px; margin-top: 3px; }
.screen__action { flex-shrink: 0; }
.screen__back {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: var(--paper);
  color: var(--sage-deep);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(47,42,58,.05), 0 2px 6px rgba(47,42,58,.05);
  -webkit-tap-highlight-color: transparent;
}
.screen__back svg { width: 20px; height: 20px; }

.screen__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 14px 18px;
  background: var(--cream);
}

:root[data-theme="dark"] .screen__header,
:root[data-theme="dark"] .top-bar {
  background: #173E46 !important;
  border-color: var(--line) !important;
}

:root[data-theme="dark"] .screen__title,
:root[data-theme="dark"] .top-bar button:not([aria-current="page"]) {
  color: var(--color-primary);
}

:root[data-theme="dark"] .screen__subtitle {
  color: var(--color-muted);
}

:root[data-theme="dark"] .screen__back,
:root[data-theme="dark"] .modal__close,
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .btn--ghost,
:root[data-theme="dark"] .btn--secondary,
:root[data-theme="dark"] .occasion-link > span:last-child,
:root[data-theme="dark"] .v4-nav-row > div:first-child,
:root[data-theme="dark"] .v4-nav-row > span:last-child {
  color: #78CED0 !important;
}

:root[data-theme="dark"] .btn--primary,
:root[data-theme="dark"] .pill-toggle--active,
:root[data-theme="dark"] .plan-week__day-btn--active,
:root[data-theme="dark"] .plan-month__cell--selected,
:root[data-theme="dark"] .frigo-filter--active,
:root[data-theme="dark"] .tab-bar__item[aria-selected="true"],
:root[data-theme="dark"] .appearance-control__option.is-active {
  background: #78CED0;
  border-color: #78CED0;
  color: #111F24;
}

:root[data-theme="dark"] .tab-bar,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .loading-overlay__panel,
:root[data-theme="dark"] .plan-insatisfait {
  background: var(--paper);
  color: var(--ink);
}

:root[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, .56);
}

/* Carrousel de bandeaux empilables (BannerStack) : masque les slides vides
 * (bandeau inactif → return null) et la barre de défilement horizontale. */
.bstack__slide:empty { display: none; }
.bstack { scrollbar-width: none; }
.bstack::-webkit-scrollbar { display: none; }

/* ── Tab bar ────────────────────────────────────────────── */

.tab-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding-top: 11px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 100;
  flex-shrink: 0;
  min-height: 72px;
}

.tab-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-height: var(--hit-target-min);
  min-width: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  color: var(--ink-3);
  transition: color var(--trans-fast);
  padding: 2px 4px 0;
}

.tab-bar__item[aria-selected="true"] {
  color: var(--coral);
}

.tab-bar__icon {
  width: 24px;
  height: 24px;
  display: block;
}
.tab-bar__icon svg { display: block; width: 24px; height: 24px; }

.tab-bar__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ── Empty state (placeholder sprint 0) ─────────────────── */

.empty-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1;
  color: var(--ink-3);
  padding: 40px 24px;
  text-align: center;
}

.empty-screen__icon { font-size: 48px; }
.empty-screen__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.empty-screen__desc { font-size: 14px; line-height: 1.6; }

/* ── Auth banner ────────────────────────────────────────── */

.auth-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--ink-2);
}
.auth-banner--ok   { border-color: var(--parve-bg); background: var(--parve-bg); color: var(--parve-fg); }
.auth-banner--warn { border-color: var(--dlc-bientot-bg); background: var(--dlc-bientot-bg); color: var(--dlc-bientot-fg); }

/* ── Plan Sprint 3 ──────────────────────────────────────── */

/* Toolbar : sélecteur vue + navigation */
.plan-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.plan-view-toggle { display: flex; gap: 4px; }
.plan-nav { display: flex; align-items: center; gap: 4px; }
.plan-nav__today {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}
.icon-btn {
  min-height: var(--hit-target-min);
  min-width: 36px;
  border: none;
  background: none;
  font-size: 20px;
  color: var(--sage-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pill toggles */
.pill-group { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-toggle {
  background: var(--cream);
  color: var(--ink-2);
  border: 1.5px solid var(--line);
  cursor: pointer;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
}
.pill-toggle--active {
  background: var(--sage-deep);
  color: #fff;
  border-color: var(--sage-deep);
}

/* Sélecteur mode aidant */
.plan-scope {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--cream);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.plan-scope__label { font-size: 13px; white-space: nowrap; }
.plan-scope__select { flex: 1; font-size: 13px; }

/* Boutons IA (placeholders) */
.plan-ai-cta { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.plan-ai-btn, .plan-photo-btn { flex: 1; min-width: 140px; font-size: 13px; }

/* ── Vue semaine ─────────────────────────────────────────── */
.plan-week__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 16px;
}
.plan-week__day-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 12px;
  color: var(--ink-2);
  position: relative;
}
.plan-week__day-btn--active {
  background: var(--sage-deep);
  color: #fff;
}
.plan-week__day-name { font-size: 10px; font-weight: 600; text-transform: uppercase; }
.plan-week__day-num  { font-size: 16px; font-weight: 700; }
.plan-week__dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--coral);
}
.plan-week__day-btn--active .plan-week__dot { background: rgba(255,255,255,.7); }

/* ── Créneau du jour ─────────────────────────────────────── */
.plan-day { margin-top: 4px; }
.plan-day__label {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}
.plan-day--compact .plan-day__label { font-size: 16px; margin-top: 16px; }
.plan-day__add { margin-top: 8px; width: 100%; }

.plan-slot { margin-bottom: 12px; }
.plan-slot__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.plan-slot__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.plan-slot__add {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--cream);
  color: var(--sage-deep);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-slot__meals { display: flex; flex-direction: column; gap: 6px; }
.plan-slot__empty { font-size: 13px; color: var(--ink-3); padding: 4px 0; }

/* ── MealCard ────────────────────────────────────────────── */
.meal-card {
  background: var(--paper);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 10px 12px;
  cursor: pointer;
  transition: opacity var(--trans-fast);
}
.meal-card--done { opacity: .55; }
.meal-card__top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.meal-card__course {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.meal-card__leftover {
  font-size: 10px;
  font-weight: 600;
  color: var(--coral-deep);
  background: #fef3f0;
  padding: 1px 6px;
  border-radius: 6px;
}
.meal-card__titre {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 6px;
}
.meal-card__footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.meal-card__status-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.meal-card__status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.meal-card__portions {
  font-size: 12px;
  color: var(--ink-3);
  margin-left: auto;
}
.meal-card__del {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--ink-3);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}

/* ── Vue mois ────────────────────────────────────────────── */
.plan-month { }
.plan-month__grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 4px;
}
.plan-month__dow {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 0;
}
.plan-month__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 16px;
}
.plan-month__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  aspect-ratio: 1;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.plan-month__cell--out     { color: var(--ink-3); }
.plan-month__cell--today   { background: var(--cream); font-weight: 700; }
.plan-month__cell--selected { background: var(--sage-deep); color: #fff; }
.plan-month__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--coral); }
.plan-month__cell--selected .plan-month__dot { background: rgba(255,255,255,.7); }

/* ── MealForm (modal) ────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(47, 42, 58, .45);
  z-index: 200;
  display: flex;
  align-items: flex-end;
}
.modal {
  width: 100%;
  max-height: 92dvh;
  background: var(--paper);
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp .25s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
}
.modal__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}
.modal__close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--cream);
  color: var(--ink-2);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.modal__actions { display: flex; gap: 8px; padding-top: 8px; }
.modal__actions .btn { flex: 1; }

/* Formulaire */
.form-row { display: flex; gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.form-label { font-size: 12px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.form-input, .form-select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  outline: none;
}
.form-input:focus, .form-select:focus { border-color: var(--sage-deep); }
.form-error {
  background: var(--dlc-urgent-bg);
  color: var(--dlc-urgent-fg);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
}
.form-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.form-toggle input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; }

/* Option prévoir des restes */
.rests-control { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.rests-label { font-size: 14px; font-weight: 700; color: var(--sage-deep); }
.rests-slider-row { display: flex; align-items: center; gap: 10px; }
.rests-slider { flex: 1; }
.rests-hint { font-size: 12px; }

/* ── OCRReview (revue import planning photo) ─────────────── */
.ocr-review { max-height: 94dvh; }
.ocr-review__desc { font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.ocr-review__list { display: flex; flex-direction: column; gap: 8px; }

.ocr-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  cursor: pointer;
  background: var(--paper);
  transition: background var(--trans-fast);
}
.ocr-item--checked { border-color: var(--sage-deep); background: var(--cream); }
.ocr-item--blocked { opacity: .55; cursor: default; }
.ocr-item__check { margin-top: 2px; flex-shrink: 0; width: 18px; height: 18px; }
.ocr-item__body { flex: 1; min-width: 0; }
.ocr-item__meta { display: flex; gap: 5px; font-size: 11px; flex-wrap: wrap; margin-bottom: 3px; }
.ocr-item__titre { font-size: 14px; font-weight: 600; color: var(--ink); }
.ocr-item__reasons { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.ocr-item__reason { font-size: 11px; color: var(--dlc-urgent-fg); background: var(--dlc-urgent-bg); padding: 2px 6px; border-radius: 6px; }

/* ── PhotoListReview (revue générique import photo/OCR) ──── */
.photo-list-review__list { display: flex; flex-direction: column; gap: 8px; }
.photo-list-review__item { display: flex; align-items: center; gap: 8px; }
.photo-list-review__item .form-input { flex: 1; }

/* ── WeekReview (revue génération IA semaine, Chantier B) ──── */
.week-review { max-height: 94dvh; }
.week-review__desc { font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.week-review__day { margin-bottom: 16px; }
.week-review__day-label { font-size: 13px; font-weight: 700; color: var(--sage-deep); margin-bottom: 6px; text-transform: capitalize; }
.week-review__conflict {
  display: flex; align-items: center; gap: 6px;
  background: var(--dlc-urgent-bg); color: var(--dlc-urgent-fg);
  font-size: 12px; font-weight: 600; padding: 6px 10px;
  border-radius: 10px; margin-bottom: 8px;
}
.week-review__slot-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin: 8px 0 4px; }
.week-review__list { display: flex; flex-direction: column; gap: 6px; }
.week-review__footer-count { font-size: 13px; color: var(--ink-2); text-align: center; padding: 4px 20px 0; }

/* ── Home Sprint 3 ──────────────────────────────────────── */
.home-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 8px;
}

/* Prochain repas */
.home-next-meal__tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.home-next-meal__titre { font-size: 20px; font-weight: 700; margin-bottom: 8px; line-height: 1.2; }
.home-next-meal__footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.home-next-meal__chrono { font-size: 13px; color: var(--coral-deep); font-weight: 600; }
.home-next-meal__status { font-size: 12px; color: var(--ink-2); margin-left: auto; }

/* Checklist */
.checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.checklist-item:last-of-type { border-bottom: none; }
.checklist-item--done .checklist-item__titre { text-decoration: line-through; color: var(--ink-3); }
.checklist-item__check {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 2px solid var(--line);
  background: none;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--parve-fg);
  transition: background var(--trans-fast);
}
.checklist-item--done .checklist-item__check { background: var(--parve-bg); border-color: var(--parve-fg); }
.checklist-item__body { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.checklist-item__creno { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.checklist-item__titre { font-size: 14px; font-weight: 600; color: var(--ink); }

/* Inventaire urgents Accueil */
.home-inventory-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); }
.home-inventory-item:last-child { border-bottom: none; }
.home-inventory-item__nom { font-size: 14px; color: var(--ink); }

/* ── Sprint 6A : Traditions ─────────────────────────────── */

/* Banner fête (Accueil) */
.banner-fete {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: linear-gradient(135deg, #fffae8, #fff3c4);
  border: 1.5px solid #f0d060;
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--trans-fast);
}
.banner-fete:active { opacity: .82; }
.banner-fete__icon { font-size: 28px; flex-shrink: 0; }
.banner-fete__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.banner-fete__title { font-size: 15px; font-weight: 700; color: var(--ink); }
.banner-fete__sub { font-size: 12px; color: var(--ink-2); }
.banner-fete__arrow { font-size: 20px; color: var(--ink-3); }

/* Cards de navigation traditions */
.tradition-nav-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin-bottom: 8px;
  border: none;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--trans-fast);
}
.tradition-nav-card:active { opacity: .82; }
.tradition-nav-card__icon { font-size: 26px; flex-shrink: 0; }
.tradition-nav-card__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tradition-nav-card__title { font-size: 15px; font-weight: 600; color: var(--ink); }
.tradition-nav-card__sub { font-size: 12px; color: var(--ink-2); }
.tradition-nav-card__badge {
  font-size: 11px;
  font-weight: 700;
  color: #c98a2e;
  background: #fbf0db;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.tradition-nav-card__arrow { font-size: 20px; color: var(--ink-3); }

/* Section wrapper */
.tradition-section {
  margin-bottom: 20px;
}
.tradition-section__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}
.tradition-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tradition-section__sub {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

/* Card info fête */
.tradition-card {
  background: var(--paper);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin-bottom: 12px;
  border-left: 4px solid var(--sage-deep);
}
.tradition-card--warning { border-left-color: var(--coral-deep); }
.tradition-card__title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.tradition-card__sub { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* Badge sur la carte fête */
.tradition-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.tradition-badge--warning { background: var(--viande-bg); color: var(--viande-fg); }
.tradition-badge--info    { background: var(--laitier-bg); color: var(--laitier-fg); }

/* Horaires Chabbat */
.tradition-times {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.tradition-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.tradition-time-row:last-child { border-bottom: none; }
.tradition-time-row__label { font-size: 13px; color: var(--ink-2); }
.tradition-time-row__value { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Checklist Chabbat */
.tradition-checklist { display: flex; flex-direction: column; gap: 6px; }
.tradition-checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  transition: background var(--trans-fast);
}
.tradition-checklist-item--done { background: var(--parve-bg); border-color: var(--parve-fg); }
.tradition-checklist-item--done .tradition-checklist-item__label { text-decoration: line-through; color: var(--ink-3); }
.tradition-checklist-item__check {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid var(--line);
  background: none;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--parve-fg);
}
.tradition-checklist-item--done .tradition-checklist-item__check {
  background: var(--parve-fg);
  border-color: var(--parve-fg);
  color: #fff;
}
.tradition-checklist-item__label { flex: 1; font-size: 14px; font-weight: 500; color: var(--ink); }

/* Actions Chabbat */
.tradition-actions { display: flex; flex-direction: column; gap: 8px; }

/* Plats */
.tradition-plats { display: flex; flex-direction: column; gap: 8px; }
.tradition-plats__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.tradition-plat-card {
  background: var(--paper);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 12px 14px;
  border-left: 4px solid var(--line);
}
.tradition-plat-card__body { display: flex; flex-direction: column; gap: 4px; }
.tradition-plat-card__meta { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 2px; }
.tradition-plat-card__titre { font-size: 14px; font-weight: 600; color: var(--ink); }
.tradition-plat-card__ingr { font-size: 12px; color: var(--ink-2); }

/* Pill kashrut (pour FeteMenu / plats) */
.pill.viande  { background: var(--viande-bg);  color: var(--viande-fg); }
.pill.laitier { background: var(--laitier-bg); color: var(--laitier-fg); }
.pill.parve   { background: var(--parve-bg);   color: var(--parve-fg); }
.pill--ghost  { background: var(--cream); color: var(--ink-2); border: 1px solid var(--line); }

/* Filtre pâtisseries */
.patisserie-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.chip {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--cream);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--trans-fast), color var(--trans-fast);
}
.chip--active {
  background: var(--sage-deep);
  color: #fff;
  border-color: var(--sage-deep);
}

/* Ramadan countdown */
.ramadan-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: linear-gradient(135deg, #0e1a2b, #1a2e4a);
  border-radius: 20px;
  margin-bottom: 12px;
  color: #fff;
}
.ramadan-countdown__time {
  font-size: 42px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.ramadan-countdown__label {
  font-size: 13px;
  opacity: .7;
  text-align: center;
  margin-top: 4px;
}

/* Hydration tracker Ramadan */
.ramadan-water {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  margin-bottom: 12px;
}
.ramadan-water__title { font-size: 14px; font-weight: 700; color: var(--ink); }
.ramadan-water__glasses { display: flex; gap: 6px; flex-wrap: wrap; }
.ramadan-water__glass {
  font-size: 22px;
  cursor: pointer;
  opacity: .25;
  border: none;
  background: none;
  padding: 2px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--trans-fast);
}
.ramadan-water__glass--filled { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   SPRINT 6B — Bébé, Grossesse, Événements
   ══════════════════════════════════════════════════════════ */

/* Sélecteur bébé / membre */
.bebe-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Formulaire introduction allergène */
.bebe-intro-form {
  background: var(--paper);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  margin-bottom: 8px;
}

/* Entrée du journal allergènes */
.bebe-journal-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--paper);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  margin-bottom: 6px;
}
.bebe-journal-entry__date {
  font-size: 11px;
  color: var(--ink-2);
  min-width: 70px;
  flex-shrink: 0;
}
.bebe-journal-entry__allergen {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.bebe-journal-entry__reaction {
  font-size: 12px;
  color: var(--ink-2);
  flex: 1;
  font-style: italic;
}
.bebe-journal-entry__del {
  background: none;
  border: none;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color var(--trans-fast), background var(--trans-fast);
}
.bebe-journal-entry__del:hover {
  color: #e53e3e;
  background: #fff0f0;
}

/* Disclaimer médical */
.disclaimer-card {
  background: var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-top: 12px;
}

/* Tracker caféine */
.caffeine-bar {
  margin: 8px 0;
}
.caffeine-bar__track {
  height: 10px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.caffeine-bar__fill {
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease, background .4s ease;
}
.caffeine-bar__fill--ok       { background: var(--sage-deep); }
.caffeine-bar__fill--warning  { background: #f6ad55; }
.caffeine-bar__fill--exceeded { background: #e53e3e; }
.caffeine-bar__label {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
}
.caffeine-bar__label--ok       { color: var(--sage-deep); }
.caffeine-bar__label--warning  { color: #dd6b20; }
.caffeine-bar__label--exceeded { color: #e53e3e; }

/* Entrée caféine */
.caffeine-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--paper);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  margin-bottom: 6px;
}
.caffeine-entry__label {
  flex: 1;
  font-size: 13px;
  color: var(--ink);
}
.caffeine-entry__mg {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  min-width: 48px;
  text-align: right;
}

/* Aliments grossesse */
.grossesse-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 8px;
}
.grossesse-item--blocked {
  background: #fff5f5;
  border: 1px solid #fed7d7;
}
.grossesse-item--warning {
  background: #fffbeb;
  border: 1px solid #fef3c7;
}
.grossesse-item__icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.grossesse-item__body { flex: 1; }
.grossesse-item__label  { font-size: 13px; font-weight: 600; color: var(--ink); }
.grossesse-item__reason { font-size: 12px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }

/* Ligne ajout tâche événement */
.add-task-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 2px;
}

/* Ligne de tâche */
.event-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  background: var(--paper);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  transition: opacity var(--trans-fast);
}
.event-task-row--done { opacity: .55; }
.event-task-row__check {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid var(--line);
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--sage-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--trans-fast), background var(--trans-fast);
}
.event-task-row--done .event-task-row__check {
  border-color: var(--sage-deep);
  background: var(--sage-deep);
  color: #fff;
}
.event-task-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.event-task-row__label {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.event-task-row--done .event-task-row__label {
  text-decoration: line-through;
  color: var(--ink-2);
}
.event-task-row__assignee {
  font-size: 11px;
  color: var(--ink-2);
}

/* Sélecteur d'assignee */
.assignee-picker {
  position: relative;
  flex-shrink: 0;
}
.assignee-picker__trigger {
  background: var(--line);
  border: none;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--trans-fast);
}
.assignee-picker__trigger:hover { background: var(--sage-light); }
.assignee-picker__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 100;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 180px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.assignee-picker__option {
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--trans-fast);
}
.assignee-picker__option:hover { background: var(--line); }
.assignee-picker__option--active {
  background: var(--sage-light);
  color: var(--sage-deep);
  font-weight: 600;
}
.assignee-picker__option--clear {
  color: #e53e3e;
  margin-top: 2px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.assignee-picker__custom {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
  margin-top: 2px;
  border-top: 1px solid var(--line);
}

/* Vue "Qui fait quoi" */
.event-assignee-group {
  background: var(--paper);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow-card);
  margin-bottom: 8px;
}
.event-assignee-group__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.event-assignee-task {
  font-size: 13px;
  color: var(--ink-2);
  padding: 3px 0;
}
.event-assignee-task--done {
  text-decoration: line-through;
  color: var(--sage-deep);
}

/* ── Nutrition — tableau de bord macros (MacrosDashboard) ─────────────────── */
.macros-dashboard { display: flex; flex-direction: column; gap: 14px; }

.macros-dashboard .disclaimer {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
  margin: 0 0 4px;
}

.macro-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 14px;
}

.macro-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.macro-card .avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}

.macro-card__header strong { font-size: 16px; color: var(--ink); }

.macro-bars { display: flex; flex-direction: column; gap: 11px; }

.macro-bar__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 5px;
}
.macro-bar__label span:last-child {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.macro-bar__track {
  height: 8px;
  background: var(--cream);
  border-radius: 99px;
  overflow: hidden;
}
.macro-bar__fill {
  height: 100%;
  background: var(--grad-marque);
  border-radius: 99px;
  transition: width var(--trans-fast, .2s) ease;
}
.macro-bar__fill--reached { background: var(--parve-fg); }

.log-meal-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.log-meal-form input[type="text"] { flex: 1 1 100%; min-width: 0; }
.log-meal-form input[type="number"] { flex: 0 0 4.5rem; }
.log-meal-form .btn { flex: 0 0 auto; }

.consumption-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.consumption-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink);
}
.consumption-item > span:first-child { flex: 1; min-width: 0; }

.congrat-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--parve-bg);
  color: var(--parve-fg);
  border-radius: var(--radius-pill);
  padding: 8px 12px;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
}

/* ── Imprévu / Adaptation IA (feature changement de dernière minute) ── */

/* ── Spinner (chargement IA) ─────────────────────────────── */
.spinner {
  display: inline-block;
  width: 28px; height: 28px;
  border: 3px solid var(--line);
  border-top-color: var(--sage-deep);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Overlay plein écran (générations IA longues) ─────────── */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 24, .38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.loading-overlay__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 32px;
  border-radius: var(--radius-lg, 16px);
  background: var(--paper);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
  max-width: 300px;
  text-align: center;
}
.loading-overlay__message {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* ── Indicateur de chargement inline (écrans/listes) ──────── */
.loading-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 0;
  color: var(--ink-3);
}
.loading-inline__message {
  font-size: 13px;
}

/* ── Imprévu / Adaptation IA ─────────────────────────────── */
.imprevu-cta { background: linear-gradient(135deg, #fbf0db 0%, var(--cream) 100%); border-left: 3px solid var(--coral); }

.imprevu-chip {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--trans-fast), background var(--trans-fast);
}
.imprevu-chip:active { opacity: .85; }
.imprevu-chip--active { border-color: var(--sage-deep); background: var(--sage-deep); color: #fff; }
.imprevu-chip--block { min-height: var(--hit-target-min); }

.imprevu { max-height: 94dvh; }
.imprevu__desc { font-size: 13px; line-height: 1.5; }

.imprevu-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 16px;
  text-align: center;
}

.imprevu-scenarios { display: flex; flex-direction: column; gap: 6px; }

.imprevu-field { display: flex; flex-direction: column; gap: 4px; }
.imprevu-textarea { height: auto; padding: 10px 12px; line-height: 1.4; resize: vertical; }

.imprevu-disclaimer {
  font-size: 10.5px;
  color: var(--ink-3);
  line-height: 1.5;
  background: var(--cream);
  border-radius: 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--dlc-bientot-fg);
}

.imprevu-resume {
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-2);
  line-height: 1.5;
}

.imprevu-section { display: flex; flex-direction: column; gap: 6px; }
.imprevu-section__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-2);
}
.imprevu-reason { font-size: 10.5px; color: var(--ink-3); font-style: italic; margin-top: 3px; }

.imprevu-conservation {
  background: var(--cream);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 12px;
}
.imprevu-conservation__action { color: var(--sage-deep); font-weight: 600; margin-top: 2px; }

.imprevu-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
}
.imprevu-toggle input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }

.imprevu-conseils {
  background: var(--laitier-bg);
  color: var(--laitier-fg);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
}
.imprevu-conseils ul { margin: 4px 0 0; padding-left: 18px; }
.imprevu-conseils li { margin-top: 2px; }


/* Tablette et ordinateur : conserver le mobile, utiliser la largeur disponible. */
@media (min-width: 768px) {
  body { max-width: 960px; }
  .screen__body { padding: 24px 32px; }
  .screen__header { padding-inline: 32px; }
  .tab-bar__label { font-size: 12px; }
}
@media (min-width: 1200px) {
  body { max-width: 1200px; }
  #app:has(> .tab-bar) { display: grid; grid-template-columns: 190px minmax(0, 1fr); }
  #app > .screen { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; }
  #app > .tab-bar {
    grid-column: 1; grid-row: 1; flex-direction: column; justify-content: flex-start;
    align-items: stretch; gap: 8px; padding: 28px 16px;
    border-right: 1px solid var(--line); box-shadow: none;
  }
  .tab-bar__item { flex: 0 0 auto; flex-direction: row; gap: 12px; padding: 12px; border-radius: 12px; }
  .tab-bar__item[aria-selected="true"] { background: var(--cream); }
  .tab-bar__label { font-size: 14px; }
  .screen__body { max-width: 100%; }
}
/* ── Plan redesign v2 ───────────────────────────────────── */
:root {
  --plan-green:       var(--color-primary);
  --plan-green-dim:   color-mix(in srgb, var(--color-primary) 80%, #000);
  --plan-green-light: var(--color-primary-soft);
  --plan-green-chip:  var(--color-apple);
  --plan-purple:      var(--color-raspberry);
  --plan-purple-light:var(--color-raspberry-soft);
  --plan-warm:        var(--color-raspberry);
  --plan-warm-light:  var(--color-raspberry-soft);
}

.plan-banner { background: var(--plan-green-light); padding: 14px 20px 16px; flex-shrink: 0; }
.plan-banner__date { font-size: 12px; color: var(--ink-3); }
.plan-banner__title { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--ink); padding-top: 6px; line-height: 1.1; }

.plan-tiles { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 0; flex-shrink: 0; }
.plan-tile {
  border-radius: 18px; padding: 15px 16px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; border: 1.5px solid transparent;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, box-shadow 180ms ease;
}
.plan-tile:active { transform: scale(.98); }
.plan-tile--green  { background: var(--color-apple-soft); border-color: var(--plan-green-chip); }
.plan-tile--purple { background: var(--plan-purple-light); border-color: color-mix(in srgb, var(--color-raspberry) 45%, var(--line)); }
.plan-tile--warm   { background: var(--plan-warm-light); border-color: color-mix(in srgb, var(--color-raspberry) 45%, var(--line)); }
.plan-tile__icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.plan-tile--green  .plan-tile__icon { background: var(--plan-green-chip); }
.plan-tile--purple .plan-tile__icon { background: color-mix(in srgb, var(--color-raspberry) 25%, var(--paper)); }
.plan-tile--warm   .plan-tile__icon { background: color-mix(in srgb, var(--color-raspberry) 25%, var(--paper)); }
.plan-tile__body { flex: 1; }
.plan-tile__label { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.plan-tile__sub   { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.plan-tile__arr   { font-size: 20px; color: var(--ink-3); }

.plan-cal { flex: 1; display: flex; flex-direction: column; padding: 14px 16px 0; min-height: 0; overflow-y: auto; }
.plan-cal__topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-shrink: 0; }
.plan-cal__nav { display: flex; align-items: center; gap: 4px; }
.plan-cal__month { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink); }
.plan-cal__toggle { display: flex; gap: 2px; background: var(--cream); border-radius: 10px; padding: 3px; }
.plan-cvt { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 7px; color: var(--ink-3); border: none; background: none; cursor: pointer; transition: all 150ms; }
.plan-cvt--active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.1); }

.plan-wstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; flex-shrink: 0; }
.plan-wday {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px 6px; border-radius: 10px; border: none; background: none;
  cursor: pointer; transition: background 150ms; -webkit-tap-highlight-color: transparent;
}
.plan-wday__d   { font-size: 9px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .2px; }
.plan-wday__n   { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-wday__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--plan-green-chip); opacity: 0; }
.plan-wday.has .plan-wday__dot        { opacity: 1; }
.plan-wday.today                       { background: var(--plan-green-chip); }
.plan-wday.today .plan-wday__d         { color: var(--sage-deep); }
.plan-wday.today .plan-wday__n         { color: var(--sage-deep); }
.plan-wday.today .plan-wday__dot       { background: var(--sage-deep); }
.plan-wday.sel:not(.today)             { background: var(--color-raspberry-soft); }

.plan-mwdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.plan-mwday  { font-size: 9px; font-weight: 700; color: var(--ink-3); text-align: center; padding: 0 0 4px; text-transform: uppercase; letter-spacing: .2px; }
.plan-mgrid  { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.plan-mcell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 2px; border-radius: 8px; border: none; background: none;
  cursor: pointer; min-height: 34px; transition: background 150ms; -webkit-tap-highlight-color: transparent;
}
.plan-mcell__n   { font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-mcell__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--plan-green-chip); opacity: 0; }
.plan-mcell.has .plan-mcell__dot       { opacity: 1; }
.plan-mcell.out .plan-mcell__n         { color: var(--ink-3); }
.plan-mcell.today                      { background: var(--plan-green-chip); }
.plan-mcell.today .plan-mcell__n       { color: var(--sage-deep); }
.plan-mcell.today .plan-mcell__dot     { background: var(--sage-deep); }
.plan-mcell.sel:not(.today)            { background: var(--color-raspberry-soft); }

.plan-dd {
  margin: 12px 0 0; border-radius: 16px;
  background: var(--cream); border: 1.5px solid var(--plan-green-chip);
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .22s;
  flex-shrink: 0;
}
.plan-dd.open { max-height: 280px; opacity: 1; }
.plan-dd__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 4px; }
.plan-dd__title { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink); }
.plan-dd__close { width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: none; font-size: 12px; color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.plan-dd__empty { padding: 8px 14px 14px; font-size: 13px; color: var(--ink-3); font-style: italic; }
.plan-dd-meal { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); cursor: pointer; transition: background 120ms; }
.plan-dd-meal:hover { background: var(--plan-green-light); }
.plan-dd-meal__tag { font-size: 10px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px; min-width: 54px; }
.plan-dd-meal__nom { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink); }
.plan-dd__foot { padding: 10px 14px 12px; border-top: 1px solid var(--line); display: flex; gap: 7px; }
.plan-dd__foot-btn { flex: 1; padding: 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; cursor: pointer; border: none; }
.plan-dd__foot-btn--add  { background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); }
.plan-dd__foot-btn--edit { background: var(--plan-green-light); color: var(--plan-green); border: 1.5px solid var(--plan-green-chip); }

.plan-nudge {
  margin: 12px 16px 4px; padding: 11px 16px; border-radius: 14px;
  background: var(--cream); border: 1px dashed var(--line);
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  transition: background 150ms, border-color 150ms; flex-shrink: 0;
}
.plan-nudge:hover { background: var(--plan-warm-light); border-color: var(--plan-warm); }
.plan-nudge__text { flex: 1; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.plan-nudge:hover .plan-nudge__text { color: var(--plan-warm); }

.plan-insatisfait {
  position: absolute; inset: 0; z-index: 50;
  background: var(--paper); display: flex; flex-direction: column;
  animation: slideUpFull .28s cubic-bezier(.4,0,.2,1) both;
}
@keyframes slideUpFull { from { transform: translateY(100%); } to { transform: translateY(0); } }
.plan-insatisfait__head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.plan-insatisfait__back { font-size: 24px; font-weight: 300; color: var(--sage-deep); background: none; border: none; cursor: pointer; padding: 0; line-height: 1; }
.plan-insatisfait__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); }
.plan-insatisfait__q { padding: 20px 20px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.plan-insatisfait__qtitle { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.plan-insatisfait__qsub { font-size: 13px; color: var(--ink-2); }
.plan-wopts { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; }
.plan-wopt {
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 18px;
  padding: 16px 18px; display: flex; align-items: flex-start; gap: 14px;
  cursor: pointer; transition: border-color 200ms, box-shadow 200ms;
}
.plan-wopt:hover { border-color: var(--plan-green); box-shadow: 0 0 0 3px var(--plan-green-light); }
.plan-wopt__icon  { font-size: 22px; flex-shrink: 0; }
.plan-wopt__body  { flex: 1; }
.plan-wopt__label { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.plan-wopt__sub   { font-size: 12px; color: var(--ink-2); }


@media (min-width: 1200px) {
  #app:has(> .top-bar) { grid-template-rows: auto minmax(0, 1fr); }
  #app > .top-bar { grid-column: 1 / -1; grid-row: 1; }
  #app:has(> .top-bar) > .screen { grid-row: 2; }
  #app:has(> .top-bar) > .tab-bar { grid-row: 2; }
}