/* ============================================================
   Marcus PWA — Design system aligné Bornopale
   Réfs : maquette mobile Bornopale (cream / cuivre / sauge / bleu)
   v04 : ajout système d'icônes SVG + relief cards + boutons cuivre
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Surfaces — palette Anthropic */
  --bg:               #faf9f5;   /* Claude cream */
  --surface:          #ffffff;
  --surface-tint:     #fbeee7;   /* coral très clair */
  --surface-info:     #eaf2fb;
  --surface-success:  #d8efd8;
  --surface-warn:     #fff5dc;
  --surface-soft:     #f3f1ea;

  /* Borders */
  --border:           #ebe8de;
  --border-strong:    #d6d2c4;

  /* Texts (warm dark) */
  --text:             #2c2620;
  --text-2:           #4a423a;
  --text-soft:        #6e655a;
  --text-faint:       #94897c;

  /* Accents — coral Anthropic */
  --accent:           #d97757;
  --accent-strong:    #b85e3f;
  --accent-soft:      #fbeee7;

  --info:             #5a8fd0;
  --info-strong:      #3a6a96;
  --info-soft:        #eaf2fb;

  --success:          #7aaa85;
  --success-strong:   #2a6a3a;
  --success-soft:     #d8efd8;

  --warning:          #c98a30;
  --warning-strong:   #855a18;
  --warning-soft:     #fff5dc;

  --danger:           #a02020;
  --danger-soft:      #ffd9d9;

  --black:            #1a1a1a;
  --white:            #ffffff;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --safe-top: env(safe-area-inset-top);
  --safe-bot: env(safe-area-inset-bottom);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::-webkit-scrollbar { width: 0; height: 0; }

html, body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}
body { min-height: 100vh; }
#app { min-height: 100vh; padding-bottom: var(--safe-bot); }

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  color: inherit;
}
button { cursor: pointer; }
input, select, textarea { outline: none; }

/* ---------- Utilities ---------- */
.hidden { display: none !important; }
.gold { color: var(--accent); }
.muted { color: var(--text-soft); }
.small { font-size: 11px; }

/* ============================================================
   ICONS (sprite SVG dans index.html)
   Usage : <svg class="ico"><use href="#i-XXX"/></svg>
   ============================================================ */
