:root{
  /* Pred — « Côtier moderne ». Tokens sémantiques ; alias historiques en fin de bloc
     (évite de churner les sélecteurs existants). */
  --bg:#f5f8f8; --surface:#ffffff;
  --ink:#102a31; --ink-2:#33545b; --muted-fg:#7c9296;
  --primary:#0e8aa0; --primary-2:#2a9d8f; --accent:#f0b429;
  --line:#e0eaea;
  --warn:#e88a1a; --warn-bg:#fdeede; --warn-fg:#9a4a12; --danger:#dc2626;
  --hero-bg:#102a31; --hero-fg:#eaf6f6; --hero-contour:#1d4753; --today-bg:#fef3c7;
  --chart-line:var(--ink); --chart-goal:var(--primary); --chart-trend:var(--accent);
  --chart-point:var(--accent); --chart-label:var(--muted-fg);
  --on:#FFFFFF; --r-sm:8px; --r:14px; --r-lg:20px; --radius:14px;
  --green:var(--primary); --green-2:var(--primary-2); --amber:var(--accent);
  --fg:var(--ink); --border:var(--line); --muted:#eef3f3;
}
/* ── Thème sombre : auto (système, sauf forçage clair) + forçage manuel ── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1b1f; --surface:#15282d; --ink:#e8eff0; --ink-2:#aebfc2; --muted-fg:#849a9e;
    --primary:#3bb3c7; --primary-2:#46b9a6; --accent:#f0b429; --line:#27393e;
    --warn:#e89a3a; --warn-bg:#3a2c18; --warn-fg:#f3c684; --danger:#f26d6d;
    --hero-bg:#0c343d; --today-bg:#2a3a1f; --muted:#1b2f34;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1b1f; --surface:#15282d; --ink:#e8eff0; --ink-2:#aebfc2; --muted-fg:#849a9e;
  --primary:#3bb3c7; --primary-2:#46b9a6; --accent:#f0b429; --line:#27393e;
  --warn:#e89a3a; --warn-bg:#3a2c18; --warn-fg:#f3c684; --danger:#f26d6d;
  --hero-bg:#0c343d; --today-bg:#2a3a1f; --muted:#1b2f34;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{ margin:0; font-family:"Nunito Sans",system-ui,sans-serif; background:var(--bg); color:var(--ink);
  -webkit-tap-highlight-color:transparent; font-size:16px; line-height:1.5 }
body.has-nav{ padding-bottom:calc(62px + env(safe-area-inset-bottom)) }
h1,h2,h3{ font-family:"Rubik",system-ui,sans-serif; margin:0; line-height:1.2 }
.wrap{ max-width:560px; margin:0 auto; padding:16px 16px 24px }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:4px }

/* Barre haute unique : marque + déconnexion */
.topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:10px 16px; padding-top:max(10px,env(safe-area-inset-top)) }
.topbar-l{ display:flex; align-items:center; gap:11px; min-width:0 }
.topbar-brand{ font-family:"Rubik",sans-serif; font-weight:800; font-size:20px; letter-spacing:.01em; color:var(--ink); flex:0 0 auto }
.topbar-brand b{ color:var(--primary) }
.topbar-page{ font-family:"Rubik",sans-serif; font-weight:600; font-size:15px; color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:11px; border-left:1px solid var(--line) }
.topbar-page:empty{ display:none }
.topbar-r{ display:flex; align-items:center; gap:2px; flex:0 0 auto }
.topbar-out{ margin:0 }
.topbar-out button,.topbar-ico{ display:grid; place-items:center; width:40px; height:40px; border:0; background:transparent;
  color:var(--muted-fg); cursor:pointer; border-radius:10px }
.topbar-out button:hover,.topbar-ico:hover{ color:var(--ink); background:var(--muted) }
.topbar-out svg,.topbar-ico svg{ width:22px; height:22px }

/* Navigation onglets en bas */
.botnav{ position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; background:var(--surface);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom) }
.botnav a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none;
  color:var(--muted-fg); font-size:11px; font-weight:700; padding:9px 0 11px; position:relative }
.botnav a .ico{ width:22px; height:22px }
.botnav a.on{ color:var(--primary) }
.botnav a.on::before{ content:""; position:absolute; top:0; left:26%; right:26%; height:3px;
  border-radius:0 0 3px 3px; background:var(--accent) }

