/* ─────────────────────────────────────────────────────────────
   Piano Piatto, page d'accueil du site vitrine
   Refonte du 25.09.2026 : cette feuille ne sert QU'À index.html.
   Les pages légales et la 404 gardent styles.css, dont elles
   utilisent l'en-tête et le pied de page.
   Couleurs et polices : mobile/src/theme/tokens.ts.
   ───────────────────────────────────────────────────────────── */

:root{
  --surface-mute:#FAF5F0;--r-xl:34px;--shadow-md:0 4px 12px rgba(26,16,8,.06),0 12px 32px rgba(26,16,8,.07);--r-sm:12px;--r-lg:26px;
  --terra:#C05A44;--terra-dark:#9E3F2E;--olive:#7A8A50;--olive-dark:#596832;--olive-bg:#F4F6EC;
  --cream:#FFF4EC;--surface:#fff;--mute:#FAF5F0;--border:#E8DDD5;
  --gold:#F4E4C1;--ink:#1A1008;--ink-2:#6B5E52;--ink-3:#9C8E82;
  --serif:'Playfair Display',Georgia,serif;--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --r-md:18px;--shadow-sm:0 1px 2px rgba(26,16,8,.05),0 2px 8px rgba(26,16,8,.04);
  --shadow:0 4px 12px rgba(26,16,8,.06),0 18px 40px rgba(26,16,8,.09);
  --shadow-lg:0 10px 30px rgba(26,16,8,.10),0 40px 80px rgba(26,16,8,.14);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.08;margin:0;letter-spacing:-.015em}