.ico {
  width: 1.4em;
  height: 1.4em;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.ico-xl { width: 40px; height: 40px; }

/* ============================================================
   COACH ORB (avatar Marcus)
   ============================================================ */
.coach-orb {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -2px rgba(217, 119, 87, 0.35);
}
.coach-orb.large {
  width: 88px; height: 88px;
  margin: 0 auto;
}
.coach-orb .orb-letter {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.coach-orb.large .orb-letter { font-size: 38px; }
.coach-orb .ico { width: 28px; height: 28px; stroke-width: 2.5; }
.coach-orb.large .ico-xl { width: 44px; height: 44px; }

.loader {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--bg);
  z-index: 999;
  gap: var(--s-4);
}

/* ============================================================
   STRUCTURE
   ============================================================ */
.screen {
  min-height: 100vh;
  padding: calc(var(--safe-top) + var(--s-3)) 0 90px;
}
.page { display: none; padding: var(--s-4) var(--s-5); }
.page.active { display: block; }

.sub-page header {
  display: flex; align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.sub-page header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}

/* ============================================================
   BUTTONS
   ============================================================ */

/* Primary = cuivre (Marcus brand) */
.btn-primary {
  background: var(--accent);
  color: var(--white);
  border: none;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  margin-top: var(--s-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  box-shadow: 0 6px 14px -4px rgba(217, 119, 87, 0.45);
  transition: transform .12s, box-shadow .15s, background .15s;
}
.btn-primary:active {
  transform: scale(0.98);
  background: var(--accent-strong);
  box-shadow: 0 3px 8px -3px rgba(217, 119, 87, 0.4);
}

/* Ghost = blanc/bordure */
.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  transition: background .15s, border-color .15s;
}
.btn-ghost .ico { width: 1.25em; height: 1.25em; color: var(--text-soft); }
.btn-ghost:active { background: var(--surface-soft); border-color: var(--border-strong); }
.btn-ghost.danger {
  color: var(--danger);
  border-color: var(--danger-soft);
  margin-top: var(--s-2);
}
.btn-ghost.danger .ico { color: var(--danger); }

.back-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.back-btn:active { background: var(--surface-soft); }
.back-btn .ico { width: 18px; height: 18px; }

/* CTA accent (gros bouton "Parler à Marcus") */
.cta {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 13px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  transition: border-color .15s;
}
.cta:active { border-color: var(--accent); }
.cta-accent {
  background: var(--surface-tint);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.cta-accent .ico { color: var(--accent); }

/* ============================================================
   ONBOARDING
   ============================================================ */
.ob-progress {
  height: 3px;
  background: var(--border);
  margin-bottom: var(--s-6);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.ob-bar {
  height: 100%;
  background: var(--accent);
  transition: width .3s;
}

.ob-step {
  padding: var(--s-5) var(--s-5) 0;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.ob-step h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: var(--s-4) 0 var(--s-2);
}
.ob-step h2 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: var(--s-4);
  text-align: left;
}
.ob-step .lead {
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: var(--s-2);
  line-height: 1.5;
}

.ob-step label {
  display: block;
  text-align: left;
  margin-top: var(--s-3);
  font-size: 11px;
  color: var(--text-soft);
  font-weight: 600;
}
.ob-step label small {
  font-weight: 400;
  color: var(--text-faint);
  font-size: 10px;
  margin-left: var(--s-1);
}
.ob-step input,
.ob-step select {
  display: block;
  width: 100%;
  margin-top: var(--s-1);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 14px;
  transition: border-color .15s;
}
.ob-step input:focus,
.ob-step select:focus { border-color: var(--accent); }

.ob-step .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
  margin: var(--s-3) 0;
}
.ob-step .opt {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 12px 10px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  transition: all .15s;
}
.ob-step .opt:active { transform: scale(0.97); }
.ob-step .opt.selected {
  border-color: var(--accent);
  background: var(--surface-tint);
  color: var(--accent-strong);
}
.ob-step .opt.unknown {
  grid-column: span 2;
  opacity: 0.7;
  font-style: italic;
}
.ob-nav {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.ob-nav .btn-ghost { flex: 0 0 auto; margin: 0; }
.ob-nav .btn-primary { flex: 1; margin: 0; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.hello {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--s-2) 0 var(--s-4);
}
.hello h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.orb-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -3px rgba(217, 119, 87,0.4);
  transition: transform .12s, opacity .15s;
}
.orb-btn:active { transform: scale(0.94); opacity: 0.9; }
.orb-btn .ico { width: 16px; height: 16px; }

/* ---------- Briefing card (style "pavé Devis" Bornopale) ---------- */
.briefing-card {
  background: var(--surface-tint);
  border: 1.5px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  position: relative;
}
.brief-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.brief-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--white);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brief-icon .ico { width: 16px; height: 16px; }
.briefing-card .lab {
  font-size: 9px;
  color: var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.briefing-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}

/* ---------- Cards (avec barre verticale colorée à gauche) ---------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 4px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;
  transition: background .15s, border-color .15s, transform .12s;
  cursor: pointer;
}
.card:active { transform: scale(0.97); }
.card:hover { border-color: var(--border-strong); }

/* Barre colorée à gauche (façon "Tournée" Bornopale) */
.card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--border-strong);
  border-radius: var(--r-xs) 0 0 var(--r-xs);
}
.card.card-accent::before  { background: var(--accent); }
.card.card-info::before    { background: var(--info); }
.card.card-success::before { background: var(--success); }
.card.card-warn::before    { background: var(--warning); }

/* Icône en cercle coloré */
.card-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-2);
  flex-shrink: 0;
}
.card-icon .ico { width: 18px; height: 18px; }
.card-icon.i-cuivre { background: var(--surface-tint);    color: var(--accent); }
.card-icon.i-bleu   { background: var(--info-soft);       color: var(--info-strong); }
.card-icon.i-vert   { background: var(--success-soft);    color: var(--success-strong); }
.card-icon.i-warn   { background: var(--surface-warn);    color: var(--warning-strong); }

.card strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.card .meta {
  font-size: 10px;
  color: var(--text-soft);
  margin-top: 2px;
}

/* ============================================================
   PAGES PLEINE HAUTEUR (Accueil + Saisie)
   ============================================================ */
#page-home.page.active,
#page-quick.page.active {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 76px - var(--safe-bot));
  padding-bottom: var(--s-4);
}