/* En-tête de page léger (écrans hors /suivi) */
.appbar{ background:transparent; color:var(--ink); padding:16px 16px 4px }
.appbar h1{ font-size:24px; font-weight:800; letter-spacing:-.01em }
.appbar .sub{ font-size:13px; color:var(--muted-fg); margin-top:2px }
.progress{ height:10px; background:var(--muted); border-radius:999px; margin-top:12px; overflow:hidden }
.progress > i{ display:block; height:100%; background:var(--primary); border-radius:999px; transition:width .25s ease-out }
.progress-label{ font-size:12px; color:var(--muted-fg); margin-top:6px }
.section{ margin-top:20px }
.section > h2{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--green);
  padding:0 4px 6px; border-bottom:2px solid var(--border) }
.section-meal{ font-family:"Rubik",sans-serif; font-weight:600; padding:6px 4px 2px }
.item{ display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 4px;
  border-bottom:1px solid var(--border); cursor:pointer; user-select:none; transition:transform .08s ease }
.item:active{ transform:scale(.97) }
.item .box{ width:26px; height:26px; flex:0 0 26px; border:2px solid var(--green); border-radius:8px;
  display:grid; place-items:center; color:var(--on) }
.item.done .box{ background:var(--green) }
.item.done .name{ text-decoration:line-through; color:var(--muted-fg) }
.item .name{ flex:1; font-weight:600 }
.item .qty{ font-variant-numeric:tabular-nums; color:var(--ink-2); font-size:14px }
.item .tag{ font-size:11px; color:var(--amber); font-weight:700 }
/* addbar (courses) : posée AU-DESSUS de la bottom-nav (62px) */
.addbar{ position:fixed; left:0; right:0; bottom:calc(62px + env(safe-area-inset-bottom)); z-index:25;
  background:var(--surface); border-top:1px solid var(--line);
  padding:10px 16px; display:flex; gap:8px }
#list{ padding-bottom:84px }   /* dégage l'addbar flottante (courses) */
.addbar input,.addbar select{ font:inherit; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--muted) }
.addbar input[name=nom]{ flex:1; min-width:0 }
.btn{ font:inherit; font-weight:700; border:0; border-radius:10px; padding:10px 14px; cursor:pointer;
  background:var(--green); color:var(--on); transition:transform .08s ease }
.btn:active{ transform:scale(.97) }
.btn.amber{ background:var(--amber) }
.toolbar{ display:flex; gap:8px; margin-top:16px }
.toolbar a{ text-decoration:none }
.empty{ text-align:center; color:var(--muted-fg); padding:40px 16px }

/* Conteneur pleine largeur pour le tableau menu (accueil = vue desktop planif) */
.menu-full{ max-width:1280px; margin:20px auto 4px; padding:0 16px }

/* Grille menu de la semaine : 2 lignes (déj/dîner) × jours en colonnes */
.menu-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:2px solid var(--green); border-radius:var(--radius); background:var(--surface) }
.menu-grid{ border-collapse:collapse; width:100%; min-width:840px; table-layout:fixed }
/* Bordures complètes (grille) bien visibles sur toutes les cellules */
.menu-grid th,.menu-grid td{ border:1px solid var(--line);
  padding:14px 16px; vertical-align:top; text-align:left }
.menu-grid thead th{ background:var(--green); color:var(--on); position:sticky; top:0;
  border-color:var(--green); font-family:"Rubik",sans-serif; font-size:15px; white-space:nowrap }
.menu-grid thead .jname{ font-weight:700 }
.menu-grid thead .jdate{ font-weight:400; opacity:.85; font-size:13px; margin-top:2px }
.menu-grid .rowhead{ position:sticky; left:0; z-index:2; background:var(--green); color:var(--on);
  border-color:var(--green); font-size:13px; font-weight:700; width:90px;
  text-transform:uppercase; letter-spacing:.03em; white-space:nowrap }
.menu-grid thead th:first-child{ left:0; z-index:3 }
.menu-grid tbody tr:nth-child(even) td{ background:var(--muted) }   /* alternance lignes */
/* Nom du plat = élément dominant de la cellule */
.menu-grid .meal{ font-family:"Rubik",sans-serif; font-weight:700; font-size:17px;
  line-height:1.25; color:var(--fg) }
.menu-grid .pkcal{ font-size:12px; color:var(--muted-fg); margin-top:8px; white-space:nowrap;
  font-variant-numeric:tabular-nums }
