/* ── Polices auto-hébergées (CSP : font-src 'self') — DA « Éditorial Papier » ── */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ebgaramond-400-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ebgaramond-500-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/ebgaramond-400-italic.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/ebgaramond-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/archivo-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/archivo-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/archivo-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/archivo-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/courierprime-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/courierprime-700-normal.woff2") format("woff2"); }

/* ── Variables — DA « Éditorial Papier » (crème, encre, terracotta) ── */
:root {
  --ink: #26221B;               /* encre principale (brun-noir) */
  --ink-soft: #4A443A;
  --muted: #776E5C;             /* labels / texte secondaire taupe (contraste renforcé) */
  --muted-2: #8E856F;
  --cream: #F4F1EA;             /* fond app (papier) */
  --cream-deep: #EDE7DA;        /* surfaces (chips, icônes) */
  --cream-dashed: #F0EBDF;      /* jours futurs, zones en attente */
  --card: #F9F7F1;             /* fond des cartes */
  --terra: #9C5637;             /* accent terracotta */
  --terra-soft: #F1E9E2;        /* carte teintée */
  --line: #E3DED0;              /* bordures fines claires */
  --line-strong: #C9C2B4;       /* bordures / filets marqués */

  /* alias historiques (mêmes noms, nouvelles valeurs) */
  --accent-dark: #26221B;
  --accent-header: #9C5637;
  --weekend-accent: #9C5637;
  --weekend-bg: #F0EBDF;
  --shopping-header: #9C5637;
  --priority-green: #EEEADD;
  --cat-pdt: #9C6B37;
  --cat-riz: #6B7A4F;
  --cat-pates: #9C823D;
  --cat-entree: #5B7A4F;
  --cat-autre: #4E6B80;
  --cat-sucree: #9C5680;
  --cat-africain: #8A4B35;
  --cat-apero: #6B7A4F;
  --cat-sauce: #9C6B37;

  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", system-ui, -apple-system, sans-serif;
  --font-mono: "Courier Prime", ui-monospace, monospace;

  --radius: 2px;               /* angles quasi vifs (esthétique papier) */
  --radius-lg: 2px;
  --shadow: none;
  --shadow-lift: 0 12px 34px rgba(38,34,27,.22);
  --navbar-h: 60px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ease-out: cubic-bezier(.22, .8, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: .15s;
  --t-med: .28s;
}

/* Titres éditoriaux : Garamond italique */
.page-header h1, .home2-date, .home2-hero-title, .home2-section-title,
.recette-hero-title, .recette-section-title, .import2-title, .plat-name,
.settings-section h2, .settings-profile-name, .premium-card h2,
.landing-title, .modal-header h2, .week-day-num {
  font-style: italic;
  letter-spacing: 0;
}
/* Petits labels en capitales espacées (signature de la DA) */
.home2-kicker, .cat-tab, .shop-cat-title, .import2-caps-label,
.nav-tab, .week-daycard-day, .badge-tag {
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: var(--font-body); background: var(--cream); color: var(--ink); }
body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
button { cursor: pointer; border: none; background: none; font: inherit; touch-action: manipulation; }
input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }

/* Focus clavier visible (accessibilité) — invisible au clic/tap */
:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }

/* ── Layout ── */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
#view-root { flex: 1; overflow-y: auto; padding-bottom: calc(var(--navbar-h) + var(--safe-bottom)); scroll-behavior: smooth; }
.hidden { display: none !important; }

/* Transition d'entrée de vue (relancée par le router à chaque navigation) */
.view-enter { animation: viewIn var(--t-med) var(--ease-out) both; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Navbar ── */
#navbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--navbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(251,244,234,.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(43,35,32,.08);
  display: flex; align-items: stretch;
  z-index: 100;
}
.nav-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; padding: 4px 0;
  color: #b3a595; font-size: 10px; font-weight: 600;
  position: relative;
  transition: color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.nav-tab .icon { font-size: 20px; line-height: 1; display: flex; transition: transform var(--t-med) var(--ease-spring); }