/* Saisie rapide — 8 pavés en 2×4 remplissant l'espace */
#page-quick .grid-cards {
  flex: 1;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--s-3);
  margin-bottom: 0;
  min-height: 0;
}

/* Accueil — 6 cards en 2×3 remplissant l'espace entre briefing et CTA */
#page-home .grid-cards {
  flex: 1;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--s-3);
  min-height: 0;
}
#page-home .card {
  padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 4px);
  justify-content: center;
}
#page-home .card .card-icon {
  width: 44px; height: 44px;
  margin-bottom: var(--s-3);
}
#page-home .card .card-icon .ico { width: 22px; height: 22px; }
#page-home .card strong { font-size: 14px; }
#page-home .card .meta { font-size: 11px; }

.quick-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  gap: var(--s-3);
  text-align: center;
  transition: border-color .15s, background .15s, transform .12s;
  cursor: pointer;
}
.quick-tile:active { transform: scale(0.96); }
.quick-tile:hover { border-color: var(--border-strong); }
.quick-tile .card-icon {
  width: 56px; height: 56px;
  margin-bottom: 0;
}
.quick-tile .card-icon .ico { width: 28px; height: 28px; }

/* ============================================================
   CHAT
   ============================================================ */
.chat-page {
  display: none;
  flex-direction: column;
  height: 100vh;
  padding-bottom: 0;
  background: var(--surface);
}
.chat-page.active { display: flex; }

.chat-header {
  display: flex; align-items: center;
  gap: var(--s-3);
  padding: calc(var(--safe-top) + var(--s-3)) var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky; top: 0; z-index: 10;
}
.chat-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  flex-shrink: 0;
}
.chat-avatar .orb-letter { font-size: 15px; font-weight: 700; }
.chat-header .name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.chat-header .status {
  font-size: 10px;
  color: var(--success-strong);
  display: flex; align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.chat-header .status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
}

.chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-4) var(--s-5) calc(var(--s-4) + 76px);
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.msg {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg.coach {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.msg.user {
  background: var(--accent);
  color: var(--white);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  font-weight: 500;
  box-shadow: 0 3px 10px -3px rgba(217, 119, 87,0.35);
}

.chat-input {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5) calc(var(--s-3) + var(--safe-bot));
  border-top: 1px solid var(--border);
  background: var(--surface);
  position: fixed;
  bottom: 0; left: 0; right: 0;
}
.chat-input input {
  flex: 1;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 16px;
  border-radius: var(--r-pill);
  font-size: 14px;
  transition: border-color .15s, background .15s;
}
.chat-input input::placeholder { color: var(--text-faint); }
.chat-input input:focus {
  border-color: var(--accent);
  background: var(--white);
}
#chat-send {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  border: none;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -3px rgba(217, 119, 87,0.4);
  transition: opacity .15s, transform .12s;
}
#chat-send:active { opacity: 0.9; transform: scale(0.94); }
#chat-send .ico { width: 18px; height: 18px; }

/* ============================================================
   PROFILE / PARAMÈTRES
   ============================================================ */
.cv {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
}
.card.cv {
  /* override pour ne pas avoir la barre colorée à gauche dans le profil */
  padding: var(--s-4);
  cursor: default;
}
.card.cv::before { display: none; }
.card.cv:active { transform: none; }

.cv .lab {
  font-size: 9px;
  color: var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--s-3);
  font-weight: 700;
}
.cv label {
  display: block;
  margin-top: var(--s-3);
  font-size: 11px;
  color: var(--text-soft);
  font-weight: 600;
}
.cv input {
  display: block;
  width: 100%;
  margin-top: var(--s-1);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 11px 13px;
  border-radius: var(--r-md);
  font-size: 13px;
  transition: border-color .15s;
}
.cv input:focus { border-color: var(--accent); }

/* ============================================================
   TAB BAR
   ============================================================ */
.tab-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  padding: var(--s-2) var(--s-2) calc(var(--s-2) + var(--safe-bot));
  z-index: 100;
}
/* Sur la page chat, la tab-bar est masquée pour ne pas recouvrir le champ de saisie */
.chat-page.active ~ .tab-bar { display: none; }
.tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--s-2);
  transition: color .15s;
}
.tab.active { color: var(--accent); }
.tab .ico {
  width: 22px; height: 22px;
}

/* ============================================================
   PAGE REPAS (V2) — saisie + suggestion
   ============================================================ */