.menu-grid .pkcal span{ color:var(--green); font-weight:600 }
.menu-grid .dash{ color:var(--muted-fg); font-size:18px }
/* Case cliquable (ouvre la modale détail) */
.menu-grid .cell-btn{ display:block; width:100%; text-align:left; border:0; background:transparent;
  font:inherit; color:inherit; padding:0; cursor:pointer; border-radius:8px; transition:background .08s }
.menu-grid .cell-btn:hover{ background:var(--muted) }
.menu-grid .cell-btn:active{ transform:scale(.99) }

/* Modale détail d'un repas */
.meal-modal{ border:0; border-radius:16px; padding:0; width:min(440px,92vw); color:var(--fg);
  background:var(--surface); box-shadow:0 20px 60px rgba(0,0,0,.25) }
.meal-modal::backdrop{ background:rgba(15,23,42,.45) }
.meal-modal .modal-eyebrow{ background:var(--green); color:var(--on); font-family:"Rubik",sans-serif;
  font-size:12px; text-transform:uppercase; letter-spacing:.05em; padding:10px 20px }
.meal-modal .modal-title{ font-size:20px; padding:14px 20px 4px }
.meal-modal .modal-profil{ padding:8px 20px 12px; border-top:1px solid var(--border) }
.meal-modal .modal-pname{ font-weight:700; color:var(--green); margin:6px 0 8px;
  display:flex; justify-content:space-between; align-items:baseline }
.meal-modal .modal-pname span{ color:var(--muted-fg); font-weight:600; font-size:13px;
  font-variant-numeric:tabular-nums }
.meal-modal .modal-ings{ list-style:none; margin:0; padding:0 }
.meal-modal .modal-ings li{ display:flex; justify-content:space-between; gap:12px;
  padding:5px 0; border-bottom:1px dashed var(--border); font-size:15px }
.meal-modal .modal-ings li:last-child{ border-bottom:0 }
.meal-modal .modal-ings b{ font-variant-numeric:tabular-nums; white-space:nowrap }
.meal-modal .modal-actions{ padding:14px 20px 18px; display:flex; gap:8px; justify-content:flex-end }
.meal-modal .modal-actions form{ margin:0 }
.btn.ghost{ background:transparent; color:var(--green); box-shadow:inset 0 0 0 1px var(--border) }

.menu-grid .badge-leger{ display:inline-block; margin-top:6px; font-size:11px; font-weight:700;
  color:var(--amber); background:var(--warn-bg); border:1px solid var(--warn); border-radius:999px; padding:2px 8px }
.meal-modal .modal-leger{ margin:0; padding:10px 20px; background:var(--warn-bg); color:var(--warn-fg); font-size:13px }
.meal-modal .modal-manque{ color:var(--amber); font-style:normal; font-weight:700 }
.alertes-semaine{ list-style:none; margin:8px 0 0; padding:10px 14px; background:var(--warn-bg);
  border:1px solid var(--warn); border-radius:12px; color:var(--warn-fg); font-size:14px }
.alertes-semaine li{ margin:2px 0 }
.nutr-jours{ display:flex; flex-direction:column; gap:6px; margin-top:10px }
.nutr-jour{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px }
.nutr-jour .nutr-d{ font-weight:700; color:var(--green); min-width:34px }
.nutr-b{ background:var(--muted); border:1px solid var(--border); border-radius:999px;
  padding:2px 8px; font-variant-numeric:tabular-nums }
.nutr-b.ko{ background:var(--warn-bg); border-color:var(--warn); color:var(--warn-fg); font-weight:700 }
/* nav + alertes : pas le padding-bottom 112px de .wrap (réservé à l'addbar courses) */
.nav-cal{ display:flex; gap:8px; align-items:center; justify-content:center;
  margin-top:10px; padding-top:8px; padding-bottom:0 }
.wrap.wrap-alertes{ padding-top:8px; padding-bottom:0 }
.menu-grid th.col-today, .menu-grid td.col-today{ background:var(--today-bg) }
.menu-grid thead th.col-today{ background:var(--green) }
.menu-grid th.col-passe, .menu-grid td.col-passe{ opacity:.55 }

