/* ==========================================================================
   My Coach Nutrition v2 — design « Health Tech Vitality » (maquettes Stitch)
   Palette My Coach : marine #04173B, saphir #0F52BA, vert pour les validations.
   ========================================================================== */
:root {
  --navy: #04173b;
  --saphir: #0f52ba;
  --saphir-deep: #003c90;
  --saphir-soft: #e5eeff;
  --saphir-softer: #eff4ff;
  --vert: #10b981;
  --vert-deep: #059669;
  --vert-soft: #ecfdf5;
  --slate: #64748b;
  --text-2: #434653;
  --bg: #f8f9ff;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --line: #e2e8f0;
  --danger: #ba1a1a;
  --r-card: 16px;
  --r-hero: 24px;
  --shadow-1: 0 4px 20px -2px rgba(4, 23, 59, .05);
  --shadow-2: 0 12px 32px -4px rgba(4, 23, 59, .10);
  --gutter: 20px;
  --nav-h: 72px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--navy);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.ms { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 22px; line-height: 1;
  display: inline-block; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24; -webkit-font-smoothing: antialiased; user-select: none; }
.ms.fill { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }

.app { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative; background: var(--bg); }
.screen { padding: 0 var(--gutter) 32px; animation: fade .25s ease; }
.screen.with-nav { padding-bottom: calc(var(--nav-h) + 32px); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Typo ---------- */
h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
.display { font-size: 34px; line-height: 40px; font-weight: 800; }
.h1 { font-size: 28px; line-height: 34px; font-weight: 800; }
.h2 { font-size: 20px; line-height: 28px; font-weight: 700; }
.h3 { font-size: 17px; line-height: 24px; font-weight: 700; }
.lead { color: var(--text-2); font-size: 16px; line-height: 24px; margin: 8px 0 0; }
.muted { color: var(--slate); }
.small { font-size: 13px; line-height: 18px; }
.center { text-align: center; }

/* ---------- Pastilles & badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: var(--saphir-soft); color: var(--saphir-deep); font-weight: 600; font-size: 13px; letter-spacing: .02em; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--saphir-soft); color: var(--saphir-deep); white-space: nowrap; }
.badge.ok { background: var(--vert-soft); color: var(--vert-deep); }
.badge .ms { font-size: 16px; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px;
  border-radius: 999px; font-weight: 700; font-size: 17px; transition: transform .12s, background .15s, opacity .15s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--saphir); color: #fff; box-shadow: 0 10px 24px -8px rgba(15, 82, 186, .55); }
.btn-primary:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.btn-soft { background: var(--saphir-soft); color: var(--navy); }
.btn-ghost { color: var(--saphir); min-height: 44px; padding: 0 12px; font-size: 15px; }
.btn-danger { color: var(--danger); min-height: 44px; font-size: 15px; font-weight: 600; }
.btn-block { width: 100%; }
.link { color: var(--saphir); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cartes ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.card-pad { padding: 16px; }
.hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-hero); box-shadow: var(--shadow-1); padding: 18px; }
.tip { display: flex; gap: 14px; align-items: flex-start; background: var(--saphir-softer); border-radius: var(--r-card); padding: 16px; color: var(--text-2); font-size: 14px; line-height: 20px; }
.tip .ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--saphir); }
.tip b { color: var(--navy); }

/* ---------- Barre d'en-tête ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 14px var(--gutter);
  margin: 0 calc(var(--gutter) * -1) 8px; background: rgba(248, 249, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.topbar .logo { height: 26px; width: auto; }
.topbar .title { font-weight: 700; font-size: 18px; flex: 1; }
.topbar .spacer { flex: 1; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--navy); }
.icon-btn:active { background: var(--surface-2); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; }

/* ---------- Accueil ---------- */
.landing { padding-top: 28px; text-align: center; }
.landing .logo-top { height: 36px; margin: 0 auto 22px; }
.landing .display { margin-top: 20px; }
.hero-img { position: relative; margin: 26px 0 22px; border-radius: var(--r-hero); overflow: hidden; aspect-ratio: 16/10;
  background: radial-gradient(120% 90% at 70% 30%, #dce9ff 0%, #eff4ff 45%, #f8f9ff 100%); display: grid; place-items: center; }
.hero-img .plate { font-size: 92px; filter: drop-shadow(0 18px 24px rgba(4, 23, 59, .18)); }
.hero-img .float { position: absolute; left: 14px; bottom: 14px; display: inline-flex; gap: 8px; align-items: center; background: rgba(255,255,255,.95);
  border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-1); }
.hero-img .float .ms { color: var(--vert); font-size: 20px; }
.feature { display: flex; gap: 16px; align-items: flex-start; text-align: left; padding: 18px; margin-bottom: 12px; }
.feature .ic { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--saphir-softer); color: var(--saphir); display: grid; place-items: center; }
.feature .ic .ms { font-size: 28px; }
.feature .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.feature p { margin: 4px 0 0; color: var(--text-2); font-size: 15px; line-height: 21px; }
.legal { color: var(--slate); font-size: 13px; margin: 22px 0 8px; }

/* ---------- Connexion ---------- */
.auth { padding-top: 24px; text-align: center; }
.auth .logo-box { width: 116px; height: 116px; margin: 22px auto 22px; border-radius: 24px; background: var(--saphir-softer); display: grid; place-items: center; box-shadow: var(--shadow-1); }
.auth .logo-box img { width: 84px; }
.field-label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; margin: 28px 0 10px; text-align: left; }
.field-label small { font-weight: 400; color: var(--slate); font-size: 13px; }
.input-wrap { display: flex; align-items: center; gap: 12px; background: var(--saphir-softer); border: 1px solid transparent; border-radius: var(--r-card); padding: 0 16px; min-height: 60px; transition: border-color .15s, background .15s; }
.input-wrap:focus-within { border: 2px solid var(--saphir); background: #fff; }
.input-wrap .ms { color: var(--slate); }
.input-wrap input { flex: 1; border: 0; background: transparent; outline: 0; font-size: 17px; min-width: 0; padding: 16px 0; }
.form-error { color: var(--danger); font-size: 14px; margin: 10px 0 0; text-align: left; }
.secure { display: flex; gap: 8px; justify-content: center; align-items: flex-start; color: var(--slate); font-size: 13px; margin-top: 18px; }
.secure .ms { font-size: 18px; }
.sent-ic { position: relative; width: 112px; height: 112px; margin: 26px auto 18px; border-radius: 50%; background: var(--saphir-soft); display: grid; place-items: center; color: var(--saphir); }
.sent-ic .ms { font-size: 52px; }
.sent-ic .check { position: absolute; right: 2px; bottom: 6px; width: 34px; height: 34px; border-radius: 50%; background: var(--vert); color: #fff; display: grid; place-items: center; border: 3px solid var(--bg); }
.sent-ic .check .ms { font-size: 20px; }
.recipient { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; margin-top: 22px; }
.recipient .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--saphir-softer); color: var(--saphir); display: grid; place-items: center; flex: none; }
.recipient .who { flex: 1; min-width: 0; }
.recipient .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.dev-box { margin-top: 18px; border: 1px dashed var(--saphir); border-radius: var(--r-card); padding: 14px; font-size: 13px; color: var(--text-2); text-align: left; }