/* Toggle Saisir / Idée */
.meal-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-soft);
  border-radius: var(--r-pill);
  padding: 4px;
  margin-bottom: var(--s-4);
}
.meal-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-soft);
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, color .15s, box-shadow .15s;
}
.meal-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Cards de suggestion */
.meal-suggest-result {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
#suggest-cards {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.suggest-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  position: relative;
  overflow: hidden;
}
.suggest-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
  border-radius: var(--r-xs) 0 0 var(--r-xs);
}
.suggest-card .sg-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-1);
}
.suggest-card .sg-summary {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.45;
  margin-bottom: var(--s-3);
}
.suggest-card .sg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.sg-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-tint);
  color: var(--accent-strong);
}
.sg-chip.macros { background: var(--info-soft); color: var(--info-strong); }
.sg-chip.kcal   { background: var(--surface-warn); color: var(--warning-strong); }

.suggest-card .sg-section-lab {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  font-weight: 700;
  margin-top: var(--s-3);
  margin-bottom: var(--s-1);
}
.suggest-card ul.sg-ingredients {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.suggest-card ul.sg-ingredients li {
  font-size: 12.5px;
  color: var(--text-2);
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
  display: flex;
  justify-content: space-between;
}
.suggest-card ul.sg-ingredients li:last-child { border-bottom: none; }
.suggest-card .sg-ingredients .qty { color: var(--text-soft); font-weight: 500; }

.suggest-card .sg-rationale {
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-tint);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
}

.suggest-card .sg-actions {
  margin-top: var(--s-3);
  display: flex;
  gap: var(--s-2);
}
.suggest-card .sg-actions .btn-ghost,
.suggest-card .sg-actions .btn-primary {
  margin: 0;
  flex: 1;
  font-size: 12px;
  padding: 10px 14px;
}

/* ============================================================
   PAGE SAISIE REPAS (V2)
   ============================================================ */
.meal-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.meal-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.meal-label select,
.meal-label textarea {
  display: block;
  width: 100%;
  margin-top: var(--s-2);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-family: var(--font);
  transition: border-color .15s;
  resize: vertical;
}
.meal-label textarea {
  min-height: 110px;
  line-height: 1.5;
}
.meal-label select:focus,
.meal-label textarea:focus { border-color: var(--accent); }
.meal-hint {
  display: block;
  margin-top: var(--s-1);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-faint);
  text-transform: none;
  letter-spacing: 0;
}

/* Loader analyse */
.meal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-8) var(--s-4);
  gap: var(--s-3);
}
.meal-loading .coach-orb {
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 12px -2px rgba(217, 119, 87, 0.35); }
  50%      { transform: scale(1.04); box-shadow: 0 8px 24px -2px rgba(217, 119, 87, 0.55); }
}

/* ---------- Résultat ---------- */
.meal-result {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Score card */
.meal-score-card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  position: relative;
  overflow: hidden;
}
.meal-score-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
  border-radius: var(--r-xs) 0 0 var(--r-xs);
}
.meal-score-card.verdict-good::before { background: var(--success); }
.meal-score-card.verdict-warn::before { background: var(--warning); }
.meal-score-card.verdict-bad::before  { background: var(--danger); }

.meal-score-circle {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--surface-tint);
  border: 3px solid var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.verdict-good .meal-score-circle { border-color: var(--success); background: var(--success-soft); }
.verdict-warn .meal-score-circle { border-color: var(--warning); background: var(--surface-warn); }
.verdict-bad  .meal-score-circle { border-color: var(--danger);  background: var(--danger-soft); }
.meal-score-num {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
}
.meal-score-unit {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-soft);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.meal-score-text { flex: 1; }
.meal-score-text .lab {
  font-size: 9px;
  color: var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: var(--s-1);
}
.verdict-good .meal-score-text .lab { color: var(--success-strong); }
.verdict-warn .meal-score-text .lab { color: var(--warning-strong); }
.verdict-bad  .meal-score-text .lab { color: var(--danger); }
.meal-summary {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text);
  font-weight: 500;
}