/* Responsive : mobile = jour focal en carte ; desktop = grille 7 colonnes */
.menu-mobile{ display:none }
.menu-mobile .day-card{ max-width:560px; margin:16px auto 4px; background:var(--surface);
  border:2px solid var(--green); border-radius:var(--radius); overflow:hidden }
.menu-mobile .day-card.col-today{ border-color:var(--amber) }
.menu-mobile .day-card.col-passe{ opacity:.6 }
.menu-mobile .day-card-head{ background:var(--green); color:var(--on); font-family:"Rubik",sans-serif;
  font-weight:700; padding:12px 16px }
.menu-mobile .day-card.col-today .day-card-head{ background:var(--amber) }
.menu-mobile .day-card-meal{ padding:12px 16px; border-top:1px solid var(--border) }
.menu-mobile .day-card-type{ font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--green); font-weight:700; margin-bottom:6px }
.menu-mobile .day-card .nutr-jour{ padding:10px 16px; border-top:1px solid var(--border) }
@media (max-width:720px){
  .menu-desktop{ display:none }
  .menu-mobile{ display:block }
}
.suivi-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:16px }
.suivi-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px }
.suivi-card .suivi-k{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--green); font-weight:700 }
.suivi-card .suivi-v{ font-family:"Rubik",sans-serif; font-size:22px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums }
.topnav-logout{ margin-left:auto }
.topnav-logout button{ background:transparent; border:0; color:rgba(255,255,255,.8);
  font:inherit; font-weight:600; padding:12px 14px; cursor:pointer }
.suivi-form{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-top:10px }
.suivi-form label{ display:flex; flex-direction:column; font-size:13px; color:var(--ink-2); gap:4px }
.suivi-form input{ font:inherit; padding:12px; min-height:44px; border:1px solid var(--line); border-radius:10px; background:var(--surface) }
.pesee-row{ display:flex; align-items:center; gap:12px; padding:8px 4px; border-bottom:1px solid var(--border) }
.pesee-row .pesee-d{ font-weight:600; min-width:96px }
.pesee-row .pesee-p{ flex:1; font-variant-numeric:tabular-nums }
.pesee-row form{ margin:0 }
.chart{ width:100%; height:auto; display:block; margin-top:8px; border:1px solid var(--border); border-radius:10px; background:var(--surface) }
.trend{ margin-top:10px; font-size:14px; color:var(--ink-2) }
.trend-date{ font-weight:600; color:var(--ink) }
/* ── Côtier moderne : composants /suivi ── */
.page{ max-width:560px; margin:0 auto; padding:8px 16px 24px }
.page-title{ font-size:24px; font-weight:800; letter-spacing:-.01em; margin:10px 0 2px }
.page-sub{ font-size:13px; color:var(--muted-fg); margin-bottom:4px }

/* Puce d'alerte compacte (info), distincte de l'accent */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0 }
.chip{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  border-radius:8px; padding:6px 11px }
.chip.warn{ color:var(--warn-fg); background:var(--warn-bg) }
.chip.warn .dot{ width:7px; height:7px; border-radius:2px; background:var(--warn); flex:0 0 auto }

/* Bloc-héros métrique */
.hero{ position:relative; overflow:hidden; background:var(--hero-bg); color:var(--hero-fg);
  border-radius:var(--r-lg); padding:18px; margin-top:14px }
.hero .contour{ position:absolute; inset:0; width:100%; height:100%; color:var(--hero-contour); opacity:.6 }
.hero .rel{ position:relative }
.hero .k{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#7fb8c2 }
.hero .big{ font-family:"Rubik",sans-serif; font-size:52px; font-weight:800; line-height:1; margin:6px 0 2px;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.hero .big small{ font-size:20px; font-weight:700; color:#8fc4cd }
.hero .sub{ font-size:13px; color:#a7cdd2 }
.hero .goal{ display:inline-block; margin-top:12px; background:var(--accent); color:#3a2a05;
  font-weight:800; font-size:12px; border-radius:999px; padding:5px 12px }

/* Tuiles secondaires */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:12px }
.tile{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:11px 12px }
.tile .k{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-fg) }
.tile .v{ font-family:"Rubik",sans-serif; font-size:19px; font-weight:800; margin-top:3px;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.tile .v.accent{ color:var(--primary) }

/* Carte (graphe, sections) */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin-top:14px }
.card > h2{ font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted-fg); margin:0 0 8px }
.btn-accent{ background:var(--accent); color:#3a2a05 }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important } }