/* ════════════════════════════════════════════════════════════
   Hébé — feuille de styles
   DA Hébé : Fraunces (titres) + Outfit (texte), vert sauge, fond crème. Aplats sans ombre.
════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Fraunces'; font-weight: 400; font-display: swap; src: url('fonts/fraunces-400.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/fraunces-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 500; font-display: swap; src: url('fonts/fraunces-500.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 600; font-display: swap; src: url('fonts/fraunces-600.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 400; font-display: swap; src: url('fonts/outfit-400.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 500; font-display: swap; src: url('fonts/outfit-500.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-display: swap; src: url('fonts/outfit-600.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 700; font-display: swap; src: url('fonts/outfit-700.woff2') format('woff2'); }

:root {
  --bg: #F4F6F1;
  --surface: #FFFFFF;
  --sunken: #EAEEE6;
  --line: #E2E7DC;
  --line-2: #D4DBCB;
  --text: #2A3A30;
  --text-2: #5A6B60;
  --muted: #7A8A80;
  --accent: #5E7A67;
  --sage: #7C9885;
  --sage-l: #A9C2B2;
  --accent-soft: #E8F0E9;
  --kcal: #7C9885;
  --protein: #6BA292;
  --carbs: #D9A865;
  --fat: #C98B6B;
  --warm: #FCF7EF;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --r: 18px;
  --r-s: 12px;
  --g: 20px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--bg); }
body {
  font-family: var(--sans);
  font-size: 15px; line-height: 1.45; color: var(--text);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(169,194,178,.18) 0%, transparent 50%),
    radial-gradient(90% 50% at 0% 100%, rgba(124,152,133,.10) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
button, input { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; text-align: inherit; }
input { -webkit-appearance: none; appearance: none; }
img { display: block; }
#app { max-width: 520px; margin: 0 auto; min-height: 100dvh; }
.view { padding: 0 var(--g) calc(96px + var(--safe-b)); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ── Typographie commune ── */
.hb-page-title { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; padding: 22px 0 14px; }
.hb-h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.hb-h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.hb-p { font-size: 15px; color: var(--text-2); margin-bottom: 18px; }
.hb-label, .eyebrow { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.hb-section-title { font-size: 13px; font-weight: 600; color: var(--muted); margin: 28px 0 6px; }
.link-btn { color: var(--accent); font-size: 14.5px; font-weight: 600; padding: 6px 0; }
.hb-subhead { padding-top: 8px; }
.hb-back { color: var(--accent); font-size: 15px; font-weight: 500; padding: 12px 0 0; }

/* ── Boutons ── */
.hb-btn {
  display: block; width: 100%; margin-top: 20px; padding: 14px; border-radius: var(--r-s);
  font-size: 15.5px; font-weight: 600; text-align: center; color: var(--accent); background: var(--accent-soft);
}
.hb-btn-primary { background: var(--accent); color: #fff; }
.hb-btn:active { opacity: .85; }
.hb-btn:disabled { opacity: .6; }

/* ── En-tête accueil ── */
.hb-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 26px 0 10px; }
.brand-word { font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: .95; letter-spacing: -0.02em; color: var(--text); }
.brand-accent { color: var(--sage); font-style: italic; position: relative; }
.brand-accent::after {
  content: ''; position: absolute; top: -6px; right: -14px; width: 15px; height: 15px;
  background: var(--sage-l); border-radius: 0 100% 0 100%; transform: rotate(-15deg); opacity: .9;
}
.brand-tag { font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-top: 10px; }
.hb-top-actions { display: flex; gap: 2px; margin-right: -8px; }
.hb-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--text-2); border-radius: 50%; }
.hb-icon:active { background: var(--sunken); }
.hb-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── Photos de plats ── */
.dish-ph { object-fit: cover; background: var(--sunken); flex-shrink: 0; }
.dish-ph-emoji { display: inline-grid; place-items: center; }
.dish-ph.mini { width: 22px; height: 22px; border-radius: 50%; margin-right: 8px; font-size: 12px; }
.dish-ph.batch { width: 40px; height: 40px; border-radius: 10px; font-size: 20px; }
.dish-ph.rc { width: 60px; height: 60px; border-radius: 12px; font-size: 28px; }
.dish-ph.ck { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r); font-size: 40px; }
.dish-ph.dv-img { width: 100%; height: 100%; font-size: 56px; }
.dish-ph.dv-ex-img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; font-size: 34px; margin-bottom: 6px; }

/* ── Aujourd'hui ── */
.today { padding-top: 8px; }
.today-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.today-head .eyebrow { margin-bottom: 2px; }
.today-date { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; }
.today-extra { font-size: 13.5px; color: var(--text-2); margin-top: 14px; }
.today-macros { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.tm-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.tm-top b { color: var(--text); font-weight: 600; }
.tm-bar { height: 4px; border-radius: 4px; background: var(--sunken); overflow: hidden; }
.tm-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }

/* Tuiles repas (accueil + détail du jour) */
.dv-meals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dv-meal { display: flex; flex-direction: column; text-align: left; }
.dv-photo { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--sunken); margin-bottom: 10px; }
.hb-tile-lbl {
  position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--text); font-size: 12px; font-weight: 600;
}
.dv-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.dv-side { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.dv-k { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ── La semaine ── */
.hb-days { border-top: 1px solid var(--line); }
.hb-day { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 0; border-bottom: 1px solid var(--line); }
.hb-day.is-past { opacity: .45; }
.hb-day-d { width: 34px; flex-shrink: 0; text-align: center; font-size: 18px; font-weight: 600; line-height: 1.1; }
.hb-day-d b { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.hb-day.is-focus .hb-day-d { color: var(--accent); }
.hb-day.is-focus .hb-day-d b { color: var(--accent); }
.hb-day-meals { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; }
.hb-day-meals span { display: flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-day-meals > span + span { color: var(--text-2); }
.hb-day-k { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.hb-batch-link { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 28px; padding: 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.hb-batch-link > div { flex: 1; min-width: 0; }
.hb-batch-thumbs { display: flex; gap: 6px; margin: 8px 0 10px; }
.hb-batch-line { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.hb-batch-line b { color: var(--text); font-weight: 600; }
.hb-chev { font-size: 22px; color: var(--muted); }
.hb-card { display: block; width: 100%; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); padding: 18px; }

/* ── Générateur ── */
.hb-field { margin-bottom: 20px; }
.hb-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 12px; background: var(--sunken); }
.hb-seg-btn { padding: 9px 6px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--text-2); text-align: center; }
.hb-seg-btn.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.cantine-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cant-day { height: 40px; border-radius: 10px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; color: var(--text-2); text-align: center; }
.cant-day.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.protein-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prot-chip { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 10px; border: 1px solid var(--line-2); font-size: 14.5px; font-weight: 500; color: var(--text-2); }
.prot-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.prot-emoji { font-size: 15px; }

/* ── Feuilles (bottom sheets) ── */
.overlay { position: fixed; inset: 0; z-index: 200; background: rgba(20, 24, 22, .4); display: flex; align-items: flex-end; animation: fade .15s ease; }
.sheet {
  width: 100%; max-width: 520px; margin: 0 auto; max-height: 88dvh; display: flex; flex-direction: column;
  background: var(--bg); border-radius: 22px 22px 0 0; animation: up .22s cubic-bezier(.2,.8,.2,1);
}
.sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 10px auto 4px; flex-shrink: 0; }
.hb-sheet-pad { overflow-y: auto; min-height: 0; padding: 10px var(--g) calc(24px + var(--safe-b)); -webkit-overflow-scrolling: touch; }
.hb-sheet-pad > .hb-h2 { margin-bottom: 16px; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(100%); } }

/* Détail du jour */
.dv-extras-lbl { margin-top: 26px; }
.dv-extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dv-extra { display: flex; flex-direction: column; text-align: left; }
.dv-ex-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.ds-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.ds-v { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ds-l { font-size: 12px; color: var(--muted); line-height: 1.35; margin: 2px 0 8px; }
.ds-bar { height: 3px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.ds-bar span { display: block; height: 100%; border-radius: 3px; }
.ds-bar .k { background: var(--kcal); } .ds-bar .p { background: var(--protein); } .ds-bar .c { background: var(--carbs); } .ds-bar .f { background: var(--fat); }
.dv-qty { margin-top: 22px; border-top: 1px solid var(--line); }
.dv-qty summary { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; list-style: none; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--accent); }
.dv-qty summary::-webkit-details-marker { display: none; }
.dv-qty summary span { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.dv-q-group { margin-bottom: 14px; }
.ds-item { padding: 10px 0; border-top: 1px solid var(--line); }
.ds-item-hd { font-size: 14.5px; font-weight: 600; }
.ds-ings { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-top: 3px; }

/* ── Cuisiner ── */
.ck-summary { padding: 16px 0 0; }
.ck-sum-main { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.ck-sum-sub { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.ck-dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; margin-top: 18px; }
.ck-dish { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.ck-dish .dish-ph { margin-bottom: 6px; }
.ck-dish-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.ck-dish-n { font-size: 12.5px; color: var(--muted); }
.ck-steps { border-top: 1px solid var(--line); }
.ck-step { display: flex; gap: 14px; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left; }
.ck-box { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
.ck-step.done .ck-box { background: var(--accent); border-color: var(--accent); }
.ck-step.done .ck-text { color: var(--muted); }
.ck-text { font-size: 15px; line-height: 1.5; }
.ck-tag { display: block; font-size: 12.5px; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.ck-pause { padding: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--carbs); border-bottom: 1px solid var(--line); }
.ck-note { font-size: 13.5px; color: var(--text-2); margin-top: 14px; }
.ck-ings { border-bottom: 1px solid var(--line); }
.hb-section-title + .ck-ings { border-top: 1px solid var(--line); }
.ck-ings summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 0; list-style: none; cursor: pointer; font-size: 15px; font-weight: 600; }
.ck-ings summary::-webkit-details-marker { display: none; }
.ck-sum-name { display: flex; align-items: center; min-width: 0; }
.ck-ings-n { font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.ck-ing { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14.5px; border-top: 1px solid var(--line); }
.ck-ing span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-cons { font-size: 13px; color: var(--muted); padding: 10px 0 0; }
.ck-recipe { color: var(--accent); font-size: 14.5px; font-weight: 600; padding: 10px 0 16px; }
.ck-snack { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }

/* ── Courses ── */
.shop-head { padding-bottom: 8px; }
.shop-head .hb-page-title { padding-bottom: 4px; }
.shop-meta { font-size: 14px; color: var(--text-2); }
.shop-progress { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.shop-progress .tm-bar { flex: 1; }
.shop-progress .link-btn { font-size: 13.5px; }
.shop-cat { margin-top: 24px; }
.shop-cat-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.shop-cat-ic { width: 18px; height: 18px; color: var(--muted); display: grid; place-items: center; }
.shop-cat-ic svg { width: 18px; height: 18px; }
.shop-cat-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--muted); }
.shop-cat-count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.shop-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 0; border-bottom: 1px solid var(--line); text-align: left; }
.shop-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); position: relative; }
.shop-check.checked { background: var(--accent); border-color: var(--accent); }
.shop-check.checked::after { content: ''; position: absolute; left: 7px; top: 3.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.shop-info { flex: 1; min-width: 0; }
.shop-name { font-size: 15px; font-weight: 500; }
.shop-qty { font-size: 13px; color: var(--muted); margin-top: 1px; }
.shop-item.done .shop-name { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }

/* ── Catalogue ── */
.recipes-top { position: sticky; top: 0; z-index: 5; background: var(--bg); padding-bottom: 10px; }
.search-bar { width: 100%; height: 44px; padding: 0 14px; border-radius: var(--r-s); border: none; background: var(--sunken); font-size: 15px; outline: none; }
.search-bar::placeholder { color: var(--muted); }
.filter-tabs, .prot-filter-tabs { display: flex; gap: 6px; overflow-x: auto; margin-top: 10px; scrollbar-width: none; }
.filter-tabs::-webkit-scrollbar, .prot-filter-tabs::-webkit-scrollbar { display: none; }
.tab-btn, .prot-filter-btn { flex-shrink: 0; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tab-btn.active, .prot-filter-btn.active { background: var(--text); border-color: var(--text); color: #fff; }
.pf-emoji { font-size: 13px; }
.recipe-list { border-top: 1px solid var(--line); margin-top: 6px; }
.recipe-card { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.rc-info { flex: 1; min-width: 0; }
.rc-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.rc-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.rc-arrow { font-size: 20px; color: var(--muted); }
.no-results { padding: 40px 0; text-align: center; color: var(--muted); }

/* ── Fiche recette ── */
.detail-back { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-size: 15px; font-weight: 500; padding: 16px 0 12px; }
.detail-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.detail-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); margin-bottom: 18px; }
.detail-emoji { font-size: 64px; padding: 20px 0 8px; }
.detail-name { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; font-size: 14px; color: var(--text-2); }
.detail-meta span { display: inline-flex; align-items: center; gap: 5px; }
.detail-meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.detail-batch-tag { padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600; }
.serv-selector { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.serv-sel-label { font-size: 15px; font-weight: 500; }
.serv-sel-control { display: flex; align-items: center; gap: 14px; }
.serv-sel-btn, .pcell-btn, .mrow-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 18px; line-height: 1; display: grid; place-items: center; color: var(--text); }
.serv-sel-val { min-width: 24px; text-align: center; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.macro-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.macro-cell-val { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.macro-cell-label { font-size: 12px; color: var(--muted); }
.macro-cell.kcal .macro-cell-val { color: var(--kcal); } .macro-cell.protein .macro-cell-val { color: var(--protein); }
.macro-cell.carbs .macro-cell-val { color: var(--carbs); } .macro-cell.fat .macro-cell-val { color: var(--fat); }
.detail-section { margin-top: 30px; }
.detail-section-title { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.detail-raw { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.ingredient-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ing-qty { font-weight: 600; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.step-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.step-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.step-text { font-size: 15px; line-height: 1.55; }
.tip-box { padding: 14px 16px; border-radius: var(--r-s); background: var(--accent-soft); font-size: 14.5px; line-height: 1.5; color: var(--text); }
.tip-label { font-size: 12.5px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }

/* ── Réglages ── */
.set-hero { padding: 6px 0 4px; }
.set-hero-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.set-hero-kcal { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-top: 2px; }
.set-hero-kcal span { font-size: 15px; font-weight: 500; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.set-hero-meta { font-size: 13.5px; color: var(--text-2); margin-top: 4px; display: flex; gap: 6px; }
.set-section { margin-top: 32px; }
.set-section-head { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 12px; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profile-cell { padding: 12px; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); }
.pc-label { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.pc-control { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pc-value { display: flex; align-items: baseline; justify-content: center; gap: 3px; min-width: 0; }
.pcell-input, .mrow-input { width: 54px; border: none; background: none; text-align: center; font-size: 18px; font-weight: 700; outline: none; font-variant-numeric: tabular-nums; }
.pc-unit, .field-unit { font-size: 12.5px; color: var(--muted); }

.proto-num { font-size: 12px; font-weight: 700; color: var(--muted); }

.phase-stepper { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.phase-step { flex: 1 0 96px; padding: 12px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); text-align: left; }
.phase-step.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.phase-step.done { opacity: .55; }
.ps-dot { font-size: 12px; font-weight: 700; color: var(--muted); }
.phase-step.active .ps-dot { color: var(--accent); }
.ps-label { font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.ps-kcal { font-size: 12.5px; color: var(--muted); }
.target-card { margin-top: 14px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tc-kcal { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; }
.tc-kcal span { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tc-week { font-size: 13px; color: var(--muted); margin-top: 2px; }
.tc-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.tcm { display: flex; flex-direction: column; }
.tcm-bar { height: 3px; border-radius: 3px; margin-bottom: 8px; }
.tcm.protein .tcm-bar { background: var(--protein); } .tcm.carbs .tcm-bar { background: var(--carbs); } .tcm.fat .tcm-bar { background: var(--fat); }
.tcm strong { font-size: 17px; font-weight: 700; }
.tcm span { font-size: 12.5px; color: var(--muted); }
.phase-guide { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.pg-title { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.pg-text { font-size: 14.5px; line-height: 1.5; }
.apply-btn { display: block; width: 100%; margin-top: 20px; padding: 14px; border-radius: var(--r-s); background: var(--accent); color: #fff; font-size: 15.5px; font-weight: 600; text-align: center; }
.apply-btn.is-active { background: var(--accent-soft); color: var(--accent); }
.set-manual { margin-top: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.set-manual summary { padding: 16px 0; font-size: 15px; font-weight: 600; color: var(--accent); list-style: none; cursor: pointer; }
.set-manual summary::-webkit-details-marker { display: none; }
.manual-body { padding-bottom: 12px; }
.settings-field { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.field-label { font-size: 15px; }
.field-control { display: flex; align-items: center; gap: 8px; }
.weekly-readout { display: flex; justify-content: space-between; padding-top: 12px; font-size: 14px; color: var(--text-2); }
.weekly-readout strong { color: var(--text); }

/* ── Navigation ── */
#nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; justify-content: space-around; max-width: 520px; margin: 0 auto;
  padding: 8px 12px calc(8px + var(--safe-b));
  background: rgba(246, 245, 241, .92); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line);
}
.nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; color: var(--muted); }
.nav-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-btn span { font-size: 11px; font-weight: 600; }
.nav-btn.active { color: var(--accent); }

/* combinaisons carte + mise en page */
.hb-card.hb-batch-link, .hb-card.ck-snack { display: flex; }
.hb-card.ck-snack { padding: 14px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }

/* ── DA Hébé : titres en Fraunces ── */
.hb-page-title, .hb-h2, .today-date, .detail-name, .detail-section-title, .set-section-head,
.set-hero-kcal, .tc-kcal, .dv-name, .ck-sum-main, .hb-h3 {
  font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em;
}
.hb-page-title { font-size: 30px; }
.today-date { font-size: 26px; }
.detail-name { font-size: 28px; }
.dv-name { font-size: 16px; line-height: 1.25; }
.set-hero-kcal { font-weight: 400; font-size: 46px; }
.tc-kcal { font-weight: 400; font-size: 32px; }
.detail-section-title, .set-section-head { font-size: 20px; }
/* barres de progression en dégradé sauge */
.tm-bar i { background: linear-gradient(90deg, #9DB8A6, #7C9885); }
.hb-btn-primary, .apply-btn, .cant-day.on { background: var(--sage); border-color: var(--sage); }
.hb-btn-primary:active, .apply-btn:active { background: var(--accent); }
.tab-btn.active, .prot-filter-btn.active { background: var(--accent); border-color: var(--accent); }
.hb-batch-link { background: rgba(255,255,255,.6); border-color: var(--line); }
.profile-cell, .phase-step { background: rgba(255,255,255,.6); }
.ck-pause { color: #B98A4A; }
#nav { background: rgba(244, 246, 241, .9); }
.hb-tile-lbl { color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   Douceur & couleur
   Formes arrondies, teintes par famille de plat et par rayon.
════════════════════════════════════════════════════════════ */
:root {
  --honey: #E0A95E;   --honey-t: #FBF0DD;
  --terra: #D98E6B;   --terra-t: #FAE9E0;
  --bloom: #C98BA8;   --bloom-t: #F7E7EF;
  --sky:   #6FA3C0;   --sky-t:   #E3EFF5;
  --coral: #E48A7A;   --coral-t: #FBE6E2;
  --leaf:  #8FB573;   --leaf-t:  #EAF3E2;
  --mint:  #5FA89A;   --mint-t:  #E0F1ED;
  --sage-t: #E8F0E9;
  --r: 24px; --r-s: 16px;
}
/* couleur courante selon la famille */
.fam-poulet    { --c: var(--honey); --t: var(--honey-t); }
.fam-boeuf     { --c: var(--terra); --t: var(--terra-t); }
.fam-saumon    { --c: var(--sky);   --t: var(--sky-t); }
.fam-crevettes { --c: var(--coral); --t: var(--coral-t); }
.fam-tofu      { --c: var(--leaf);  --t: var(--leaf-t); }
.fam-cantine   { --c: var(--sage);  --t: var(--sage-t); }
.cat-sweet     { --c: var(--bloom); --t: var(--bloom-t); }
.cat-side      { --c: var(--honey); --t: var(--honey-t); }
.cat-starter   { --c: var(--leaf);  --t: var(--leaf-t); }

/* ── Photos très arrondies ── */
.dv-photo { border-radius: 26px; }
.dish-ph.ck, .dish-ph.dv-ex-img { border-radius: 22px; }
.dish-ph.rc { border-radius: 18px; }
.dish-ph.batch { border-radius: 14px; }
.detail-photo { border-radius: 30px; }

/* ── Aujourd'hui : carte douce dégradée ── */
.today { margin-top: 14px; padding: 18px 16px 20px; border-radius: 30px; background: linear-gradient(160deg, #E4EEE6 0%, #F6F1E6 100%); }
.hb-tile-lbl { background: var(--t, #fff); color: var(--c, var(--accent)); }
.dv-meal .dv-name::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--sage)); margin-right: 7px; vertical-align: 2px; }
.today-macros .tm:nth-child(2) .tm-bar i { background: linear-gradient(90deg, #9CC9B9, var(--protein)); }
.tm-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.7); }
.tm-bar i { border-radius: 6px; }

/* ── La semaine : pastilles arrondies ── */
.hb-days { border: none; display: flex; flex-direction: column; gap: 8px; }
.hb-day { padding: 12px 14px; border: none; border-radius: 22px; background: rgba(255,255,255,.65); }
.hb-day.is-focus { background: var(--sage-t); box-shadow: inset 0 0 0 1.5px var(--sage-l); }
.hb-day-d { width: 40px; height: 44px; border-radius: 14px; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 17px; }
.hb-day.is-focus .hb-day-d { background: var(--sage); color: #fff; }
.hb-day.is-focus .hb-day-d b { color: rgba(255,255,255,.85); }
.hb-batch-link { border-radius: 26px; border: none; background: linear-gradient(150deg, #FBF0DD 0%, #FAE9E0 100%); }
.hb-batch-link .hb-h3 { color: #8A5A2E; }
.hb-btn { border-radius: 999px; }
.link-btn { padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.75); }

/* ── Générateur : tout en pilules ── */
.hb-seg { border-radius: 999px; }
.hb-seg-btn { border-radius: 999px; }
.cant-day { border-radius: 50%; aspect-ratio: 1; height: auto; }
.prot-chip { border-radius: 999px; }
.prot-chip.on { background: var(--sage-t); border-color: var(--sage-l); color: var(--accent); }
.sheet { border-radius: 30px 30px 0 0; }

/* ── Détail du jour ── */
.dv-extra .dish-ph.dv-ex-img { box-shadow: inset 0 0 0 4px var(--t, transparent); }
.ds-grid { border-top: none; padding: 16px; border-radius: 24px; background: rgba(255,255,255,.65); }
.ds-bar { height: 5px; border-radius: 5px; }
.dv-qty { border-top: none; }

/* ── Cuisiner : une couleur par plat ── */
.dish-0 { --c: var(--honey); --t: var(--honey-t); }
.dish-1 { --c: var(--sky);   --t: var(--sky-t); }
.dish-2 { --c: var(--bloom); --t: var(--bloom-t); }
.dish-3 { --c: var(--leaf);  --t: var(--leaf-t); }
.ck-summary { margin-top: 4px; padding: 16px 18px; border-radius: 24px; background: linear-gradient(150deg, #E4EEE6, #F6F1E6); }
.ck-dish { padding: 8px; border-radius: 24px; background: var(--t); }
.ck-dish .dish-ph { border-radius: 18px; }
.ck-dish-name, .ck-dish-n { padding: 0 4px; }
.ck-steps { border: none; display: flex; flex-direction: column; gap: 8px; }
.ck-step { padding: 14px 16px; border: none; border-radius: 22px; background: rgba(255,255,255,.7); box-shadow: inset 4px 0 0 var(--c, var(--sage-l)); }
.ck-step .ck-box { border-color: var(--c, var(--line-2)); }
.ck-step.done .ck-box { background: var(--c, var(--accent)); border-color: var(--c, var(--accent)); }
.ck-tag { color: var(--c, var(--accent)); filter: saturate(1.1) brightness(.85); }
.ck-pause { border: none; padding: 10px 16px; border-radius: 999px; background: var(--honey-t); color: #9A6A2E; align-self: flex-start; }
.ck-ings { border: none; margin-bottom: 8px; padding: 0 16px; border-radius: 22px; background: rgba(255,255,255,.7); }
.hb-section-title + .ck-ings { border-top: none; }
.ck-ing { border-top-color: var(--line); }

/* ── Courses : une teinte par rayon ── */
.cat-c-0 { --c: var(--terra); --t: var(--terra-t); }
.cat-c-1 { --c: var(--sky);   --t: var(--sky-t); }
.cat-c-2 { --c: var(--leaf);  --t: var(--leaf-t); }
.cat-c-3 { --c: var(--honey); --t: var(--honey-t); }
.cat-c-4 { --c: var(--bloom); --t: var(--bloom-t); }
.cat-c-5 { --c: var(--muted); --t: var(--sunken); }
.shop-cat { margin-top: 14px; padding: 6px 16px 8px; border-radius: 26px; background: var(--t); }
.shop-cat-head { border-bottom: none; padding: 10px 0 6px; }
.shop-cat-ic { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.8); color: var(--c); }
.shop-cat-ic svg { width: 16px; height: 16px; }
.shop-cat-name { color: var(--text); font-weight: 600; font-size: 14px; }
.shop-item { border-bottom: 1px solid rgba(255,255,255,.75); }
.shop-item:last-child { border-bottom: none; }
.shop-check { border-color: var(--c); background: rgba(255,255,255,.6); }
.shop-check.checked { background: var(--c); border-color: var(--c); }
.shop-progress .tm-bar { background: var(--sunken); }

/* ── Catalogue : cartes teintées par famille ── */
.search-bar { border-radius: 999px; padding: 0 18px; background: rgba(255,255,255,.75); }
.tab-btn.active, .prot-filter-btn.active { background: var(--sage); border-color: var(--sage); }
.recipe-list { border: none; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.recipe-card { padding: 10px 14px 10px 10px; border: none; border-radius: 24px; background: var(--t, rgba(255,255,255,.7)); }
.rc-meta { color: var(--text-2); }
.rc-name::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--sage)); margin-right: 7px; vertical-align: 2px; }

/* ── Fiche recette ── */
.serv-selector { border: none; padding: 12px 16px; border-radius: 999px; background: rgba(255,255,255,.7); }
.macro-grid { padding: 14px 16px; border-radius: 24px; background: rgba(255,255,255,.65); }
.detail-section-title { border-bottom: none; padding-bottom: 6px; }
.ingredient-row { border-bottom: none; padding: 10px 16px; border-radius: 16px; }
.ingredient-row:nth-child(even) { background: rgba(255,255,255,.6); }
.step-row { border-bottom: none; }
.step-num { background: var(--honey-t); color: #9A6A2E; }
.tip-box { border-radius: 22px; background: var(--honey-t); }
.tip-label { color: #9A6A2E; }
.detail-batch-tag { background: var(--sage-t); }

/* ── Réglages ── */
.profile-cell, .phase-step { border: none; border-radius: 22px; background: rgba(255,255,255,.7); }

.phase-step.active { box-shadow: inset 0 0 0 2px var(--sage); }
.target-card { border: none; padding: 18px; border-radius: 24px; background: linear-gradient(150deg, #E4EEE6, #F6F1E6); }
.set-manual { border: none; padding: 0 16px; border-radius: 22px; background: rgba(255,255,255,.7); }
.apply-btn { border-radius: 999px; }
.serv-sel-btn, .pcell-btn, .mrow-btn { background: rgba(255,255,255,.8); border-color: var(--line); }

/* ── Navigation en pilule flottante ── */
#nav {
  left: 14px; right: 14px; bottom: calc(10px + var(--safe-b)); padding: 8px 10px;
  border: none; border-radius: 999px; background: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 28px rgba(94, 122, 103, .16);
}
.nav-btn { border-radius: 999px; padding: 6px 0; }
.nav-btn.active { background: var(--sage-t); color: var(--accent); }
.view { padding-bottom: calc(110px + var(--safe-b)); }

/* ═══ Cuisiner : phases numérotées ═══ */
.ck-sum-main { font-size: 20px; line-height: 1.25; }
.ck-sum-sub { margin-top: 4px; }
.ck-progress { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ck-progress .tm-bar { flex: 1; }
.ck-phase { margin-top: 14px; padding: 16px; border-radius: 26px; background: var(--t, rgba(255,255,255,.7)); }
.ck-phase:first-of-type { background: rgba(255,255,255,.7); }
.ck-phase-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ck-phase-num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
  background: var(--c, var(--sage)); color: #fff;
}
.dish-ph.phase { width: 42px; height: 42px; border-radius: 14px; font-size: 22px; }
.ck-phase-title { font-family: var(--serif); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.ck-phase-hint { font-size: 13px; color: var(--text-2); margin-top: 1px; }
.ck-phase-steps { display: flex; flex-direction: column; gap: 6px; }
.ck-phase .ck-step { background: rgba(255,255,255,.75); box-shadow: none; padding: 12px 14px; border-radius: 18px; }
.ck-phase .ck-step.current { background: #fff; box-shadow: 0 0 0 2px var(--c, var(--sage)), 0 6px 18px rgba(94,122,103,.12); }
.ck-now { display: inline-block; margin: 0 0 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--c, var(--sage)); color: #fff; }
.ck-now + * , .ck-now { vertical-align: middle; }
.ck-step .ck-text { display: flex; flex-direction: column; align-items: flex-start; }
.ck-step.done .ck-text { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.15); }
.ck-phase .ck-ings { background: var(--t, var(--bg)); margin: 6px 0 0; }
.ck-phase:first-of-type .ck-ings { background: var(--t); }
.ck-phase-end { background: linear-gradient(150deg, #E4EEE6, #F6F1E6); }
.ck-phase-end .ck-phase-num { background: var(--accent); }
.ck-cons-list { margin-top: 12px; }
.ck-cons-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 2px; font-size: 13.5px; color: var(--text-2); }
.ck-cons-row span:first-child { font-weight: 600; color: var(--text); }

/* Cuisiner : accès aux recettes */
.ck-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ck-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 22px; background: var(--t); text-align: left; }
.dish-ph.menu { width: 52px; height: 52px; border-radius: 16px; font-size: 26px; }
.ck-menu-txt { display: flex; flex-direction: column; min-width: 0; }
.ck-menu-name { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.ck-menu-link { font-size: 12.5px; font-weight: 600; color: var(--c); filter: brightness(.8); margin-top: 2px; }
.ck-phase-txt { flex: 1; min-width: 0; }
.ck-rec-btn { flex-shrink: 0; align-self: center; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 600; color: var(--text-2); }

/* Courses : bandeau coloré, liste claire */
.shop-cat { padding: 0; background: none; border-radius: 24px; overflow: hidden; }
.shop-cat-head { padding: 12px 16px; background: var(--t); }
.shop-cat-ic { background: rgba(255,255,255,.85); }
.shop-cat-count { color: var(--text-2); font-weight: 600; }
.shop-group { padding: 0 16px; background: rgba(255,255,255,.78); }
.shop-item { border-bottom: 1px solid var(--line); }
.shop-item:last-child { border-bottom: none; }

/* ═══ Notes, remplacement, messages ═══ */
.rate-row { display: flex; gap: 8px; margin-top: 16px; }
.rate-btn { padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.75); font-size: 14px; font-weight: 600; color: var(--text-2); }
.rate-btn.up.on { background: var(--leaf-t); color: #4E7A35; box-shadow: inset 0 0 0 1.5px var(--leaf); }
.rate-btn.down.on { background: var(--terra-t); color: #A45A3A; box-shadow: inset 0 0 0 1.5px var(--terra); }
.rate-hint { font-size: 13px; color: var(--text-2); margin-top: 8px; min-height: 18px; }
.rc-rate { font-size: 12px; }
.recipe-card.is-disliked { opacity: .5; }
.dv-swaps, .ck-swaps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.swap-btn { justify-self: start; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.8); font-size: 13px; font-weight: 600; color: var(--accent); }
.toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); z-index: 300;
  max-width: calc(100% - 40px); padding: 11px 18px; border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.3; text-align: left;
  border: 1px solid var(--line-2); box-shadow: 0 10px 28px rgba(42,58,48,.14), 0 2px 6px rgba(42,58,48,.06);
  animation: up .25s cubic-bezier(.2,.8,.2,1); transition: opacity .3s;
  display: flex; align-items: center; gap: 10px; width: max-content; padding: 9px 16px 9px 9px;
}
.toast-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sage-t); color: var(--accent); }
.toast-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.toast.warn .toast-ic { background: var(--terra-t); color: #B4673F; font-size: 15px; font-weight: 800; }
.toast.out { opacity: 0; }

.toast { bottom: auto; top: calc(14px + env(safe-area-inset-top, 0px)); animation: fade .2s ease; }

/* ═══ J'aime / pas pour moi : sur les photos ═══ */
:root { --heart: #E0667A; --heart-t: #FCE6EA; }
.ph-wrap { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; }
.dv-extra .ph-wrap { display: block; }
.ph-wrap.is-nope .dish-ph, .dv-photo.is-nope .dish-ph, .detail-photo-wrap.is-nope .detail-photo { filter: grayscale(1); opacity: .55; }
.ph-badge {
  position: absolute; top: -5px; right: -5px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.ph-badge svg { width: 14px; height: 14px; }
.is-liked .ph-badge svg { fill: var(--heart); stroke: none; }
.is-nope .ph-badge svg { fill: none; stroke: var(--terra); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dv-extra .ph-badge { top: 6px; right: 6px; }

/* fiche recette : boutons ronds sur la photo */
.detail-photo-wrap { position: relative; }
.rate-fabs { position: absolute; right: 14px; bottom: 32px; display: flex; gap: 10px; }
.fab {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,.14); transition: background .2s, transform .15s;
}
.fab svg { width: 24px; height: 24px; fill: none; stroke: var(--text-2); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: all .2s; }
.fab:active { transform: scale(.92); }
.is-liked .fab.like { background: var(--heart); }
.is-liked .fab.like svg { fill: #fff; stroke: #fff; }
.is-nope .fab.nope { background: var(--terra); }
.is-nope .fab.nope svg { stroke: #fff; }
.fab.pop, .tile-heart.pop { animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { 0% { transform: scale(.8); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.detail-emoji { display: grid; place-items: center; min-height: 200px; border-radius: 30px; background: rgba(255,255,255,.6); margin-bottom: 18px; }
.rate-hint { margin-top: 12px; min-height: 0; }
.rate-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.rate-chip.like { background: var(--heart-t); color: #B8475A; }
.rate-chip.nope { background: var(--terra-t); color: #A45A3A; }

/* grandes photos (accueil, détail du jour) : cœur à toucher */
.tile-heart {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.88); cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
}
.tile-heart svg { width: 18px; height: 18px; fill: none; stroke: var(--text-2); stroke-width: 1.9; transition: all .2s; }
.tile-heart.on svg { fill: var(--heart); stroke: var(--heart); }
.rate-chip { gap: 8px; padding: 9px 16px 9px 12px; font-size: 14.5px; }
.rate-emoji { font-size: 20px; line-height: 1; }

/* ═══ Imprévu ═══ */
.fam-outside { --c: var(--sky); --t: var(--sky-t); }
.dv-meal.fam-outside .dv-photo { background: linear-gradient(150deg, var(--sky-t), #F6F1E6); }
.dv-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.swap-btn.out { color: #3F7393; }
.out-tag { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--sky-t); color: #3F7393; font-size: 13px; font-weight: 600; }
.out-pick { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px; border-radius: 20px; background: rgba(255,255,255,.85); }
.out-q { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 2px; }
.out-opt { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px; border-radius: 999px; background: var(--sky-t); color: #2F5E7A; font-size: 14px; }
.out-opt b { font-weight: 600; }
.out-opt span { font-size: 12.5px; opacity: .8; }
.out-cancel { padding: 6px; font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; }
.dv-swaps { align-items: start; }
.dv-acts { align-content: flex-start; }

/* ═══ Aide visuelle masse grasse ═══ */
.bf-guide-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 12px 14px;
  border-radius: 22px; background: var(--sky-t); text-align: left;
}
.bf-guide-btn b { display: block; font-size: 14.5px; font-weight: 600; }
.bf-guide-btn span span { font-size: 12.5px; color: var(--text-2); }
.bf-guide-btn > span:nth-child(2) { flex: 1; min-width: 0; }
.bf-guide-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.85); flex-shrink: 0; }
.bf-guide-ic svg { width: 22px; height: 22px; fill: none; stroke: #3F7393; stroke-width: 1.7; stroke-linejoin: round; }
.bf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.bf-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 12px; border-radius: 22px; background: rgba(255,255,255,.75); text-align: center; }
.bf-card.on { background: var(--sage-t); box-shadow: inset 0 0 0 2px var(--sage); }
.bf-svg { width: 100%; max-width: 96px; height: auto; margin-bottom: 4px; }
.bf-skin { fill: #F2DECB; stroke: #CDA586; stroke-width: 1.3; stroke-linejoin: round; }
.bf-lines path { fill: none; stroke: #C29373; stroke-width: 1.1; stroke-linecap: round; }
.bf-navel { fill: #C29373; }
.bf-shorts { fill: var(--sage-l); }
.bf-val { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.bf-desc { font-size: 11.5px; line-height: 1.3; color: var(--text-2); }
.bf-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.bf-guide-ic { width: 44px; height: 44px; padding: 4px; overflow: hidden; }
.bf-guide-ic .bf-svg { width: 34px; margin: 0; }

/* ═══ Programmes : cartes simples + fiche ═══ */
.pc-P1 { --c: var(--leaf);  --t: var(--leaf-t); }
.pc-P2 { --c: var(--sky);   --t: var(--sky-t); }
.pc-P3 { --c: var(--honey); --t: var(--honey-t); }
.pc-P4 { --c: var(--terra); --t: var(--terra-t); }

.proto-more { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.pf-tag { font-size: 15px; color: var(--text-2); margin-top: -2px; }
.pf-desc { font-size: 15px; line-height: 1.55; margin-top: 14px; }
.pf-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.pf-facts > div { padding: 12px 14px; border-radius: 18px; background: var(--t); }
.pf-facts span { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); }
.pf-facts b { display: block; font-size: 14px; font-weight: 600; margin-top: 2px; line-height: 1.35; }
.pf-steps-lbl { margin-top: 22px; }
.pf-step { padding: 12px 0; border-top: 1px solid var(--line); }
.pf-step-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pf-step-hd b { font-size: 15px; font-weight: 600; }
.pf-step-hd span { font-size: 14px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.pf-step p { font-size: 14px; line-height: 1.5; color: var(--text-2); margin-top: 4px; }

/* ═══ Fiche programme : graphiques ═══ */
.pf .pf-desc { margin-top: 6px; }
.pf-block { margin-top: 26px; }
.pf-h { font-family: var(--serif); font-size: 18px; font-weight: 500; margin-bottom: 10px; }
.pf-chart { display: block; width: 100%; height: auto; padding: 8px 6px 0; border-radius: 20px; background: rgba(255,255,255,.7); }
.kc-maint { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }
.kc-maint-lbl { font: 600 10.5px var(--sans); fill: var(--muted); text-anchor: end; }
.kc-area { fill: var(--t); }
.kc-line { stroke: var(--c); stroke-width: 3.5; stroke-linecap: round; }
.kc-val { font: 600 13px var(--sans); fill: var(--text); text-anchor: middle; }
.kc-lbl { font: 600 11px var(--sans); fill: var(--text-2); text-anchor: middle; }
.mc { padding: 14px; border-radius: 20px; background: rgba(255,255,255,.7); }
.mc-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mc-lbl { width: 52px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--text-2); }
.mc-bar { flex: 1; display: flex; gap: 2px; height: 26px; }
.mc-bar i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; }
.mc-bar i:first-child { border-radius: 8px 0 0 8px; }
.mc-bar i:last-child { border-radius: 0 8px 8px 0; }
.mc-bar .p { background: var(--protein); } .mc-bar .f { background: var(--fat); } .mc-bar .c { background: var(--carbs); }
.mc-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-2); }
.mc-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.mc-legend .p::before { background: var(--protein); } .mc-legend .f::before { background: var(--fat); } .mc-legend .c::before { background: var(--carbs); }
.pf-note { font-size: 13px; color: var(--text-2); margin-top: 8px; line-height: 1.45; }
.pf .pf-step { display: flex; gap: 12px; }
.pf-num { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--t); color: var(--text); font-size: 12px; font-weight: 700; margin-top: 1px; }
.pf .pf-step > div { flex: 1; min-width: 0; }
.pf-step-hd em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.pf-next { font-size: 13px !important; color: var(--text) !important; margin-top: 6px !important; padding-left: 10px; border-left: 2px solid var(--c); }

/* ═══ Fiche programme v2 : chiffres et frise ═══ */
.proto-more { display: inline-block; align-self: flex-start; margin-top: 10px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 600; color: var(--text); }
.pf-hero { margin: -4px -4px 0; padding: 18px; border-radius: 26px; background: var(--t); }
.pf-hero .pf-tag { margin-top: 0; }
.pf-stats { display: grid; grid-template-columns: 1.3fr .7fr 1fr; gap: 8px; margin-top: 16px; }
.pf-stats > div { padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.75); }
.pf-stats b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.2; }
.pf-stats span { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-top: 2px; }
.pf-block { margin-top: 22px; }
.tl { position: relative; }
.tl-item { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.tl-item:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--t); }
.tl-dot { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 13px; font-weight: 700; }
.tl-body { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.75); }
.tl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tl-top b { font-size: 15px; font-weight: 600; }
.tl-top em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.tl-top span { font-family: var(--serif); font-size: 17px; font-weight: 500; white-space: nowrap; }
.tl-short { font-size: 14px; color: var(--text-2); margin-top: 3px; line-height: 1.4; }
.tl-when { margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: var(--t); font-size: 13px; line-height: 1.4; }
.tl-when span { display: block; font-size: 11px; font-weight: 700; color: var(--text-2); margin-bottom: 1px; }

/* Fiche : à quoi sert le programme */
.pf-purpose { font-size: 15.5px; line-height: 1.6; color: var(--text); }
.pf-who { margin-top: 14px; padding: 14px 16px; border-radius: 20px; background: var(--t); }
.pf-who-h { font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.pf-who-i { position: relative; padding: 5px 0 5px 20px; font-size: 14.5px; line-height: 1.4; }
.pf-who-i::before { content: ''; position: absolute; left: 2px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pf-intro { font-size: 14.5px; line-height: 1.55; color: var(--text-2); margin: -2px 0 14px; }

/* ═══ Placard mémorisé ═══ */
.shop-item[role="button"] { cursor: pointer; }
.shop-have { flex-shrink: 0; padding: 6px 12px; border-radius: 999px; background: var(--t); font-size: 12.5px; font-weight: 600; color: var(--text); }
.shop-pantry { padding: 12px 16px 14px; background: rgba(255,255,255,.55); border-top: 1px solid var(--line); }
.shop-pantry-h { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.shop-pantry-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-chip { padding: 5px 11px; border-radius: 999px; background: var(--sunken); font-size: 12.5px; color: var(--text-2); }
.bf-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bf-card { padding: 8px 4px 10px; border-radius: 18px; }
.bf-val { font-size: 16px; }
.bf-desc { font-size: 10.5px; }
.set-hero-meta { display: block; max-width: 34em; line-height: 1.5; margin-top: 6px; }

.back-to-plan { display: block; width: 100%; margin: 4px 0 8px; padding: 10px; border-radius: 999px; background: var(--sage-t); color: var(--accent); font-size: 14px; font-weight: 600; text-align: center; }
/* « i » à droite du titre { padding-top: 14px; }

.mrow-btn { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.mrow-btn:active { background: var(--sage-t); }

/* ═══════════════════════════════════════════════════
   Fiche recette
═══════════════════════════════════════════════════ */
.rd { padding: 0 0 calc(110px + var(--safe-b)) !important; }
.rd-hero { position: relative; height: min(62vh, 440px); overflow: hidden; background: var(--t, var(--sunken)); }
.rd-photo { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.rd-emoji { height: 100%; display: grid; place-items: center; font-size: 96px; }
.rd-hero.is-nope .rd-photo { filter: grayscale(1); opacity: .6; }
.rd-round {
  position: absolute; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.rd-round svg { width: 21px; height: 21px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rd-back { top: calc(14px + env(safe-area-inset-top, 0px)); left: 16px; }
.rd-rate { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px; display: flex; gap: 8px; }
.rd-rate .rd-round { position: static; }
.rd-hero.is-liked .fab.like { background: var(--heart); }
.rd-hero.is-liked .fab.like svg { fill: #fff; stroke: #fff; }
.rd-hero.is-nope .fab.nope { background: var(--terra); }
.rd-hero.is-nope .fab.nope svg { stroke: #fff; }

.rd-sheet {
  position: relative; margin-top: -34px; padding: 24px var(--g) 0;
  border-radius: 30px 30px 0 0; background: var(--bg);
}
.rd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.8); font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.rd-tag svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rd-tag.main { background: var(--t); color: var(--text); }
.rd-title { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; margin-top: 12px; }
.rd .rate-hint { margin-top: 10px; }

/* nutrition */
.rd-nutri { display: flex; align-items: stretch; gap: 14px; margin-top: 18px; padding: 16px; border-radius: 24px; background: rgba(255,255,255,.75); }
.rd-kcal { display: flex; flex-direction: column; justify-content: center; padding-right: 14px; border-right: 1px solid var(--line); }
.rd-kcal b { font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1; }
.rd-kcal span { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.rd-macros { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rd-m b { display: block; font-size: 16px; font-weight: 700; }
.rd-m span { display: block; font-size: 11.5px; color: var(--muted); margin: 1px 0 8px; }
.rd-m i { display: block; height: 5px; border-radius: 5px; background: var(--sunken); position: relative; overflow: hidden; }
.rd-m i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 5px; }
.rd-m.p b { color: var(--protein); } .rd-m.p i::after { background: var(--protein); }
.rd-m.c b { color: #B98A43; } .rd-m.c i::after { background: var(--carbs); }
.rd-m.f b { color: #B36A4E; } .rd-m.f i::after { background: var(--fat); }

/* sections */
.rd-sec { margin-top: 30px; }
.rd-sec-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rd-sec-hd h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; }
.rd-serv { display: flex; align-items: center; gap: 10px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.8); font-size: 13.5px; font-weight: 600; }
.rd-serv .serv-sel-btn { width: 30px; height: 30px; border: none; background: var(--t, var(--sunken)); }
.rd-raw { font-size: 12.5px; color: var(--muted); margin: 4px 0 10px; }
.rd-ings { display: flex; flex-direction: column; gap: 6px; }
.rd-ing { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.75); text-align: left; transition: background .15s; }
.rd-check { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--line-2); position: relative; }
.rd-ing.got { background: var(--t, var(--sunken)); }
.rd-ing.got .rd-check { background: var(--c, var(--sage)); border-color: var(--c, var(--sage)); }
.rd-ing.got .rd-check::after { content: ''; position: absolute; left: 6px; top: 2.5px; width: 4.5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rd-ing.got .rd-ing-name { color: var(--muted); text-decoration: line-through; }
.rd-ing-name { flex: 1; min-width: 0; font-size: 15px; }
.rd-ing-name .rd-spices { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); line-height: 1.35; }
.rd-ing-qty { font-size: 14.5px; font-weight: 700; color: var(--text); white-space: nowrap; }

.rd-steps { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.rd-steps li { display: flex; gap: 14px; padding: 14px 16px; border-radius: 20px; background: rgba(255,255,255,.75); }
.rd-num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c, var(--sage)); color: #fff; font-family: var(--serif); font-size: 17px; font-weight: 500; }
.rd-steps p { font-size: 15px; line-height: 1.55; padding-top: 5px; }

.rd-tip { margin-top: 22px; padding: 16px 18px; border-radius: 22px; background: var(--t, var(--honey-t)); }
.rd-tip-h { font-family: var(--serif); font-size: 17px; font-weight: 500; margin-bottom: 4px; }
.rd-tip p { font-size: 14.5px; line-height: 1.55; color: var(--text); }
.rd-hero.no-photo { height: 230px; }
.rd-hero.no-photo .rd-emoji { font-size: 76px; padding-bottom: 20px; }

/* Fiche recette : ingrédients simples + ajout */
.rd-sec-hd .rd-raw { margin: 0; }
.rd-ing { cursor: default; }
.rd-ing.extra { background: var(--t, var(--sage-t)); }
.rd-ing-name em { font-style: normal; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 11px; font-weight: 600; color: var(--text-2); vertical-align: 1px; }
.rd-rm { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,.9); font-size: 16px; line-height: 1; color: var(--text-2); }
.rd-add { display: block; width: 100%; margin-top: 8px; padding: 12px; border-radius: 16px; border: 1.5px dashed var(--line-2); font-size: 14.5px; font-weight: 600; color: var(--accent); text-align: center; }
.add-sheet .search-bar { margin-bottom: 12px; background: rgba(255,255,255,.85); }
.add-h { font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 2px 0 8px; }
.add-list { display: flex; flex-wrap: wrap; gap: 8px; }
.add-list .add-h { width: 100%; }
.add-item { padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 14px; font-weight: 500; }
.add-none { font-size: 14px; color: var(--muted); padding: 10px 0; }
.add-pick { padding: 18px; border-radius: 24px; background: rgba(255,255,255,.8); text-align: center; }
.add-name { font-family: var(--serif); font-size: 20px; font-weight: 500; }
.add-qty { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 14px 0 6px; }
.add-qty b { min-width: 90px; font-size: 20px; font-weight: 700; }
.add-macro { font-size: 13px; color: var(--text-2); }
.add-back { display: block; width: 100%; margin-top: 10px; padding: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
[hidden] { display: none !important; }
/* croix de retrait bien centrée */
.rd-rm { display: grid; place-items: center; padding: 0; text-align: center; font-size: 15px; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.rd-ing.extra .rd-ing-qty { margin-left: auto; }
.set-back-bottom { margin-top: 28px; border-radius: 999px; background: var(--sage); color: #fff; }

/* ═══ La semaine : jours plus visuels ═══ */
.wk-days { display: flex; flex-direction: column; gap: 10px; }
.wk-day { display: block; width: 100%; padding: 12px 12px 12px; border-radius: 24px; background: rgba(255,255,255,.7); text-align: left; }
.wk-day.is-focus { background: var(--sage-t); box-shadow: inset 0 0 0 1.5px var(--sage-l); }
.wk-day.is-past { opacity: .5; }
.wk-head { display: flex; align-items: center; gap: 8px; padding: 0 4px 10px; }
.wk-dname { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.wk-today { padding: 2px 9px; border-radius: 999px; background: var(--sage); color: #fff; font-size: 11.5px; font-weight: 600; }
.wk-k { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.wk-meals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wk-meal { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px; border-radius: 18px; background: var(--t, var(--bg)); }
.dish-ph.wk { width: 58px; height: 58px; border-radius: 14px; font-size: 28px; flex-shrink: 0; }
.wk-txt { display: flex; flex-direction: column; min-width: 0; }
.wk-txt small { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.wk-txt b { font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wk-meal.empty { padding: 12px; }

/* ═══ Une grande carte par jour ═══ */
.day-card { margin-top: 14px; }
.day-card:not(.is-today) { background: linear-gradient(160deg, rgba(255,255,255,.75) 0%, rgba(246,241,230,.8) 100%); }
.day-card .today-date { font-size: 24px; }
.past-days { margin-top: 22px; }
.past-days summary { display: flex; align-items: center; gap: 8px; padding: 12px 4px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--muted); }
.past-days summary::-webkit-details-marker { display: none; }
.past-days summary span { padding: 1px 8px; border-radius: 999px; background: var(--sunken); font-size: 12px; }
.past-days .day-card { opacity: .7; }

/* ═══ Mon programme : finitions ═══ */
.page-head { display: flex; align-items: center; gap: 12px; padding-top: 18px; }
.page-head .hb-page-title { padding: 0; }
.round-back {
  width: 40px; height: 40px; flex-shrink: 0; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.85); box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.round-back svg { width: 20px; height: 20px; fill: none; stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.set-hero { margin-top: 14px; }

/* cases « Tes informations » : tiennent dans les petits écrans */
.profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-cell { min-width: 0; padding: 10px; }
.pc-control { gap: 4px; min-width: 0; }
.pc-value { flex: 1; min-width: 0; gap: 2px; }
.pcell-btn { width: 30px; height: 30px; flex-shrink: 0; font-size: 17px; }
.pcell-input { width: 100%; min-width: 0; max-width: 3.6em; font-size: 17px; padding: 0; }
.pc-unit { flex-shrink: 0; }

/* cette phase / quand passer à la suite */
.phase-guide { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.pg-now { padding: 16px 18px; border-radius: 24px; background: var(--t, var(--sage-t)); }
.pg-next { padding: 16px 18px; border-radius: 24px; background: rgba(255,255,255,.75); }
.pg-kicker { font-size: 12px; font-weight: 700; color: var(--text-2); letter-spacing: .02em; }
.pg-big { font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.25; margin: 6px 0 6px; }
.pg-now p, .pg-next p { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.pg-next p { color: var(--text); margin-top: 10px; }
.pg-steps { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.pg-chip { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 14px; background: var(--sunken); font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.pg-chip b { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--text); margin-top: 1px; }
.pg-chip.on { background: var(--t, var(--sage-t)); box-shadow: inset 0 0 0 1.5px var(--c, var(--sage)); }
.pg-arrow { flex: 1; max-width: 60px; height: 2px; background: var(--line-2); position: relative; }
.pg-arrow::after { content: ''; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--line-2); border-right: 2px solid var(--line-2); transform: rotate(45deg); }
.pg-next.last { background: var(--t, var(--sage-t)); }

/* courses : explication */
.shop-hint { font-size: 13.5px; color: var(--text-2); margin-top: 6px; line-height: 1.45; }
/* valeur + unité centrées ensemble entre − et + */
.pc-value { justify-content: center; align-items: baseline; gap: 3px; }
.pcell-input { max-width: none; flex: 0 0 auto; text-align: center; font-variant-numeric: tabular-nums; }

/* ═══ Courses : en-tête visuel ═══ */
.shop-card { padding: 16px 18px; border-radius: 26px; background: linear-gradient(150deg, #E4EEE6 0%, #F6F1E6 100%); }
.shop-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.shop-card .shop-meta { font-size: 13px; font-weight: 600; color: var(--text-2); }
.shop-count { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.shop-count b { font-family: var(--serif); font-size: 38px; font-weight: 500; line-height: 1; }
.shop-count span { font-size: 14px; font-weight: 600; color: var(--text-2); }
.shop-cost { margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.shop-cost small { font-weight: 500; color: var(--muted); font-size: 12px; }
.clear-btn { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.shop-bar { height: 10px; margin-top: 12px; border-radius: 999px; background: rgba(255,255,255,.8); overflow: hidden; }
.shop-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #9DB8A6, var(--sage)); transition: width .3s; }
.shop-tip { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.75); font-size: 13.5px; line-height: 1.4; color: var(--text); }
.shop-tip-check { position: relative; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--sage); }
.shop-tip-check::after { content: ''; position: absolute; left: 7.5px; top: 4px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.shop-tip.done { justify-content: center; font-weight: 600; color: var(--accent); }
.shop-card.all-done .shop-count b { color: var(--accent); }

/* Quand passer à la suite : schéma centré */
.pg-steps { justify-content: center; }
.pg-arrow { flex: 0 0 48px; }

/* ════════════════════════════════════════════════════════════
   Profil : prénom et sexe, activité, notes de garde-fou, accueil
════════════════════════════════════════════════════════════ */
/* Prénom et sexe */
.id-card { margin-bottom: 10px; padding: 14px; border-radius: 22px; background: rgba(255,255,255,.7); }
.id-field { display: block; }
.id-name {
  width: 100%; padding: 11px 14px; border-radius: 14px; border: 1.5px solid transparent;
  background: var(--bg); font-size: 17px; font-weight: 500; color: var(--text);
}
.id-name::placeholder { color: var(--muted); font-weight: 400; }
.id-name:focus { outline: none; border-color: var(--sage); background: #fff; }
.id-sex { margin-top: 14px; }
.id-sex .hb-seg { background: var(--bg); }
.id-sex .hb-seg-btn { padding: 10px 6px; }
.id-sex .hb-seg-btn.on { background: var(--sage); color: #fff; box-shadow: none; }
.id-error { margin-top: 10px; font-size: 13.5px; font-weight: 500; color: #A4553A; }

.act-bars { display: flex; align-items: flex-end; gap: 3px; height: 20px; flex-shrink: 0; }
.act-bars i { display: block; width: 5px; border-radius: 3px; background: var(--line-2); }
.act-bars i:nth-child(1) { height: 7px; } .act-bars i:nth-child(2) { height: 11px; }
.act-bars i:nth-child(3) { height: 15px; } .act-bars i:nth-child(4) { height: 20px; }
.act-bars i.f { background: var(--sage); }

/* Garde-fous sur l'objectif */
.tc-note { margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.75); font-size: 13px; line-height: 1.45; color: var(--text-2); }

/* Silhouette féminine : pli de la brassière */
.bf-fold { fill: none; stroke: #8FAE99; stroke-width: 1; stroke-linecap: round; }

.pcell-input::placeholder { color: var(--muted); }

/* ════════════════════════════════════════════════════════════
   Accueil, foyer, profil illustré, repas et régime (v115)
   Couleurs : celles de l'app (sauge pour l'action et la sélection, teintes de famille en fond de carte)
════════════════════════════════════════════════════════════ */
.welcome-view { display: flex; flex-direction: column; min-height: 100dvh; padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-bottom: calc(100px + var(--safe-b)); }
.wl-top { display: flex; align-items: center; gap: 14px; min-height: 40px; }
.wl-spacer { width: 40px; height: 40px; }
.wl-progress { flex: 1; display: flex; gap: 6px; }
.wl-progress i { flex: 1; height: 6px; border-radius: 999px; background: var(--line); transition: background .25s; }
.wl-progress i.on { background: var(--sage); }
.wl-kick { margin-top: 26px; font-size: 13px; font-weight: 600; color: var(--accent); }
.wl-title { font-family: var(--serif); font-weight: 500; font-size: 33px; line-height: 1.1; letter-spacing: -0.02em; margin: 6px 0 18px; }
.wl-top + .wl-title { margin-top: 26px; }
.wl-who { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 5px 13px 5px 5px; border-radius: 999px; background: var(--sage-t); color: var(--accent); font-size: 13px; font-weight: 600; }
.wl-who-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sage); color: #fff; font-size: 12px; }
.wl-who + .wl-title { margin-top: 12px; }
.wl-error { margin-top: 12px; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: #A4553A; }
/* bouton principal accroché en bas de l'écran */
.wl-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 14px var(--g) calc(18px + var(--safe-b)); background: linear-gradient(180deg, rgba(244,246,241,0) 0%, var(--bg) 38%); }
.wl-cta .hb-btn { display: block; width: 100%; max-width: 480px; margin: 0 auto; height: 56px; font-size: 16px; }
.wl-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.wl-pills span { padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.pl-honey { background: var(--honey-t); color: #8A5A1C; } .pl-sky { background: var(--sky-t); color: #2F6280; } .pl-leaf { background: var(--leaf-t); color: #4E7A35; }

/* Bienvenue : collage de plats */
.wl-hello-view, .welcome-view.wl-hello { padding-top: 0; }
.wl-hero { position: relative; height: 410px; margin: 0 calc(-1 * var(--g)); border-radius: 0 0 46px 46px; background: var(--sage-t); overflow: hidden; }
.wl-blob { position: absolute; border-radius: 50%; }
.wl-blob.b1 { width: 380px; height: 380px; left: -130px; top: -160px; background: var(--sage-l); opacity: .45; }
.wl-blob.b2 { width: 230px; height: 230px; right: -70px; top: 240px; background: var(--honey-t); }
.wl-ph { position: absolute; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px var(--bg); }
.wl-ph.p0 { width: 54%; aspect-ratio: 1; left: 6%; top: 16%; }
.wl-ph.p1 { width: 38%; aspect-ratio: 1; left: 55%; top: 9%; }
.wl-ph.p2 { width: 30%; aspect-ratio: 1; left: 58%; top: 47%; }
.wl-ph.p3 { width: 32%; aspect-ratio: 1; left: 25%; top: 67%; }
.wl-hello { padding-top: 22px; }
.wl-hello .brand-word { font-size: 60px; }
.wl-hello .wl-lead { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--text-2); }

/* Coche de sélection commune */
.sel-check { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--sage); display: none; }
.sel-check::after { content: ''; position: absolute; left: 8.5px; top: 4.5px; width: 5px; height: 11px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.on > .sel-check { display: block; }

/* Foyer */
.hh-list { display: grid; gap: 12px; }
.hh-card { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px; border-radius: 30px; background: var(--t); text-align: left; }
.hh-card.on { box-shadow: inset 0 0 0 2px var(--sage); }
.hh-plates { position: relative; width: 112px; height: 92px; flex-shrink: 0; }
.hh-plates img { position: absolute; width: 82px; height: 82px; border-radius: 50%; object-fit: cover; }
.hh-1 img { left: 15px; top: 5px; }
.hh-2 img:first-child { left: 0; top: 0; } .hh-2 img:last-child { left: 30px; top: 10px; box-shadow: 0 0 0 4px var(--t); }
.hh-txt b { display: block; font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.15; padding-right: 22px; }
.hh-txt span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--text-2); }

/* Prénom et profil illustré */
.id-block .id-field { display: block; padding: 12px 16px; border-radius: 22px; background: rgba(255,255,255,.7); }
.id-block .id-name { padding: 2px 0 0; border: none; background: transparent; font-size: 20px; }
.id-block .id-name:focus { background: transparent; }
.id-block .id-field:focus-within { box-shadow: inset 0 0 0 2px var(--sage); }
.sx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.sx-card { position: relative; padding: 12px 12px 14px; border-radius: 28px; background: var(--t); text-align: center; }
.sx-card.on { box-shadow: inset 0 0 0 2px var(--sage); }
.sx-card .av-svg { display: block; width: 100%; height: auto; }
.sx-card b { display: block; margin-top: 6px; font-size: 15.5px; font-weight: 600; }

/* Repas : formules avec frise de la journée */
.fm-list { display: grid; gap: 12px; }
.fm-card { position: relative; display: block; width: 100%; padding: 14px 16px 6px; border-radius: 26px; background: var(--t); text-align: left; }
.fm-card.on { box-shadow: inset 0 0 0 2px var(--sage); }
.fm-card b { display: block; font-size: 15.5px; font-weight: 600; padding-right: 30px; }
.fm-desc { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
.fm-tl { position: relative; display: block; height: 56px; margin-top: 8px; }
.fm-tl-ln { position: absolute; left: 0; right: 0; top: 20px; height: 2px; border-radius: 2px; background: rgba(42,58,48,.14); }
.fm-tl-fast { position: absolute; left: 0; width: 28%; top: 14px; height: 14px; border-radius: 9px; background: repeating-linear-gradient(135deg, rgba(42,58,48,.12) 0 4px, transparent 4px 8px); }
.fm-tl-d { position: absolute; top: 21px; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.75); }
.fm-tl-t { position: absolute; top: 37px; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.fm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.fm-legend span { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.fm-legend i { width: 9px; height: 9px; border-radius: 50%; }
.sub-head { margin: 24px 0 10px; font-family: var(--serif); font-size: 20px; font-weight: 500; }
.dt-card { margin-top: 12px; padding: 14px 16px; border-radius: 22px; background: var(--t); }
.dt-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dt-top b { font-size: 15px; font-weight: 600; }
.dt-top span { font-size: 12px; color: var(--text-2); text-align: right; }
.dt-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 10px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.75); }
.dt-btn { padding: 9px 2px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-2); text-align: center; }
.dt-btn.on { background: var(--sage); color: #fff; }

/* Résumé du foyer */
.sm-list { display: grid; gap: 12px; }
.sm-card { padding: 16px 18px; border-radius: 28px; background: var(--t); }
.sm-head { display: flex; align-items: center; gap: 12px; }
.sm-av { width: 54px; height: 54px; flex-shrink: 0; }
.sm-av .av-svg { width: 100%; height: 100%; }
.sm-head b { display: block; font-size: 17px; font-weight: 600; }
.sm-head span { display: block; font-size: 12.5px; color: var(--text-2); }
.sm-kcal { margin-top: 12px; font-family: var(--serif); font-size: 34px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
.sm-kcal span { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.sm-maint { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.sm-card .tc-macros { margin-top: 12px; }

/* Sélecteur de personne (Semaine, Mon programme) */
.who-switch { display: flex; gap: 8px; margin: 12px 0 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.7); }
.who-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.who-btn.on { background: var(--sage); color: #fff; }
.who-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--sage-t); flex-shrink: 0; }
.who-av .av-svg { width: 100%; height: 100%; }
.page-head + .who-switch { margin-top: 16px; }

/* Cuisiner : répartition des boîtes par personne */
.ck-split { display: grid; gap: 8px; margin-top: 10px; }
.ck-split-dish { padding: 10px 12px; border-radius: 18px; background: var(--t, rgba(255,255,255,.75)); }
.ck-split-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.ck-split-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13.5px; color: var(--text-2); }
.ck-split-row span:first-child { font-weight: 600; color: var(--text); }

/* Mon programme : budget */
.budget-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 22px; background: rgba(255,255,255,.7); }
.budget-row b { display: block; font-size: 14.5px; font-weight: 600; }
.budget-row span { font-size: 12.5px; color: var(--text-2); }
.bud-val { min-width: 62px; text-align: center; font-family: var(--serif); font-size: 19px; color: var(--text) !important; }
@media (prefers-reduced-motion: reduce) { .wl-progress i { transition: none; } }
.set-section .id-block { margin-bottom: 12px; }

/* ── Petit-déjeuner dans la semaine et dans Cuisiner ── */
.dv-morning { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 12px; padding: 8px 14px 8px 8px; border-radius: 20px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--honey) 45%, transparent); text-align: left; }
.dv-morning .dish-ph { width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0; font-size: 30px; background: var(--honey-t); }
.dv-mo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.dv-mo-lbl { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--honey-t); color: #8A5A1C; font-size: 12px; font-weight: 600; }
.dv-mo-name { font-family: var(--serif); font-size: 15.5px; font-weight: 500; line-height: 1.25; }
.dv-morning .dv-k { flex-shrink: 0; }
.ck-bk { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 8px; padding: 10px 14px 10px 10px; border-radius: 20px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--honey) 45%, transparent); text-align: left; }
.ck-bk .dish-ph { width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0; }
.ck-bk-txt { flex: 1; min-width: 0; }
.ck-bk-txt b { display: block; font-size: 14.5px; font-weight: 600; }
.ck-bk-txt span { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 1px; }

/* Formule changée depuis la génération de la semaine */
.formula-note { margin: 12px 0 16px; padding: 16px 18px; border-radius: 24px; background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--honey) 55%, transparent); }
.formula-note b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.25; }
.formula-note p { margin: 6px 0 12px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.formula-note .hb-btn { width: 100%; }

.fn-rows { margin-top: 10px; display: grid; gap: 4px; }
.fn-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--text-2); }
.fn-row span:first-child { font-weight: 600; color: var(--text); }
.fn-row strong { color: var(--text); font-weight: 600; }
.formula-note .fn-second { margin-top: 8px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--text); }

.dt-seg-2 { grid-template-columns: 1fr 1fr; }

/* ════════════════════════════════════════════════════════════
   Uniformisation (v121) : le style du reste de l'app
   Cartes blanches translucides, sélection en sauge, la couleur reste dans le contenu
   (photos, illustrations, frise des repas, barres de macros, pastilles Midi et Soir).
════════════════════════════════════════════════════════════ */
.hh-card, .sx-card, .fm-card, .dt-card, .sm-card {
  background: rgba(255,255,255,.72) !important; box-shadow: none;
}
.hh-card.on, .sx-card.on, .fm-card.on {
  background: var(--sage-t) !important; box-shadow: inset 0 0 0 2px var(--sage);
}
/* Ton objectif : chaque programme garde sa couleur pâle { background: color-mix(in srgb, var(--t) 75%, #fff) !important; box-shadow: none; }

.sel-check, .hh-card .sel-check, .sx-card .sel-check, .fm-card .sel-check { background: var(--sage); }

.hh-2 img:last-child { box-shadow: 0 0 0 4px #fff; }
.hh-card.on .hh-2 img:last-child { box-shadow: 0 0 0 4px var(--sage-t); }
.sx-card .av-svg circle:first-child { fill: var(--bg); opacity: 1; }
.sx-card.on .av-svg circle:first-child { fill: #fff; opacity: .8; }
.dt-seg { background: var(--bg); }
.dt-btn.on { background: var(--sage); color: #fff; }
.act-bars i.f { background: var(--sage); }
.id-block .id-field, .welcome-view .profile-cell { background: rgba(255,255,255,.72); box-shadow: none; }
.id-block .id-field:focus-within { box-shadow: inset 0 0 0 2px var(--sage); }
.bf-guide-btn { background: rgba(255,255,255,.72) !important; box-shadow: none !important; }
.bf-guide-ic { background: var(--sage-t) !important; }
.sm-av .av-svg circle:first-child { fill: var(--sage-t); opacity: 1; }
/* accueil : un seul accent, le sauge */
.wl-progress i.on { background: var(--sage); }
.wl-kick { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 13px; font-weight: 600; color: var(--accent); }
.wl-kick i { display: none; }
.wl-who + .wl-kick { margin-top: 12px; }
.wl-kick + .wl-title { margin-top: 6px; }
.wl-who { background: var(--sage-t); color: var(--accent); }
.wl-who-n { background: var(--sage); }
.wl-hero { height: 400px; border-radius: 0 0 44px 44px; background: var(--sage-t); }
.wl-blob.b1 { width: 340px; height: 340px; left: -120px; top: -150px; background: var(--sage-l); opacity: .35; }
.wl-blob.b2 { display: none; }
.wl-ph { box-shadow: 0 0 0 5px var(--sage-t); }
.wl-pills span { background: rgba(255,255,255,.72) !important; color: var(--accent) !important; box-shadow: none; }
/* Mon programme */
.settings-view .target-card { background: linear-gradient(150deg, #E4EEE6, #F6F1E6); box-shadow: none; }
.settings-view .pg-now, .settings-view .pg-next, .settings-view .pg-next.last { background: rgba(255,255,255,.72); box-shadow: none; }
.settings-view .pg-chip.on { background: var(--sage-t); box-shadow: inset 0 0 0 1.5px var(--sage); }
.settings-view .phase-step { background: rgba(255,255,255,.72); }
.settings-view .tc-note { background: rgba(255,255,255,.75); }
.hh-row { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 2px; padding: 14px 16px; border-radius: 22px; background: rgba(255,255,255,.72); text-align: left; }
.hh-plus { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--sage-t); color: var(--accent); font-size: 24px; line-height: 1; }
.hh-row-txt { flex: 1; min-width: 0; }
.hh-row-txt b { display: block; font-size: 14.5px; font-weight: 600; }
.hh-row-txt span { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-2); }
.hh-remove .hh-row-txt b { color: #A4553A; }
.hh-members { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.hh-mem { padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.72); }
.hh-mem b { display: block; font-size: 14.5px; font-weight: 600; }
.hh-mem span { font-size: 12.5px; color: var(--text-2); }
/* Semaine : petit-déjeuner, message de mise à jour, collations */
.dv-morning, .ck-bk { box-shadow: none; background: var(--bg); }
.formula-note { background: var(--sage-t); box-shadow: none; }
.formula-note .fn-second { background: rgba(255,255,255,.7); box-shadow: none; }
.today-extra span { display: inline-block; margin-right: 6px; padding: 2px 9px; border-radius: 999px; background: var(--bg); font-size: 12px; font-weight: 600; color: var(--accent); }
/* Détail du jour : Changer et Imprévu, intégrés sous chaque plat */
.dv-swaps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.dv-acts { display: flex; gap: 0; padding: 3px; border-radius: 14px; background: rgba(255,255,255,.72); }
.dv-acts .act-btn { flex: 1; padding: 8px 4px; border-radius: 11px; font-size: 13px; font-weight: 600; color: var(--accent); text-align: center; }
.dv-acts .act-btn + .act-btn { box-shadow: -1px 0 0 var(--line); border-radius: 0 11px 11px 0; }
.dv-acts .act-btn:active { background: var(--sage-t); }
.dv-acts.is-out { flex-direction: column; align-items: stretch; gap: 2px; }
.dv-acts .out-tag { padding: 6px 8px 2px; font-size: 12.5px; line-height: 1.35; color: var(--text-2); text-align: center; }
.dv-acts.is-out .act-btn { box-shadow: none; border-radius: 11px; }

/* Cuisiner : riz de la session, récapitulatif au moment de manger */
.ck-phase-rice { --t: var(--sage-t); }
.ck-meals { display: grid; gap: 8px; }
.ck-meal { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 20px; background: rgba(255,255,255,.72); }
.ck-meal .dish-ph { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; }
.ck-meal b { display: block; font-size: 14.5px; font-weight: 600; }
.ck-meal p { margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }

.ck-meal { text-align: left; width: 100%; }
.ck-meal-n { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; color: var(--accent); }

/* ── Touches de couleur légères (v124) ── */
/* Mon programme : guide de masse grasse, phase en cours, étape suivante et réglage manuel à la couleur du programme */
.settings-view .bf-guide-btn { background: color-mix(in srgb, var(--sky-t) 80%, #fff) !important; }
.settings-view .bf-guide-ic { background: rgba(255,255,255,.85) !important; }
.settings-view .pg-now { background: var(--t, var(--sage-t)) !important; }
.settings-view .pg-next, .settings-view .pg-next.last { background: color-mix(in srgb, var(--t, var(--sage-t)) 55%, #fff) !important; }
.settings-view .pg-chip.on { background: #fff; box-shadow: inset 0 0 0 1.5px var(--c, var(--sage)); }
.settings-view .set-manual { background: color-mix(in srgb, var(--t, var(--sage-t)) 45%, #fff); }
/* Repas : une couleur par sujet (régime, petit-déjeuner, whey) */
.dt-card { background: color-mix(in srgb, var(--t) 70%, #fff) !important; }
.dt-card .dt-seg { background: rgba(255,255,255,.8); }
.dt-card .dt-btn.on { background: color-mix(in srgb, var(--c) 85%, #2A3A30); color: #fff; }
/* Équipement */
.eq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eq-card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 14px; border-radius: 22px; background: rgba(255,255,255,.72); text-align: left; }
.eq-card.on { background: var(--sage-t); box-shadow: inset 0 0 0 2px var(--sage); }
.eq-card b { font-size: 14.5px; font-weight: 600; padding-right: 26px; }
.eq-card span:not(.sel-check) { font-size: 12px; line-height: 1.35; color: var(--text-2); }
.eq-card .sel-check { top: 12px; right: 12px; width: 22px; height: 22px; }
.eq-card .sel-check::after { left: 7.5px; top: 4px; }
.eq-count { margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }

.ck-note-safe { margin: 4px 0 10px; padding: 10px 12px; border-radius: 14px; background: var(--honey-t); font-size: 13px; line-height: 1.45; color: var(--text); }

/* Régime : lactose et gluten dans un seul bloc */
.dt-row { margin-top: 12px; }
.dt-row + .dt-row { padding-top: 4px; }
.dt-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dt-row-top span { font-size: 14px; font-weight: 600; }
.dt-row-top em { font-style: normal; font-size: 12px; color: var(--text-2); }
.dt-row .dt-seg { margin-top: 6px; }

/* Repas libres et congélation (v127) */
.free-hint { margin: -2px 0 8px; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.free-grid { display: grid; grid-template-columns: 44px repeat(7, 1fr); gap: 6px; align-items: center; }
.free-day { text-align: center; font-size: 12px; font-weight: 600; color: var(--text-2); }
.free-lbl { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.free-cell { height: 34px; border-radius: 12px; background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.free-cell.on { background: var(--sage); box-shadow: none; }
.thaw-note { margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: var(--sky-t); font-size: 13.5px; line-height: 1.45; color: var(--text); }
.thaw-note b { display: block; font-size: 12px; font-weight: 700; color: #2F6280; margin-bottom: 1px; }
.dv-frozen { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: #2F6280; }
.ck-first { margin-top: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.75); font-size: 13px; line-height: 1.4; color: var(--text); }

/* Foyer : cartes plus grandes, illustrations dessinées */
.hh-card { padding: 22px 20px; min-height: 150px; gap: 18px; }
.hh-plates { width: 130px; height: 110px; display: grid; place-items: center; }
.hh-plates svg { width: 100%; height: 100%; }
.hh-txt b { font-size: 26px; }
.hh-txt span { font-size: 14px; }
/* Équipement : un dessin par appareil */
.eq-card { padding: 12px 14px 14px; }
.eq-art { display: block; width: 56px; height: 48px; margin-bottom: 6px; }
.eq-art svg { width: 100%; height: 100%; }
.eq-desc { font-size: 12px; line-height: 1.35; color: var(--text-2); }
/* Repas libres : calories réservées */
.free-kcal { margin-bottom: 10px; }
.free-kcal-lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.free-seg { grid-template-columns: repeat(4, 1fr); background: rgba(255,255,255,.8); }
.free-seg .dt-btn { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 2px; font-size: 12px; }
.free-seg .dt-btn small { font-size: 10.5px; font-weight: 500; opacity: .8; }
.free-seg .dt-btn.on { background: var(--sage); color: #fff; }
.hh-plates { width: 140px; height: 130px; }
.hh-2 { width: 160px; }
/* Foyer : illustration au-dessus du texte */
.hh-list { grid-template-columns: 1fr 1fr; }
.hh-card { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 18px 14px 20px; min-height: 0; }
.hh-plates, .hh-2 { width: 100%; max-width: 170px; height: 130px; }
.hh-txt b { font-size: 22px; padding-right: 0; }
.hh-txt span { font-size: 13px; }
.hh-card .sel-check { top: 12px; right: 12px; }

/* Illustrations dessinées : repas libre (tablier), repas dehors (joker) */
.dish-ph-art { display: block; overflow: hidden; background: none; }
.dish-ph-art svg { width: 100%; height: 100%; display: block; }
.dv-photo .dish-ph-art { width: 100%; height: 100%; }
.rd-art { width: 100%; aspect-ratio: 1; }
.rd-art svg { width: 100%; height: 100%; display: block; }

/* En-tête de la Semaine : deux boutons ronds identiques, le livre et l'avatar (qui ouvre Mon programme) */
.hb-top-actions { gap: 10px; margin-right: 0; align-items: center; }
.hb-top-actions .hb-icon { width: 42px; height: 42px; background: rgba(255,255,255,.75); color: var(--text); }
.hb-top-actions .hb-icon svg { width: 20px; height: 20px; stroke-width: 1.8; }
.hb-avatar { width: 42px; height: 42px; padding: 0; border-radius: 50%; overflow: hidden; background: var(--sage-t); flex-shrink: 0; }
.hb-avatar .av-svg { width: 118%; height: 118%; margin: -9% 0 0 -9%; display: block; }
.hb-avatar .av-svg circle:first-child { fill: var(--sage-t); opacity: 1; }
.hb-avatar:active, .hb-top-actions .hb-icon:active { transform: scale(.96); }

/* Recettes : onglet de la barre du bas */
.hb-tab-head { padding-top: calc(14px + env(safe-area-inset-top, 0px)); margin-bottom: 4px; }
.rd-back.round-back { position: absolute; width: 40px; height: 40px; background: rgba(255,255,255,.88); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.rd-back.round-back svg { width: 20px; height: 20px; stroke-width: 2.2; }

/* Mon programme : fiche d'identité (bandeau, photo d'identité sur fond blanc, champs en pointillés) */
.idf { margin: 14px 0 6px; border-radius: 28px; overflow: hidden; background: #FBF8F2; box-shadow: inset 0 0 0 1.5px #E2D6C0; }
.idf-band { display: flex; justify-content: space-between; padding: 9px 16px; background: var(--sage); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.idf-body { display: flex; gap: 14px; padding: 16px; align-items: center; }
.idf-photo { position: relative; width: 96px; height: 118px; flex-shrink: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1.5px #E2D6C0; }
.idf-photo svg { position: absolute; left: 50%; bottom: 0; width: 118%; height: auto; transform: translateX(-50%); display: block; }
.idf-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.idf-full { grid-column: 1 / 3; }
.idf-f { border-bottom: 1.5px dotted #D8CBB3; padding-bottom: 3px; }
.idf-f span, .idf-stamp span { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.idf-f b { font-size: 16px; font-weight: 600; color: var(--text); }
.idf-f b.idf-name { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.idf-stamp { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 16px 16px; padding: 10px 12px; border-radius: 14px; background: var(--t, var(--sage-t)); }
.idf-stamp b { font-size: 15px; font-weight: 600; }
.idf-goal { text-align: right; flex-shrink: 0; }
.idf-goal b { font-family: var(--serif); font-size: 20px; font-weight: 500; }

/* Personnages et illustrations en images (v151) */
.av-pic { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--avbg, #E4EEE6); }
.av-pic.av-f { --avbg: #FBEBE3; }
.av-pic img { position: absolute; left: 50%; bottom: 0; width: 104%; transform: translateX(-50%); display: block; }
.sx-card .av-pic { background: var(--bg, var(--avbg)); }
.sx-card.on .av-pic { background: rgba(255,255,255,.8); }
.hb-avatar .av-pic, .sm-av .av-pic, .who-av .av-pic { width: 100%; height: 100%; margin: 0; }
.hb-avatar .av-pic img { width: 112%; }
.idf-photo .idf-img { position: absolute; left: 50%; bottom: 0; width: 112%; transform: translateX(-50%); display: block; }
.hh-art { display: block; margin: auto; background-repeat: no-repeat; }
.hh-art-1 { width: 120px; height: 120px; border-radius: 50%; background-color: #E4EEE6; background-image: url(img/art/man_bowl.webp); background-size: 118% auto; background-position: 50% 20%; }
.hh-art-2 { width: 120px; height: 120px; border-radius: 50%; background-color: #FBEBE3; background-image: url(img/art/couple.webp); background-size: 142% auto; background-position: 50% 100%; }
.art-pic { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.art-pic img { width: 80%; height: auto; display: block; }
.rd-art .art-pic img { width: 62%; }

/* v153 : fiche (cadre par-dessus l'image), onglet Recettes (deux menus déroulants), cartes du foyer */
.idf-photo::after { content: ''; position: absolute; inset: 0; border-radius: 14px; box-shadow: inset 0 0 0 1.5px #E2D6C0; pointer-events: none; }
.idf-photo { clip-path: inset(0 round 14px); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.idf-photo .idf-img { width: 120%; left: -10%; bottom: -5px; transform: none; }
.hh-card .hh-plates { width: 100%; max-width: 120px; height: auto; aspect-ratio: 1; }
.hh-card .hh-art-1, .hh-card .hh-art-2 { width: 100%; height: 100%; }
.rc-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.rc-select { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 9px 34px 10px 15px; border-radius: 18px; background: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1.5px var(--line-2); cursor: pointer; }
.rc-select span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.rc-select select { -webkit-appearance: none; appearance: none; width: 100%; padding: 0; border: 0; background: transparent; font: 600 15px var(--sans); color: var(--text); outline: none; cursor: pointer; }
.rc-select::after { content: ''; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.rc-select.on { background: var(--sage-t); box-shadow: inset 0 0 0 1.5px var(--sage); }
.rc-count { margin: 12px 4px 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
/* titres des cartes du foyer : taille qui suit la largeur de l'écran */
.hh-card .hh-txt b { font-size: clamp(17px, 5.4vw, 22px); }
.hh-card .hh-txt span { font-size: clamp(12px, 3.6vw, 13px); }

/* v158 : repas libres en capsules (une par jour, midi en haut, soir en bas) */
.free-hint { margin: 2px 0 12px; font-size: 13.5px; color: var(--text-2); line-height: 1.4; }
.free-caps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.free-cap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.free-cap > span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.free-pill { width: 100%; display: flex; flex-direction: column; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.free-pill .free-cell { display: grid; place-items: center; width: 100%; height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #C9C3B4; box-shadow: none; }
.free-pill .free-cell + .free-cell { border-top: 1.5px solid var(--line-2); }
.free-pill .free-cell svg { width: 15px; height: 15px; }
.free-pill .free-cell.on { background: #D98E6B; color: #fff; }
.free-leg { display: flex; justify-content: center; gap: 14px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.free-leg span { display: flex; align-items: center; gap: 4px; } .free-leg svg { width: 13px; height: 13px; }
.free-kcal { margin: 14px 0 0; }
.free-seg2 { display: grid; grid-template-columns: repeat(4, 1fr); padding: 3px; border-radius: 16px; background: var(--sunken); }
.free-seg2 button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 7px 2px; border-radius: 13px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.free-seg2 button small { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.free-seg2 button.on { background: var(--surface, #fff); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* v159 : illustrations des protéines dans les boutons */
.prot-chip .prot-emoji { display: inline-grid; place-items: center; width: 26px; height: 26px; }
.prot-chip .prot-emoji img { width: 26px; height: 26px; object-fit: contain; display: block; }

/* v160 : Cuisiner étape par étape */
.ck-menu-link { white-space: nowrap; }
.ck-row { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 8px 0; padding: 13px 16px; border-radius: 18px; background: rgba(255,255,255,.6); font-size: 14px; font-weight: 600; color: var(--text); text-align: left; }
.ck-row.done { color: var(--muted); }
.ck-row-ok { color: var(--sage); } .ck-row-n { color: var(--muted); font-weight: 500; }
.ck-row-ok, .ck-row-n { flex-shrink: 0; margin-left: 12px; white-space: nowrap; }
.ck-cur { margin: 10px 0; padding: 16px; border-radius: 26px; background: var(--t, var(--honey-t)); }
.ck-cur.ck-phase-rice, .ck-cur.ck-phase-end { background: var(--honey-t); }
.ck-cur-step { margin-top: 12px; padding: 18px; border-radius: 20px; background: #fff; font-size: 17px; line-height: 1.5; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.ck-cur-k { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c, #C7913F); }
.ck-cur-nav { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 14px; }
.ck-cur-nav button { padding: 14px; border-radius: 999px; font: 700 15px var(--sans); text-align: center; }
.ck-prev { background: #fff; color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,.06); } .ck-prev:disabled { opacity: .45; box-shadow: none; }
.ck-next { background: var(--sage); color: #fff; box-shadow: 0 4px 14px rgba(95,123,104,.28); }
.ck-finished { text-align: center; background: var(--sage-t); } .ck-finished p { margin: 6px 0 12px; color: var(--text-2); }
.ck-restart { padding: 10px 16px; border-radius: 999px; background: #fff; font: 600 14px var(--sans); color: var(--text-2); }
/* v160 : fiche modifiable */
button.idf-f { display: block; width: 100%; text-align: left; position: relative; padding-right: 16px; }
button.idf-f:active { opacity: .6; }
.edit-sheet .hb-h2 { text-align: center; margin-bottom: 6px; }
.edit-step { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 18px; }
.edit-btn { width: 54px; height: 54px; border-radius: 50%; background: var(--sage-t); color: var(--sage); font-size: 26px; display: grid; place-items: center; }
.edit-val { display: flex; align-items: baseline; justify-content: center; gap: 6px; flex: 1; }
.edit-input { width: 3.6ch; border: 0; background: transparent; text-align: center; font: 500 44px var(--serif); color: var(--text); outline: none; }
.edit-val span { font-size: 18px; color: var(--muted); }
.edit-name { width: 100%; box-sizing: border-box; margin: 14px 0 16px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line-2); font: 500 20px var(--serif); color: var(--text); }
.edit-sheet .bf-guide-btn { margin-bottom: 14px; }

/* v161 : accueil de Mon programme */
.pg-hello { margin: 10px 2px 16px; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.pg-hello b { display: block; margin-bottom: 3px; font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--text); }
.pg-hello span { display: block; }

/* v162 : un jour à l'écran, bandeau des 7 jours, vignettes petit-déjeuner et collations */
.day-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 4px 0 14px; }
.day-strip button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 7px; border-radius: 16px; background: rgba(255,255,255,.75); color: var(--text); }
.day-strip button span { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.day-strip button b { font-family: var(--serif); font-size: 17px; font-weight: 500; }
.day-strip button.past { opacity: .5; }
.day-strip button.today b { color: var(--sage); }
.day-strip button.on { background: var(--sage); color: #fff; opacity: 1; }
.day-strip button.on span { color: #E8F0E9; } .day-strip button.on b { color: #fff; }
.ds-dots { display: flex; gap: 3px; height: 6px; } .ds-dots i { width: 6px; height: 6px; border-radius: 50%; }
.ds-dots .dot-fish { background: #6FA3C0; } .ds-dots .dot-free { background: #E9A98B; }
.day-strip button.on .ds-dots .dot-fish { background: #CFE3EE; } .day-strip button.on .ds-dots .dot-free { background: #F6D3C2; }
.dv-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.dv-mini { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.dv-mini .dv-photo { aspect-ratio: 1; border-radius: 18px; }
.dv-mini .dv-photo .hb-tile-lbl { top: 7px; left: 7px; padding: 3px 8px; font-size: 10.5px; }
.dv-mini-name { margin-top: 6px; font-family: var(--serif); font-size: 14px; font-weight: 500; line-height: 1.15; color: var(--text); }
.dv-mini .dv-k { margin-top: 2px; font-size: 11.5px; }
.lbl-morning { background: var(--honey-t) !important; color: #B07A2A !important; }
.lbl-snack { background: var(--sage-t) !important; color: #5F7B68 !important; }

/* v163 : nouvel écran d'accueil illustré */
.wl-hero { height: auto !important; min-height: 0; padding-top: 28px; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(180deg, #E4EEE6 0%, #EEF3EA 100%) !important; }
.wl-hero .wl-blob.b1 { width: 300px; height: 300px; top: 40px; right: -90px; left: auto; bottom: auto; background: #FBEBE3; opacity: .8; }
.wl-hero .wl-blob.b2 { width: 180px; height: 180px; top: 70px; left: -60px; right: auto; bottom: auto; background: #FBF0DD; opacity: 1; }
.wl-art { position: relative; display: block; width: 100%; max-width: 460px; height: auto; margin-bottom: -2px; }
.wl-points { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.wl-points div { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--text); }
.wl-points i { flex-shrink: 0; width: 9px; height: 9px; margin-left: 4px; border-radius: 50%; }
/* écrans courts : l'illustration se réduit et le texte garde la place du bouton fixé en bas */
.wl-art { max-height: 46vh; width: auto; max-width: 100%; }
.wl-hello { padding-bottom: 104px; }
@media (max-height: 700px) { .wl-art { max-height: 37vh; } .wl-hero { padding-top: 18px; } .wl-hello .brand-word { font-size: 46px; } .wl-hello { padding-top: 16px; } .wl-hello .wl-lead { margin-top: 10px; font-size: 15px; } .wl-points { margin-top: 12px; gap: 8px; } }

/* v164 : accueil sans phrase d'accroche, liste puis conclusion */
.wl-hello .brand-tag + .wl-points { margin-top: 20px; }
.wl-end { margin: 18px 0 0; font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--sage); letter-spacing: -.01em; }
@media (max-height: 700px) { .wl-end { margin-top: 12px; font-size: 18px; } }

/* v165 */
.ck-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ck-menu-item { min-width: 0; }
.ck-menu-name { overflow-wrap: anywhere; }
.rc-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rc-select { padding: 8px 26px 9px 12px; }
.rc-select::after { right: 12px; }
.rc-select select { font-size: 14px; text-overflow: ellipsis; }
button.idf-stamp { display: flex; width: calc(100% - 28px); text-align: left; font: inherit; color: inherit; }
button.idf-stamp:active { opacity: .7; }
/* écrans étroits : vignettes des plats en colonne (photo, puis nom et lien) */
@media (max-width: 400px) {
  .ck-menu-item { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; }
  .ck-menu-name { overflow-wrap: normal; font-size: 14px; }
  .ck-menu-link { font-size: 12.5px; }
}

/* v166 : repas libre ou cantine */
.dv-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 3px; border-radius: 999px; background: var(--sunken); }
.dv-kind .act-btn { border-radius: 999px; background: transparent; box-shadow: none; color: var(--text-2); }
.dv-kind .act-btn.on { background: var(--surface, #fff); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* v168 : illustration de la cantine, un peu plus bas dans la vignette */
.art-pic.art-low img { margin-top: 16%; }

/* Riz et pâtes complets ou classiques (v171) */
.dt-note { margin-top: 8px; font-size: 12px; color: var(--text-2); line-height: 1.4; }
.rd-staple { margin: 14px 0 4px; padding: 14px 16px; border-radius: 22px; background: color-mix(in srgb, var(--leaf-t) 70%, #fff); }
.rd-staple .dt-seg { grid-template-columns: 1fr 1fr; background: rgba(255,255,255,.8); }
.rd-staple .dt-btn.on { background: color-mix(in srgb, var(--leaf) 85%, #2A3A30); color: #fff; }

/* Repas libres : réglage « Ajuster » des calories réservées (v186) */
.free-kcal[hidden] { display: none; }
.fk-adj { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 6px; border-radius: 16px; background: var(--sunken); }
.fk-adj button { display: grid; place-items: center; text-align: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface, #fff); font-size: 20px; font-weight: 600; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.fk-adj b { font-size: 17px; font-weight: 700; color: var(--text); }
.fk-adj b small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.fk-note { display: block; text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* Sauvegarde des données (v193) */
.bk-card { background: var(--surface, #fff); border-radius: 22px; padding: 16px; box-shadow: 0 1px 3px rgba(42,58,48,.06); }
.bk-card p, .bk-confirm p { font-size: 13.5px; color: var(--text-2); line-height: 1.45; margin: 0 0 12px; }
.bk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bk-btns .hb-btn { margin: 0; padding: 12px 0; font-size: 15px; }
.bk-sec { background: var(--sunken) !important; color: var(--text) !important; box-shadow: none !important; }
.bk-last { display: block; text-align: center; font-size: 12px; color: var(--muted); margin-top: 10px; }

/* v195 : quand cuisiner */
.week-note { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.week-note b { color: var(--text); font-weight: 700; }
.hb-seg-one .hb-seg-btn { flex: 1; cursor: default; }
.hb-batch-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 4px 0 10px; font-size: 13px; color: var(--text-2); }
.hb-batch-when span { font-weight: 700; color: var(--text); font-size: 14px; }
.ck-when { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.75); font-size: 12.5px; font-weight: 700; color: var(--text); }
.free-cap.off { opacity: .32; pointer-events: none; }

/* v195 : Changer un plat */
.sw-sub { margin: 4px 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.sw-warn { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: #fbeee0; color: #7a4a1c; font-size: 13px; line-height: 1.4; }
.sw-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.sw-opt { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 18px; background: var(--card, #fff); box-shadow: 0 1px 0 rgba(0,0,0,.04); text-align: left; }
.sw-opt .sw-img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; flex: none; }
.sw-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sw-txt b { font-family: var(--serif); font-size: 16px; font-weight: 500; line-height: 1.25; color: var(--text); }
.sw-txt small { font-size: 12.5px; color: var(--muted); }
.sw-more { width: 100%; margin-bottom: 6px; }
.sw-cancel { display: block; width: 100%; }

/* v195 : quantités de l'étape et minuteurs */
.ck-qty { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ck-qty-chip { padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.05); font-size: 12.5px; color: var(--text-2); }
.ck-qty-chip b { color: var(--text); font-weight: 700; }
.tm-box { margin-top: 14px; }
.tm-start { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; border-radius: 16px; background: var(--sage-t); color: var(--accent); font-size: 14px; font-weight: 600; text-align: left; }
.tm-start svg, .tm-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tm-start span { flex: 1; }
.tm-start b { font-weight: 700; }
.tm-live { display: none; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border-radius: 16px; background: var(--sage-t); }
.tm-box.running .tm-start { display: none; }
.tm-box.running .tm-live { display: flex; }
.tm-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.tm-left { font-family: var(--serif); font-size: 26px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.tm-txt small { font-size: 12px; color: var(--text-2); }
.tm-ring-wrap { display: grid; place-items: center; }
.tm-ring { display: block; }
.tm-ring-bg { fill: none; stroke: rgba(0,0,0,.08); stroke-width: 4; }
.tm-ring-fg { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.tm-x { flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--text-2); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.tm-x svg { width: 16px; height: 16px; }
.tm-box.over .tm-live, .tm-pill.over { background: var(--terra-t); }
.tm-box.over .tm-ring-fg, .tm-pill.over .tm-ring-fg { stroke: var(--terra); }
#ck-timers { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(100px + var(--safe-b, 0px)); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.tm-pill { pointer-events: auto; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 6px 22px rgba(30,45,35,.14); font-size: 13.5px; color: var(--text); }
.tm-pill-l { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-weight: 600; }
.tm-pill b { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 42px; }
.tm-pill .tm-x { width: 30px; height: 30px; background: var(--sage-t); box-shadow: none; }
.tm-pill .tm-x svg { width: 14px; height: 14px; }

/* v200 : page Mon poids, balance vintage + courbe papier millimétré */
.wt-view { padding-bottom: 120px; }
.wt-sub { margin-top: 2px; font-size: 14px; color: var(--text-2); }
.wt-scale { position: relative; width: min(300px, 80vw); aspect-ratio: 1; margin: -6px auto -10px; }
.wt-scale img, .wt-dial { position: absolute; inset: 0; width: 100%; height: 100%; }
.wt-ticks line { stroke: #B9A07C; stroke-width: 2.5; stroke-linecap: round; }
.wt-ticks line.m { stroke-width: 4.5; }
.wt-ticks line.b { stroke: #9C8460; stroke-width: 6.5; }
.wt-ticks text { font-family: var(--sans); font-weight: 700; font-size: 27px; fill: #A08A66; text-anchor: middle; }
.wt-dial-kg { font-family: var(--serif); font-weight: 500; font-size: 62px; fill: #3E5444; text-anchor: middle; font-variant-numeric: tabular-nums; }
.wt-dial-u { font-family: var(--sans); font-weight: 700; font-size: 20px; fill: #8A9A80; text-anchor: middle; letter-spacing: 5px; }
.wt-needle { transition: transform .9s cubic-bezier(.3,1.4,.5,1); }
.wt-needle path { fill: #BF704A; stroke: #81442A; stroke-width: 2.5; stroke-linejoin: round; }
.wt-cap { fill: #CC9365; stroke: #81442A; stroke-width: 4; }
.wt-cap-hl { fill: #E8C29B; }
.wt-chips { display: flex; gap: 8px; margin: 2px 0 14px; }
.wt-chip { flex: 1; min-width: 0; padding: 9px 6px; border-radius: 16px; background: rgba(255,255,255,.8); font-size: 12px; font-weight: 600; color: var(--text-2); text-align: center; }
.wt-chip b { display: block; margin-top: 2px; font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--text); white-space: nowrap; }
.wt-chip.good b { color: var(--accent); }
.wt-cta { width: 100%; }
.wt-weigh { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 12px; padding: 12px 14px; border-radius: 22px; background: var(--honey-t); }
.wt-step-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--text); font-size: 24px; font-weight: 500; line-height: 1; }
.wt-step-btn:active { transform: scale(.94); }
.wt-val { font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.wt-input { padding: 0; margin: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: center; font-variant-numeric: tabular-nums; caret-color: var(--accent); outline: none; -webkit-appearance: none; appearance: none; }
.wt-val small { margin-left: 4px; font-family: var(--sans); font-size: 15px; color: var(--muted); }
.wt-card { margin-top: 14px; padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 2px 10px rgba(60,80,65,.05); }
.wt-card h2 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--text); }
.wt-m { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.wt-card p { margin: 6px 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.wt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wt-later { display: block; width: 100%; margin-top: 8px; padding: 6px; font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; }
.wt-step { background: var(--terra-t); }
.wt-step .hb-btn { width: 100%; margin-top: 8px; }
.wt-paper { background: #FBF8F2; border: 1px solid #EADFCB; box-shadow: none; }
.wt-chart { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.wt-mm line { stroke: #EDE3D0; stroke-width: .5; }
.wt-mm line.b { stroke: #DCCBAA; stroke-width: .9; }
.wt-ax { font-family: var(--serif); font-style: italic; font-size: 11px; fill: #9C8460; }
.wt-line { fill: none; stroke: #3E5444; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wt-x { stroke: #3E5444; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.wt-last { fill: #BF704A; stroke: #81442A; stroke-width: 1.6; }
.wt-empty { padding: 12px 0 2px; font-size: 13px; color: var(--text-2); }
.wt-kcal-v { margin-top: 10px; font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1.1; color: var(--text); }
.wt-kcal-v small { margin-left: 6px; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--muted); }
.wt-kcal .wt-kcal-v + .wt-m { margin-top: 4px; }
.wt-note { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--sage-t); font-size: 13px; line-height: 1.45; color: #3F5A48; }
.wt-undo { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.wt-hist h2 { margin-bottom: 4px; }
.wt-hrow { display: grid; grid-template-columns: 1fr auto 52px; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid #EEF0EA; font-size: 14px; }
.wt-hist h2 + .wt-hrow { border-top: 0; }
.wt-hrow span { color: var(--text-2); }
.wt-hrow b { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.wt-hrow em { justify-self: end; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.wt-hrow em.good { color: var(--accent); }
.wt-hrow em.bad { color: #BF704A; }
@media (prefers-reduced-motion: reduce) { .wt-needle { transition: none; } }
/* v199 : ajustement automatique des calories */
.wt-switch { flex: none; width: 48px; height: 28px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.15); transition: background .2s; }
.wt-switch i { display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.wt-switch.on { background: var(--accent); }
.wt-switch.on i { transform: translateX(20px); }
.wt-switch:disabled { opacity: .4; }
/* v199 : onglet Poids, pastille quand la pesée de la semaine est à faire */
.nav-btn { position: relative; }
.nav-dot { position: absolute; top: 4px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--terra); box-shadow: 0 0 0 2px #fff; }

/* v201 : styles rétablis (supprimés par erreur en v199) : tutoriel, fiches recettes de Cuisiner */
.wl-restore-btn { display: block; margin: 10px auto 0; padding: 6px 12px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
/* v195 : mini-tutoriel de la première semaine */
.tuto-sub { margin: 4px 0 14px; font-size: 14px; color: var(--text-2); }
.tuto-steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tuto-steps li { display: flex; gap: 12px; align-items: flex-start; }
.tuto-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: #fff; font-weight: 700; font-size: 14px; }
.tuto-steps li > div > b { font-family: var(--serif); font-size: 17px; font-weight: 500; }
.tuto-steps p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.tuto .hb-btn { width: 100%; }

.tuto-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tuto-tab { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--sage-t); color: var(--accent); font-size: 12px; font-weight: 600; }
.tuto-tab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* v195 : collations à préparer, en haut avec les plats */
/* v195 : une fiche par recette de la session (plats et collations), une couleur chacune */
.dish-4 { --c: var(--terra); --t: var(--terra-t); }
.dish-5 { --c: #9A8CC4; --t: #EEEBF7; }
.dish-6 { --c: var(--coral); --t: var(--coral-t); }
.ck-prep .ck-menu { margin-top: 12px; }
.ck-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px 10px; border-radius: 22px; background: var(--t); min-width: 0; }
.ck-card.open { grid-column: 1 / -1; }
.ck-card-hd { display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: left; }
.ck-menu-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ck-menu-n { font-size: 12px; font-weight: 700; color: var(--c); filter: brightness(.8); white-space: nowrap; padding-top: 2px; }
.ck-card .ck-menu-name { font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--text); }
.ck-card-ings { display: none; margin: 4px 0 2px; padding: 4px 12px; border-radius: 16px; background: rgba(255,255,255,.75); }
.ck-card.open .ck-card-ings { display: block; }
.ck-card-ings .ck-ing { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(0,0,0,.05); font-size: 14px; }
.ck-card-ings .ck-ing:first-child { border-top: none; }
.ck-card-ings .ck-ing span:last-child { font-weight: 700; white-space: nowrap; }
.ck-card-ings .ck-ing small { display: block; font-size: 12px; color: var(--text-2); }
.ck-card .ck-menu-link { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: var(--c); filter: brightness(.8); }
.ck-later { margin: 6px -12px -4px; padding: 10px 12px; border-top: 1px dashed rgba(0,0,0,.12); }
.ck-later-h { font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--c); filter: brightness(.8); margin-bottom: 2px; }
.ck-later p { margin: 6px 0 2px; font-size: 13px; line-height: 1.45; color: var(--text-2); }

.dv-pick-row { margin: -4px 0 14px; }
.dv-extras + .dv-pick-row { margin-top: 10px; }
.sw-grp { margin: 14px 0 6px; }
.sw-opt.on { box-shadow: inset 0 0 0 2px var(--sage); }

/* ── v220-v221 : accueil repensé (chapitres nommés sans barres, phrase d'explication, glissement) ── */
.wl-top { align-items: center; }
.wl-progress { flex: 1; display: flex; justify-content: space-between; gap: 8px; padding-right: 4px; }
.wl-ch { font-size: 13px; font-weight: 600; color: var(--muted); opacity: .7; white-space: nowrap; transition: color .25s, opacity .25s; }
.wl-ch.done { color: var(--sage); opacity: 1; }
.wl-ch.cur { color: var(--text); opacity: 1; font-weight: 700; }
.wl-title { margin-bottom: 8px; }
.wl-sub { margin: 0 0 20px; font-size: 15px; line-height: 1.45; color: var(--text-2); max-width: 34em; }
.welcome-view.wl-in-f > :not(.wl-cta):not(.wl-top) { animation: wlInF .32s cubic-bezier(.2,.7,.2,1) both; }
.welcome-view.wl-in-b > :not(.wl-cta):not(.wl-top) { animation: wlInB .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes wlInF { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes wlInB { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .welcome-view.wl-in-f > *, .welcome-view.wl-in-b > * { animation: none !important; }
  .wl-ch { transition: none; }
}

/* v222 : même plat et soupes sans couleur, avec une phrase qui explique la question */
.dt-card.dt-plain { background: rgba(255,255,255,.75) !important; }
.dt-card.dt-plain .dt-seg { background: var(--bg); margin-top: 10px; }
.dt-card.dt-plain .dt-btn.on { background: var(--sage); color: #fff; }
.dt-desc { margin: 4px 0 10px; font-size: 13px; line-height: 1.4; color: var(--text-2); }

/* ── v227 : Mon poids, tour de taille (mètre ruban) et photos (polaroïds) ── */
.bd-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bd-btn { flex-shrink: 0; height: 36px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--sage); background: transparent; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; }
.bd-val { margin-top: 14px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.bd-val b { font-family: var(--serif); font-weight: 500; font-size: 40px; letter-spacing: -.02em; color: var(--text); }
.bd-val small { font-size: 15px; color: var(--text-2); }
.bd-delta { margin-left: auto; padding: 5px 11px; border-radius: 999px; background: #F1ECE2; color: var(--text-2); font-size: 13px; font-weight: 700; }
.bd-delta.good { background: var(--sage-t); color: var(--accent); }
.bd-tapebox { margin: 12px 0 4px; }
.bd-tape { display: block; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.bd-empty { opacity: .55; }
.bd-foot { font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-top: 6px; }
.bd-weigh { margin-top: 14px; }
.bd-waist .wt-cta { margin-top: 10px; }
.bd-pol { display: flex; gap: 12px; margin: 18px 0 4px; padding: 0 2px; min-height: 40px; }
.bd-p { flex: 0 0 calc((100% - 24px) / 3); min-width: 0; display: flex; flex-direction: column; background: #fff; padding: 6px 6px 0; border: 0; border-radius: 3px; box-shadow: 0 1px 2px rgba(60,50,30,.12), 0 6px 14px rgba(60,50,30,.10); font: inherit; color: inherit; }
.bd-pol .bd-p:nth-child(1) { transform: rotate(-2.5deg); } .bd-pol .bd-p:nth-child(2) { transform: rotate(1.8deg) translateY(4px); } .bd-pol .bd-p:nth-child(3) { transform: rotate(-1deg); }
.bd-img { display: block; aspect-ratio: 3/4; overflow: hidden; border-radius: 1px; background: linear-gradient(160deg, #E6E1D3, #CFC8B6); }
.bd-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-cap { display: block; font-family: var(--serif); font-style: italic; font-size: 14px; color: #6B5E45; text-align: center; padding: 6px 0 8px; }
/* v228 : la case du mois en cours montre nos personnages avec l'appareil photo, et un + */
.bd-add .bd-img { position: relative; background: #EFE9DC; }
.bd-add .bd-img img { object-fit: cover; object-position: 50% 0; }
.bd-plus { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--sage); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 19px; font-weight: 500; line-height: 1; box-shadow: 0 2px 6px rgba(40,60,45,.25); }
.bd-add .bd-cap { font-style: normal; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--accent); }
.bd-cmp { display: block; text-align: center; margin-top: 16px; width: 100%; height: 48px; border: 0; border-radius: 999px; background: var(--sage-t); color: var(--accent); font: inherit; font-size: 15px; font-weight: 600; }
.bd-cmp[hidden] { display: none; }
.bd-sheet { display: flex; flex-direction: column; gap: 12px; }
.bd-sh-t { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 24px; }
.bd-big { border-radius: 14px; overflow: hidden; max-height: 62vh; }
.bd-big img { width: 100%; height: 100%; max-height: 62vh; object-fit: contain; display: block; background: #F1ECE2; }
.bd-del { color: #A4553A; }
.bd-duo { display: flex; gap: 12px; margin: 4px 0 6px; }
.bd-duo .bd-p-big { margin: 0; flex: 1 1 0; }
.bd-duo .bd-p-big:first-child { transform: rotate(-1.5deg); } .bd-duo .bd-p-big:last-child { transform: rotate(1.2deg); }
.bd-info { display: block; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--text-2); padding-bottom: 8px; margin-top: -4px; }

/* v229 : bouton « Envoyer » de la liste de courses */
.shop-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shop-share { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px 0 12px; border-radius: 999px; border: 1.5px solid var(--sage); background: transparent; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; }
.shop-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* v230 : les chapitres de l'accueil sont des boutons (retour à un chapitre déjà atteint) */
button.wl-ch { appearance: none; border: 0; background: none; padding: 6px 2px; margin: -6px -2px; font: inherit; font-size: 13px; cursor: pointer; }
button.wl-ch:disabled { cursor: default; }

/* v232 : 12 couleurs de plats pour la session de cuisine (au-delà, elles se répètent) : jamais de bloc blanc */
.dish-7  { --c: var(--mint); --t: var(--mint-t); }
.dish-8  { --c: #B79B5E; --t: #F5EEDD; }
.dish-9  { --c: #6F9FC9; --t: #E3EEF8; }
.dish-10 { --c: #C7869A; --t: #F8E8ED; }
.dish-11 { --c: #8FA86A; --t: #EDF3E3; }
.hb-batch-snk { margin-top: 2px; }

/* v233 : vignettes de la session de cuisine sur plusieurs lignes quand il y en a beaucoup */
.hb-batch-link > div { min-width: 0; }
.hb-batch-thumbs { flex-wrap: wrap; overflow: visible; }

/* v235 : remarque dans la fiche d'un programme (prise de muscle avec beaucoup de gras) */
.pf-warn { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--honey-t); color: var(--text); font-size: 13.5px; line-height: 1.45; }

/* v236-v239 : fiche « Comment Hébé calcule » : étiquette d'apothicaire, livre de comptes, planches dessinées */
.sci-link { display: inline-block; margin-top: 12px; padding: 6px 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.sci-link-c { align-self: center; margin: 10px auto 0; display: block; }
.sci { display: flex; flex-direction: column; gap: 14px; }
/* étiquette : double filet vert sapin, coins coupés */
.sci-label { position: relative; padding: 5px; border: 1.5px solid #3E5A48; border-radius: 4px; background: #FBF8F2; }
.sci-label-in { position: relative; padding: 18px 16px 16px; border: .8px solid #3E5A48; text-align: center;
  background: radial-gradient(circle at 0 0, transparent 9px, transparent 0) top left, #FBF8F2; }
.sci-label::before, .sci-label::after { content: ''; position: absolute; width: 10px; height: 10px; border: 1.5px solid #3E5A48; border-radius: 50%; background: var(--bg); top: -6px; left: -6px; }
.sci-label::after { left: auto; right: -6px; }
.sci-kick { display: inline-block; font-family: var(--serif); font-style: italic; font-size: 13px; color: #8A7655; }
.sci-title { margin: 4px 0 8px; font-family: var(--serif); font-weight: 500; font-size: 29px; line-height: 1.05; letter-spacing: -.01em; color: #2F4638; }
.sci-sub { margin: 0 auto; max-width: 28em; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.sci-stamp { position: absolute; top: -12px; right: 10px; padding: 4px 9px; border: 1.5px solid #C8704F; border-radius: 6px; background: #FBF8F2; color: #C8704F; font-family: var(--serif); font-style: italic; font-size: 12.5px; transform: rotate(5deg); }
/* livre de comptes : pointillés entre l'intitulé et la valeur */
.sci-ledger { padding: 16px 16px 14px; border-radius: 18px; background: #fff; border: 1px solid #EADFCB; }
.sl-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.sl-head span { font-family: var(--serif); font-size: 18px; color: var(--text); }
.sl-head em { font-family: var(--serif); font-size: 14px; color: #8A7655; }
.sl-row { display: flex; align-items: baseline; gap: 6px; padding: 6px 0; font-size: 13.5px; color: var(--text-2); }
.sl-row i { flex: 1; min-width: 12px; border-bottom: 1.5px dotted #CDBB97; transform: translateY(-3px); }
.sl-k { display: inline-flex; align-items: baseline; flex-wrap: wrap; }
.sl-v { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); white-space: nowrap; }
.sl-sum { border-top: 1px solid #EADFCB; margin-top: 2px; }
.sl-sum .sl-k, .sl-sum .sl-v { color: var(--text); font-weight: 700; }
.sl-total { margin-top: 4px; padding-top: 10px; border-top: 3px double #3E5A48; }
.sl-total .sl-k { font-family: var(--serif); font-size: 17px; color: var(--text); }
.sl-total .sl-v { font-family: var(--serif); font-size: 24px; font-weight: 500; color: #2F4638; }
.sl-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.sl-macros div { padding: 8px 6px; border-radius: 12px; background: #F6F1E7; text-align: center; }
.sl-macros b { display: block; font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--text); }
.sl-macros span { font-size: 11.5px; color: var(--text-2); }
.sl-note { margin: 10px 0 0; font-family: var(--serif); font-style: italic; font-size: 12.5px; color: #8A7655; }
/* planches : papier millimétré, numéro cerclé, dessin à l'encre */
.sci-card { padding: 14px 16px 16px; border-radius: 18px; border: 1px solid #EADFCB;
  background-color: #FBF8F2;
  background-image: linear-gradient(#F3ECDF .5px, transparent .5px), linear-gradient(90deg, #F3ECDF .5px, transparent .5px), linear-gradient(#EBDFC7 .8px, transparent .8px), linear-gradient(90deg, #EBDFC7 .8px, transparent .8px);
  background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px; }
.sci-card h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-family: var(--serif); font-weight: 500; font-size: 18px; color: #2F4638; }
.sci-n { flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center; border: 1.3px solid #C8704F; border-radius: 50%; font-family: var(--serif); font-style: italic; font-size: 13px; color: #C8704F; }
.sci-art { margin: 2px -4px 8px; }
.sci-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sci-svg .sv-l { font-family: var(--serif); font-style: italic; font-size: 12.5px; fill: #8A7655; }
.sci-svg .sv-t { font-size: 11px; fill: #8A7655; }
.sci-svg .sv-k { font-family: var(--serif); font-style: italic; font-size: 13px; fill: #C8704F; }
.sci-svg .sv-in { font-size: 11px; font-weight: 700; fill: #fff; }
.sci-svg .sv-in.dk { fill: #2F4638; }
.sci-lede { margin: 0 0 10px; font-family: var(--serif); font-size: 15.5px; line-height: 1.4; color: #2F4638; }
.sci-pts { list-style: none; margin: 4px 0 0; padding: 0; }
.sci-pts li { position: relative; padding: 6px 0 6px 16px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); border-top: 1px dotted #E2D5BC; }
.sci-pts li:first-child { border-top: 0; }
.sci-pts li::before { content: ''; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; border-radius: 50%; border: 1.3px solid #C8704F; }
.sci-ref { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin: 0 1px 0 3px; padding: 0 4px; border: 0; border-radius: 999px; background: var(--sage-t); color: var(--accent); font: inherit; font-size: 10px; font-weight: 700; vertical-align: 2px; }
.sci-note { margin: 2px 0 0; padding: 11px 13px; border-radius: 14px; background: var(--honey-t); font-size: 13px; line-height: 1.45; color: var(--text); }
.sci-src summary { cursor: pointer; padding: 6px 0; font-size: 14px; font-weight: 600; color: var(--accent); }
.sci-src ol { margin: 6px 0 0; padding-left: 24px; }
.sci-src li { font-size: 12px; line-height: 1.5; color: var(--text-2); margin-bottom: 8px; padding: 4px 6px; border-radius: 8px; transition: background .4s; }
.sci-src li::marker { font-family: var(--serif); color: #C8704F; }
.sci-src li em { font-family: var(--serif); color: #6B5E45; }
.sci-src li.hl { background: var(--sage-t); }
.sci-au { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .sci-src li { transition: none; } }
.sci-src li a { margin-left: 2px; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* v249 : « Aller plus loin » dans le guide de masse grasse (mesure avec un mètre ruban) */
.bf-more { display: block; width: 100%; margin: 14px 0 10px; padding: 14px 16px; border: 1px solid #EADFCB; border-radius: 18px; text-align: left; font: inherit;
  background-color: #FBF8F2; background-image: linear-gradient(#F3ECDF .5px, transparent .5px), linear-gradient(90deg, #F3ECDF .5px, transparent .5px); background-size: 8px 8px; }
.bf-more b { display: block; font-family: var(--serif); font-weight: 500; font-size: 17px; color: #2F4638; }
.bf-more span { display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); }
.bf-sheet .hb-btn { width: 100%; }
.bf-back { display: block; margin: 10px auto 0; padding: 6px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); }
.bfm-dots { display: flex; gap: 6px; margin-bottom: 10px; }
.bfm-dots i { width: 22px; height: 4px; border-radius: 2px; background: var(--line); }
.bfm-dots i.on { background: #C8704F; }
.bfm-steps { margin: 10px 0 18px; padding-left: 22px; }
.bfm-steps li { margin-bottom: 10px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.bfm-steps li::marker { font-family: var(--serif); color: #C8704F; }
.bfm-fig { margin: 6px auto 4px; max-width: 260px; }
.bfm-svg { display: block; width: 100%; height: auto; }
.bfm-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; padding: 10px 12px; border-radius: 16px; background: #fff; border: 1px solid #EADFCB; }
.bfm-field > span { font-size: 14px; font-weight: 600; color: var(--text); }
.bfm-ctl { display: grid; grid-template-columns: 34px 60px auto 34px; align-items: center; gap: 6px; }
.bf-sheet .bfm-b { width: 34px; height: 34px; min-width: 0; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--sage-t); color: var(--accent); font-size: 18px; font-weight: 600; line-height: 1; }
.bfm-in { width: 100%; padding: 0; border: 0; background: none; text-align: right; font-family: var(--serif); font-size: 22px; color: var(--text); }
.bfm-ctl small { font-size: 13px; color: var(--text-2); }
.bfm-res { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.bfm-res div { padding: 12px; border-radius: 16px; background: #F6F1E7; text-align: center; }
.bfm-res div:first-child { background: var(--sage-t); }
.bfm-res b { display: block; font-family: var(--serif); font-weight: 500; font-size: 26px; color: #2F4638; }
.bfm-res span { font-size: 12px; color: var(--text-2); }

.bfm-res .bfm-sil { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bfm-sil svg { width: 54px; height: auto; }

/* v250 : mesure simplifiée (2 étapes, la silhouette de l'app avec le ruban) */
.bfm-fig { margin: 4px auto 6px; width: 150px; }
.bfm-fig svg { display: block; width: 100%; height: auto; }
.bfm-tips { margin: 6px 0 4px; padding: 0; list-style: none; }
.bfm-tips li { position: relative; padding: 4px 0 4px 18px; font-size: 14.5px; color: var(--text); }
.bfm-tips li::before { content: ''; position: absolute; left: 3px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: #C8704F; }
.bfm-big { text-align: center; margin: 6px 0 4px; }
.bfm-big b { display: block; font-family: var(--serif); font-weight: 500; font-size: 56px; line-height: 1; color: #2F4638; }
.bfm-big span { font-size: 14px; color: var(--text-2); }
.bf-sheet .bfm-sil { display: flex; flex-direction: column; align-items: center; margin: 8px auto; }
.bf-sheet .bfm-sil svg { width: 90px; height: auto; }
.bf-sheet .bfm-sil span { font-size: 13px; color: var(--text-2); }
.bfm-small { margin: 4px 0 14px; text-align: center; font-size: 13px; color: var(--text-2); }

/* v252 : la Fiche Hébé à remplir pendant l'accueil */
.welcome-view .idf { margin-top: 4px; }
.idf-f { text-align: left; }
.idf-static { pointer-events: none; }
.idf-empty b { color: #C8704F; font-weight: 600; font-size: 14px; }

/* v253 : fondements scientifiques visibles dans l'accueil */
.wl-sci { padding: 0; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--bloom) 70%, transparent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.wl-sci-card { display: block; width: 100%; margin: 14px 0 0; padding: 14px 16px; border: 1px solid #EADFCB; border-radius: 18px; text-align: left; font: inherit;
  background-color: #FBF8F2; background-image: linear-gradient(#F3ECDF .5px, transparent .5px), linear-gradient(90deg, #F3ECDF .5px, transparent .5px); background-size: 8px 8px; }
.wl-sci-card b { display: block; font-family: var(--serif); font-weight: 500; font-size: 17px; color: #2F4638; }
.wl-sci-card span { display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); }
.wl-art { max-height: 41vh; }
.wl-points { gap: 8px; }
@media (max-height: 700px) { .wl-art { max-height: 31vh; } .wl-points div { font-size: 14px; } }

/* v257 : planche des compléments plus vivante (une carte par complément, verdict en couleur) */
.sp-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sp { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid #EFE6D4; }
.sp-ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.sp-ic svg { width: 22px; height: 22px; }
.sp-body { min-width: 0; flex: 1; }
.sp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 8px; flex-wrap: wrap; }
.sp-top b { font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--text); }
.sp-top em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.sp p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.sp-good .sp-ic, .sp-good em { background: var(--sage-t); color: var(--accent); }
.sp-warn .sp-ic, .sp-warn em { background: #FBF0DD; color: #9A6B17; }
.sp-no .sp-ic, .sp-no em { background: #F6E3DC; color: #A4553A; }
.sp-note { margin: 12px 2px 0; font-family: var(--serif); font-style: italic; font-size: 13px; color: #8A7655; }
.sp-best { border-color: #C9D9CD; box-shadow: inset 0 0 0 1px #C9D9CD; }
.sp-best .sp-ic, .sp-best em { background: #3E5A48; color: #fff; }
.sci-intro { margin: -2px 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
/* v259 : fiche des mesures, intitulés sur une seule ligne */
.idf-f span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idf-f b { white-space: nowrap; }
.welcome-view .bf-guide-btn { margin-top: 12px; }
@media (max-width: 360px) {
  .idf-body { gap: 12px; padding: 14px; }
  .idf-photo { width: 76px; height: 96px; }
  .idf-fields { gap: 8px; }
  button.idf-f { padding-right: 8px; }
  .welcome-view .bf-guide-btn { gap: 10px; padding: 10px 12px; }
  .welcome-view .bf-guide-ic { width: 34px; height: 34px; }
  .welcome-view .bf-guide-btn b { font-size: 13px; white-space: nowrap; }
  .welcome-view .bf-guide-btn span span { font-size: 12px; }
}

/* v265 : Ton quotidien, deux questions */
.actp-lab { font-size: 13.5px; font-weight: 600; margin: 4px 0 8px; }
.actp-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.actp-wk { background: var(--surface); border-radius: 18px; padding: 6px 6px 10px; text-align: center; min-width: 0; }
.actp-wk.on { background: var(--sage-t); box-shadow: inset 0 0 0 2px var(--sage); }
.actp-img { display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; }
.actp-img img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; }
.actp-wk b { display: block; font-size: 14px; font-weight: 600; margin-top: 4px; }
.actp-wk span:last-child { display: block; font-size: 11px; line-height: 1.3; color: var(--text-2); margin-top: 1px; }
.actp-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: var(--surface); }
.actp-seg button { text-align: center; padding: 9px 2px 8px; border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 1.15; color: var(--text); }
.actp-seg button small { display: block; font-size: 10.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.actp-seg button.on { background: var(--sage); color: #fff; }
.actp-seg button.on small { color: var(--sage-t); }
.actp-hint { font-size: 11.5px; line-height: 1.4; color: var(--muted); margin: 6px 2px 14px; }
.actp-res { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 22px; background: var(--warm); box-shadow: inset 0 0 0 1.5px #E9DFCC; }
.actp-res .act-bars { height: 28px; gap: 4px; }
.actp-res .act-bars i { width: 7px; }
.actp-res .act-bars i:nth-child(1) { height: 10px; } .actp-res .act-bars i:nth-child(2) { height: 16px; }
.actp-res .act-bars i:nth-child(3) { height: 22px; } .actp-res .act-bars i:nth-child(4) { height: 28px; }
.actp-res small { display: block; font-size: 12px; color: var(--muted); }
.actp-res b { display: block; font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.15; }
.actp-res p { font-size: 12.5px; line-height: 1.35; color: var(--text-2); margin: 2px 0 0; }
.actp-res.empty p { margin-top: 1px; }
.edit-sheet .actp { margin-top: 10px; }

/* v266 : Ton objectif, deux questions */
.gp-aims { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.gp-aim { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 14px; border-radius: 20px; background: var(--surface); text-align: left; }
.gp-aim.on { background: var(--t); box-shadow: inset 0 0 0 2px var(--c); }
.gp-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; background: var(--t); }
.gp-aim.on .gp-ic { background: color-mix(in srgb, var(--c) 22%, #fff); }
.gp-ic svg { width: 26px; height: 26px; fill: none; stroke: color-mix(in srgb, var(--c) 72%, #1E2A22); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gp-txt b { display: block; font-size: 15.5px; font-weight: 600; }
.gp-txt span { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 1px; }
.gp-pace { margin-bottom: 14px; grid-template-columns: 1fr 1fr; }
.gp-pace button.on { background: var(--c); }
.gp-res { display: grid; grid-template-columns: 1fr 92px; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; border-radius: 22px; background: var(--t); text-align: left; }
.gp-res-txt small { display: block; font-size: 12px; color: var(--text-2); }
.gp-res-txt b { display: block; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.15; }
.gp-res-txt span { display: block; font-size: 12px; color: var(--text-2); margin-top: 3px; }
.gp-curve { display: block; height: 56px; padding: 6px 8px; border-radius: 14px; background: rgba(255,255,255,.7); }
.gp-curve svg { width: 100%; height: 100%; display: block; }
.gp-maint { stroke: var(--c); stroke-opacity: .4; stroke-dasharray: 3 3; stroke-width: 1.2; }
.gp-line { fill: none; stroke: var(--c); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.gp-warn { font-size: 12px; line-height: 1.4; color: var(--text-2); margin: 8px 4px 0; }

/* v273 : Mon profil en sommaire */
.settings-view .idf { margin-bottom: 12px; }
.pf-day { display: block; width: 100%; text-align: left; padding: 16px 16px 14px; border-radius: 24px; background: var(--t); margin-bottom: 18px; }
.pf-day-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.pf-day small { display: block; font-size: 12px; color: var(--text-2); }
.pf-kcal { display: block; font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; }
.pf-kcal i { font-style: normal; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.pf-prog { text-align: right; min-width: 0; padding-bottom: 3px; }
.pf-prog b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.pf-prog span { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.pf-mac { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.pf-mac span { background: rgba(255,255,255,.72); border-radius: 14px; padding: 7px 10px; font-size: 11.5px; color: var(--text-2); }
.pf-mac b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.pf-group { background: rgba(255,255,255,.85); border-radius: 22px; overflow: hidden; margin-bottom: 12px; }
.pf-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px 14px; text-align: left; }
.pf-row + .pf-row { border-top: 1px solid var(--line); }
.pf-row:active { background: var(--sunken); }
.pf-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.pf-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-terra { background: var(--terra-t); color: color-mix(in srgb, var(--terra) 72%, #1E2A22); }
.pf-honey { background: var(--honey-t); color: color-mix(in srgb, var(--honey) 72%, #1E2A22); }
.pf-leaf  { background: var(--leaf-t);  color: color-mix(in srgb, var(--leaf) 72%, #1E2A22); }
.pf-sky   { background: var(--sky-t);   color: color-mix(in srgb, var(--sky) 72%, #1E2A22); }
.pf-sage  { background: var(--sage-t);  color: var(--accent); }
.pf-txt { flex: 1; min-width: 0; }
.pf-txt b { display: block; font-size: 15px; font-weight: 600; }
.pf-txt span { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-sci { display: block; margin: 6px auto 0; }
.pf-sec > .set-section:first-child { margin-top: 4px; }
.pf-up-bottom { display: block; width: 100%; margin-top: 18px; }
.settings-view .idf-body { padding: 12px 14px; gap: 12px; }
.settings-view .idf-photo { width: 78px; height: 98px; }
.settings-view .idf-fields { grid-template-columns: repeat(3, 1fr); gap: 6px 8px; }
.settings-view .idf-fields .idf-full:first-child { grid-column: 1 / 4; }
.settings-view .idf-fields .idf-full:last-child { grid-column: 2 / 4; }
.settings-view .idf-f b { font-size: 15px; }
.settings-view .idf-f b.idf-name { font-size: 21px; }
.pf-sec .who-switch + * , .pf-sec > :first-child { margin-top: 0; }
.settings-view .who-switch + .pf-sec { margin-top: 14px; }

/* v278 : semaine d'automne, bandeau photo */
.aut-banner { position: relative; display: block; width: 100%; min-height: 148px; margin: 0 0 18px; border-radius: 22px; overflow: hidden; text-align: left; color: #FFF4E6; isolation: isolate; }
.aut-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -2; transition: filter .25s; }
.aut-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(92,46,22,.92) 0%, rgba(120,62,30,.72) 48%, rgba(120,62,30,.12) 100%); }
.aut-banner:not(.on) .aut-img { filter: saturate(.75); }
.aut-txt { display: block; padding: 15px 16px 14px; max-width: 72%; }
.aut-txt small { display: block; font-size: 11.5px; font-weight: 500; opacity: .85; }
.aut-txt b { display: block; font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.1; margin: 2px 0 4px; letter-spacing: -0.01em; }
.aut-txt > span:not(.aut-pill) { display: block; font-size: 12.5px; line-height: 1.35; opacity: .92; }
.aut-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 5px 12px 5px 5px; border-radius: 16px; background: rgba(255,244,230,.2); box-shadow: inset 0 0 0 1px rgba(255,244,230,.45); }
.aut-pill i { position: relative; width: 34px; height: 20px; border-radius: 10px; background: rgba(255,244,230,.35); flex-shrink: 0; transition: background .2s; }
.aut-pill i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFF4E6; transition: transform .2s; }
.aut-pill em { font-style: normal; font-size: 13px; font-weight: 600; }
.aut-banner.on .aut-pill { background: #FFF4E6; color: #7A3E1F; box-shadow: none; }
.aut-banner.on .aut-pill i { background: #C9733F; }
.aut-banner.on .aut-pill i::after { transform: translateX(14px); }
@media (prefers-reduced-motion: reduce) { .aut-img, .aut-pill i, .aut-pill i::after { transition: none; } }