p{margin:0}
.page{max-width:1160px;margin-inline:auto;padding-inline:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:999px;font-weight:600;font-size:16.5px;text-decoration:none;border:1.5px solid transparent;transition:transform .15s,background .15s,box-shadow .15s;white-space:nowrap}
.btn-primary{background:var(--terra);color:#fff;box-shadow:0 8px 22px rgba(192,90,68,.3)}
.btn-primary:hover{background:var(--terra-dark);transform:translateY(-2px)}
.btn-ghost{border-color:var(--border);background:transparent}
.btn-ghost:hover{background:#fff}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-cream:hover{transform:translateY(-2px)}
.btn-sm{padding:10px 18px;font-size:15px}
.kicker{font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--terra);margin-bottom:14px}

/* En-tête */
.top{position:sticky;top:0;z-index:20;background:rgba(255,244,236,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(232,221,213,.7)}
.top .page{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.top img{height:38px;width:auto}
.top nav{display:flex;gap:20px;font-size:15px;font-weight:500;color:var(--ink-2)}
.top nav a{text-decoration:none}.top nav a:hover{color:var(--ink)}
/* Rien ne passe à la ligne dans l'en-tête : « Comment ça marche » sur deux
   lignes décalait tout le reste. Ce qui ne tient pas se retire (plus bas). */
.top a,.top summary{white-space:nowrap}
.top .page>a:first-child{flex-shrink:0}
.top-cta{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:500;flex-shrink:0}
.top-cta .login{text-decoration:none;color:var(--ink-2)}
/* Le menu complet demande environ 1 120 px en français. En dessous, il garde
   les trois liens qui décident (le produit, la baguette, les tarifs) : le
   foyer et l'installation ont leur section plus bas. */
@media (max-width:1199px){.top nav a:nth-child(3),.top nav a:nth-child(5){display:none}}

/* Hero */
.hero{position:relative;padding:72px 0 96px;overflow:hidden}
.hero::before{content:"";position:absolute;width:720px;height:720px;right:-180px;top:-160px;border-radius:50%;background:radial-gradient(closest-side,#F5D5C4,rgba(245,213,196,0));z-index:-1}
.hero .page{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(42px,5.6vw,72px)}
.hero h1 .q{display:block;color:var(--ink-2);font-style:italic;font-weight:600;font-size:.62em;margin-bottom:10px;letter-spacing:0}
.hero h1 em{font-style:normal;color:var(--terra)}
.lede{font-size:20px;line-height:1.55;color:var(--ink-2);margin:26px 0 34px;max-width:33em}
.lede b{color:var(--ink);font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.reassure{margin-top:18px;font-size:14.5px;color:var(--ink-3)}
.reassure b{color:var(--olive-dark);font-weight:600}

.stage{position:relative;justify-self:center;width:min(300px,100%)}
/* ── Maquette de téléphone ─────────────────────────────────── */
.hero-visual { position: relative; display: flex; justify-content: center; }
.phone {
  position: relative; width: 310px; flex: none;
  background: #1A1008; border-radius: 46px; padding: 11px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(26,16,8,.06);
}
.phone::after { /* l'encoche */
  content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 24px; background: #1A1008; border-radius: 999px; z-index: 3;
}
.phone-screen {
  background: var(--cream); border-radius: 36px; overflow: hidden;
  height: 620px; display: flex; flex-direction: column; position: relative;
}
.phone--tilt { transform: rotate(2.2deg); }
@media (max-width: 1040px) { .phone--tilt { transform: none; } }

.scr { flex: 1; overflow: hidden; padding: 44px 15px 0; }
.scr-mark { display: flex; justify-content: center; margin-bottom: 14px; }
.scr-mark img { height: 30px; width: auto; }
.scr-date { font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
.scr-hello { font-family: var(--serif); font-size: 21px; font-weight: 700; }
.scr-hello span, .scr-sub span { color: var(--terra); }
.scr-sub { font-family: var(--serif); font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.scr-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  color: var(--terra); background: rgba(192,90,68,.09); border: 1px solid rgba(192,90,68,.2);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 14px;
}
.scr-card { background: var(--surface); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 13px; }
.scr-photo { position: relative; aspect-ratio: 720 / 430; }
.scr-photo img { width: 100%; height: 100%; object-fit: cover; }
.scr-badge {
  position: absolute; top: 10px; left: 10px; font-size: 10.5px; font-weight: 700; color: #fff;
  background: rgba(26,16,8,.62); backdrop-filter: blur(6px); padding: 5px 10px; border-radius: 999px;
}
.scr-card-body { padding: 12px 13px 13px; }
.scr-dish { font-family: var(--serif); font-size: 16px; font-weight: 700; margin-bottom: 11px; line-height: 1.2; }
.scr-row { display: flex; align-items: center; gap: 10px; }
.scr-cook {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--terra); color: #fff; font-size: 13px; font-weight: 600;
  padding: 10px; border-radius: 999px;
}
.scr-portions { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

.scr-nutri { padding: 12px 13px; }
.scr-nutri-h { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .9px; color: var(--ink-2); margin-bottom: 12px; }
.scr-nutri-body { display: flex; align-items: center; gap: 14px; }
.ring { width: 62px; height: 62px; flex: none; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring-txt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.ring-txt b { font-size: 15px; }
.ring-txt span { font-size: 8px; color: var(--ink-3); }
.macros { flex: 1; display: grid; gap: 7px; }
.macro { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.macro i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.macro span { color: var(--ink-2); }
.macro b { margin-left: auto; font-weight: 600; color: var(--ink-3); font-size: 10.5px; }

.scr-tabs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  padding: 9px 6px 14px; background: rgba(255,255,255,.94);
  border-top: 1px solid var(--border);
}
.scr-tab { display: grid; justify-items: center; gap: 3px; font-size: 8.5px; font-weight: 600; color: var(--ink-3); }
.scr-tab.is-on { color: var(--ink); }



.stage .scr-photo{aspect-ratio:720/340}
.stage .phone{width:100%;max-width:310px;margin-inline:auto}
/* « À faire aujourd'hui », recopié de mobile/src/components/AheadTodayCard.tsx */
.scr-ahead{background:#fff;border:1px solid #DBD4E3;border-radius:18px;overflow:hidden;margin-bottom:13px;box-shadow:var(--shadow-sm)}
.scr-ahead-h{background:#E9E4EE;padding:10px 12px}
.scr-ahead-t{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:600;letter-spacing:1.4px;color:#5C5270}
.scr-ahead-ico{width:18px;height:18px;border-radius:50%;background:#fff;display:grid;place-items:center}
.scr-ahead-hint{font-size:9.5px;color:#5C5270;opacity:.85;margin-top:4px}
.scr-ahead-rows{display:grid;gap:6px;padding:9px}
.scr-ahead-row{display:flex;align-items:center;gap:8px;background:#F3F0F5;border:1px solid #DBD4E3;border-radius:12px;padding:7px 8px}
.scr-ahead-ico2{flex:none;width:22px;height:22px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:11px;color:#5C5270}
.scr-ahead-txt{flex:1;min-width:0}
.scr-ahead-txt b{display:block;font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr-ahead-txt span{display:block;font-size:8.5px;line-height:1.3;color:#6B5E52}
.scr-ahead-ok{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid #DBD4E3;background:#fff;display:grid;place-items:center;color:#5C5270}
/* Les quatre faits : une seule carte, comme les autres blocs de la page,
   séparés par de fins filets verticaux plutôt que par quatre traits de couleur. */
.facts-strip{padding:0 0 72px}
.facts-strip .page{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow-sm);padding:26px 8px;max-width:1112px}
.facts-strip .page > div{padding:2px 24px;border-left:1px solid var(--border)}
.facts-strip .page > div:first-child{border-left:0}
.facts-strip b{display:block;font-family:var(--serif);font-size:26px;line-height:1.15;color:var(--terra)}
.facts-strip span{display:block;font-size:14px;line-height:1.45;color:var(--ink-2);margin-top:6px}
.facts-strip span.court{display:none}
@media (max-width:980px){
  .facts-strip .page{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px}
  .facts-strip .page > div{padding:18px 18px}
  .facts-strip .page > div:nth-child(3){border-left:0}
  .facts-strip .page > div:nth-child(n+3){border-top:1px solid var(--border)}
}
@media (max-width:720px){
  .facts-strip{padding-bottom:56px}
  .facts-strip .page{margin-inline:16px;padding:4px;border-radius:24px}
  .facts-strip .page > div{padding:16px 14px}
  .facts-strip b{font-size:21px}
  .facts-strip span{font-size:13px}
}

/* Scène */
.scene{padding:96px 0;background:#fff;border-block:1px solid var(--border)}
.center{text-align:center;max-width:720px;margin:0 auto 52px}
.center h2{font-size:clamp(34px,4.2vw,50px)}
.center p{font-size:19px;color:var(--ink-2);margin-top:18px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px;margin:0 auto}
.dlg{border-radius:28px;padding:28px;border:1px solid var(--border)}
.dlg-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;font-size:14px}
.dlg-h b{font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3)}
.dlg-h span{color:var(--ink-3);font-variant-numeric:tabular-nums}
.dlg--sans{background:var(--mute)}
.dlg--avec{background:var(--cream);border-color:rgba(192,90,68,.35);box-shadow:var(--shadow)}
.dlg--avec .dlg-h b{color:var(--terra)}
.b{max-width:82%;padding:10px 15px;border-radius:18px 18px 18px 5px;background:#fff;border:1px solid var(--border);margin-bottom:8px;font-size:16px}
.b.me{margin-left:auto;border-radius:18px 18px 5px 18px;background:var(--ink);color:var(--cream);border-color:var(--ink)}
.dlg--avec .b.me{background:var(--terra);border-color:var(--terra)}
.dlg-f{margin-top:18px;font-size:15px;color:var(--ink-2)}
.dlg--avec .dlg-f{color:var(--olive-dark);font-weight:600}
.scene-out{max-width:640px;margin:48px auto 0;text-align:center;font-family:var(--serif);font-size:clamp(22px,2.6vw,28px);line-height:1.35}
.scene-out em{font-style:normal;color:var(--terra)}

/* Semaine */
.week{padding:110px 0}
.moments{display:grid;gap:22px;max-width:1000px;margin:0 auto}
.m{display:grid;grid-template-columns:200px 1fr 320px;gap:32px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:28px;padding:30px 34px}
.m-when{font-family:var(--serif);font-size:26px;line-height:1.15}
.m-when small{display:block;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--terra);letter-spacing:.3px;margin-top:6px}
.m h3{font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:0;margin-bottom:6px}
.m p{color:var(--ink-2);font-size:16px}
.m-bag{display:inline-block;margin-top:10px;font-size:14.5px;font-weight:600;color:var(--terra);text-decoration:none}
.m-bag:hover{text-decoration:underline}
.mini{background:var(--mute);border-radius:18px;padding:14px;font-size:13.5px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--border)}
.row:last-child{border-bottom:0}
.row .c{color:var(--ink-3);font-variant-numeric:tabular-nums}
.row .box{width:16px;height:16px;border:1.5px solid var(--ink-3);border-radius:5px;flex:none}
.row .box.on{background:var(--olive);border-color:var(--olive)}
.row s{color:var(--ink-3)}
.cat{font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--ink-3);padding:6px 4px 2px}
.todo{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:14px;padding:11px;border-left:4px solid #4A6270}
.todo b{display:block}
.cook{background:var(--ink);color:var(--cream);border-radius:18px;padding:16px}
.cook small{color:var(--gold);font-weight:700;font-size:11px;letter-spacing:.8px}
.cook p{color:var(--cream);font-size:16px;margin:6px 0 12px;font-weight:500}
.timer{display:inline-block;background:rgba(255,244,236,.12);border-radius:999px;padding:5px 12px;font-variant-numeric:tabular-nums;font-size:13px}

/* Maison */
.home{padding:0 0 110px}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.home h2{font-size:clamp(32px,3.8vw,46px);margin-bottom:20px}
.home .intro{font-size:18px;color:var(--ink-2);margin-bottom:26px}
.facts{display:grid;gap:14px}
.fact{display:flex;gap:14px}
.fact i{font-style:normal;flex:none;width:28px;height:28px;border-radius:50%;background:var(--olive-bg);color:var(--olive-dark);display:grid;place-items:center;font-size:14px;font-weight:700}
.fact b{font-weight:600}
.fact p{color:var(--ink-2);font-size:16px}
.who{background:#fff;border-radius:28px;padding:26px;box-shadow:var(--shadow)}
.who-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.who-h b{font-family:var(--serif);font-size:22px}
.who-h span{font-size:13px;color:var(--ink-3)}
.who .row{padding:12px 4px;font-size:15.5px}
.part{background:var(--olive-bg);color:var(--olive-dark);font-weight:700;font-size:13px;padding:4px 10px;border-radius:999px}
.who-f{margin-top:14px;font-size:14px;color:var(--ink-2);background:var(--mute);border-radius:14px;padding:12px 14px}

.types{padding:0 0 110px}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{background:#fff;border:1px solid var(--border);border-radius:26px;padding:26px;display:flex;flex-direction:column;gap:14px}
.tcard .ex{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--ink-3);border:1px solid var(--border);border-radius:999px;padding:3px 10px}
.tcard h3{font-size:23px}
.tcard .who2{font-size:14px;color:var(--ink-3);margin-top:-8px}
.tcard ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px;color:var(--ink-2)}
.tcard li{display:flex;gap:9px}.tcard li::before{content:"✓";color:var(--olive);font-weight:700}
.tcard .plan-tag{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--terra)}
.tcard .plan-tag.free{color:var(--olive-dark)}
@media (max-width:980px){.tgrid{grid-template-columns:1fr}}

/* Premium : encre et halo */
.prem{position:relative;background:var(--ink);color:var(--cream);padding:110px 0;overflow:hidden}
.prem::before{content:"";position:absolute;width:900px;height:900px;left:50%;top:-420px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(192,90,68,.45),rgba(192,90,68,0))}
.prem .page{position:relative}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.8px;color:var(--gold);margin-bottom:16px}
.prem h2{font-size:clamp(34px,4.4vw,54px);max-width:14em}
.prem .sub{font-size:19px;color:rgba(255,244,236,.72);max-width:36em;margin:20px 0 56px}
.pgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}
.pcard{background:rgba(255,244,236,.06);border:1px solid rgba(255,244,236,.12);border-radius:28px;padding:32px}
.pcard h3{font-size:28px;margin-bottom:12px}
.pcard p{color:rgba(255,244,236,.72);font-size:16px}
.pcard p + p{margin-top:12px}
.pcard b{color:var(--cream)}
.live{margin-top:24px;background:var(--cream);color:var(--ink);border-radius:20px;padding:14px 16px;font-size:14px}
.live .row{border-color:var(--border)}
.who-did{font-size:12px;color:var(--terra);font-weight:600}
.pside{display:grid;gap:22px}
.boxes{display:flex;gap:8px;margin-top:20px}
.boxes span{flex:1;aspect-ratio:1.3;border-radius:12px;border:1.5px solid rgba(244,228,193,.5);display:grid;place-items:center;font-size:11.5px;color:var(--gold);font-weight:600;text-align:center;line-height:1.2}
.boxes span.fz{border-style:dashed;color:#9EC3D6;border-color:rgba(158,195,214,.6)}

/* ── La baguette magique ──────────────────────────────────────
   Une feuille qu'on manipule, calquée sur celle de l'app
   (components/BaguetteSheet.tsx) : mêmes libellés, mêmes gestes.
   Terracotta pour ce qui agit, encre et or pour ce qui dit Premium. */

.bag{position:relative;padding:110px 0;background:#fff;border-top:1px solid var(--border);overflow:hidden;overflow:clip}
.bag::before{content:"";position:absolute;width:760px;height:760px;right:-200px;top:-200px;border-radius:50%;background:radial-gradient(closest-side,rgba(244,228,193,.9),rgba(244,228,193,0));pointer-events:none}
.bag::after{content:"";position:absolute;width:620px;height:620px;left:-260px;bottom:-300px;border-radius:50%;background:radial-gradient(closest-side,rgba(245,213,196,.7),rgba(245,213,196,0));pointer-events:none}
.bag-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr minmax(0,470px);gap:64px;align-items:center}
.bag-tags{display:flex;gap:8px;margin-bottom:18px}
.bag-prem{background:var(--ink);color:var(--gold);font-size:12px;font-weight:700;letter-spacing:1.6px;padding:6px 12px;border-radius:999px}
.bag-new{display:inline-block;background:var(--gold);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.4px;padding:6px 12px;border-radius:999px}
.bag h2{font-size:clamp(34px,4.3vw,54px)}
.bag h2 em{display:block;font-style:normal;color:var(--terra)}
.bag .intro{font-size:19px;color:var(--ink-2);margin:22px 0 28px;max-width:30em}
.bag-points{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:16px}
.bag-points li{display:flex;gap:14px}
.bag-points i{font-style:normal;flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--gold);display:grid;place-items:center;font-size:13px}
.bag-points p{color:var(--ink-2);font-size:16px}
.bag-points b{color:var(--ink);font-weight:600}
.bag-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bag-cta p{font-size:14px;color:var(--ink-3);max-width:19em;line-height:1.45}
.bag-cta p b{color:var(--ink-2);font-weight:600}

.sheet{position:relative;background:var(--surface);border-radius:32px;padding:14px 22px 20px;box-shadow:var(--shadow-lg),0 0 0 1px rgba(26,16,8,.05)}
.sheet-grip{display:block;width:44px;height:5px;border-radius:9px;background:var(--border);margin:0 auto 16px}
.sheet-h{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.sheet-ico{flex:none;width:40px;height:40px;border-radius:14px;background:var(--ink);color:var(--gold);display:grid;place-items:center}
.sheet-t{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.1}
.sheet-s{font-size:13.5px;color:var(--ink-3)}
.sheet-l{font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:.3px;margin-bottom:8px}
.bag-ideas{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:600 14px/1 var(--sans);padding:10px 14px;border-radius:999px;border:1.5px solid var(--border);background:#fff;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .1s}
.chip:hover{border-color:var(--terra);color:var(--terra)}
.chip:active{transform:scale(.97)}
.chip.is-on{background:var(--terra);border-color:var(--terra);color:#fff}
.wish{margin:12px 0 16px;min-height:48px;background:var(--mute);border:1px solid var(--border);border-radius:14px;padding:12px 14px;font-size:15px;color:var(--ink)}
.caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--terra);animation:clignote 1s steps(1) infinite}
@keyframes clignote{50%{opacity:0}}
.sheet-row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.sheet-row .sheet-l{margin-bottom:4px}
.sheet-v{font-weight:600;font-size:15px}
.stepper{text-align:right}
.stepper-c{display:inline-flex;align-items:center;gap:4px;background:var(--mute);border-radius:999px;padding:3px}
.stepper-c button{width:32px;height:32px;border-radius:50%;border:0;background:#fff;box-shadow:var(--shadow-sm);font:600 18px/1 var(--sans);color:var(--ink);cursor:pointer}
.stepper-c button:disabled{opacity:.35;cursor:default}
.stepper-c output{min-width:26px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.sheet-avoid{font-size:13px;color:var(--olive-dark);background:var(--olive-bg);border-radius:12px;padding:8px 12px;margin-bottom:16px}
.bag-go{width:100%;padding:14px 20px;font-size:16px;cursor:pointer;font-family:var(--sans)}
.bag-go:disabled{opacity:.7;cursor:progress;transform:none}

.bag-out{margin-top:16px;min-height:318px}
.res{border:1.5px solid rgba(192,90,68,.28);background:linear-gradient(180deg,#FFF9F4,#fff);border-radius:22px;padding:16px 18px 18px}
.res-by{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.5px;color:var(--gold);background:var(--ink);border-radius:999px;padding:4px 10px;margin-bottom:10px}
.res-t{font-family:var(--serif);font-size:22px;font-weight:700;line-height:1.15}
.res-m{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.res-m span{font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--mute);border-radius:999px;padding:4px 10px}
.res-ing{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;font-size:13.5px;color:var(--ink-2)}
.res-ing b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;transition:color .3s}
.res-ing b.is-flash{color:var(--terra)}
.res-st{margin:0;padding-left:20px;display:grid;gap:5px;font-size:14px;color:var(--ink-2)}
.res-st li::marker{color:var(--terra);font-weight:700}
/* L'apparition, ligne par ligne : c'est elle qui donne l'impression qu'on écrit. */
.res.is-writing > *,.res.is-writing li{opacity:0;transform:translateY(6px);animation:ecrit .45s ease forwards}
@keyframes ecrit{to{opacity:1;transform:none}}
.thinking{border:1.5px dashed rgba(192,90,68,.35);border-radius:22px;padding:18px;display:grid;gap:10px}
.thinking p{font-size:14px;color:var(--terra);font-weight:600;display:flex;gap:8px;align-items:center}
.thinking p span{display:inline-block;animation:agite .9s ease-in-out infinite}
@keyframes agite{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(14deg) scale(1.1)}}
.shim{height:12px;border-radius:8px;background:linear-gradient(90deg,var(--mute) 20%,#F3E6D8 50%,var(--mute) 80%);background-size:200% 100%;animation:shim 1.1s linear infinite}
.shim.w1{width:70%;height:18px}.shim.w2{width:45%}.shim.w3{width:88%}.shim.w4{width:60%}
@keyframes shim{to{background-position:-200% 0}}
.bag-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;min-height:38px}
.bag-other{flex:none;font:600 14px/1 var(--sans);color:var(--terra);background:#fff;border:1.5px solid rgba(192,90,68,.4);border-radius:999px;padding:10px 14px;cursor:pointer}
.bag-other:hover:not(:disabled){background:var(--cream)}
.bag-other:disabled{color:var(--ink-3);border-color:var(--border);cursor:default}
.bag-note{font-size:11.5px;color:var(--ink-3);line-height:1.4;text-align:right}
/* Les étincelles du bouton, purement décoratives */
.spark{position:absolute;pointer-events:none;color:var(--terra);font-size:14px;animation:etincelle .8s ease-out forwards}
@keyframes etincelle{from{opacity:1;transform:translate(0,0) scale(.6)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.2) rotate(40deg)}}
@media (prefers-reduced-motion:reduce){.res.is-writing > *,.res.is-writing li{animation:none;opacity:1;transform:none}.caret,.shim,.thinking p span{animation:none}}

/* La carte de la baguette dans le Premium : un raccourci vers la démo */
.pcard-bag{display:block;position:relative;text-decoration:none;color:inherit;border-color:rgba(244,228,193,.35);background:linear-gradient(160deg,rgba(244,228,193,.12),rgba(255,244,236,.04));transition:transform .15s,border-color .15s}
.pcard-bag:hover{transform:translateY(-2px);border-color:rgba(244,228,193,.6)}
.pcard-bag .bag-new{position:absolute;top:24px;right:24px;font-size:11px;padding:4px 10px}
.pcard-go{display:inline-block;margin-top:14px;font-size:14.5px;font-weight:600;color:var(--gold)}
.li-new .new-pill{font-style:normal;display:inline-block;margin-left:6px;background:var(--gold);color:var(--ink);font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;vertical-align:1px}

@media (max-width:980px){
  .bag-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .bag-demo{max-width:520px;width:100%;margin:0 auto}
}

/* Tarifs */
.pricing{padding:110px 0 90px}
.plans{display:grid;grid-template-columns:1fr 1.1fr;gap:22px;max-width:900px;margin:0 auto;align-items:stretch}
.plan{background:#fff;border:1px solid var(--border);border-radius:30px;padding:34px;display:flex;flex-direction:column}
.plan-n{font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-3)}
.plan-p{display:flex;align-items:baseline;gap:8px;margin:14px 0 4px}
.plan-p b{font-family:var(--serif);font-size:52px;line-height:1}
.plan-p span{color:var(--ink-2);font-size:15px}
.plan-a{font-size:14.5px;color:var(--ink-2);min-height:44px}
.plan ul{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:11px;font-size:15.5px}
.plan li{display:flex;gap:10px}
.plan li::before{content:"✓";color:var(--olive);font-weight:700}
.plan .btn{margin-top:auto}
.plan--pro{position:relative;background:var(--ink);color:var(--cream);border-color:var(--ink);box-shadow:var(--shadow-lg);overflow:hidden}
.plan--pro::before{content:"";position:absolute;width:520px;height:520px;right:-260px;top:-260px;border-radius:50%;background:radial-gradient(closest-side,rgba(192,90,68,.5),rgba(192,90,68,0))}
.plan--pro > *{position:relative}
.plan--pro .plan-n{color:var(--gold)}
.plan--pro .plan-p span,.plan--pro .plan-a{color:rgba(255,244,236,.7)}
.plan--pro li::before{color:var(--gold)}
.badge{position:absolute;top:28px;right:28px;background:var(--gold);color:var(--ink);font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px}
.anchor{max-width:900px;margin:22px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.anchor div{background:#fff;border:1px solid var(--border);border-radius:20px;padding:18px 20px;font-size:14.5px;color:var(--ink-2)}
.anchor b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:3px}
.all{max-width:900px;margin:22px auto 0;background:#fff;border:1px solid var(--border);border-radius:20px;padding:26px 26px 12px}
.all h3{font-size:24px;margin-bottom:14px}
.all table{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:14px;table-layout:fixed}
.all .col-plan{width:150px}
.all th,.all td{padding:13px 10px;border-top:1px solid var(--border);text-align:center;vertical-align:middle;line-height:1.35}
.all td{font-size:14px;color:var(--ink-2)}
.all th[scope=row]{text-align:left;font-weight:500;padding-left:0;color:var(--ink)}
.all thead th{border-top:0;padding-top:0;padding-bottom:14px;vertical-align:bottom}
.all tbody td:last-child{background:var(--mute)}
.all tbody tr:last-child td:last-child{border-radius:0 0 12px 12px}
.all tr.palier > *{border-top:2px solid var(--border)}
.formule{display:inline-block;white-space:nowrap;font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:6px 12px;border-radius:999px;color:var(--ink-2);background:var(--mute);border:1px solid var(--border)}
.formule--pro{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.oui{color:var(--olive-dark)!important;font-weight:700;font-size:16px!important}.non{color:var(--ink-3)!important;font-size:15px!important}

/* Mot de l'équipe */
.note{padding:0 0 100px}
.note-card{max-width:760px;margin:0 auto;background:#fff;border-radius:30px;padding:44px 48px;border:1px solid var(--border);position:relative}
.note-card p{font-family:var(--serif);font-size:21px;line-height:1.55}
.note-card p + p{margin-top:16px}
.note-sig{margin-top:22px;font-size:15px;color:var(--ink-2);font-family:var(--sans)!important}

/* Installer */
.install{padding:0 0 100px}
.install .install-card{max-width:760px;margin:0 auto}
.install-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 40px; box-shadow: var(--shadow-md); max-width: 880px; margin-inline: auto;
}
.os-tabs { display: flex; gap: 8px; background: var(--surface-mute); padding: 6px; border-radius: 999px; margin-bottom: 30px; flex-wrap: wrap; }
.os-tab {
  flex: 1; min-width: 110px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  padding: 11px 14px; border-radius: 999px; transition: background-color .2s, color .2s, box-shadow .2s;
}
.os-tab[aria-selected='true'] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.os-panel[hidden] { display: none; }
.os-panel .detected { font-size: 13.5px; color: var(--olive-dark); background: var(--olive-bg); border-radius: var(--r-sm); padding: 9px 14px; margin-bottom: 22px; display: inline-flex; gap: 8px; align-items: center; }
/* Sans cette ligne, le display ci-dessus l'emporte sur l'attribut hidden :
   les onglets non détectés montraient une pastille verte vide. */
.os-panel .detected[hidden] { display: none; }
.os-raccourci { margin-bottom: 26px; }
.os-raccourci p { margin-top: 12px; font-size: 14.5px; color: var(--ink-2); }
.os-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.os-col { border: 1px solid var(--border); border-radius: var(--r-md, 16px); padding: 20px 20px 22px; transition: border-color .2s, background-color .2s; }
.os-col.is-mine { border-color: var(--olive-dark); background: var(--olive-bg); }
.os-col h3 { font-size: 18px; margin: 0; }
.os-col-sub { font-size: 13.5px; color: var(--ink-2); margin: 2px 0 16px; }
.os-col .os-steps + .os-col-sub { margin: 16px 0 0; }
.os-col .os-steps { gap: 12px; }
.os-col .os-steps li p { font-size: 14.5px; }
.os-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 16px; }
.os-steps li { counter-increment: s; display: flex; gap: 15px; align-items: flex-start; }
.os-steps li::before {
  content: counter(s); flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--cream); border: 1.5px solid var(--border); color: var(--ink);
  display: grid; place-content: center; font-size: 14px; font-weight: 700;
}
.os-steps li p { font-size: 15.5px; }
.os-steps li p b { font-weight: 600; }
.os-note { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 14.5px; color: var(--ink-2); }
.key {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: -3px;
  background: var(--cream); border: 1px solid var(--border); border-radius: 7px;
  padding: 2px 7px; font-size: 13px; font-weight: 600;
}

/* Installer, sur téléphone : moins de marge, et trois onglets qui tiennent
   sur une ligne au lieu de passer à la ligne un par un. */
@media (max-width:720px){
  .install{padding-bottom:72px}
  .install-card{padding:22px 16px 24px;border-radius:24px}
  .os-tabs{flex-wrap:nowrap;gap:4px;padding:4px;margin-bottom:22px}
  .os-tab{min-width:0;padding:10px 6px;font-size:13.5px;white-space:nowrap}
  .os-panel .detected{display:flex;margin-bottom:18px}
  .os-steps{gap:14px}
  .os-steps li{gap:12px}
  .os-steps li::before{width:26px;height:26px;font-size:13px}
  .os-steps li p{font-size:15px}
  .os-raccourci .btn{width:100%}
  .os-duo{grid-template-columns:minmax(0,1fr)}
  .os-col{padding:16px 16px 18px}
  .os-note{margin-top:20px;padding-top:18px}
}

/* FAQ */
.faq{padding:90px 0;background:#fff;border-top:1px solid var(--border)}
.faq-list{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;list-style:none;padding:20px 36px 20px 0;font-weight:600;font-size:17.5px;position:relative}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:24px;color:var(--terra);font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 0 22px;color:var(--ink-2)}

/* Final */
.final{position:relative;background:var(--ink);color:var(--cream);text-align:center;padding:104px 0 88px;overflow:hidden}
.final::before{content:"";position:absolute;width:1100px;height:760px;left:50%;top:-380px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(192,90,68,.34),rgba(192,90,68,.12) 55%,rgba(192,90,68,0));pointer-events:none}
.final .page{position:relative}
.final h2{font-size:clamp(32px,4.4vw,50px)}
.final p{font-size:19px;color:rgba(255,244,236,.72);margin:18px auto 34px;max-width:32em}
.final .reassure{color:rgba(255,244,236,.55)}
footer{background:var(--ink);color:rgba(255,244,236,.6);font-size:14.5px;padding:0 0 40px}
.f-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;padding:24px 0 44px}
.f-brand{max-width:300px}
.f-brand img{height:52px;width:auto;margin-bottom:14px}
.f-links{display:flex;gap:56px;flex-wrap:wrap}
.f-links h4{margin:0 0 12px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);font-weight:700}
.f-links a{display:block;text-decoration:none;margin-bottom:8px;color:rgba(255,244,236,.72)}
.f-links a:hover{color:var(--cream)}
.f-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:20px;font-size:13px;color:rgba(255,244,236,.42);border-top:1px solid rgba(255,244,236,.07)}
.f-bottom a{text-decoration:none}

/* Barre d'inscription collée en bas, sur téléphone */
.sticky{display:none}

@media (max-width:980px){
  .hero .page,.home-grid,.pgrid,.pwide{grid-template-columns:minmax(0,1fr)}
  .stage{margin-top:20px}
    .m{grid-template-columns:1fr;gap:14px;padding:26px}
  .top nav{display:none}
}
@media (max-width:720px){
  body{font-size:16px}
  .page{padding-inline:16px}
  .hero{padding:40px 0 80px}
  .lede{font-size:18px}
  .duo,.plans,.anchor{grid-template-columns:1fr}
  .top-cta .btn{display:none}
  .plan--pro{order:-1}
  .note-card{padding:34px 24px}
    .sticky{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:30;justify-content:center}
  .sticky .btn{width:100%;box-shadow:0 10px 30px rgba(26,16,8,.25)}
  footer{padding-bottom:96px}
}
@media (max-width:720px){.plans,.duo,.anchor{grid-template-columns:minmax(0,1fr)}.all{padding:22px 16px 8px}.all h3{font-size:21px}.all .col-plan{width:84px}.all thead th{padding:0 2px 12px}.all th,.all td{padding:12px 6px}.all th[scope=row]{padding-left:0;font-size:14.5px}.all td{font-size:13px}.formule{font-size:10px;padding:5px 8px;letter-spacing:.4px}.actions{flex-direction:column;align-items:stretch}.actions .btn{width:100%}}
@media (max-width:400px){.note-sig a,.f-bottom a{overflow-wrap:anywhere}.btn{white-space:normal;text-align:center}.plan{padding:26px 20px}}
.note-f{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px}
.note-f .note-sig{margin-top:0}
@media (max-width:720px){.note-f{flex-direction:column;align-items:stretch;text-align:center}}

/* ── Sur téléphone ────────────────────────────────────────────
   La page faisait plus de 16 000 px de haut à 375 px de large : les
   marges de bureau, les cartes empilées une à une. On resserre, et les
   trois maisons types passent en carrousel qu'on fait glisser du pouce. */
@media (max-width:720px){
  .scene,.week,.bag,.prem,.pricing{padding:72px 0}
  .home,.types{padding-bottom:72px}
  .faq{padding:64px 0}
  .center{margin-bottom:34px}
  .center p{font-size:17px}
    .dlg{padding:22px 18px;border-radius:24px}
  .scene-out{margin-top:36px}
  .m{padding:22px 20px;border-radius:24px}
  .m-when{font-size:22px}
  .home-grid{gap:36px}
  .tgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding:4px 16px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tgrid::-webkit-scrollbar{display:none}
  .tcard{flex:0 0 84%;scroll-snap-align:center}
  .prem .sub{font-size:17px;margin-bottom:34px}
  .pcard{padding:24px 22px;border-radius:24px}
  .pcard h3{font-size:24px}
  .pcard-bag .bag-new{top:20px;right:20px}
  .bag .intro{font-size:17px}
  .bag-cta{flex-direction:column;align-items:stretch;text-align:center}
  .bag-cta .btn{width:100%}
  .bag-cta p{max-width:none}
  .sheet{padding:12px 16px 18px;border-radius:26px}
  .chip{padding:9px 12px;font-size:13.5px}
  .res{padding:14px 14px 16px}
  .res-t{font-size:20px}
  .res-ing{font-size:13px;gap:3px 10px}
  .bag-out{min-height:420px}
  .bag-foot{flex-direction:column;align-items:stretch}
  .bag-note{text-align:center}
  .plan{padding:28px 22px}
  .anchor div{padding:14px 16px}
}
/* Une ancre ne s'arrête pas sous l'en-tête collé */
section[id]{scroll-margin-top:68px}
/* Sur téléphone, la démo passe avant les arguments : c'est elle qui donne envie. */
@media (max-width:980px){
  .bag-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .bag-txt{display:contents}
  .bag-demo{order:1;margin:0 auto 40px}
  .bag-points{order:2}
  .bag-cta{order:3}
}

/* ── Le téléphone du hero coche tout seul ─────────────────────
   Un seul geste, une seule fois : la viande est sortie du congélateur.
   On comprend « l'app pense à tout » sans lire une ligne. */
.scr-ahead-row{transition:opacity .4s,background-color .4s}
.scr-ahead-txt b{transition:color .4s}
.scr-ahead-ok{position:relative;transition:background-color .3s,border-color .3s,color .3s,transform .2s}
.scr-ahead-row.is-done{opacity:.6}
.scr-ahead-row.is-done .scr-ahead-txt b{text-decoration:line-through;color:#6B5E52}
.scr-ahead-row.is-done .scr-ahead-ok{background:var(--olive);border-color:var(--olive);color:#fff;transform:scale(1.1)}
.scr-ahead-ok.is-tap::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--olive);animation:tap .6s ease-out forwards}
@keyframes tap{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(1.6)}}

/* ── La scène se joue comme une vraie conversation ────────────
   Sans JavaScript, tout est affiché. Avec, les bulles restent en place
   (pas de saut de mise en page) mais invisibles jusqu'à leur tour. */
.duo.is-joue .b,.duo.is-joue .dlg-f{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.duo.is-joue .b.is-vu,.duo.is-joue .dlg-f.is-vu{opacity:1;transform:none}
.scene-out{transition:opacity .6s}
.scene-out.is-attend{opacity:0}
.b .dots{display:inline-flex;gap:4px;padding:4px 2px}
.b .dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;animation:dots 1s infinite}
.b .dots i:nth-child(2){animation-delay:.15s}.b .dots i:nth-child(3){animation-delay:.3s}
@keyframes dots{30%{opacity:1;transform:translateY(-2px)}}
.dlg-h span.is-file{color:var(--terra);font-weight:600}
.dlg--sans .dlg-h span.is-file{color:#B03A2E}

/* ── Sur téléphone : le téléphone du hero, plus petit ─────────
   Il prenait 660 px entre le hero et la suite. zoom le réduit d'un bloc
   (ses tailles sont en px). Pas de coupe : le rappel qui se coche, le
   geste qu'on veut montrer, est tout en bas de l'écran. */
@media (max-width:720px){
  .hero{padding-bottom:40px}
  .stage{zoom:.84}
}
@media (prefers-reduced-motion:reduce){.scr-ahead-ok.is-tap::after,.b .dots i{animation:none}}

/* ── Le film du hero ──────────────────────────────────────────
   Accueil, Planning, la recette, le mode cuisine : recopiés des vrais
   écrans (PlanningTimelineScreen, RecipeDetailScreen, CookingModeScreen).
   Les écrans empilés restent hors champ tant que app.js ne les joue pas. */
.phone-screen{position:relative}
.scr{transition:opacity .45s}
.scr.is-off{opacity:0}
.scr-tabs{position:relative;z-index:2}
.scr-tab{transition:color .3s}
.scr-alt{position:absolute;inset:0;background:var(--cream);overflow:hidden;opacity:0;pointer-events:none;transition:opacity .45s,transform .5s cubic-bezier(.2,.8,.2,1)}
.scr-alt.is-on{opacity:1}
.scr-plan{z-index:1;padding:44px 13px 70px}
.scr-rec,.scr-ck{z-index:3;transform:translateX(100%);opacity:1}
.scr-rec.is-on,.scr-ck.is-on{transform:none}
.scr-alt.is-fade{opacity:0}

.plan-h{font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.1}
.plan-s{font-size:11.5px;color:#6E8A76;margin:3px 0 12px}
.plan-list{height:calc(100% - 50px);overflow:hidden}
.plan-day{background:#fff;border:1px solid var(--border);border-radius:18px;padding:11px;margin-bottom:10px}
.plan-day.is-today{border-color:rgba(74,98,112,.35)}
.plan-d{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;margin-bottom:8px}
.plan-d i{width:4px;height:20px;border-radius:9px;background:#4A6270}
.plan-d em{font-style:normal;font-size:9.5px;color:#4A6270}
.plan-slot{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:12px;padding:7px 7px 7px 10px;margin-top:6px;background:#fff;transition:background .2s,border-color .2s}
.plan-slot.is-press{background:var(--cream);border-color:var(--terra)}
.plan-slot div{flex:1;min-width:0}
.plan-slot small{display:block;font-size:8.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3)}
.plan-slot b{display:block;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-slot span{font-size:9.5px;color:var(--ink-3)}
.plan-slot img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}

.rec-photo{position:relative;height:190px}
.rec-photo img{width:100%;height:100%;object-fit:cover}
.rec-back{position:absolute;top:40px;left:12px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:18px;line-height:1}
.rec-body{padding:14px 15px}
.rec-t{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.15}
.rec-m{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 14px}
.rec-m span{font-size:10px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--border);border-radius:999px;padding:3px 8px}
.rec-h{font-size:12px;font-weight:600;margin-bottom:7px}
.rec-ing{display:grid;gap:5px}
.rec-ing span{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:6px 8px;font-size:11px;color:var(--ink-2)}
.rec-ing b{min-width:40px;text-align:center;font-size:10px;font-weight:600;color:var(--ink);border:1px solid var(--border);border-radius:999px;padding:2px 5px}
.rec-go{position:absolute;left:0;right:0;bottom:0;padding:12px 15px 20px;background:linear-gradient(rgba(255,244,236,0),var(--cream) 35%)}
.rec-go .scr-cook{display:flex;transition:transform .15s,background-color .15s}
.rec-go .scr-cook.is-press{transform:scale(.96);background:var(--terra-dark)}

.ck-top{background:#fff;border-bottom:1px solid var(--border);padding:44px 14px 10px;text-align:center}
.ck-mode{font-size:9px;font-weight:600;letter-spacing:1.4px;color:var(--terra)}
.ck-dish{font-size:12.5px;font-weight:600;margin-top:2px}
.ck-por{font-size:10px;color:var(--ink-3)}
.ck-bar{height:5px;border-radius:9px;background:#EEE7DF;margin-top:9px;overflow:hidden}
.ck-bar i{display:block;height:100%;width:43%;border-radius:9px;background:var(--terra)}
.ck-of{font-size:9.5px;color:var(--ink-3);margin-top:4px}
.ck-card{margin:14px 13px 0;background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px}
.ck-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(192,90,68,.1);color:var(--terra);font-weight:700;font-size:14px;margin-bottom:10px}
.ck-txt{font-size:15px;line-height:1.5;color:var(--ink)}
.ck-l{font-size:8.5px;font-weight:600;letter-spacing:1px;color:var(--ink-3);border-top:1px solid var(--border);padding-top:11px;margin:14px 0 7px}
.ck-chips{display:flex;flex-wrap:wrap;gap:5px}
.ck-chips span{font-size:10.5px;color:var(--ink-2);border:1px solid var(--border);border-radius:999px;padding:3px 9px}
.ck-chips b{color:var(--terra-dark)}
.ck-timer{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:var(--ink);color:#fff;border-radius:999px;padding:8px 14px;font-size:13px}
.ck-timer b{font-variant-numeric:tabular-nums;font-weight:600}
.ck-awake{font-size:10px;color:var(--ink-3);text-align:center;margin:12px 20px 0}

.ck-nav{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;padding:12px 13px 20px;background:#fff;border-top:1px solid var(--border)}
.ck-nav span{flex:1;text-align:center;font-size:12px;font-weight:600;border-radius:999px;padding:10px;border:1px solid var(--border);color:var(--ink-2)}
.ck-nav .is-next{background:var(--terra);border-color:var(--terra);color:#fff}

/* Le doigt : un rond qui glisse vers sa cible, puis appuie */
.tap{position:absolute;z-index:6;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(26,16,8,.22);border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 12px rgba(26,16,8,.2);opacity:0;pointer-events:none;transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .3s}
.tap.is-on{opacity:1}
.tap.is-press{animation:appui .35s ease}
@keyframes appui{50%{scale:.72;background:rgba(26,16,8,.38)}}
@media (prefers-reduced-motion:reduce){.scr-alt,.tap{display:none}}

/* ── La promesse, sous le titre du hero ───────────────────────
   L'émotion reste au titre (« On mange quoi ce soir ? »), le gain
   chiffré vient juste dessous, avant tout paragraphe. */
.promesse{font-family:var(--serif);font-weight:700;font-size:clamp(25px,2.7vw,34px);line-height:1.28;margin-top:26px;max-width:17em}
.promesse em{font-style:normal;color:var(--terra)}
/* Le surligneur : le gain chiffré se lit avant tout le reste */
.promesse mark{color:inherit;background:linear-gradient(transparent 58%,var(--gold) 58%,var(--gold) 92%,transparent 92%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero .lede{margin-top:20px}

/* Le chrono, posé contre le téléphone */
.chrono{position:absolute;z-index:4;left:-165px;top:118px;width:238px;background:#fff;border-radius:22px;padding:16px 16px 14px;box-shadow:var(--shadow-lg),0 0 0 1px rgba(26,16,8,.05);transform:rotate(-2.5deg)}
.chrono-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.chrono-h span{font-size:12px;font-weight:600;color:var(--ink-2)}
.chrono-h b{font-family:var(--serif);font-size:26px;line-height:1;color:var(--terra);font-variant-numeric:tabular-nums}
.chrono ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.chrono li{display:flex;gap:8px;align-items:center;font-size:13.5px;line-height:1.3;color:var(--ink-3);transition:color .3s}
.chrono li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border);background:#fff center/11px no-repeat;transition:background-color .3s,border-color .3s}
.chrono li.is-ok{color:var(--ink)}
.chrono li.is-ok::before{background-color:var(--olive);border-color:var(--olive);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.chrono-f{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);font-size:13px;font-weight:700;color:var(--olive-dark);transition:opacity .4s}
.chrono.is-joue .chrono-f{opacity:0}
@media (max-width:1180px){.chrono{left:-120px}}
@media (max-width:980px){
  .stage{display:flex;flex-direction:column}
  .chrono{position:relative;left:auto;top:auto;order:2;width:auto;max-width:310px;margin:22px auto 0;transform:none}
}

/* ── La variété : trois semaines côte à côte ─────────────────── */
.vari{padding:110px 0}
.center h2 em,.perso h2 em,.commu h2 em{font-style:normal;color:var(--terra)}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1000px;margin:0 auto}
.vweek{background:#fff;border:1px solid var(--border);border-radius:26px;overflow:hidden;box-shadow:var(--shadow-sm)}
.vweek-h{position:relative;height:150px}
.vweek-h img{width:100%;height:100%;object-fit:cover}
.vweek-h span{position:absolute;left:14px;top:14px;font-size:12px;font-weight:700;letter-spacing:.4px;color:#fff;background:rgba(26,16,8,.62);backdrop-filter:blur(6px);padding:5px 11px;border-radius:999px}
.vweek ul{list-style:none;margin:0;padding:10px 18px 14px}
.vweek li{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:15px}
.vweek li:last-child{border-bottom:0}
.vweek small{flex:none;width:34px;font-size:12px;font-weight:700;color:var(--ink-3)}
.vweek li i{margin-left:auto;flex:none;font-style:normal;font-size:11.5px;font-weight:700;color:var(--terra);background:rgba(192,90,68,.09);border-radius:999px;padding:3px 9px}
.vweek li.is-fav{font-weight:600}
.vari-out{max-width:640px;margin:44px auto 0;text-align:center;font-family:var(--serif);font-size:clamp(22px,2.6vw,28px);line-height:1.35}
.vari-out em{font-style:normal;color:var(--terra)}

/* ── Tes recettes, et la communauté : texte et démo côte à côte ── */
.perso,.commu{padding:0 0 110px}
.commu{padding-top:110px;background:#fff;border-block:1px solid var(--border)}
.perso-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.perso h2,.commu h2{font-size:clamp(32px,3.8vw,46px);margin-bottom:20px}
.perso .intro,.commu .intro{font-size:18px;color:var(--ink-2);margin-bottom:26px}
.perso .m-bag{margin-top:22px}
.commu-free{margin-top:22px;font-size:14.5px;font-weight:600;color:var(--olive-dark)}

.myrec{background:#fff;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);max-width:440px;justify-self:center;width:100%}
.myrec-photo{height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--terra);background:repeating-linear-gradient(135deg,var(--cream) 0 14px,#FBEBDD 14px 28px);font-size:13px;font-weight:700}
.myrec-b{padding:20px 22px 22px}
.myrec-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.4px;color:var(--olive-dark);background:var(--olive-bg);border-radius:999px;padding:3px 10px;margin-bottom:8px}
.myrec-t{font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.15}
.myrec-m{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 10px}
.myrec-m span{font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--mute);border-radius:999px;padding:4px 10px}
.myrec-m span:last-child{color:var(--terra);background:rgba(192,90,68,.09)}
.myrec .row{font-size:14.5px}
.myrec-l{font-size:12px;font-weight:600;color:var(--ink-3);margin:16px 0 8px}
.seg{display:flex;gap:4px;background:var(--mute);border-radius:999px;padding:4px}
.seg span{flex:1;text-align:center;font-size:13px;font-weight:600;color:var(--ink-2);padding:8px 4px;border-radius:999px;white-space:nowrap}
.seg .is-on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.myrec-f{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--olive-dark);background:var(--olive-bg);border-radius:12px;padding:9px 12px}

.commu-demo{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:440px;width:100%;justify-self:center}
.crec{background:var(--cream);border:1px solid var(--border);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.crec-photo{position:relative;height:170px}
.crec-photo img{width:100%;height:100%;object-fit:cover}
.crec-heart{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--terra);display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.crec-b{padding:18px 20px 20px}
.crec-t{font-family:var(--serif);font-size:22px;font-weight:700;line-height:1.15}
.crec-s{margin-top:8px;font-size:14px;font-weight:600;color:var(--ink-2)}
.stars{color:#D49A2A;letter-spacing:1px}
.crec-c{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:14px;color:var(--ink-2)}
.crec-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.crec-tags span{font-size:12.5px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--border);border-radius:999px;padding:4px 10px}
.crec-q{margin-top:12px;font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink)}
.fweek{background:#fff;border:1px solid var(--border);border-radius:22px;padding:14px 16px}
.fweek-h{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.fweek-r{display:flex;align-items:center;gap:12px;padding:8px 0}
.fweek-r + .fweek-r{border-top:1px solid var(--border)}
.fweek-r div{flex:1;min-width:0}
.fweek-r b{display:block;font-size:14.5px}
.fweek-r div span{display:block;font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--terra-dark);background:#F5D5C4}
.av2{color:var(--olive-dark);background:var(--olive-bg)}
.plus{flex:none;width:34px;height:34px;border-radius:50%;background:var(--terra);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:600;line-height:1}

@media (max-width:980px){
  .vgrid{grid-template-columns:minmax(0,1fr);max-width:520px}
  .perso-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .commu-demo{order:2}
}
@media (max-width:720px){
  .vari,.commu{padding:72px 0}
  .perso{padding-bottom:72px}
  .vgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding:4px 16px 14px;scrollbar-width:none;max-width:none}
  .vgrid::-webkit-scrollbar{display:none}
  .vweek{flex:0 0 84%;scroll-snap-align:center}
  .vweek-h{height:120px}
  .vari-out{margin-top:30px}
  .perso .intro,.commu .intro{font-size:17px}
  .myrec-b{padding:18px}
  .seg span{font-size:12px}
}

/* ── Sur téléphone : les gains avant tout le reste ────────────
   Mesuré le 27.09.2026 à 375 px : le chrono tombait au 2e écran, les
   recettes perso au 8e, la communauté au 9e, sur 26 écrans en tout.
   1. le chrono passe au-dessus du téléphone, sous le bouton ;
   2. les quatre gains restent TOUS visibles, en 2 × 2, avec un texte
      court (un carrousel cachait les deux derniers : on ne voyait pas
      qu'il fallait faire glisser, constaté le 27.09.2026) ;
   3. la variété, tes recettes et la communauté (l'envie) passent avant
      la scène de 19 h 05 (la galère) et « Comment ça marche » ;
   4. les maisons types disparaissent : elles redisent la variété et le
      Premium. L'ordinateur garde l'ordre du HTML. */
@media (max-width:720px){
  .chrono{order:0;margin:0 auto 26px;zoom:1.12}
  .facts-strip .page{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-inline:0;padding:0 16px;background:none;border:0;border-radius:0;box-shadow:none}
  .facts-strip .page > div,.facts-strip .page > div:nth-child(n){background:#fff;border:1px solid var(--border);border-radius:18px;padding:12px 14px;box-shadow:var(--shadow-sm)}
  .facts-strip b{font-size:20px}
  .facts-strip span{display:none}
  .facts-strip span.court{display:block;margin-top:3px;font-size:13px;line-height:1.35}
  .facts-strip{padding-bottom:40px}
  main{display:flex;flex-direction:column}
  main > .hero,main > .facts-strip,main > .vari,main > .perso,main > .commu{order:-1}
  main > .perso{padding-top:0}
  .types{display:none}
}

/* ── Le sélecteur de langue (build-langues.py construit /en/, /it/, /es/, /de/) ── */
.langue{position:relative}
.langue-s{list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px;min-height:44px;padding:0 4px;color:var(--ink-2);font-size:14px;font-weight:600;letter-spacing:.6px}
.langue-s::-webkit-details-marker{display:none}
.langue-s::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:3px}
.langue[open] .langue-s,.langue-s:hover{color:var(--ink)}
.langue-l{position:absolute;right:0;top:100%;z-index:30;min-width:150px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 32px rgba(26,16,8,.12);padding:6px}
.langue-l a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:9px;text-decoration:none;color:var(--ink-2);font-size:15px}
.langue-l a:hover{background:var(--mute);color:var(--ink)}
.langue-l a[aria-current]{color:var(--terra);font-weight:600}
.f-langues{display:flex;flex-wrap:wrap;gap:4px 18px;padding:0 0 18px;font-size:13.5px}
.f-langues a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:rgba(255,244,236,.72)}
.f-langues a:hover{color:var(--cream)}
.f-langues a[aria-current]{color:var(--gold)}