:root{
  /* Thème "Sombre performance" */
  --paper: #0F1511;          /* fond de l'app (anthracite vert) */
  --paper-alt: #1A2320;      /* cartes, surfaces secondaires */
  --surface: #1E2A25;        /* champs, cartes contrastées */
  --ink: #E8F0EC;            /* texte principal */
  --ink-soft: #93A79C;       /* texte secondaire */
  --pine: #A3E635;           /* primaire (citron électrique) — texte foncé dessus */
  --pine-dark: #E8F0EC;      /* titres (clairs sur fond sombre) */
  --on-primary: #10201A;     /* texte sur les surfaces citron */
  --teal: #34D8C0;           /* accent froid (anneaux, liens) */
  --line: #2E3B34;           /* bordures discrètes */
  --score-good: #4ADE80;
  --score-good-bg: #16281D;
  --score-mid: #FBBF24;
  --score-mid-bg: #2A2410;
  --score-bad: #FB7185;
  --score-bad-bg: #2C1720;
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 22px;
  --font-display: "Fraunces", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html,body{ height:100%; }
:root{ color-scheme: dark; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, input, select{ font-family: inherit; }
.app{
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  position: relative;
}
.app-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line);
}
.app-header__brand{ display:flex; align-items:baseline; gap:8px; }
.app-header__mark{ color: var(--teal); font-size: 20px; transform: translateY(1px); }
.app-header__name{ font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--pine-dark); }
.app-header__daynav{ display:flex; align-items:center; gap:2px; }
.daynav__arrow{ width:26px; height:26px; border:none; background:none; color: var(--ink-soft); font-size:16px; cursor:pointer; border-radius:6px; }
.daynav__arrow:active{ background: var(--paper-alt); }
.daynav__arrow:disabled{ opacity:.25; cursor:default; }
.app-header__date{ font-size: 13px; color: var(--ink); font-weight:600; background:none; border:none; cursor:pointer; padding:4px 6px; border-radius:8px; font-family: inherit; text-transform: capitalize; min-width:64px; }
.app-header__date:active{ background: var(--paper-alt); }