/* Macros */
.meal-macros .macro-row {
  margin-top: var(--s-3);
}
.meal-macros .macro-row:first-of-type { margin-top: var(--s-2); }
.macro-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--text-2);
  font-weight: 600;
  margin-bottom: var(--s-1);
}
.macro-vals { color: var(--text-soft); font-weight: 400; font-size: 11px; }
.macro-vals strong { color: var(--text); font-weight: 700; font-size: 13px; }
.macro-bar {
  height: 6px;
  background: var(--surface-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.macro-fill {
  height: 100%;
  border-radius: var(--r-pill);
  transition: width .4s cubic-bezier(.2, .9, .3, 1);
}
.macro-fill.macro-prot { background: var(--success); }
.macro-fill.macro-carb { background: var(--warning); }
.macro-fill.macro-fat  { background: var(--accent); }
.macro-fill.over { background: var(--danger); }
.macro-row.macro-kcal {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}

/* Items */
.meal-items-list {
  list-style: none;
  margin: var(--s-2) 0 0;
}
.meal-items-list li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: var(--s-2);
  align-items: start;
}
.meal-items-list li:last-child { border-bottom: 0; }
.item-mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.item-mark .ico { width: 13px; height: 13px; }
.item-mark.good { background: var(--success-soft); color: var(--success-strong); }
.item-mark.warn { background: var(--surface-warn); color: var(--warning-strong); }
.item-mark.bad  { background: var(--danger-soft);  color: var(--danger); }
.item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.item-qty { color: var(--text-soft); font-weight: 400; font-size: 11px; margin-left: 4px; }
.item-note {
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 2px;
  line-height: 1.4;
}
.item-macros {
  font-size: 10px;
  color: var(--text-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.item-macros span { display: block; }

/* Alerts + suggestions */
.meal-alerts-list,
.meal-suggestions-list {
  list-style: none;
  margin-top: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.meal-alerts-list li {
  padding: var(--s-2) var(--s-3);
  background: var(--surface-warn);
  border-left: 3px solid var(--warning);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.4;
}
.meal-suggestions-list li {
  padding: var(--s-2) var(--s-3);
  background: var(--surface-tint);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.4;
}

.meal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.meal-actions .btn-primary,
.meal-actions .btn-ghost { margin: 0; }

/* ============================================================
   POIDS (V2)
   ============================================================ */
.weight-summary {
  position: relative;
  overflow: hidden;
  padding: var(--s-5);
}
.weight-current {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: var(--s-3);
}
.weight-current-num {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.weight-unit {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-soft);
}

.weight-deltas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.weight-delta {
  background: var(--surface-soft);
  border-radius: var(--r-sm);
  padding: var(--s-2);
  text-align: center;
}
.weight-delta-lab {
  display: block;
  font-size: 10px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 2px;
}
.weight-delta-val {
  display: block;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.weight-delta-val.up   { color: var(--danger); }
.weight-delta-val.down { color: var(--success-strong); }

.weight-spark {
  margin-top: var(--s-2);
  height: 60px;
}
.weight-spark svg { width: 100%; height: 100%; display: block; }

/* Graph card étendue */
.weight-chart-card { padding: var(--s-4); }
.weight-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
  gap: var(--s-2);
}
.weight-period {
  display: flex;
  gap: 4px;
  background: var(--surface-soft);
  border-radius: var(--r-pill);
  padding: 3px;
}
.weight-period-btn {
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  transition: background .15s, color .15s;
}
.weight-period-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.weight-chart {
  height: 320px;
  position: relative;
  width: 100%;
}
.weight-chart svg {
  width: 100%; height: 100%;
  display: block;
}
@media (min-width: 600px) {
  .weight-chart { height: 380px; }
}

/* Analyse Marcus result */
.weight-analysis {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
#weight-verdict-circle .meal-score-num {
  font-size: 26px;
}

.weight-entry .meal-label { margin-top: var(--s-3); }
.weight-entry .btn-primary { margin-top: var(--s-4); }

.weight-list {
  list-style: none;
  margin-top: var(--s-2);
}
.weight-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.weight-list li:last-child { border-bottom: none; }
.weight-list .w-date {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 500;
}
.weight-list .w-note {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.weight-list .w-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.weight-list .w-delete {
  background: none;
  border: none;
  color: var(--text-faint);
  padding: 4px;
  display: flex;
  align-items: center;
}
.weight-list .w-delete .ico { width: 16px; height: 16px; }

/* ==== Mensurations ==== */
.meas-details {
  margin-top: var(--s-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-soft);
}
.meas-summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  padding: 4px 0;
  list-style: none;
  user-select: none;
}
.meas-summary::-webkit-details-marker { display: none; }
.meas-details[open] .meas-summary {
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--s-2);
}
.meas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-2);
  margin-top: var(--s-2);
}
.meas-grid .meal-label { margin-top: 0; }

.meas-summary-card { padding: var(--s-3); }
.meas-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.meas-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 10px;
  background: var(--surface-soft);
  border-radius: 8px;
}
.meas-item-label {
  font-size: 11px;
  color: var(--text-soft);
  font-weight: 500;
}
.meas-item-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.meas-item-delta {
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
}
.meas-item-delta.up { color: #c14a3b; }
.meas-item-delta.down { color: #3a8a4f; }
.meas-item-delta.neutral { color: var(--text-faint); }

.weight-list .w-meas {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  font-style: italic;
}

/* Graph mensurations à la demande */
.meas-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.meas-toggle {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.meas-toggle::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mtg-color, var(--text-faint));
}
.meas-toggle.active {
  background: var(--surface);
  color: var(--text);
  border-color: var(--mtg-color, var(--accent));
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.meas-toggle.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.meas-graph-btn .ico { width: 14px; height: 14px; }
.weight-list .w-delete:hover { color: var(--danger); }

/* ============================================================
   HUMEUR (V2)
   ============================================================ */
.mood-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}
.mood-stat {
  text-align: center;
  background: var(--surface-soft);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-2);
}
.mood-stat-lab {
  display: block;
  font-size: 10px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 4px;
}
.mood-stat-val {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Saisie échelle 1-5 */
.mood-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-2);
  margin-bottom: var(--s-2);
}
.mood-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  transition: border-color .15s, background .15s, transform .12s;
}
.mood-btn:active { transform: scale(0.95); }
.mood-btn.selected {
  border-color: var(--accent);
  background: var(--surface-tint);
}
.mood-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.mood-circle.mood-1 { background: #c14848; }   /* rouge sombre */
.mood-circle.mood-2 { background: #d97757; }   /* coral */
.mood-circle.mood-3 { background: #c98a30; }   /* ambre */
.mood-circle.mood-4 { background: #7aaa85; }   /* vert sauge */
.mood-circle.mood-5 { background: #4a8a55; }   /* vert plus profond */
.mood-lab {
  font-size: 10px;
  color: var(--text-soft);
  font-weight: 600;
  text-align: center;
}
.mood-btn.selected .mood-lab { color: var(--accent-strong); }

/* Tags */
.mood-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s-2);
}
.mood-tag {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  transition: border-color .15s, background .15s;
}
.mood-tag.selected {
  border-color: var(--accent);
  background: var(--surface-tint);
  color: var(--accent-strong);
  font-weight: 600;
}

.mood-entry .btn-primary { margin-top: var(--s-4); }

/* Liste historique */
.mood-list {
  list-style: none;
  margin-top: var(--s-2);
}
.mood-list li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.mood-list li:last-child { border-bottom: none; }
.mood-list .ml-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.mood-list .ml-date {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 500;
}
.mood-list .ml-tags {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.mood-list .ml-note {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  line-height: 1.4;
}
.mood-list .w-delete {
  background: none;
  border: none;
  color: var(--text-faint);
  padding: 4px;
}
.mood-list .w-delete .ico { width: 16px; height: 16px; }
.mood-list .w-delete:hover { color: var(--danger); }

/* ============================================================
   EAU (V2)
   ============================================================ */
.water-summary { padding: var(--s-5); }
.water-num {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-3);
}
.water-num .water-unit {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-soft);
  margin-left: 4px;
}
.water-bar {
  height: 10px;
  background: var(--surface-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.water-fill {
  height: 100%;
  background: linear-gradient(90deg, #5a8fd0, #4a7fc0);
  border-radius: var(--r-pill);
  transition: width .35s cubic-bezier(.2, .9, .3, 1);
  width: 0%;
}
.water-fill.full { background: linear-gradient(90deg, #7aaa85, #4a8a55); }
.water-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.water-add-btn {
  padding: var(--s-3) var(--s-2);
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  line-height: 1.3;
}

/* ============================================================
   CHIPS / STATUTS (réutilisables)
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.chip.warn    { background: var(--surface-warn);   color: var(--warning-strong); }
.chip.info    { background: var(--info-soft);      color: var(--info-strong); }
.chip.success { background: var(--success-soft);   color: var(--success-strong); }
.chip.danger  { background: var(--danger-soft);    color: var(--danger); }
.chip.accent  { background: var(--surface-tint);   color: var(--accent-strong); }