.nav-tab .icon svg { width: 23px; height: 23px; }
.nav-tab:active .icon { transform: scale(.82); }
.nav-tab.active { color: var(--terra); font-weight: 700; }
.nav-tab.active .icon { transform: translateY(-1px) scale(1.08); }
.nav-tab::after { content: none; }
.nav-tab.nav-logout { flex: 0 0 48px; color: #c9a196; opacity: .8; }
.nav-tab.nav-logout:hover { opacity: 1; }

/* ── Header de page — crème, gros titre Bricolage ── */
.page-header {
  background: transparent; color: var(--ink);
  padding: 22px 20px 10px;
  display: flex; align-items: center; gap: 8px;
}
.page-header h1 {
  font-family: var(--font-display); font-weight: 800; font-size: 25px;
  letter-spacing: -0.01em; flex: 1;
}
/* En-tête du calendrier : titre + contrôles regroupés (empilés en mobile) */
.cal-head { flex-wrap: wrap; }
.cal-head h1 { min-width: 0; }   /* laisse le titre rétrécir au lieu de déborder */
.cal-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
@media (max-width: 560px) {
  .cal-head h1 { flex: 1 1 100%; font-size: 22px; }   /* titre sur sa propre ligne */
  .cal-nav { flex: 1 1 100%; justify-content: space-between; margin-top: 8px; }
}
.page-header button {
  color: var(--ink-soft); font-size: 19px; font-weight: 700;
  background: var(--cream-deep); border-radius: 13px;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.page-header button:hover { background: #eadfcd; }
.page-header #cal-today { width: auto; padding: 0 13px; font-size: 12.5px; font-weight: 700; }
.page-header .btn-view-toggle {
  width: auto; font-size: 12.5px; font-weight: 700; padding: 0 13px;
  border: none; border-radius: 13px; background: var(--terra); color: #fff;
}
.page-header .btn-view-toggle:hover { background: #b25835; }
.home-date { font-size: 13px; color: var(--muted); text-transform: capitalize; font-weight: 600; }

/* ── Calendrier ── */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #e6dccd; border-radius: 18px; overflow: hidden; margin: 4px 12px 12px; border: 1px solid var(--line); }
.cal-header-cell {
  background: var(--ink); color: #fff;
  text-align: center; padding: 7px 2px; font-size: 11px; font-weight: 700;
}
.cal-header-cell.weekend { background: var(--terra); }
.cal-header-cell .cat-label { font-size: 9px; opacity: .8; display: block; font-weight: 600; }

.day-cell {
  background: #FFFDF9; min-height: 70px; padding: 4px;
  display: flex; flex-direction: column; cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.day-cell:hover { background: #f7efe2; }
.day-cell:not(.empty):active { transform: scale(.94); }
.day-cell.weekend { background: var(--cream-dashed); }
.day-cell.weekend:hover { background: #efdfc9; }
.day-cell.empty { background: #f7f1e7; cursor: default; }
.day-cell.today .day-num { background: var(--terra); color: white; border-radius: 50%; }

.day-num { font-size: 13px; font-weight: 700; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.day-dish { font-size: 10px; color: var(--ink-soft); margin-top: 2px; line-height: 1.3; flex: 1; font-weight: 600; }
.day-dish.free-text { font-style: italic; color: var(--muted); font-weight: 500; }
.day-dish.entree {
  font-size: 7px; color: var(--cat-entree); margin-top: 1px; line-height: 1.2;
  flex: initial; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.day-dish.dessert { font-size: 9px; color: var(--cat-sucree); margin-top: 1px; flex: initial; }
.day-dish.lunch {
  font-size: 8px; color: #b8860b; margin-top: 1px; line-height: 1.2;
  flex: initial; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border-bottom: 1px dashed #eee3d2; padding-bottom: 2px;
}
.day-dish.extra { color: var(--muted-2); flex: initial; }
.day-dish.apero, .day-dish.sauce {
  font-size: 7px; margin-top: 1px; line-height: 1.2;
  flex: initial; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.day-dish.apero { color: var(--cat-apero); }
.day-dish.sauce { color: var(--cat-sauce); }

/* Vue semaine : liste verticale des 7 jours, du lundi au dimanche */
.week-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 12px 12px; }
.week-day-row {
  display: flex; align-items: stretch; gap: 10px;
  background: #FFFDF9; border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 12px; cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.week-day-row:hover { background: #f7efe2; }
.week-day-row:active { transform: scale(.99); }
.week-day-row.weekend { background: var(--cream-dashed); }
.week-day-row.today { border-color: var(--terra); box-shadow: inset 0 0 0 1px var(--terra); }

.week-day-head {
  flex: 0 0 62px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 1px;
  border-right: 1px solid var(--line); padding-right: 10px;
}
.week-day-name { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; }
.week-day-num { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1; }
.week-day-row.today .week-day-num { color: var(--terra); }
.week-day-cat { font-size: 9px; font-weight: 600; color: var(--muted); }

.week-day-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.week-day-content .day-dish { font-size: 14px; }
.week-day-content .day-dish.entree,
.week-day-content .day-dish.apero,
.week-day-content .day-dish.sauce,
.week-day-content .day-dish.lunch { font-size: 12px; white-space: normal; }
.week-day-content .day-dish.dessert,
.week-day-content .day-dish.extra { font-size: 12px; }
.week-day-content .day-cooked { align-self: flex-start; margin: 4px 0 0; }
.week-day-empty { font-size: 13px; color: var(--muted); font-weight: 600; }

/* Bouton d'accès au menu du midi dans le picker du soir */
.btn-lunch-link {
  width: 100%; text-align: left; font-size: 13px; font-weight: 700;
  background: #fdf3df; color: #a97b12; border: 1.5px dashed #e0c36b;
  border-radius: 13px; padding: 10px 13px; margin-bottom: 10px; cursor: pointer;
}
.btn-lunch-link:hover { background: #faeecb; }
.day-cooked { font-size: 14px; align-self: flex-end; margin-top: auto; }

.week-row-actions { background: #f7f1e7; grid-column: 1 / -1; padding: 5px 8px; display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.week-list .week-row-actions { background: transparent; padding: 2px 0; border-radius: 0; }
.btn-week-shop { font-size: 12px; font-weight: 700; background: var(--ink); color: white; padding: 4px 11px; border-radius: 999px; }
.btn-week-ingr { background: var(--terra); }
.btn-week-fill { background: var(--terra); }
.btn-week-clear { background: #9a4f3c; }
.btn-week-shop:disabled { opacity: .5; }

/* ── Accueil « Cocotte » (design 1a) ── */
.home2 { display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; width: 100%; }
.home2-header { padding: 20px 20px 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.home2-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.home2-date {
  font-family: var(--font-display); font-weight: 800; font-size: 27px; line-height: 1.04;
  margin-top: 5px; letter-spacing: -0.01em; text-transform: capitalize;
}
.home2-settings {
  width: 46px; height: 46px; border-radius: 15px; background: var(--cream-deep);
  display: flex; align-items: center; justify-content: center; color: var(--ink-soft); flex-shrink: 0;
}
#home2-body { display: flex; flex-direction: column; padding-bottom: 8px; }

/* Héro : grande photo du plat du jour */
.home2-hero {
  margin: 8px 16px 0; border-radius: 26px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 22px 44px -24px rgba(120,70,40,.5);
}
.home2-hero-photo { position: relative; height: 198px; background-size: cover; background-position: center; }
.home2-hero-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(30,16,8,.72) 100%); }
.home2-hero-photo.empty { display: flex; align-items: flex-end; }
.home2-hero-body { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; }
.home2-hero-photo.empty .home2-hero-body { position: static; padding: 16px; color: var(--ink); }
.home2-hero-pill {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; background: var(--terra); color: #fff; padding: 4px 9px; border-radius: 999px;
}
.home2-hero-title { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.08; margin-top: 9px; }
.home2-hero-meta { font-size: 12.5px; opacity: .92; margin-top: 3px; font-weight: 600; }
.home2-hero-actions { display: flex; gap: 10px; padding: 12px; }
.home2-hero-cta { flex: 1; border: none; background: var(--terra); color: #fff; font-weight: 700; font-size: 15px; padding: 13px; border-radius: 14px; }
.home2-hero-cta:active { transform: scale(.98); }
.home2-hero-swap {
  width: 52px; border: 1px solid var(--line-strong); background: var(--cream); border-radius: 14px;
  color: var(--ink-soft); display: flex; align-items: center; justify-content: center;
}

/* En-tête de section */
.home2-section-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 10px; }
.home2-section-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.home2-section-link { font-size: 13px; font-weight: 700; color: var(--terra); display: flex; align-items: center; gap: 2px; }

/* Carrousel « Cette semaine » */
.week-scroll { display: flex; gap: 11px; overflow-x: auto; padding: 2px 16px 4px; -webkit-overflow-scrolling: touch; }
.week-daycard {
  flex: 0 0 118px; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 10px; text-align: left; cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out);
}
.week-daycard:active { transform: scale(.97); }
.week-daycard.today { background: var(--terra-soft); border: 2px solid var(--terra); padding: 9px; }
.week-daycard-head { display: flex; align-items: baseline; justify-content: space-between; }
.week-daycard-day { font-weight: 800; font-size: 12px; letter-spacing: .05em; }
.week-daycard.today .week-daycard-day { color: var(--terra); }
.week-daycard-date { font-size: 12px; color: var(--muted); }
.week-daycard-auj { font-size: 10px; font-weight: 800; color: #fff; background: var(--terra); padding: 2px 6px; border-radius: 999px; }
.week-daycard-cat { font-size: 11px; color: var(--muted); margin: 1px 0 8px; }
.week-daycard.today .week-daycard-cat { color: #b07048; }
.week-daycard-thumb { height: 54px; border-radius: 11px; background-size: cover; background-position: center; }
.week-daycard-name { font-size: 12px; font-weight: 600; margin-top: 8px; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.week-daycard.today .week-daycard-name { font-weight: 700; }

/* Bandeau « Remplir la semaine » */
.home2-fill {
  display: flex; align-items: center; gap: 13px; background: var(--terra); color: #fff;
  border-radius: 18px; padding: 15px 16px; margin: 20px 16px 0; text-align: left; width: calc(100% - 32px);
}
.home2-fill:active { transform: scale(.99); }
.home2-fill-txt { flex: 1; }
.home2-fill-title { font-weight: 700; font-size: 15px; }
.home2-fill-sub { font-size: 12px; opacity: .85; margin-top: 1px; }

/* Duo Courses / Importer */
.home2-duo { display: flex; gap: 11px; margin: 11px 16px 0; }
.home2-tile { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px; text-align: left; cursor: pointer; }
.home2-tile:active { transform: scale(.97); }
.home2-tile-icon { position: relative; width: 38px; height: 38px; border-radius: 11px; background: var(--cream-deep); display: flex; align-items: center; justify-content: center; color: var(--terra); }
.home2-tile-badge { position: absolute; top: -6px; right: -6px; font-size: 11px; font-weight: 800; color: #fff; background: var(--terra); border-radius: 999px; padding: 1px 7px; }
.home2-tile-name { font-weight: 700; font-size: 14px; margin-top: 10px; }
.home2-tile-sub { font-size: 12px; color: var(--muted); }

/* Mes plats */
.home2-plats { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px; margin: 14px 16px 6px; text-align: left; cursor: pointer; width: calc(100% - 32px); }
.home2-plats:active { transform: scale(.99); }
.home2-stack { display: flex; }
.home2-stack-thumb { width: 38px; height: 38px; border-radius: 10px; border: 2px solid #fff; background-size: cover; background-position: center; }
.home2-stack-thumb + .home2-stack-thumb { margin-left: -14px; }
.home2-plats-txt { flex: 1; }
.home2-plats-title { font-weight: 700; font-size: 15px; }
.home2-plats-sub { font-size: 12px; color: var(--muted); }

/* ── Boutons génériques ── */
.btn {
  padding: 12px 18px; border-radius: var(--radius); font-size: 14.5px; font-weight: 700;
  transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.btn:hover { opacity: .9; }
.btn:active { transform: scale(.965); }
.btn:disabled, .btn.loading { opacity: .55; pointer-events: none; }
.btn-primary { background: var(--terra); color: white; }
.btn-danger { background: #9a4f3c; color: white; }
.btn-ghost { border: 1.5px solid var(--line-strong); color: var(--ink); background: #fff; }
.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn-full { width: 100%; display: block; text-align: center; }

/* ── Login ── */
.login-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px; gap: 16px;
  background: url('/images/banner.png') center/cover no-repeat fixed;
}
.login-wrap::before {
  content: ""; position: fixed; inset: 0;
  background: rgba(251,244,234,.55); backdrop-filter: blur(2px);
  z-index: 0;
}
.login-wrap > * { position: relative; z-index: 1; }
.login-wrap h1 { font-family: var(--font-display); font-size: 26px; color: var(--ink); font-weight: 800; }

/* Masquage des publicites AdSense pour les comptes premium / admin */
html.no-ads .adsbygoogle,
html.no-ads ins.adsbygoogle,
html.no-ads .google-auto-placed,
html.no-ads iframe[src*="googlesyndication"],
html.no-ads iframe[src*="doubleclick"],
html.no-ads iframe[src*="adtrafficquality"] { display: none !important; height: 0 !important; }

/* ── Premium / abonnement ── */
.premium-card { text-align: center; background: var(--card, #fff); border: 1px solid rgba(0,0,0,.06); border-radius: 16px; padding: 22px 18px; margin: 4px 0 14px; }
.premium-card.premium-active { background: linear-gradient(135deg, #FDF6E9, #F6ECD8); border-color: rgba(180,140,60,.25); }
.premium-emoji { font-size: 38px; line-height: 1; }
.premium-card h2 { font-family: var(--font-display); font-size: 21px; color: var(--ink); margin-top: 8px; }
.premium-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 6px; }
.premium-benefits { list-style: none; margin: 0 0 14px; padding: 14px 16px; background: rgba(0,0,0,.03); border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
.premium-benefits li { font-size: 14px; color: var(--ink); }
.premium-plans { display: flex; flex-direction: column; gap: 10px; }
.premium-plan { display: block; width: 100%; text-align: left; background: #fff; border: 1.5px solid rgba(0,0,0,.1); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.premium-plan:hover:not(:disabled) { border-color: var(--terra, #C56B4A); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.premium-plan:disabled { opacity: .5; cursor: default; }
.premium-plan-head { display: flex; align-items: center; gap: 8px; }
.premium-plan-name { font-weight: 700; font-size: 15px; color: var(--ink); }
.premium-plan-price { font-size: 20px; font-weight: 800; color: var(--ink); margin-top: 4px; }
.premium-plan-price span { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.premium-badge { font-size: 11px; font-weight: 700; color: #fff; background: var(--terra, #C56B4A); padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.premium-note { font-size: 13px; color: var(--ink-soft); background: rgba(0,0,0,.04); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.settings-premium { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-premium-title { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.settings-premium-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* ── Landing / présentation (page de connexion, contenu SEO) ── */
.landing-hero { width: 100%; max-width: 420px; text-align: center; margin-bottom: 4px; }
.landing-title { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--ink); letter-spacing: -0.01em; }
.landing-tagline { font-size: 15px; font-weight: 700; color: var(--terra); margin-top: 2px; }
.landing-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin-top: 10px; }
.landing-features { list-style: none; margin: 14px auto 0; padding: 0; display: inline-flex; flex-direction: column; gap: 6px; text-align: left; }
.landing-features li { font-size: 13px; color: var(--ink-soft); font-weight: 600; }

.login-logo { width: 200px; height: 200px; object-fit: contain; }
.login-form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.form-group input, .form-group select { border: 1.5px solid #ddd0bd; background: #fff; border-radius: 13px; padding: 11px 14px; font-size: 15px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px rgba(196,99,60,.16); }
.error-msg { color: #b3402a; font-size: 13px; min-height: 18px; }
.login-hint { font-size: 12px; color: var(--muted-2); margin-top: 8px; text-align: center; }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(43,35,32,.45); z-index: 200;
  display: flex; align-items: flex-end;
  animation: overlayIn var(--t-med) ease both;
}
.modal-box {
  background: var(--cream); width: 100%; max-height: 90vh;
  border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  padding-bottom: var(--safe-bottom);
  box-shadow: var(--shadow-lift);
  animation: sheetUp var(--t-med) var(--ease-out) both;
}
/* Poignée visuelle de bottom-sheet */
.modal-box::before {
  content: ""; align-self: center; flex-shrink: 0;
  width: 36px; height: 4px; border-radius: 2px;
  background: #d8c9b4; margin-top: 8px;
}
.modal-overlay.closing { animation: overlayOut var(--t-fast) ease both; }
.modal-overlay.closing .modal-box { animation: sheetDown var(--t-fast) ease-in both; }
@keyframes overlayIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlayOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes sheetUp    { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheetDown  { from { transform: translateY(0); } to { transform: translateY(100%); } }
@media (min-width: 640px) {
  .modal-overlay { align-items: center; justify-content: center; padding: 24px; }
  .modal-box { max-width: 480px; border-radius: 22px; }
  .modal-box::before { display: none; }
}
.modal-header { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.modal-header h2 { flex: 1; font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--ink); }
.modal-header .btn-close { font-size: 22px; color: var(--muted); padding: 2px 6px; }
.modal-body { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
/* Sans ceci, les enfants flex se compressent quand la modale est pleine
   (listes écrasées jusqu'à devenir invisibles) au lieu de la faire défiler */
.modal-body > * { flex-shrink: 0; }
.modal-footer { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Picker ── */
.picker-search { border: 1.5px solid #ddd0bd; background: #fff; border-radius: 13px; padding: 10px 13px; width: 100%; font-size: 14px; }
.dish-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.dish-item { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 12px; cursor: pointer; background: #fff; border: 1px solid var(--line); transition: background .12s, transform var(--t-fast) var(--ease-out); }
.dish-item:hover { background: #fbf1e6; }
.dish-item.selected { background: var(--terra-soft); border-color: rgba(196,99,60,.4); }
/* La DA « éditorial papier » force .dish-item en !important : on restaure ici,
   avec une spécificité supérieure, le survol et surtout le surlignage de
   sélection — sinon choisir un plat ne change plus visiblement le fond. */
.dish-item:hover { background: #fbf1e6 !important; }
.dish-item.selected { background: var(--terra-soft) !important; border-color: var(--terra) !important; }
.dish-item:active { transform: scale(.98); }
.dish-item .dish-name { flex: 1; font-size: 14px; font-weight: 600; }
.badge { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 20px; }
.badge-new { background: #fdf3df; color: #a97b12; }
.badge-count { background: var(--cream-deep); color: var(--ink-soft); }
.badge-tag { font-size: 9px; background: var(--cream-deep); color: var(--ink-soft); padding: 1px 5px; border-radius: 4px; }
.priority-label { font-size: 11px; color: var(--terra); font-weight: 700; margin: 4px 0 2px; }

/* Raccourcis du sélecteur (restes, resto…) */
.quick-chip {
  font-size: 12px; font-weight: 700; padding: 6px 13px;
  border: 1.5px solid #ddd0bd; border-radius: 999px; color: #7a6a5c; background: #fff;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.quick-chip:active { transform: scale(.94); }
.quick-chip.active { background: var(--terra); border-color: var(--terra); color: white; }

/* Listes déroulantes Entrée / Apéro / Sauce du sélecteur */
.picker-opt-row { display: flex; align-items: center; gap: 10px; }
.picker-opt-label { font-size: 12.5px; font-weight: 700; width: 74px; flex-shrink: 0; }
.picker-select {
  flex: 1; min-width: 0; border: 1.5px solid #ddd0bd; background: #fff;
  border-radius: 13px; padding: 9px 12px; font-size: 14px; color: var(--ink);
}

/* ── Plats (bibliothèque) ── */
.plats-search {
  margin: 4px 16px 0; display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid rgba(43,35,32,.08); border-radius: 14px;
  padding: 11px 13px; color: var(--muted);
}
.plats-search input { border: none; outline: none; background: none; flex: 1; font-size: 14px; color: var(--ink); }
.plats-search input::placeholder { color: var(--muted); }

.cat-tabs { display: flex; overflow-x: auto; gap: 8px; padding: 10px 16px 6px; background: transparent; border-bottom: none; }
.cat-tab {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; border: none; background: var(--cream-deep); color: #7a6a5c;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.cat-tab:active { transform: scale(.94); }
.cat-tab.active { color: white; font-weight: 700; background: var(--terra); }
/* les couleurs par catégorie ne s'appliquent qu'à l'état actif */
.cat-pdt.active { background: var(--cat-pdt); }
.cat-riz.active { background: var(--cat-riz); }
.cat-pates.active { background: var(--cat-pates); }
.cat-entree.active { background: var(--cat-entree); }
.cat-autre.active { background: var(--cat-autre); }
.cat-sucree.active { background: var(--cat-sucree); }
.cat-africain.active { background: var(--cat-africain); }
.cat-apero.active { background: var(--cat-apero); }
.cat-sauce.active { background: var(--cat-sauce); }

/* Grille 2 colonnes de cartes plats */
.plats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 16px 16px; }
.plat-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  cursor: pointer; text-align: left; position: relative;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.plat-card:active { transform: scale(.97); }
.plat-card.inactive { opacity: .45; }
.plat-thumb {
  height: 96px; width: 100%; object-fit: cover; display: block;
  background: repeating-linear-gradient(135deg, #E7D3C0 0 10px, #EAD9C8 10px 20px);
}
.plat-thumb.ph-2 { background: repeating-linear-gradient(135deg, #EAD9C8 0 10px, #EEE1D2 10px 20px); }
.plat-thumb.ph-3 { background: repeating-linear-gradient(135deg, #EFDCCC 0 10px, #F1E7D8 10px 20px); }
.plat-body { padding: 10px 11px; }
.plat-name { font-weight: 700; font-size: 13.5px; line-height: 1.15; }
.plat-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; font-weight: 600; }
.plat-fav { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; font-size: 14px; }

/* ligne historique (encore utilisée par certaines listes) */
.dish-row { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: transparent; }
.dish-row .dish-name { flex: 1; font-size: 14px; font-weight: 600; }
.dish-row .count-badge { font-size: 11px; color: var(--muted); }
.dish-row .actions { display: flex; gap: 6px; }
.dish-row.inactive { opacity: .45; }

/* ── Recette (détail d'un plat) ── */
.recette-hero {
  position: relative; height: 210px; margin: -12px -16px 0; overflow: hidden;
  background: repeating-linear-gradient(135deg, #E7D3C0 0 12px, #EAD9C8 12px 24px);
}
.recette-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.recette-hero-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,12,6,.15) 0%, rgba(0,0,0,0) 30%, rgba(30,16,8,.75) 100%); }
.recette-hero-body { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; }
.recette-hero-title { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.06; margin-top: 8px; }
.recette-meta { display: flex; gap: 10px; }
.recette-meta-card { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; text-align: center; }
.recette-meta-card .v { font-weight: 800; font-size: 15px; }
.recette-meta-card .l { font-size: 11px; color: var(--muted); font-weight: 600; }
.recette-section-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 6px 0 2px; }
.recette-ingr-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.recette-ingr-row .q { color: var(--muted); }
.recette-ingr-row:last-child { border-bottom: none; }

/* ── Importer (design 1a) ── */
.import2-header { padding: 22px 20px 6px; }
.import2-title { font-family: var(--font-display); font-weight: 800; font-size: 26px; }
.import2-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.import2-quota {
  margin: 6px 16px 0; background: #fdf3df; border: 1.5px dashed #e0c36b; border-radius: 13px;
  padding: 10px 13px; font-size: 13px; font-weight: 600; color: #a97b12;
}
.import2-body { padding: 12px 0 16px; max-width: 560px; margin: 0 auto; width: 100%; }

.import2-linkbox {
  display: flex; align-items: center; gap: 9px; margin: 4px 16px 0;
  background: #fff; border: 1.5px solid var(--terra); border-radius: 16px; padding: 11px 12px;
}
.import2-linkbox input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-size: 14px; color: var(--ink); }
.import2-linkbox input::placeholder { color: var(--muted); }
.import2-go { width: 32px; height: 32px; border-radius: 10px; background: var(--terra); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.import2-caps-label { padding: 16px 20px 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.import2-caps { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; }
.import2-cap {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  background: var(--cream-deep); color: #7a6a5c; padding: 7px 12px; border-radius: 999px;
}

.import2-divider { display: flex; align-items: center; gap: 10px; padding: 16px 20px 8px; }
.import2-divider::before, .import2-divider::after { content: ""; flex: 1; height: 1px; background: rgba(43,35,32,.1); }
.import2-divider span { font-size: 12px; color: var(--muted); font-weight: 600; }

.import2-method {
  display: flex; align-items: center; gap: 13px; width: calc(100% - 32px); margin: 0 16px 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; text-align: left; cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out);
}
.import2-method:active { transform: scale(.99); }
.import2-method-icon { width: 44px; height: 44px; border-radius: 13px; background: var(--cream-deep); display: flex; align-items: center; justify-content: center; color: var(--terra); flex-shrink: 0; }
.import2-method-txt { flex: 1; }
.import2-method-name { font-weight: 700; font-size: 14.5px; }
.import2-method-sub { font-size: 12px; color: var(--muted); }

#import-flow { padding: 0 16px; }
#import-result { margin: 0 16px; }

.import2-recent-title { padding: 20px 20px 2px; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.import2-recent-list { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 0; }
.import2-recent-item {
  display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 9px; text-align: left; cursor: pointer; width: 100%;
}
.import2-recent-item:active { transform: scale(.99); }
.import2-recent-thumb {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; background-size: cover; background-position: center;
  background-color: #EAD9C8; background-image: repeating-linear-gradient(135deg, #E7D3C0 0 8px, #EAD9C8 8px 16px);
}
.import2-recent-txt { flex: 1; min-width: 0; }
.import2-recent-name { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import2-recent-sub { font-size: 11.5px; color: var(--muted); }

/* ── Courses ── */
.shopping-header { background: transparent; color: var(--ink); padding: 12px 16px; display: flex; align-items: center; gap: 8px; }
.shop-progress-card {
  margin: 6px 16px 4px; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 14px;
}
.shop-progress-label { font-size: 13px; font-weight: 700; }
.shop-progress-bar { height: 7px; border-radius: 99px; background: #EBDFCF; margin-top: 8px; overflow: hidden; }
.shop-progress-fill { height: 100%; background: var(--terra); border-radius: 99px; transition: width var(--t-med) var(--ease-out); }
.shop-cat-title {
  padding: 14px 20px 6px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
}
.shopping-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; margin: 0 16px 8px;
  transition: background var(--t-fast), opacity var(--t-med);
}
.shopping-item input[type=checkbox] { width: 21px; height: 21px; accent-color: var(--terra); border-radius: 7px; transition: transform var(--t-fast) var(--ease-spring); }
.shopping-item input[type=checkbox]:active { transform: scale(1.25); }
.shopping-item .item-text { flex: 1; font-size: 14.5px; font-weight: 600; transition: color var(--t-med); }
.shopping-item.checked { opacity: .6; background: #F6EFE4; border-color: rgba(43,35,32,.05); }
.shopping-item.checked .item-text { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.shopping-add { padding: 12px 16px; background: transparent; border-top: 1px solid var(--line); display: flex; gap: 8px; }
.shopping-add input { flex: 1; border: 1.5px solid #ddd0bd; background: #fff; border-radius: 13px; padding: 10px 13px; font-size: 14px; }

/* ── IA « Remplir la semaine » ── */
.ia-intro { padding: 4px 20px 0; font-size: 13.5px; color: var(--muted-2); line-height: 1.45; }
.ia-options { padding: 16px 16px 4px; display: flex; flex-direction: column; gap: 11px; }
.ia-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 15px; }
.ia-row { display: flex; align-items: center; justify-content: space-between; }
.ia-card-title { font-weight: 700; font-size: 14.5px; }
.ia-card-sub { font-size: 12px; color: var(--muted); font-weight: 600; }
.ia-stepper { display: flex; align-items: center; gap: 14px; }
.ia-step-btn {
  width: 30px; height: 30px; border-radius: 50%; background: var(--cream-deep);
  display: flex; align-items: center; justify-content: center; color: #7a6a5c; font-weight: 800; font-size: 16px;
}
.ia-step-btn.plus { background: var(--terra); color: #fff; }
.ia-step-val { font-weight: 800; font-size: 16px; min-width: 18px; text-align: center; }
.ia-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ia-cta-wrap { margin-top: auto; padding: 14px 16px calc(16px + var(--safe-bottom)); }
.ia-cta {
  width: 100%; border: none; background: var(--terra); color: #fff; font-family: inherit;
  font-weight: 800; font-size: 16px; padding: 16px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.ia-cta:disabled { opacity: .55; }
.ia-preview-day { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 13px; margin: 0 16px 8px; }
.ia-preview-dow { width: 34px; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.ia-preview-name { flex: 1; font-size: 14px; font-weight: 700; }
.ia-preview-skip { font-size: 12px; color: var(--muted); font-style: italic; }

/* ── Suivi ── */
.tracking-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tracking-table th { background: var(--ink); color: white; padding: 8px 10px; text-align: left; cursor: pointer; user-select: none; }
.tracking-table th:hover { background: #463a34; }
.tracking-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tracking-table tr.priority-row { background: var(--terra-soft); }
.tracking-table tr:hover td { background: #f7efe2; }

/* ── Réglages ── */
.settings-section { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin: 12px 16px; padding: 14px; box-shadow: none; }
.settings-section h2 { font-family: var(--font-display); font-size: 15px; color: var(--ink); margin-bottom: 10px; font-weight: 700; }
.settings-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.settings-row:last-child { border: none; }
.settings-row label { flex: 1; font-size: 14.5px; }
.settings-row label.toggle { flex: 0 0 auto; }
.settings-row select { border: 1.5px solid #ddd0bd; background: #fff; border-radius: 10px; padding: 5px 8px; font-size: 13px; }
/* Sections dépliantes des réglages */
.settings-section.collapsible { padding: 0; overflow: hidden; }
.collapse-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 14px 15px; text-align: left;
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  transition: background var(--t-fast);
}
.collapse-head:hover { background: #fbf5eb; }
.collapse-head:active { background: #f6eddd; }
.collapse-title { flex: 1; }
.collapse-badge {
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  background: var(--cream-deep); border-radius: 20px; padding: 2px 9px;
}
.collapse-chevron {
  color: #c4b3a3; font-size: 13px;
  transition: transform var(--t-med) var(--ease-out);
  transform: rotate(-90deg);
}
.collapsible.open .collapse-chevron { transform: rotate(0deg); }
.collapse-wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med) var(--ease-out);
}
.collapsible.open .collapse-wrap { grid-template-rows: 1fr; }
.collapse-clip { overflow: hidden; min-height: 0; }
.collapse-body { padding: 0 15px 14px; }

/* Carte profil des réglages */
.settings-profile {
  margin: 6px 16px 4px; display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 15px;
}
.settings-avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--terra); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 20px; flex-shrink: 0;
}
.settings-profile-name { font-weight: 700; font-size: 16px; }
.settings-profile-sub { font-size: 12.5px; color: var(--muted); }

.toggle { position: relative; width: 46px; height: 27px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: #ddd0bd; border-radius: 99px; transition: .3s; }
.toggle-slider::before { content: ""; position: absolute; left: 3px; top: 3px; width: 21px; height: 21px; background: white; border-radius: 50%; transition: .3s; }
.toggle input:checked + .toggle-slider { background: var(--terra); }
.toggle input:checked + .toggle-slider::before { transform: translateX(19px); }

/* ── OAuth buttons ── */
.oauth-divider { display: flex; align-items: center; margin: 16px 0 12px; padding: 0 4px; color: var(--muted); font-size: 12px; }
.oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; height: 1px; background: #ddd0bd; }
.oauth-divider span { padding: 0 10px; }
.oauth-buttons { display: flex; flex-direction: column; gap: 10px; }
.btn-oauth {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: opacity .15s, box-shadow .15s; text-decoration: none;
  border: 1.5px solid #ddd0bd;
}
.btn-oauth:hover { opacity: .9; box-shadow: var(--shadow); }
.btn-oauth-google { background: #fff; color: #3c4043; }

/* ── Toast ── */
#toast-root { position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 999; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 8px;
  background: var(--ink); color: white;
  padding: 11px 16px; border-radius: 14px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lift); max-width: 280px;
  animation: toastIn var(--t-med) var(--ease-spring) both;
}
.toast.error { background: #9a4f3c; }
.toast.success { background: var(--terra); }
.toast .toast-icon { flex-shrink: 0; }
.toast.toast-out { animation: toastOut var(--t-fast) ease-in both; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(60px); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Bannière de consentement cookies ── */
.cookie-banner {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--navbar-h) + 12px + var(--safe-bottom));
  z-index: 300; background: var(--ink); color: #fff; border-radius: 16px;
  padding: 14px 16px; box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column; gap: 10px; max-width: 520px; margin: 0 auto;
  animation: sheetUp var(--t-med) var(--ease-out) both;
}
.cookie-txt { font-size: 12.5px; line-height: 1.5; opacity: .95; }
.cookie-actions { display: flex; gap: 8px; justify-content: flex-end; }
.cookie-btn { font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px; }
.cookie-refuse { background: rgba(255,255,255,.15); color: #fff; }
.cookie-accept { background: var(--terra); color: #fff; }
@media (min-width: 640px) { .cookie-banner { bottom: 16px; } }

/* ── Offline banner ── */
#offline-banner { display: none; position: fixed; top: 0; left: 0; right: 0; background: var(--ink); color: white; text-align: center; padding: 6px; font-size: 13px; z-index: 999; }
#offline-banner.show { display: block; }

/* ── Utilitaires ── */
.card { background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; transition: box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out); }
.p-16 { padding: 16px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.text-center { text-align: center; }
.text-muted { color: var(--muted); font-size: 13px; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-8 { gap: 8px; }
.member-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

/* ── Chargement : spinner ── */
.loader-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; color: var(--muted); font-size: 13px; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid #e9ddc9; border-top-color: var(--terra);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Chargement : skeleton shimmer ── */
.skeleton {
  position: relative; overflow: hidden;
  background: #ece2d1; border-radius: 8px; min-height: 14px;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* ── Entrée en cascade des lignes de liste ── */
.stagger-in > * { animation: viewIn var(--t-med) var(--ease-out) both; }
.stagger-in > *:nth-child(1)  { animation-delay: 0ms; }
.stagger-in > *:nth-child(2)  { animation-delay: 25ms; }
.stagger-in > *:nth-child(3)  { animation-delay: 50ms; }
.stagger-in > *:nth-child(4)  { animation-delay: 75ms; }
.stagger-in > *:nth-child(5)  { animation-delay: 100ms; }
.stagger-in > *:nth-child(6)  { animation-delay: 125ms; }
.stagger-in > *:nth-child(7)  { animation-delay: 150ms; }
.stagger-in > *:nth-child(8)  { animation-delay: 175ms; }
.stagger-in > *:nth-child(n+9) { animation-delay: 200ms; }

/* ── État vide ── */
.empty-state { text-align: center; padding: 40px 24px; color: var(--muted); }
.empty-state .empty-icon { font-size: 40px; display: block; margin-bottom: 8px; }

/* ═══════════════════════════════════════════════════════════════════════
   DA « ÉDITORIAL PAPIER » — surcharges appliquées à toute l'app.
   Transforme le look (papier, filets fins, angles vifs, capitales) sans
   toucher à la logique JS ni aux identifiants/handlers des vues.
   ═══════════════════════════════════════════════════════════════════════ */

/* Surfaces & cartes : fond papier, filet fin, angles vifs, pas d'ombre */
.card, .home2-hero, .week-daycard, .home2-tile, .home2-plats, .plat-card,
.settings-section, .settings-profile, .shop-progress-card, .shopping-item,
.import2-method, .import2-recent-item, .ia-card, .ia-preview-day,
.premium-card, .premium-plan, .recette-meta-card, .dish-item, .week-day-row {
  background: var(--card) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

/* Boutons : pleins = encre, capitales espacées, angles vifs */
.btn { border-radius: 2px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: 12.5px; }
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { background: #3a342a; opacity: 1; }
.btn-ghost { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.btn-danger { background: #8A4B35; color: #fff; }

/* Champs de saisie : filet fin, angles vifs, fond papier */
.form-group input, .form-group select, .picker-search, .picker-select,
.shopping-add input, .plats-search, .import2-linkbox, .settings-row select {
  border-radius: 2px !important; border-color: var(--line-strong) !important;
}

/* Navbar éditoriale : icône + libellé sur chaque onglet, actif en terracotta.
   5 onglets tenant sur une seule ligne, même sur petit mobile. */
#navbar { background: var(--cream); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--line-strong); }
.nav-tab {
  font-size: 9.5px; font-weight: 600; gap: 3px; padding: 6px 1px; min-width: 0;
  letter-spacing: 0; color: var(--muted-2);
}
.nav-tab .icon { display: flex; align-items: center; justify-content: center; }
.nav-tab .icon svg { width: 23px; height: 23px; }
.nav-tab > span:last-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; display: block;
}
.nav-tab.active { color: var(--terra); font-weight: 700; }
.nav-tab.active .icon { transform: translateY(-1px); }
/* Déconnexion : icône seule, compacte, en bout de barre */
.nav-tab.nav-logout { flex: 0 0 32px; }
.nav-tab.nav-logout .icon { display: flex; align-items: center; justify-content: center; color: var(--muted-2); }
.nav-tab.nav-logout .icon svg { width: 19px; height: 19px; }
.nav-tab.nav-logout:active .icon { transform: scale(.85); }
@media (max-width: 360px) { .nav-tab { font-size: 9.5px; } }
@media (max-width: 320px) { .nav-tab { font-size: 8.5px; } }

/* Puces & avatars carrés (signature papier) */
.member-dot { border-radius: 0 !important; width: 8px; height: 8px; }
.settings-avatar { border-radius: 0 !important; border: 1px solid var(--ink); background: transparent; color: var(--ink); }

/* Titres de page : grand Garamond italique */
.page-header h1 { font-size: 30px; font-weight: 500; }
.page-header button { border-radius: 2px; background: transparent; border: 1px solid var(--line-strong); }
.page-header .btn-view-toggle { background: var(--ink); color: var(--cream); border: none; }

/* Accent terracotta : liens, rubriques, badges */
.shop-cat-title, .import2-caps-label, .home2-section-link, .priority-label { color: var(--terra); }
.home2-tile-badge, .badge-count { background: var(--terra); color: var(--cream); border-radius: 2px; }

/* Fond hachuré « papier » par DÉFAUT des vignettes : la vraie photo (définie en
   inline sur l'élément, ex background-image:url(...)) le recouvre naturellement.
   Surtout PAS de !important ici, sinon les photos réelles seraient masquées. */
.home2-hero-photo, .week-daycard-thumb, .import2-recent-thumb, .home2-stack-thumb, .plat-thumb {
  background-color: #EDE7DA;
  background-image: repeating-linear-gradient(-45deg, #EDE7DA 0, #EDE7DA 7px, #E4DCCB 7px, #E4DCCB 14px);
  background-size: cover; background-position: center;
}

/* Toggle carré éditorial */
.toggle { width: 30px; height: 16px; }
.toggle-slider { border-radius: 0; border: 1px solid var(--ink); background: transparent; }
.toggle-slider::before { border-radius: 0; width: 10px; height: 10px; left: 2px; top: 2px; background: var(--muted-2); }
.toggle input:checked + .toggle-slider { background: var(--ink); }
.toggle input:checked + .toggle-slider::before { background: var(--cream); transform: translateX(14px); }

/* Chips / onglets / badges : angles vifs */
.cat-tab, .quick-chip, .import2-cap, .badge, .home2-hero-pill, .btn-week-shop,
.badge-new, .badge-tag, .collapse-badge, .week-daycard-auj { border-radius: 2px !important; }
.cat-tab { background: transparent; border: 1px solid var(--line-strong); color: var(--muted); }
.cat-tab.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.home2-hero-pill { background: var(--ink); }

/* Modale / bottom-sheet : papier, filet marqué */
.modal-box { background: var(--card); border-radius: 0; border-top: 2px solid var(--ink); }
.modal-box::before { display: none; }
@media (min-width: 640px) { .modal-box { border-radius: 0; } }

/* Calendrier : filets fins papier */
.calendar-grid { border-radius: 0; background: var(--line-strong); border: 1px solid var(--line-strong); }
.day-cell { background: var(--cream); }
.day-cell.weekend { background: var(--cream-dashed); }
.cal-header-cell { background: var(--ink); }
.cal-header-cell.weekend { background: var(--terra); }
.day-cell.today .day-num { background: var(--ink); border-radius: 0; }
/* Vue mois : colonnes lisibles (min 50px), la grille coulisse horizontalement
   sur petit écran pour accéder au dimanche sans rapetisser les cellules. */
.cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 12px 12px; }
.cal-scroll .calendar-grid { margin: 4px 0 0; min-width: 366px; }
.calendar-grid { grid-template-columns: repeat(7, minmax(50px, 1fr)); }
.day-cell { overflow: hidden; }
.day-dish { overflow-wrap: anywhere; }

/* Résumé d'un jour (clic sur une case) : une carte par plat, avec photo et ingrédients */
.ddc { border: 1px solid var(--line-strong); background: var(--card); margin-bottom: 10px; }
.ddc-head { display: flex; align-items: center; gap: 11px; padding: 10px 12px; }
.ddc-thumb { width: 54px; height: 54px; flex: none; background-size: cover; background-position: center; border: 1px solid var(--line-strong); }
.ddc-thumb-empty { background: repeating-linear-gradient(-45deg, #EDE7DA 0, #EDE7DA 6px, #E4DCCB 6px, #E4DCCB 12px); }
.ddc-txt { min-width: 0; }
.ddc-label { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); }
.ddc-name { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--ink); line-height: 1.15; margin-top: 1px; }
.ddc-ingr { list-style: none; margin: 0; padding: 2px 12px 11px; display: flex; flex-wrap: wrap; gap: 5px; }
.ddc-ingr li { font-size: 11.5px; color: var(--ink-soft); background: var(--cream-deep); border: 1px solid var(--line); padding: 3px 8px; }
/* Carte de plat cliquable : ouvre la fiche recette complète */
.ddc-click { cursor: pointer; transition: background var(--t-fast); }
.ddc-click:hover { background: var(--cream-deep); }
.ddc-click:active { transform: scale(.99); }
.ddc-arrow { margin-left: auto; align-self: center; color: var(--muted-2); font-size: 20px; padding-left: 8px; flex: none; }

/* Étoile favori sur les cartes de plats */
.plat-star { position: absolute; top: 6px; left: 6px; z-index: 2; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #A79E8A; background: rgba(249,247,241,.92); border: 1px solid var(--line-strong); cursor: pointer; line-height: 1; }
.plat-star.on { color: #C79A3D; }
.plat-star:active { transform: scale(.85); }
/* Onglet Favoris */
.cat-tab.cat-fav.active { background: #8A6D2E; border-color: #8A6D2E; color: var(--cream); }
/* Pastilles régime / allergènes (fiche recette) */
.diet-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; }
.diet-tag { font-size: 12px; font-weight: 600; color: #6B5A3E; background: #F0E9DA; border: 1px solid var(--line-strong); padding: 4px 9px; }
/* Rappel allergies/restrictions dans le sélecteur de plat */
.diet-reminder { background: var(--terra-soft); border: 1px solid var(--terra); color: var(--terra); font-size: 12.5px; font-weight: 600; padding: 8px 11px; margin-bottom: 10px; }
/* Cases à cocher des restrictions alimentaires (réglages) */
.diet-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); margin: 10px 0 6px; }
.diet-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.diet-chip { font-size: 12.5px; font-weight: 600; padding: 6px 11px; border: 1.5px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; border-radius: 2px; transition: all var(--t-fast); }
.diet-chip:hover { border-color: var(--terra); color: var(--terra); }
.diet-chip.on { background: var(--terra); border-color: var(--terra); color: #fff; }

/* Onboarding première visite (modal centrée) */
.onb-overlay { position: fixed; inset: 0; z-index: 1001; background: rgba(38,34,27,.6); display: flex; align-items: center; justify-content: center; padding: 22px; animation: pwa-fade .2s ease-out; }
.onb-card { width: 100%; max-width: 380px; max-height: 88vh; overflow-y: auto; background: var(--card); border: 1px solid var(--line-strong); border-radius: 4px; padding: 30px 24px 22px; text-align: center; box-shadow: 0 18px 50px rgba(38,34,27,.3); animation: onb-pop .3s var(--ease-out); }
@keyframes onb-pop { from { transform: translateY(12px) scale(.98); opacity: 0 } to { transform: none; opacity: 1 } }
.onb-icon { font-size: 44px; line-height: 1; margin-bottom: 12px; }
.onb-title { font-family: var(--font-display); font-size: 25px; color: var(--ink); margin-bottom: 8px; text-wrap: balance; }
.onb-body { font-size: 14px; color: var(--muted); line-height: 1.5; min-height: 63px; }
.onb-dots { display: flex; gap: 7px; justify-content: center; margin: 16px 0 18px; }
.onb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: all var(--t-fast); }
.onb-dot.on { background: var(--terra); width: 20px; border-radius: 4px; }
.onb-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.onb-actions .btn-primary { flex: 1; }
.onb-actions .btn-ghost { min-width: 64px; }
@media (prefers-reduced-motion: reduce) { .onb-card, .onb-overlay { animation: none; } }

/* Invitation à installer la PWA (bottom-sheet) */
.pwa-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(38,34,27,.55); display: flex; align-items: flex-end; justify-content: center; animation: pwa-fade .2s ease-out; }
@keyframes pwa-fade { from { opacity: 0 } to { opacity: 1 } }
.pwa-sheet { width: 100%; max-width: 460px; background: var(--card); border: 1px solid var(--line-strong); border-bottom: none; border-radius: 4px 4px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(38,34,27,.25); animation: pwa-slide .28s var(--ease-out); }
@keyframes pwa-slide { from { transform: translateY(100%) } to { transform: translateY(0) } }
.pwa-icon { font-size: 34px; text-align: center; margin-bottom: 6px; }
.pwa-title { font-family: var(--font-display); font-size: 22px; line-height: 1.15; text-align: center; color: var(--ink); margin-bottom: 12px; text-wrap: balance; }
.pwa-lead { font-size: 13.5px; color: var(--muted); text-align: center; margin-bottom: 14px; }
.pwa-steps { list-style: none; counter-reset: pwa; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.pwa-steps li { counter-increment: pwa; position: relative; padding-left: 34px; font-size: 14px; color: var(--ink); line-height: 1.4; }
.pwa-steps li::before { content: counter(pwa); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--terra); color: #fff; font-size: 12px; font-weight: 700; border-radius: 50%; }
.pwa-note { font-size: 12px; color: var(--terra); background: var(--terra-soft); border: 1px solid var(--terra); padding: 8px 10px; margin-bottom: 12px; }
.pwa-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

/* Avertissement « navigateur intégré » sur les pages de connexion/inscription */
.oauth-inapp-note { background: var(--terra-soft); border: 1px solid var(--terra); color: var(--terra); font-size: 12.5px; line-height: 1.45; padding: 9px 11px; margin-bottom: 12px; }

/* Bouton photo rapide sur la fiche recette */
.recette-photo-btn { position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(38,34,27,.72); color: var(--cream); font-size: 12px; font-weight: 700; letter-spacing: .03em; padding: 8px 12px; border: 1px solid rgba(255,255,255,.25); cursor: pointer; }
.recette-photo-btn:hover { background: rgba(38,34,27,.9); }
.recette-photo-btn:disabled { opacity: .7; }

/* Pages légales (mentions, CGV, confidentialité) */
.legal-doc { max-width: 680px; margin: 0 auto; padding: 4px 20px 44px; font-size: 14px; line-height: 1.62; color: var(--ink-soft); }
.legal-doc h2 { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--ink); margin: 24px 0 8px; }
.legal-doc p { margin-bottom: 10px; }
.legal-doc ul { margin: 0 0 12px 18px; display: flex; flex-direction: column; gap: 5px; }
.legal-doc a { color: var(--terra); text-decoration: underline; }
.legal-date { font-size: 11px !important; color: var(--muted) !important; text-transform: uppercase; letter-spacing: .1em; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.legal-nav a { font-size: 12.5px; font-weight: 700; text-decoration: none; }
/* Liens légaux compacts (connexion, réglages) */
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 14px; }
.legal-links a { font-size: 12px; color: var(--muted); text-decoration: none; }
.legal-links a:hover { color: var(--terra); text-decoration: underline; }

/* Divers surfaces secondaires */
.home2-settings, .home2-tile-icon, .import2-method-icon, .ia-step-btn { border-radius: 2px; background: var(--cream-deep); color: var(--terra); }
.toast { border-radius: 2px; }
.cookie-banner { border-radius: 2px; }
.home2-hero { box-shadow: none !important; }

/* CTA principaux pleins = encre (le terracotta reste réservé aux accents/liens) */
.home2-hero-cta, .home2-fill { background: var(--ink) !important; color: var(--cream) !important; }
.home2-fill-sub { color: var(--muted-2) !important; opacity: 1 !important; }
.home2-hero-swap { border-radius: 2px; border: 1px solid var(--ink); background: transparent; color: var(--ink); }
/* Bouton d'ajout des plats : carré éditorial */
.plats-add-btn, .import2-go { border-radius: 2px !important; }

/* ── Accessibilité : réduction des animations ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #view-root { scroll-behavior: auto; }
}