/* ---- Calendrier ---- */
.cal-modal{ position: fixed; inset:0; z-index: 90; background: rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; padding:16px; }
.cal-modal__box{ width:100%; max-width: 360px; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-l); padding:16px; }
.cal-modal__head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.cal-modal__head #cal-title{ flex:1; text-align:center; font-family: var(--font-display); font-weight:600; font-size:16px; color: var(--pine-dark); text-transform: capitalize; }
.cal-nav{ width:30px; height:30px; border:1px solid var(--line); background: var(--surface); color: var(--ink); border-radius:50%; font-size:16px; cursor:pointer; }
.cal-modal__close{ width:30px; height:30px; border:none; background: var(--paper-alt); color: var(--ink-soft); border-radius:50%; font-size:12px; cursor:pointer; }
.cal-weekdays{ display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; margin-bottom:4px; }
.cal-weekdays span{ text-align:center; font-size:11px; color: var(--ink-soft); }
.cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; }
.cal-cell{ aspect-ratio:1; border:1px solid var(--line); background: var(--surface); border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; cursor:pointer; padding:0; color: var(--ink); }
.cal-cell--empty{ border:none; background:none; cursor:default; }
.cal-cell__day{ font-size:12px; font-weight:600; }
.cal-cell__kcal{ font-size:9px; color: var(--ink-soft); }
.cal-cell--good{ background: var(--score-good-bg); border-color: var(--score-good); }
.cal-cell--good .cal-cell__kcal{ color: var(--score-good); }
.cal-cell--bad{ background: var(--score-bad-bg); border-color: var(--score-bad); }
.cal-cell--bad .cal-cell__kcal{ color: var(--score-bad); }
.cal-cell--today{ outline:2px solid var(--pine); outline-offset:-2px; }
.cal-cell--future{ opacity:.35; cursor:default; }
.cal-legend{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:11px; color: var(--ink-soft); margin:12px 0 0; }
.cal-dot{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.cal-dot--good{ background: var(--score-good); }
.cal-dot--bad{ background: var(--score-bad); }
.views{ flex: 1; overflow-y: auto; padding: 20px 20px 100px; }
.view{ display:none; }
.view.is-active{ display:block; animation: fade-in .18s ease-out; }
@keyframes fade-in{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform: translateY(0); } }
.section-title{ font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--pine-dark); margin: 28px 0 12px; }
.empty-note{ color: var(--ink-soft); font-size: 14px; padding: 14px 0; }
.scan-stage{ position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-l); background: #070B08; overflow: hidden; }
.scan-reader{ position:absolute; inset:0; width:100%; height:100%; }
.scan-reader video{ width:100% !important; height:100% !important; object-fit: cover; }
.scan-frame{ position:absolute; inset: 14%; pointer-events:none; }
.scan-frame__corner{ position:absolute; width: 26px; height: 26px; border-color: #F3EFE3; opacity: 0.85; }
.scan-frame__corner--tl{ top:0; left:0; border-top:3px solid; border-left:3px solid; border-top-left-radius: 6px;}
.scan-frame__corner--tr{ top:0; right:0; border-top:3px solid; border-right:3px solid; border-top-right-radius: 6px;}
.scan-frame__corner--bl{ bottom:0; left:0; border-bottom:3px solid; border-left:3px solid; border-bottom-left-radius: 6px;}
.scan-frame__corner--br{ bottom:0; right:0; border-bottom:3px solid; border-right:3px solid; border-bottom-right-radius: 6px;}
.scan-frame__line{ position:absolute; left:0; right:0; top:50%; height:2px; background: linear-gradient(90deg, transparent, #7FD1C0, transparent); animation: scan-sweep 2.2s ease-in-out infinite; }
@keyframes scan-sweep{ 0%,100%{ transform: translateY(-60%); opacity:.4;} 50%{ transform: translateY(60%); opacity:1;} }
.scan-hint{ position:absolute; bottom: 14px; left:0; right:0; text-align:center; color:#F3EFE3; font-size: 13px; margin:0; }
/* ---- Écran "Ajouter un aliment" ---- */
.add-carousel{ display:flex; gap:10px; overflow-x:auto; padding:2px 0 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.add-carousel::-webkit-scrollbar{ display:none; }
.add-chip{ flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:11px 16px; border-radius:999px; border:1px solid var(--pine); background: var(--pine); color: var(--on-primary); font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.add-chip__icon{ font-size:15px; }
.food-search{ position:relative; margin:4px 0 8px; }
.food-search input{ width:100%; padding:13px 40px 13px 16px; border-radius: var(--radius-m); border:1px solid var(--line); background:var(--surface); font-size:15px; color: var(--ink); }
.food-search input:focus{ outline:2px solid var(--teal); outline-offset:1px; }
.food-search__clear{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:26px; height:26px; border:none; border-radius:50%; background: var(--paper-alt); color: var(--ink-soft); cursor:pointer; font-size:12px; }
.food-list__ul{ list-style:none; margin:0; padding:0; }
ul.food-list{ list-style:none; margin:0; padding:0; }
.food-row{ display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid var(--line); cursor:pointer; }
.food-row:active{ background: var(--paper-alt); }
.food-row__img{ width:44px; height:44px; border-radius: var(--radius-s); object-fit:cover; background:var(--surface); border:1px solid var(--line); flex-shrink:0; }
.food-row__body{ flex:1; min-width:0; }
.food-row__name{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.food-row__store{ display:inline-block; vertical-align:middle; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color: var(--on-primary); background: var(--pine); border-radius:4px; padding:1px 5px; margin-left:4px; }
.food-row__meta{ font-size:12px; color: var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nutri-badge{ flex-shrink:0; width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; }
.nutri-badge--a{ background:#2E7D32; } .nutri-badge--b{ background:#7CB342; }
.nutri-badge--c{ background:#F9A825; } .nutri-badge--d{ background:#EF6C00; }
.nutri-badge--e{ background:#D32F2F; }

.scan-actions{ display:flex; gap: 10px; margin-top: 16px; }
.manual-entry{ display:flex; gap:8px; margin-top: 16px; }
.manual-entry input{ flex:1; padding: 12px 14px; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface); font-size: 15px; color: var(--ink); }
.manual-entry input:focus{ outline: 2px solid var(--teal); outline-offset: 1px; }
.recent-scans__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.recent-item{ display:flex; align-items:center; gap:12px; padding: 10px 12px; background: var(--paper-alt); border-radius: var(--radius-m); border: 1px solid var(--line); cursor:pointer; }
.recent-item__img{ width:40px; height:40px; border-radius: var(--radius-s); object-fit: cover; background:var(--surface); flex-shrink:0; }
.recent-item__body{ flex:1; min-width:0; }
.recent-item__name{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-item__meta{ font-size:12px; color:var(--ink-soft); }
.score-dot{ width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.score-dot--good{ background: var(--score-good); }
.score-dot--mid{ background: var(--score-mid); }
.score-dot--bad{ background: var(--score-bad); }
.btn{ border:none; border-radius: var(--radius-m); padding: 13px 18px; font-size: 15px; font-weight:600; cursor:pointer; flex:1; transition: transform .08s ease, opacity .15s ease; }
.btn:active{ transform: scale(0.98); }
.btn--primary{ background: var(--pine); color: var(--on-primary); }
.btn--ghost{ background: transparent; color: var(--pine); border: 1px solid var(--pine); }
.btn--outline{ background:var(--surface); color: var(--ink); border: 1px solid var(--line); flex: 0 0 auto; }
.btn--danger-ghost{ background: transparent; color: var(--score-bad); border: 1px solid var(--score-bad); width:100%; margin-top: 14px; }
/* ---- Compteur de calories (accueil, façon Yazio) ---- */
.cal-hero{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:10px 0 4px; }
.kcal-ring--lg{ width:164px; height:164px; }
.kcal-ring--lg .kcal-ring__value{ font-size:34px; }
.kcal-ring--lg .kcal-ring__unit{ font-size:12px; }
.cal-hero__stats{ display:flex; width:100%; gap:10px; }
.cal-stat{ flex:1; text-align:center; background: var(--paper-alt); border:1px solid var(--line); border-radius: var(--radius-m); padding:10px 6px; }
.cal-stat__val{ display:block; font-family: var(--font-display); font-size:18px; font-weight:600; color: var(--pine-dark); }
.cal-stat__lbl{ display:block; font-size:11px; color: var(--ink-soft); margin-top:2px; }

/* ---- Repas ---- */
.meals{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.meal-card{ border:1px solid var(--line); border-radius: var(--radius-m); background:var(--surface); overflow:hidden; }
.meal-card__head{ display:flex; align-items:center; gap:10px; padding:12px 14px; }
.meal-card__icon{ font-size:16px; }
.meal-card__name{ font-family: var(--font-display); font-weight:600; font-size:15px; color: var(--pine-dark); flex:1; }
.meal-card__kcal{ font-size:13px; font-weight:600; color: var(--ink-soft); }
.meal-card__list{ list-style:none; margin:0; padding:0 14px; border-top:1px solid var(--line); }
.meal-item{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.meal-item:last-child{ border-bottom:none; }
.meal-item__body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.meal-item__name{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meal-item__meta{ font-size:12px; color: var(--ink-soft); }
.meal-item__kcal{ font-size:13px; font-weight:600; color: var(--pine-dark); white-space:nowrap; }
.meal-item__del{ background:none; border:none; color: var(--ink-soft); font-size:15px; cursor:pointer; padding:2px 4px; }
.meal-card__add{ width:100%; background:none; border:none; border-top:1px solid var(--line); padding:11px; font-size:13px; font-weight:600; color: var(--teal); cursor:pointer; }
.meal-card__add:active{ background: var(--paper-alt); }

.scan-target-hint{ background: var(--score-good-bg); color: var(--pine-dark); font-size:13px; font-weight:600; text-align:center; padding:8px; border-radius: var(--radius-m); margin:0 0 12px; }

.journal-summary{ display:flex; align-items:center; gap: 24px; padding: 8px 4px 4px; }
.kcal-ring{ position:relative; width: 120px; height: 120px; flex-shrink:0; }
.kcal-ring__svg{ width:100%; height:100%; transform: rotate(-90deg); }
.kcal-ring__track{ fill:none; stroke: var(--line); stroke-width: 10; }
.kcal-ring__progress{ fill:none; stroke: var(--pine); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset .4s ease; }
.kcal-ring__label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.kcal-ring__value{ font-family: var(--font-display); font-size: 26px; font-weight:600; color: var(--pine-dark); }
.kcal-ring__unit{ font-size:11px; color: var(--ink-soft); }
.journal-summary__goal{ flex:1; }
.journal-summary__goal label{ display:block; font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; }
.goal-edit{ display:flex; align-items:center; gap:6px; }
.goal-edit input{ width: 90px; padding: 9px 10px; border-radius: var(--radius-s); border: 1px solid var(--line); font-size: 14px; background:var(--surface); }
.goal-edit span{ font-size: 13px; color: var(--ink-soft); }
.kcal-remaining{ display:block; font-size:12px; color: var(--ink-soft); margin-top:8px; }
.macro-bars{ margin-top: 22px; display:flex; flex-direction:column; gap: 12px; }
.macro-bar__head{ display:flex; justify-content:space-between; font-size: 13px; margin-bottom: 5px; color: var(--ink-soft); }
.macro-bar__track{ height: 7px; background: var(--line); border-radius: 4px; overflow:hidden; }
.macro-bar__fill{ height:100%; width:0%; border-radius:4px; transition: width .4s ease; }
.macro-bar__fill--p{ background: var(--pine); }
.macro-bar__fill--c{ background: var(--teal); }
.macro-bar__fill--f{ background: var(--score-mid); }
.journal-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.journal-item{ display:flex; align-items:center; gap:12px; padding: 12px; background:var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.journal-item__body{ flex:1; min-width:0; }
.journal-item__name{ font-size:14px; font-weight:600; }
.journal-item__meta{ font-size:12px; color: var(--ink-soft); margin-top:2px;}
.journal-item__kcal{ font-size:14px; font-weight:600; color: var(--pine-dark); white-space:nowrap; }
.journal-item__del{ background:none; border:none; color:var(--ink-soft); font-size:16px; cursor:pointer; padding:4px; }
.history-chart{ display:flex; align-items:flex-end; gap: 10px; height: 140px; padding: 10px 4px 0; border-bottom: 1px solid var(--line); }
.history-bar{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.history-bar__col{ width: 100%; max-width: 30px; background: var(--teal); border-radius: 5px 5px 0 0; min-height: 3px; }
.history-bar__label{ font-size:11px; color: var(--ink-soft); }
.history-score{ font-family: var(--font-display); font-size: 32px; font-weight:600; color: var(--pine-dark); }
.settings-card{ background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px; }
.settings-card label{ font-size:13px; color: var(--ink-soft); display:block; margin-bottom:8px; }
.settings-toggle{ display:flex !important; align-items:flex-start; gap:10px; margin:14px 0 4px; font-size:13px; color: var(--ink); cursor:pointer; }
.settings-toggle input{ margin-top:2px; flex-shrink:0; }

/* ---- Lignes de titre avec action ---- */
.section-title-row{ display:flex; align-items:baseline; justify-content:space-between; }
.btn-inline{ background:none; border:none; color: var(--teal); font-size:13px; font-weight:700; cursor:pointer; padding:4px; }

/* ---- Mini-formulaires inline (activité, pesée) ---- */
.mini-form{ background: var(--paper-alt); border:1px solid var(--line); border-radius: var(--radius-m); padding:14px; margin:8px 0 14px; display:flex; flex-direction:column; gap:10px; }
.mini-form__row{ display:flex; align-items:center; gap:8px; }
.mini-form__row .btn{ flex:1; }
.mini-form input, .mini-form select{ padding:10px 12px; border-radius: var(--radius-m); border:1px solid var(--line); background:var(--surface); font-size:14px; color: var(--ink); min-width:0; }
.mini-form select{ flex:1; }
.mini-form input[type=number]{ width:90px; flex:0 0 auto; }
.mini-form input[type=date]{ flex:1; }
.mini-form__unit{ font-size:13px; color: var(--ink-soft); }
.mini-form__calc{ margin-left:auto; font-size:14px; font-weight:700; color: var(--pine-dark); }
.activity-hint{ font-size:12px; color: var(--ink-soft); margin:4px 0 8px; }

/* ---- Suivi du poids ---- */
.weight-head{ display:flex; gap:14px; margin:10px 0 12px; }
.weight-head > div{ flex:1; background: var(--paper-alt); border:1px solid var(--line); border-radius: var(--radius-m); padding:12px; text-align:center; }
.weight-head__val{ display:block; font-family: var(--font-display); font-size:22px; font-weight:600; color: var(--pine-dark); }
.weight-head__val.is-down{ color: var(--score-good); }
.weight-head__val.is-up{ color: var(--score-mid); }
.weight-head__lbl{ display:block; font-size:11px; color: var(--ink-soft); margin-top:3px; }
.weight-chart{ position:relative; }
.weight-svg{ width:100%; height:90px; display:block; }
.weight-scale{ position:absolute; top:0; right:0; height:100%; display:flex; flex-direction:column; justify-content:space-between; font-size:10px; color: var(--ink-soft); pointer-events:none; }

/* ---- Coach adaptatif ---- */
.coach{ border-radius: var(--radius-m); padding:14px 16px; border:1px solid var(--line); }
.coach--info{ background: var(--paper-alt); }
.coach--good{ background: var(--score-good-bg); border-color: var(--score-good); }
.coach--adjust{ background: var(--score-mid-bg); border-color: var(--score-mid); }
.coach__title{ font-weight:700; font-size:14px; margin:0 0 6px; color: var(--ink); }
.coach__body{ font-size:13px; line-height:1.5; color: var(--ink); margin:0; }
.coach__change{ font-size:13px; margin:10px 0; color: var(--ink); }
.coach__change s{ color: var(--ink-soft); }
.coach .btn{ width:100%; margin-top:6px; }
.coach__auto{ font-size:11px; color: var(--ink-soft); margin:8px 0 0; line-height:1.4; }
.checkin-last{ font-size:12px; color: var(--ink-soft); margin:8px 0 0; }

/* ---- Micronutriments / additifs (Progrès) ---- */
.micro-intro{ font-size:12px; color: var(--ink-soft); line-height:1.5; margin:0 0 12px; }
.micro-note{ font-size:11px; color: var(--ink-soft); line-height:1.5; margin:12px 0 0; }
.micro-flags{ font-size:13px; color: var(--score-mid); background: var(--score-mid-bg); padding:8px 12px; border-radius: var(--radius-m); margin:0 0 12px; line-height:1.45; }
.micro-group{ display:flex; flex-direction:column; gap:10px; }
.micro-row__head{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px; }
.micro-row__name{ color: var(--ink); }
.micro-row__val{ color: var(--ink-soft); white-space:nowrap; }
.micro-bar{ height:6px; background: var(--line); border-radius:4px; overflow:hidden; }
.micro-bar__fill{ height:100%; border-radius:4px; }
.micro-bar__fill--good{ background: var(--score-good); }
.micro-bar__fill--mid{ background: var(--score-mid); }
.micro-bar__fill--bad{ background: var(--score-bad); }
.micro-adj{ color: var(--teal); font-size:11px; }
.add-count{ font-weight:400; color: var(--ink-soft); font-size:12px; }
.checkin-reason{ font-size:13px; line-height:1.5; color: var(--ink); margin:8px 0 0; }
.evo-table{ width:100%; border-collapse:collapse; font-size:13px; }
.evo-table th, .evo-table td{ padding:7px 6px; border-bottom:1px solid var(--line); text-align:right; }
.evo-table th:first-child, .evo-table td:first-child{ text-align:left; color: var(--ink-soft); }
.evo-table th{ font-size:11px; text-transform:uppercase; color: var(--ink-soft); letter-spacing:.03em; }
.settings-card select{ width:100%; padding:10px 12px; border-radius: var(--radius-m); border:1px solid var(--line); background:var(--surface); font-size:14px; color: var(--ink); margin-bottom:8px; }

/* ---- Profil / maintenance ---- */
.profile-form{ display:flex; flex-direction:column; gap: 14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:13px; color: var(--ink-soft); }
.field input, .field select{
  padding: 11px 12px; border-radius: var(--radius-m);
  border: 1px solid var(--line); background:var(--surface); font-size:15px; color: var(--ink);
}
.field input:focus, .field select:focus{ outline: 2px solid var(--teal); outline-offset: 1px; }
.field-row{ display:flex; gap: 12px; }
.field-row .field{ flex:1; }
.tdee-grid{ display:flex; gap: 10px; margin-top: 6px; }
.tdee-cell{
  flex:1; background: var(--paper-alt); border: 1px solid var(--line);
  border-radius: var(--radius-m); padding: 12px 10px; text-align:center;
}
.tdee-cell--accent{ background: var(--score-good-bg); border-color: var(--score-good); }
.tdee-cell__val{ display:block; font-family: var(--font-display); font-size: 22px; font-weight:600; color: var(--pine-dark); }
.tdee-cell__lbl{ display:block; font-size: 11px; color: var(--ink-soft); margin-top: 4px; }
.tdee-macros{ display:flex; gap: 10px; margin-top: 12px; }
.tdee-macro{ flex:1; display:flex; flex-direction:column; gap:2px; padding: 10px; background:var(--surface); border:1px solid var(--line); border-radius: var(--radius-m); }
.tdee-macro span{ font-size: 12px; color: var(--ink-soft); }
.tdee-macro strong{ font-size: 15px; color: var(--pine-dark); }
.tdee-note{ font-size: 12px; color: var(--ink-soft); margin-top: 12px; line-height: 1.5; }
.tdee-facts{ list-style:none; margin: 14px 0 0; padding:0; }
.tdee-facts li{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:8px 0; border-bottom:1px solid var(--line); }
.tdee-facts li span:first-child{ color: var(--ink-soft); }
.tdee-facts li span:last-child{ font-weight:600; color: var(--pine-dark); text-align:right; }
.profile-actions{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.profile-actions .btn{ width:100%; }
.profile-recap{ margin-top: 4px; }

/* ---- Alerte allergène dans la fiche produit ---- */
.ps-alert{ font-size:13px; line-height:1.45; padding:12px 14px; border-radius: var(--radius-m); margin-top:14px; }
.ps-alert--danger{ background: var(--score-bad-bg); color: var(--score-bad); border:1px solid var(--score-bad); }
.ps-alert--warn{ background: var(--score-mid-bg); color: var(--score-mid); }

/* ---- Questionnaire d'accueil ---- */
.onb{ position: fixed; inset:0; z-index: 80; background: var(--paper); display:flex; flex-direction:column; max-width:480px; margin:0 auto; }
.onb__top{ padding: 16px 20px 10px; border-bottom:1px solid var(--line); }
.onb__bar{ height:5px; background: var(--paper-alt); border-radius:3px; overflow:hidden; }
.onb__bar-fill{ height:100%; width:0%; background: var(--teal); border-radius:3px; transition: width .3s ease; }
.onb__meta{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:12px; color: var(--ink-soft); }
.onb__skip{ background:none; border:none; color: var(--teal); font-size:12px; font-weight:600; cursor:pointer; padding:4px; }
.onb__title{ font-family: var(--font-display); font-weight:600; font-size:20px; color: var(--pine-dark); margin:8px 0 0; }
.onb__scroll{ flex:1; overflow-y:auto; }
.onb__body{ padding: 18px 20px 24px; }
.onb__foot{ padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background: var(--paper); }
.onb__error{ color: var(--score-bad); font-size:12px; margin:0 0 8px; min-height:0; }
.onb__error:empty{ display:none; }
.onb__nav{ display:flex; gap:10px; }
.onb-lead{ font-size:14px; color: var(--ink-soft); line-height:1.5; margin:0 0 16px; }
.onb-note{ font-size:12px; color: var(--ink-soft); line-height:1.5; margin:10px 0 0; }
.onb-field-label{ display:block; font-size:13px; font-weight:600; color: var(--pine-dark); margin:18px 0 8px; }
.onb-field-label:first-child{ margin-top:0; }
.onb-hint{ font-weight:400; color: var(--ink-soft); }
.onb-input{ width:100%; padding:12px 14px; border-radius: var(--radius-m); border:1px solid var(--line); background:var(--surface); font-size:15px; color: var(--ink); }
.onb-input:focus{ outline:2px solid var(--teal); outline-offset:1px; }
.onb-field-row{ display:flex; gap:12px; }
.onb-field-row > div{ flex:1; }
.onb-options{ display:flex; flex-direction:column; gap:8px; }
.onb-opt{ display:block; padding:13px 14px; border:1px solid var(--line); border-radius: var(--radius-m); background:var(--surface); cursor:pointer; transition: border-color .12s, background .12s; }
.onb-opt input{ position:absolute; opacity:0; pointer-events:none; }
.onb-opt.is-checked{ border-color: var(--pine); background: var(--score-good-bg); }
.onb-opt__title{ display:block; font-size:14px; font-weight:600; color: var(--ink); }
.onb-opt__hint{ display:block; font-size:12px; color: var(--ink-soft); margin-top:3px; line-height:1.4; }
.onb-checks{ display:flex; flex-wrap:wrap; gap:8px; }
.onb-chk{ display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-size:13px; cursor:pointer; }
.onb-chk input{ position:absolute; opacity:0; pointer-events:none; }
.onb-chk.is-checked{ border-color: var(--pine); background: var(--score-good-bg); color: var(--pine-dark); font-weight:600; }
.onb-summary{ }
.onb-sum-main{ text-align:center; padding:18px 0 6px; }
.onb-sum-kcal{ font-family: var(--font-display); font-size:44px; font-weight:600; color: var(--pine-dark); display:block; line-height:1; }
.onb-sum-unit{ font-size:12px; color: var(--ink-soft); }
.onb-sum-goal{ display:block; font-size:13px; color: var(--teal); font-weight:600; margin-top:8px; }
.onb-sum-macros{ display:flex; gap:10px; margin:16px 0; }
.onb-sum-macros > div{ flex:1; text-align:center; padding:12px 6px; background: var(--paper-alt); border-radius: var(--radius-m); }
.onb-sum-macros strong{ display:block; font-size:16px; color: var(--pine-dark); }
.onb-sum-macros span{ font-size:11px; color: var(--ink-soft); }
.onb-sum-details{ list-style:none; margin:0; padding:0; }
.onb-sum-details li{ display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-bottom:1px solid var(--line); }
.onb-sum-details li span:first-child{ color: var(--ink-soft); }
.onb-sum-details li span:last-child{ font-weight:600; }
.onb-sum-note{ font-size:12px; color: var(--score-mid); background: var(--score-mid-bg); padding:10px 12px; border-radius: var(--radius-m); margin:12px 0 0; line-height:1.5; }

.tabbar{ position: sticky; bottom:0; display:flex; border-top: 1px solid var(--line); background: var(--paper); max-width: 480px; margin: 0 auto; width:100%; }
.tabbar__btn{ flex:1; background:none; border:none; padding: 10px 0 12px; display:flex; flex-direction:column; align-items:center; gap:3px; font-size: 11px; color: var(--ink-soft); cursor:pointer; }
.tabbar__icon{ font-size: 19px; line-height:1; }
.tabbar__btn.is-active{ color: var(--pine); font-weight:600; }
.sheet-backdrop{ position: fixed; inset:0; background: rgba(0,0,0,0.66); display:flex; align-items:flex-end; justify-content:center; z-index: 40; }
.product-sheet{ position:relative; width:100%; max-width: 480px; max-height: 88vh; overflow-y:auto; background: var(--paper); border-radius: 24px 24px 0 0; padding: 20px 20px 28px; animation: sheet-up .22s ease-out; }
@keyframes sheet-up{ from{ transform: translateY(100%); } to{ transform: translateY(0); } }
.product-sheet__close{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; border:none; background: var(--paper-alt); color: var(--ink); font-size:14px; cursor:pointer; }
.ps-head{ display:flex; gap:14px; align-items:flex-start; padding-right: 40px;}
.ps-head__img{ width:64px; height:64px; border-radius: var(--radius-m); object-fit:cover; background:var(--surface); border:1px solid var(--line); }
.ps-head__name{ font-family: var(--font-display); font-size:19px; font-weight:600; color: var(--pine-dark); line-height:1.25;}
.ps-head__brand{ font-size:13px; color: var(--ink-soft); margin-top:2px;}
.ps-score{ display:flex; align-items:center; gap:14px; margin-top:18px; padding: 14px; border-radius: var(--radius-m); }
.ps-score--good{ background: var(--score-good-bg); }
.ps-score--mid{ background: var(--score-mid-bg); }
.ps-score--bad{ background: var(--score-bad-bg); }
.ps-score__num{ font-family: var(--font-display); font-size: 30px; font-weight:600; }
.ps-score--good .ps-score__num{ color: var(--score-good); }
.ps-score--mid .ps-score__num{ color: var(--score-mid); }
.ps-score--bad .ps-score__num{ color: var(--score-bad); }
.ps-score__text{ font-size:13px; color: var(--ink-soft); }
.ps-score__label{ font-weight:700; font-size:14px; color: var(--ink); display:block; margin-bottom:2px;}
.ps-badges{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.ps-badge{ font-size:12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); }
.ps-section-title{ font-size: 13px; font-weight:700; color: var(--ink-soft); margin: 20px 0 8px; }
.ps-nutri-table{ width:100%; border-collapse: collapse; font-size: 14px; }
.ps-nutri-table td, .ps-nutri-table th{ padding: 7px 0; border-bottom: 1px solid var(--line); text-align:right; }
.ps-nutri-table td:first-child, .ps-nutri-table th:first-child{ text-align:left; }
.ps-nutri-table th{ font-size: 11px; font-weight:600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.ps-nutri-table td:not(:first-child){ font-weight:600; }
.ps-lvl{ display:inline-block; font-size:10px; font-weight:700; padding:1px 6px; border-radius:999px; vertical-align:middle; }
.ps-lvl--good{ background: var(--score-good-bg); color: var(--score-good); }
.ps-lvl--mid{ background: var(--score-mid-bg); color: var(--score-mid); }
.ps-lvl--bad{ background: var(--score-bad-bg); color: var(--score-bad); }
.ps-notice{ background: var(--score-mid-bg); color: var(--score-mid); font-size:12px; line-height:1.45; padding:10px 12px; border-radius: var(--radius-m); margin-top:14px; }
.ps-allergens{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.ps-chip{ font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px; }
.ps-chip--bad{ background: var(--score-bad-bg); color: var(--score-bad); }
.ps-chip--mid{ background: var(--paper-alt); color: var(--ink-soft); }
.ps-ingredients{ list-style:none; margin:0; padding:0; }
.ps-ingredient{ display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:6px 0; border-bottom:1px solid var(--line); }
.ps-ingredient--additive{ color: var(--score-mid); font-weight:600; }
.ps-ingredient__pct{ color: var(--ink-soft); font-weight:600; white-space:nowrap; }
.ps-ing-text{ font-size:13px; line-height:1.5; color: var(--ink); }
.ps-ing-raw{ margin-top:8px; font-size:12px; color: var(--ink-soft); }
.ps-ing-raw summary{ cursor:pointer; }
.ps-ing-raw p{ margin:6px 0 0; line-height:1.5; }
.ps-source{ font-size:11px; color: var(--ink-soft); margin-top:22px; line-height:1.5; }
.ps-source a{ color: var(--teal); }
.ps-additive{ display:flex; justify-content:space-between; align-items:center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ps-additive__body{ flex:1; }
.ps-additive__code{ font-size:13px; font-weight:700; }
.ps-additive__name{ font-size:12px; color: var(--ink-soft); }
.ps-additive__efsa{ font-size:11px; color: var(--score-mid); margin-top:4px; line-height:1.4; }
.ps-additive__tag{ font-size:11px; font-weight:700; padding: 3px 9px; border-radius: 999px; white-space:nowrap; }
.ps-additive__tag--good{ background: var(--score-good-bg); color: var(--score-good); }
.ps-additive__tag--mid{ background: var(--score-mid-bg); color: var(--score-mid); }
.ps-additive__tag--bad{ background: var(--score-bad-bg); color: var(--score-bad); }
.ps-quantity{ display:flex; align-items:center; gap: 10px; margin-top: 18px; }
.ps-quantity input{ width: 90px; padding: 11px 12px; border-radius: var(--radius-m); border: 1px solid var(--line); font-size:15px; }
.ps-quantity select{ padding: 11px 10px; border-radius: var(--radius-m); border: 1px solid var(--line); font-size:14px; background:var(--surface); }
.ps-quantity-kcal{ margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
.ps-quantity-kcal strong{ color: var(--pine-dark); font-size:15px; }
.ps-qty-macros{ color: var(--ink-soft); }
.ps-portions{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.ps-portion{ flex:0 0 auto; padding:9px 12px; border-radius:999px; border:1px solid var(--line); background: var(--surface); color: var(--ink); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.ps-portion.is-active{ border-color: var(--pine); background: var(--pine); color: var(--on-primary); }
.ps-meal-fixed{ flex:1; font-size:14px; color: var(--ink-soft); align-self:center; }
.toast{ position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: var(--surface); color: var(--ink); border:1px solid var(--line); padding: 11px 18px; border-radius: 999px; font-size: 13px; z-index: 60; max-width: 90%; text-align:center; }
.demo-banner{ background: var(--paper-alt); color: var(--ink-soft); border-bottom:1px solid var(--line); font-size:12px; padding:8px 20px; text-align:center; }
@media (min-width: 481px){ .app{ border-left:1px solid var(--line); border-right:1px solid var(--line); } }