/* ---------- Code d'accès studio ---------- */
.studio-gate { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; text-align: center; padding-top: 32px; padding-bottom: 48px; }
.studio-gate .logo-top { height: 40px; margin: 0 auto 28px; }
.studio-gate .h1 { margin-bottom: 26px; }
.studio-gate .input-wrap input { font-size: 18px; letter-spacing: .02em; }
.studio-gate .btn-primary { margin-top: 16px; }
.studio-gate .keep { margin: 14px auto 0; }

/* ---------- Questionnaire ---------- */
.q-top { position: sticky; top: 0; z-index: 20; background: rgba(248, 249, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  margin: 0 calc(var(--gutter) * -1); padding: 12px var(--gutter) 14px; }
.q-top .row { display: flex; align-items: center; gap: 8px; }
.q-top .logo { height: 24px; }
.q-top .spacer { flex: 1; }
.q-top .step-name { color: var(--slate); font-size: 14px; }
.segments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.segments i { height: 5px; border-radius: 99px; background: var(--saphir-soft); }
.segments i.on { background: var(--saphir); }
.q-head { margin: 18px 0 22px; }
.q-head .pill { margin-bottom: 14px; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 700; font-size: 17px; margin: 26px 0 12px; }
.section-title small { font-weight: 500; color: var(--slate); font-size: 13px; }
.section-help { color: var(--slate); font-size: 14px; margin: -6px 0 12px; }

.option { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; margin-bottom: 10px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); position: relative; transition: border-color .15s, background .15s; }
.option .ic { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--saphir-softer); color: var(--navy); display: grid; place-items: center; }
.option .ic .ms { font-size: 26px; }
.option .txt { flex: 1; min-width: 0; }
.option .txt b { display: block; font-size: 17px; line-height: 23px; }
.option .txt span { display: block; color: var(--text-2); font-size: 14px; line-height: 20px; margin-top: 2px; }
.option .radio { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--saphir-soft); display: grid; place-items: center; color: transparent; }
.option .radio .ms { font-size: 18px; }
.option.on { border-color: var(--saphir); box-shadow: inset 4px 0 0 var(--saphir), var(--shadow-1); }
.option.on .ic { background: var(--saphir); color: #fff; }
.option.on .radio { background: var(--saphir); color: #fff; }
.option.compact { padding: 12px 14px; }
.option.compact .ic { width: 44px; height: 44px; border-radius: 12px; }

.seg-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { position: relative; min-height: 64px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 17px; padding: 10px; text-align: center; transition: all .15s; }
.tile .ms { font-size: 24px; }
.tile.on { background: var(--saphir); border-color: var(--saphir); color: #fff; }
.tile.stack { flex-direction: column; gap: 2px; font-size: 15px; }
.tile.stack small { font-weight: 500; font-size: 12px; color: var(--slate); }
.tile.on small { color: #dce9ff; }
.link-small { display: block; margin: 10px auto 0; color: var(--slate); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.link-small.on { color: var(--saphir); font-weight: 700; }

.measures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.measure { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); padding: 12px 8px 10px; text-align: center; }
.measure label { display: block; color: var(--text-2); font-size: 14px; }
.measure .val { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-top: 4px; }
.measure input { width: 100%; max-width: 76px; border: 0; background: transparent; text-align: right; font-size: 26px; font-weight: 800; outline: 0; padding: 0; -moz-appearance: textfield; }
.measure input::-webkit-outer-spin-button, .measure input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.measure .unit { color: var(--text-2); font-size: 14px; font-weight: 600; }
.measure:focus-within { border: 2px solid var(--saphir); }
.measure.err { border: 2px solid var(--danger); }

.chip-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); font-weight: 600; font-size: 15px; transition: all .15s; }
.chip.on { background: var(--saphir); border-color: var(--saphir); color: #fff; }
.chip.neg.on { background: var(--navy); border-color: var(--navy); }
.chip .ms { font-size: 18px; }
.cuisine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cuisine { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px; min-height: 60px; border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-1); font-weight: 700; font-size: 15px; text-align: left; }
.cuisine .emo { font-size: 24px; }
.cuisine .chk { position: absolute; top: 8px; right: 8px; color: var(--saphir); font-size: 20px; opacity: 0; }
.cuisine.on { border: 2px solid var(--saphir); background: var(--saphir-softer); }
.cuisine.on .chk { opacity: 1; }
.tag-input { display: flex; gap: 8px; margin-top: 10px; }
.tag-input .input-wrap { flex: 1; min-height: 50px; }
.tag-input .input-wrap input { padding: 12px 0; font-size: 16px; }
.tag-input .btn { min-height: 50px; padding: 0 18px; font-size: 15px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; background: var(--saphir-soft); color: var(--saphir-deep); }
.tag.neg { background: #fdecec; color: #93000a; }
.tag button { display: grid; place-items: center; color: inherit; }
.tag button .ms { font-size: 18px; }

.q-foot { position: sticky; bottom: 0; z-index: 20; display: flex; gap: 12px; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  margin: 22px calc(var(--gutter) * -1) 0; background: linear-gradient(to top, var(--bg) 70%, rgba(248, 249, 255, 0)); }
.q-foot .btn-soft { flex: none; width: 64px; padding: 0; }
.q-foot .btn-primary { flex: 1; }

/* ---------- Chargement ---------- */
.loading { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 40px var(--gutter); }
.spinner { width: 72px; height: 72px; margin: 0 auto 26px; border-radius: 50%; border: 6px solid var(--saphir-soft); border-top-color: var(--saphir); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading ul { list-style: none; padding: 0; margin: 26px auto 0; text-align: left; max-width: 300px; }
.loading li { display: flex; gap: 10px; align-items: center; padding: 7px 0; color: var(--slate); transition: color .2s; }
.loading li .ms { font-size: 20px; color: var(--line); }
.loading li.done { color: var(--navy); }
.loading li.done .ms { color: var(--vert); }

/* ---------- Plan ---------- */
.days { display: grid; grid-template-columns: repeat(var(--n, 7), 1fr); gap: 6px; margin-top: 18px; }
.days::-webkit-scrollbar { display: none; }
.day { min-width: 0; padding: 12px 0; font-size: 14px; font-weight: 700; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: center; box-shadow: var(--shadow-1); }
.day small { display: block; color: var(--text-2); font-size: 13px; }
.day b { display: block; font-size: 18px; margin-top: 2px; }
.day i { display: block; width: 6px; height: 6px; border-radius: 50%; margin: 6px auto 0; background: var(--line); }
.day.on { background: var(--saphir); border-color: var(--saphir); color: #fff; box-shadow: 0 10px 20px -8px rgba(15, 82, 186, .6); }
.day.on small { color: #dce9ff; }
.day.on i { background: #fff; }
.targets { margin-top: 18px; }
.targets .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; }
.targets .head h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.targets .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metric { background: var(--saphir-softer); border-radius: 14px; padding: 12px 14px; }
.metric .lbl { display: flex; justify-content: space-between; color: var(--text-2); font-size: 14px; }
.metric .lbl .ms { font-size: 18px; color: var(--saphir); }
.metric .num { margin-top: 6px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.metric .num small { font-size: 14px; font-weight: 500; color: var(--slate); letter-spacing: 0; }
.bar { height: 6px; border-radius: 99px; background: #dce9ff; margin-top: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--saphir); transition: width .3s; }
.bar.ok i { background: var(--vert); }
.meals-head { display: flex; justify-content: space-between; align-items: baseline; margin: 26px 0 12px; }
.meal { overflow: hidden; margin-bottom: 16px; }
.meal .photo { position: relative; aspect-ratio: 16/8.5; background: linear-gradient(135deg, #eff4ff, #dce9ff); display: grid; place-items: center; overflow: hidden; }
.meal .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.meal .photo .emo { font-size: 58px; filter: drop-shadow(0 10px 14px rgba(4, 23, 59, .15)); }
.meal .photo .slot { position: absolute; top: 12px; left: 12px; }
.meal .photo .swap { position: absolute; top: 12px; right: 12px; }
.chip-float { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .95); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-1); }
.chip-float .ms { font-size: 17px; }
button.chip-float { color: var(--saphir-deep); }
button.chip-float:disabled { opacity: .6; }
.meal .body { padding: 16px; }
.meal .name { font-size: 19px; line-height: 25px; font-weight: 700; }
.meta { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 14px; margin-top: 6px; flex-wrap: wrap; }
.meta span { display: inline-flex; align-items: center; gap: 4px; }
.meta .ms { font-size: 17px; }
.macros { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.macro { background: var(--saphir-softer); border-radius: 8px; padding: 4px 8px; font-size: 13px; font-weight: 600; }
.macros .grow { flex: 1; }
.macros .btn-ghost { min-height: 36px; padding: 0 4px; font-size: 14px; font-weight: 700; gap: 2px; }
.empty-meal { padding: 18px; color: var(--slate); font-size: 14px; }
.save-banner { display: flex; gap: 14px; align-items: center; padding: 16px; margin-top: 18px; background: var(--navy); color: #fff; border-radius: var(--r-card); }
.save-banner .ms { font-size: 28px; color: #b0c6ff; }
.save-banner p { margin: 2px 0 0; font-size: 13px; color: #c1d1ff; }
.save-banner button { flex: none; background: #fff; color: var(--navy); border-radius: 999px; padding: 10px 14px; font-weight: 700; font-size: 14px; }
.end-cta { margin-top: 8px; }

/* ---------- Navigation basse ---------- */
.bottom-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 30; width: 100%; max-width: 480px; height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-2); font-size: 12px; font-weight: 600; }
.bottom-nav button .ms { font-size: 26px; }
.bottom-nav button.on { color: var(--saphir); }
.bottom-nav button.on .ms { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }

/* ---------- Courses ---------- */
.portions { display: flex; align-items: center; gap: 12px; padding: 16px; margin-top: 18px; }
.portions .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--saphir-softer); color: var(--saphir); display: grid; place-items: center; flex: none; }
.portions .txt { flex: 1; min-width: 0; }
.portions .txt b { display: block; }
.portions .txt span { color: var(--text-2); font-size: 13px; }
.stepper { display: flex; align-items: center; gap: 4px; background: var(--saphir-softer); border-radius: 999px; padding: 4px; flex: none; }
.stepper button { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--saphir); box-shadow: var(--shadow-1); }
.stepper button:disabled { opacity: .4; }
.stepper output { min-width: 50px; text-align: center; font-weight: 800; font-size: 15px; line-height: 16px; }
.stepper output small { display: block; font-weight: 500; font-size: 11px; color: var(--slate); }
.progress-card { padding: 16px; margin-top: 12px; }
.progress-card .row { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.progress-card .row span { display: inline-flex; align-items: center; gap: 8px; }
.progress-card .row .ms { color: var(--vert); }
.progress-card .bar { height: 8px; }
.progress-card .bar i { background: var(--vert-deep); }
.rayon { padding: 16px; margin-top: 16px; }
.rayon .head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rayon .head .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--saphir-softer); color: var(--saphir); display: grid; place-items: center; flex: none; }
.rayon .head h3 { flex: 1; font-size: 18px; }
.rayon .head small { color: var(--text-2); font-size: 13px; white-space: nowrap; }
.item { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; margin-top: 8px; border-radius: 14px; background: var(--saphir-softer); transition: background .15s; }
.item .box { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: transparent; border: 1px solid var(--line); }
.item .box .ms { font-size: 18px; }
.item .nm { flex: 1; min-width: 0; font-size: 16px; }
.item .nm::first-letter { text-transform: uppercase; }
.item .nm small { display: block; color: var(--slate); font-size: 12px; margin-top: 1px; }
.item .qty { flex: none; background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 700; max-width: 45%; text-align: right; }
.item.done { background: #f6f8fb; }
.item.done .box { background: var(--vert-soft); border-color: var(--vert-soft); color: var(--vert-deep); }
.item.done .nm { text-decoration: line-through; color: var(--slate); text-decoration-color: var(--vert-deep); }
.placard summary { list-style: none; cursor: pointer; }
.placard summary::-webkit-details-marker { display: none; }
.placard[open] .chev { transform: rotate(180deg); }
.chev { transition: transform .2s; color: var(--slate); }
.export-row { display: flex; justify-content: center; margin-top: 8px; }

/* ---------- Profil ---------- */
.profile-head { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.profile-head .avatar { width: 64px; height: 64px; font-size: 26px; }
.profile-head .who { min-width: 0; }
.profile-head .who b { display: block; font-size: 22px; line-height: 28px; }
.profile-head .who span { display: block; color: var(--text-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.goal-card { margin-top: 18px; padding: 18px; background: var(--navy); color: #fff; border-radius: var(--r-hero); }
.goal-card small { color: #b0c6ff; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.goal-card .h2 { margin-top: 4px; }
.goal-card .kcal { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.goal-card .kcal b { font-size: 36px; font-weight: 800; letter-spacing: -.02em; }
.goal-card .kcal span { color: #c1d1ff; }
.macro-rows { margin-top: 14px; display: grid; gap: 10px; }
.macro-row .lbl { display: flex; justify-content: space-between; font-size: 14px; }
.macro-row .lbl span { color: #c1d1ff; }
.macro-row .bar { background: rgba(255, 255, 255, .15); }
.macro-row .bar i { background: #b0c6ff; }
.list-card { margin-top: 16px; overflow: hidden; }
.list-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; border-top: 1px solid var(--line); }
.list-row:first-child { border-top: 0; }
.list-row .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--saphir-softer); color: var(--saphir); display: grid; place-items: center; flex: none; }
.list-row .txt { flex: 1; min-width: 0; }
.list-row .txt b { display: block; font-size: 15px; }
.list-row .txt span { display: block; color: var(--text-2); font-size: 13px; line-height: 18px; }
.list-row > .ms { color: var(--slate); }
.name-edit { display: flex; gap: 8px; margin-top: 8px; }
.name-edit .input-wrap { flex: 1; min-height: 48px; }
.name-edit .input-wrap input { padding: 10px 0; font-size: 16px; }
.name-edit .btn { min-height: 48px; padding: 0 18px; font-size: 15px; }

/* ---------- Feuille recette ---------- */
.sheet-back { position: fixed; inset: 0; z-index: 50; background: rgba(4, 23, 59, .45); display: flex; align-items: flex-end; justify-content: center; animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; } }
.sheet { width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; background: #fff; border-radius: 24px 24px 0 0; padding: 10px var(--gutter) calc(24px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-2); animation: up .25s ease; }
@keyframes up { from { transform: translateY(40px); } }
.sheet .grab { width: 44px; height: 5px; border-radius: 99px; background: var(--line); margin: 0 auto 12px; }
.sheet .top { display: flex; align-items: flex-start; gap: 8px; }
.sheet .top h2 { flex: 1; font-size: 22px; line-height: 28px; }
.sheet h3 { font-size: 16px; margin: 22px 0 8px; }
.ing { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ing span:first-child::first-letter { text-transform: uppercase; }
.ing span:last-child { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; display: flex; gap: 12px; padding: 8px 0; font-size: 15px; line-height: 22px; }
.steps li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--saphir-soft); color: var(--saphir-deep); font-weight: 700; font-size: 13px; display: grid; place-items: center; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 60; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow-2); animation: toastin .2s; max-width: calc(100% - 40px); text-align: center; }

@media (min-width: 520px) { .app { box-shadow: 0 0 0 1px var(--line); } }

/* ---------- Impression (export PDF de la liste de courses) ---------- */
@media print {
  body { background: #fff; }
  .topbar, .bottom-nav, .portions, .progress-card, .no-print, .toast { display: none !important; }
  .app { max-width: none; box-shadow: none; }
  .card { box-shadow: none; }
  .rayon { break-inside: avoid; }
  .placard > *:not(summary) { display: block !important; }
  .print-only { display: block !important; }
}
.print-only { display: none; }

/* Message d'erreur du questionnaire, juste au-dessus des boutons */
.q-err { position: sticky; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 21; margin: 18px 0 -8px; padding: 12px 14px; border-radius: 12px; background: #fdecec; color: #93000a; font-weight: 600; text-align: left; }
.portions .txt span { display: block; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- v2.1 : améliorations UX ---------- */
.hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-img { margin: 22px 0 16px; aspect-ratio: 16/9; }
.energie { margin-top: 16px; }
.energie .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.energie small { display: block; color: var(--text-2); font-size: 14px; }
.energie b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.energie b span { font-size: 15px; font-weight: 500; color: var(--slate); letter-spacing: 0; }
.bar.big { height: 10px; margin-top: 12px; }
.bar.big.ok i { background: var(--vert); }
.macros-detail { margin-top: 12px; }
.macros-detail summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; color: var(--saphir); font-weight: 600; font-size: 14px; }
.macros-detail summary::-webkit-details-marker { display: none; }
.macros-detail[open] .chev { transform: rotate(180deg); }
.mline { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; color: var(--text-2); }
.mline .bar { margin-top: 0; }
.mline b { font-weight: 600; color: var(--navy); font-size: 13px; }
.meal-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.meal-foot .meta { margin-top: 0; }
.meal-foot .btn-ghost { min-height: 40px; padding: 0 4px; font-size: 15px; font-weight: 700; gap: 2px; }
.meal .photo { aspect-ratio: 16/7.5; }
.sheet-photo { width: calc(100% + 2 * var(--gutter)); max-width: none; margin: -10px calc(var(--gutter) * -1) 14px; aspect-ratio: 16/8; object-fit: cover; border-radius: 24px 24px 0 0; }
.resume { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; margin-top: 22px; }
.resume .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--saphir-softer); color: var(--saphir); display: grid; place-items: center; flex: none; }
.resume .txt { flex: 1; min-width: 0; }
.resume .txt b { display: block; font-size: 15px; }
.resume .txt span { display: block; font-size: 13px; color: var(--text-2); }
.link-txt { color: var(--saphir); font-weight: 700; font-size: 14px; }
.rayon.fini summary { list-style: none; cursor: pointer; margin-bottom: 0; }
.rayon.fini summary::-webkit-details-marker { display: none; }
.rayon.fini .ic { background: var(--vert-soft); color: var(--vert-deep); }
.rayon.fini h3 { color: var(--slate); }
.rayon.fini[open] .chev { transform: rotate(180deg); }
.rayon.fini[open] summary { margin-bottom: 8px; }
.profile-head .who { flex: 1; }
.toggle-row { cursor: pointer; }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; cursor: pointer; margin: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(4,23,59,.25); transition: transform .15s; }
.switch:checked { background: var(--saphir); }
.switch:checked::after { transform: translateX(18px); }

/* ==========================================================================
   Desktop (≥ 960 px) — mise en page large. Sur mobile, les conteneurs .dk
   sont neutres (display: contents) : l'affichage reste strictement identique.
   ========================================================================== */
.dk { display: contents; }

@media screen and (min-width: 960px) {
  :root { --gutter: 32px; --wmax: 1180px; }
  .app { max-width: var(--wmax); box-shadow: none; }
  .screen { padding-bottom: 56px; }
  .screen.with-nav { padding-bottom: 56px; }
  .topbar { padding-top: 18px; padding-bottom: 18px; margin-bottom: 16px; }
  .h1 { font-size: 34px; line-height: 40px; }

  /* Navigation : la barre du bas devient un menu en haut à droite */
  .bottom-nav { top: 10px; bottom: auto; left: auto; transform: none; width: auto; max-width: none; height: 48px; padding: 4px;
    right: calc(max(0px, (100vw - var(--wmax)) / 2) + var(--gutter) - 4px);
    grid-template-columns: repeat(3, auto); gap: 4px; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-1); }
  .bottom-nav button { flex-direction: row; gap: 8px; padding: 0 18px; border-radius: 999px; font-size: 15px; }
  .bottom-nav button .ms { font-size: 22px; }
  .bottom-nav button:hover { background: var(--surface-2); }
  .bottom-nav button.on { background: var(--saphir-soft); }

  /* Survols (souris uniquement) */
  .option:hover, .tile:not(.on):hover, .cuisine:hover, .chip:not(.on):hover, .day:not(.on):hover { border-color: #b8c8e6; }
  .btn-primary:hover { background: var(--saphir-deep); }
  .card.meal { transition: transform .15s, box-shadow .15s; }
  .card.meal:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

  /* Colonnes génériques : volet latéral + contenu principal */
  .dk-cols { display: grid; grid-template-columns: clamp(300px, 28vw, 360px) minmax(0, 1fr); gap: 32px; align-items: start; }
  .dk-cols.solo { grid-template-columns: minmax(0, 1fr); }
  .dk-side, .dk-main { display: block; min-width: 0; }
  .dk-side { position: sticky; top: 96px; }

  /* ---------- Accueil ---------- */
  .landing { padding-top: 36px; }
  .landing .logo-top { margin-bottom: 40px; }
  .dk-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 56px; align-items: center; text-align: left;
    grid-template-areas: "pill img" "titre img" "lead img" "cta img" "note img"; grid-template-rows: auto auto auto auto 1fr; }
  .dk-hero .pill { grid-area: pill; justify-self: start; align-self: end; }
  .dk-hero .display { grid-area: titre; font-size: 52px; line-height: 58px; margin-top: 18px; }
  .dk-hero .lead { grid-area: lead; font-size: 18px; line-height: 28px; margin-top: 14px; max-width: 460px; }
  .dk-hero .hero-img { grid-area: img; margin: 0; aspect-ratio: 4/3; }
  .dk-hero #start { grid-area: cta; width: auto; justify-self: start; margin-top: 28px; padding: 0 36px; }
  .dk-hero .hero-note { grid-area: note; text-align: left; align-self: start; }
  .dk-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
  .dk-features .feature { margin: 0; }
  .landing .legal { margin-top: 32px; }

  /* ---------- Questionnaire : colonne centrée plus large ---------- */
  .q-screen { max-width: 880px; margin: 0 auto; }
  .studio-gate { max-width: 560px; margin: 0 auto; }
  .q-head { margin: 28px 0 26px; }
  .dk-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .dk-opts .option { margin: 0; height: 100%; }
  .cuisine-grid { grid-template-columns: repeat(5, 1fr); }
  .cuisine { flex-direction: column; justify-content: center; text-align: center; gap: 6px; min-height: 96px; }
  .cuisine .emo { font-size: 30px; }
  .q-foot .btn-primary { flex: none; min-width: 300px; margin-left: auto; }

  /* ---------- Plan ---------- */
  .plan-screen .days { max-width: 640px; }
  .plan-screen .energie { margin-top: 0; }
  .plan-screen .dk-cols { margin-top: 24px; }
  .dk-meals { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
  .dk-meals .meals-head, .dk-meals .end-cta { grid-column: 1 / -1; }
  .dk-meals .meals-head { margin: 0; }
  .dk-meals .meal { margin: 0; display: flex; flex-direction: column; }
  .dk-meals .meal .body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
  .dk-meals .end-cta { margin-top: 4px; }
  .dk-meals .end-cta .btn { width: auto; padding: 0 36px; }

  /* ---------- Courses ---------- */
  .dk-courses { grid-template-rows: auto 1fr; margin-top: 24px; }
  .dk-courses .dk-side { position: static; grid-column: 1; grid-row: 1; }
  .dk-courses .dk-side .portions { margin-top: 0; }
  .dk-courses .dk-rayons { grid-column: 2; grid-row: 1 / span 2; columns: 2; column-gap: 20px; }
  .dk-courses .dk-rayons .rayon { margin: 0 0 20px; break-inside: avoid; display: block; }
  .dk-courses .dk-actions { display: block; grid-column: 1; grid-row: 2; align-self: start; }
  .dk-courses .dk-actions #share { margin-top: 4px !important; }

  /* ---------- Profil ---------- */
  .dk-profil { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 8px; }
  .dk-profil .dk-main .list-card:first-child { margin-top: 0; }
  .dk-profil .dk-side { position: static; }
  .dk-profil .profile-head { margin-top: 0; }

  /* ---------- Fiche recette et confirmations : fenêtres centrées ---------- */
  .sheet-back { align-items: center; padding: 32px; }
  .sheet { border-radius: 24px; max-height: calc(100dvh - 64px); padding-bottom: 28px; animation: pop .2s ease; }
  .sheet .grab { display: none; }
  .sheet-confirm { padding-top: 28px; }
  .sheet-recette { max-width: 880px; padding: 28px 36px 28px; }
  .sheet-recette .sheet-photo { width: calc(100% + 72px); margin: -28px -36px 22px; aspect-ratio: 16/6; border-radius: 24px 24px 0 0; }
  .sheet-recette .top h2 { font-size: 28px; line-height: 34px; }
  .dk-recette { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; }
  .dk-recette > .dk { display: block; }
  .sheet-confirm { max-width: 460px; }
}
@keyframes pop { from { opacity: 0; transform: scale(.97); } }
.list-row .txt .link-txt { color: var(--saphir); font-weight: 700; }

/* ---------- Export du plan en PDF (visible uniquement à l'impression) ---------- */
#print-plan { display: none; }
.pp { color: var(--navy); font-size: 9.5pt; line-height: 1.45; word-spacing: .06em; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pp .ms { font-size: 1.25em; vertical-align: -0.2em; }
.pp-frame { width: 100%; border-collapse: collapse; }
.pp-frame > thead td, .pp-frame > tfoot td, .pp-frame > tbody > tr > td { padding: 0 15mm; }
.pp-sp-top { height: 13mm; }
/* Pied de page discret, répété sur chaque page (pied de tableau) */
.pp-pagefoot { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 6px 0 9mm; border-top: 1px solid var(--line); color: var(--slate); font-size: 7.5pt; white-space: nowrap; }
.pp-pagefoot img { height: 13px; width: auto; opacity: .85; }
.pp-pagefoot .pp-pf-txt { flex: 1; }

/* Couverture */
.pp-cover { position: relative; overflow: hidden; border-radius: 18px; padding: 20px 24px 18px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #1d4fa8 0%, rgba(29, 79, 168, 0) 55%), linear-gradient(135deg, #04173b 0%, #0a2a63 100%); }
.pp-cover::after { content: ''; position: absolute; right: -40px; top: -40px; width: 190px; height: 190px; border-radius: 50%; border: 22px solid rgba(255, 255, 255, .05); }
.pp-cover-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-cover-top img { height: 30px; width: auto; }
.pp-studio { font-size: 7.5pt; font-weight: 700; letter-spacing: .14em; color: #b0c6ff; border: 1px solid rgba(176, 198, 255, .45); border-radius: 999px; padding: 4px 10px; }
.pp-cover h1 { margin: 16px 0 0; font-size: 23pt; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; word-spacing: .08em; }
.pp-cover p { margin: 4px 0 0; color: #c1d1ff; font-size: 10pt; }
.pp-cover-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.pp-cover-meta div { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 8px 12px; }
.pp-cover-meta small { display: block; color: #b0c6ff; font-size: 7pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pp-cover-meta b { font-size: 12pt; }

/* Repères */
.pp-reperes { margin-top: 12px; }
.pp h3 { font-size: 11pt; font-weight: 800; margin: 0 0 8px; }
.pp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pp-stat { border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; background: #fff; }
.pp-stat small { display: block; color: var(--text-2); font-size: 8pt; font-weight: 600; }
.pp-stat b { font-size: 14pt; font-weight: 800; }
.pp-stat span { display: block; color: var(--slate); font-size: 7.5pt; margin-top: 2px; }
.pp-bar { height: 5px; border-radius: 99px; background: var(--surface-2); margin-top: 5px; overflow: hidden; }
.pp-bar i { display: block; height: 100%; border-radius: 99px; }
.pp-stat.p .pp-bar i { background: var(--saphir); }
.pp-stat.g .pp-bar i { background: #6f9be8; }
.pp-stat.l .pp-bar i { background: var(--vert); }
.pp-legende { color: var(--slate); font-size: 7.5pt; margin: 8px 0 0; }

/* Journées : une carte par jour, jamais coupée quand c'est possible */
.pp-day { margin-top: 10px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; break-inside: avoid; page-break-inside: avoid; background: #fff; }
.pp-dayhead { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: linear-gradient(90deg, var(--saphir-softer), #fff); border-bottom: 1px solid var(--line); }
.pp-date { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--saphir); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.pp-date b { font-size: 14pt; font-weight: 800; }
.pp-date span { font-size: 6.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.pp-dayname { flex: 1; min-width: 0; }
.pp-dayname h2 { font-size: 13pt; font-weight: 800; line-height: 1.1; }
.pp-dayname h2::first-letter { text-transform: uppercase; }
.pp-dayname span { color: var(--slate); font-size: 7.5pt; }
.pp-daytot { text-align: right; }
.pp-kcalpill { display: inline-block; background: var(--navy); color: #fff; border-radius: 999px; padding: 3px 10px; font-weight: 800; font-size: 9pt; }
.pp-daytot div { margin-top: 4px; }
.pp-chip { display: inline-block; border-radius: 6px; padding: 1px 6px; font-size: 7.5pt; font-weight: 700; margin-left: 3px; }
.pp-chip.p { background: var(--saphir-soft); color: var(--saphir-deep); }
.pp-chip.g { background: #eef3fd; color: #3a64b8; }
.pp-chip.l { background: var(--vert-soft); color: var(--vert-deep); }
.pp-sub .pp-chip:first-child { margin-left: 0; }

.pp-meal { display: grid; grid-template-columns: 27mm 1fr; gap: 10px; padding: 7px 14px 8px; border-top: 1px solid #eef1f6; break-inside: avoid; page-break-inside: avoid; }
.pp-dayhead + .pp-meal { border-top: 0; }
.pp-slot { display: flex; align-items: flex-start; gap: 6px; color: var(--saphir-deep); font-weight: 700; font-size: 8.5pt; line-height: 1.3; padding-top: 1px; }
.pp-slot .ms { color: var(--saphir); font-size: 13pt; vertical-align: 0; flex: none; }
.pp-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pp-title b { font-size: 10.5pt; font-weight: 800; }
.pp-kcal { flex: none; font-weight: 800; font-size: 9.5pt; }
.pp-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.pp-time { color: var(--slate); font-size: 7.5pt; margin-left: 6px; display: inline-flex; align-items: center; gap: 2px; }
.pp-time .ms { font-size: 10pt; vertical-align: 0; }
.pp-ing { list-style: none; padding: 0; margin: 5px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 14px; row-gap: 0; }
.pp-ing li { display: flex; align-items: baseline; gap: 4px; font-size: 8pt; padding: 1px 0; min-width: 0; }
.pp-ing li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-ing li i { flex: 1; border-bottom: 1px dotted #c9d3e3; transform: translateY(-3px); min-width: 8px; }
.pp-ing li b { font-weight: 700; color: var(--navy); white-space: nowrap; }
.pp-vide { margin: 0; color: var(--slate); font-size: 8.5pt; }

/* Mention santé, en fin de document */
.pp-sante { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: var(--saphir-softer); border: 1px solid var(--saphir-soft); break-inside: avoid; page-break-inside: avoid; }
.pp-sante > .ms { color: var(--saphir); font-size: 16pt; vertical-align: 0; }
.pp-sante b { font-size: 9.5pt; }
.pp-sante p { margin: 2px 0 0; color: var(--text-2); font-size: 8.5pt; }
.pp-sante .pp-cree { color: var(--slate); font-size: 7.5pt; margin-top: 6px; }

/* ---------- Export PDF de la liste de courses ---------- */
.cs .cs-sp { height: 11mm; }
.cs-head { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 12px 18px; border-radius: 14px; color: #fff;
  background: radial-gradient(120% 160% at 100% 0%, #1d4fa8 0%, rgba(29, 79, 168, 0) 55%), linear-gradient(135deg, #04173b 0%, #0a2a63 100%); }
.cs-head > img { height: 26px; width: auto; }
.cs-studio { display: block; white-space: nowrap; font-size: 7pt; font-weight: 700; letter-spacing: .14em; color: #b0c6ff; }
.cs-head h1 { font-size: 17pt; line-height: 1.1; font-weight: 800; margin-top: 1px; }
.cs-meta { display: flex; gap: 5px; }
.cs-titre { min-width: 0; }
.cs-meta div { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 9px; padding: 4px 9px; }
.cs-meta small { display: block; color: #b0c6ff; font-size: 6pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cs-meta b { font-size: 8.5pt; white-space: nowrap; }
.cs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 7mm; margin-top: 10px; align-items: start; }
.cs-rayon, .cs-placard { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; margin-bottom: 8px; break-inside: avoid; page-break-inside: avoid; background: #fff; }
.cs-rayon header, .cs-placard header { display: flex; align-items: center; gap: 7px; padding: 5px 9px; background: var(--saphir-softer); border-bottom: 1px solid var(--line); }
.cs-ic { flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--saphir); color: #fff; display: grid; place-items: center; }
.cs .cs-ic .ms { font-size: 13px; vertical-align: 0; }
.cs-rayon h2, .cs-placard h2 { flex: 1; font-size: 10pt; font-weight: 800; }
.cs-n { flex: none; font-size: 7.5pt; font-weight: 700; color: var(--saphir-deep); background: #fff; border: 1px solid var(--saphir-soft); border-radius: 999px; padding: 0 7px; }
.cs ul { list-style: none; margin: 0; padding: 1px 9px 3px; }
.cs li { display: flex; align-items: center; gap: 7px; padding: 3.2px 0; border-bottom: 1px solid #eef1f6; font-size: 9pt; line-height: 1.25; break-inside: avoid; }
.cs li:last-child { border-bottom: 0; }
.cs-box { flex: none; width: 11px; height: 11px; border: 1.4px solid var(--navy); border-radius: 3px; display: grid; place-items: center; }
.cs .cs-box .ms { font-size: 9px; vertical-align: 0; font-weight: 700; }
.cs-nm { flex: 1; min-width: 0; }
.cs-nm::first-letter { text-transform: uppercase; }
.cs-nm small { color: var(--slate); font-size: 7pt; margin-left: 5px; font-style: italic; }
.cs-q { flex: none; font-size: 8.5pt; font-weight: 800; color: var(--saphir-deep); background: var(--saphir-softer); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.cs li.pris .cs-nm { color: var(--slate); text-decoration: line-through; }
.cs li.pris .cs-box { background: var(--vert-soft); border-color: var(--vert-deep); color: var(--vert-deep); }
.cs li.pris .cs-q { opacity: .55; }
/* Placard : liste compacte sur 3 colonnes, pleine largeur */
.cs-placard { margin-top: 2px; }
.cs-placard header p { flex: 2; margin: 0; text-align: right; color: var(--slate); font-size: 7pt; }
.cs-placard ul { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 7mm; padding-bottom: 2px; }
.cs-placard .cs-nm small { display: none; }
.cs-placard li { font-size: 8pt; padding: 2.4px 0; }
.cs-placard li:last-child { border-bottom: 1px solid #eef1f6; }
.cs-placard .cs-q { font-size: 7.5pt; padding: 0 5px; }

@media print {
  body.print-plan { background: #fff; margin: 0; }
  body.print-plan #app, body.print-plan #nav, body.print-plan .toast, body.print-plan .sheet-back { display: none !important; }
  body.print-plan #print-plan { display: block; }
}
.end-cta .export-row { margin-top: 8px; }
@media screen and (min-width: 960px) {
  .dk-meals .end-cta { display: flex; align-items: center; gap: 12px; }
  .dk-meals .end-cta .export-row { margin: 0; }
}