/* ===========================================================================
   LE CARNET DE LORENZO — feuille de style partagée (design system + mise en page)
   Design system : "Cream editorial" (Better Design). Couleurs via tokens.
   Chargée par toutes les pages du funnel : index, commande, OTO, merci, cadeau.
   =========================================================================== */

/* ============ DESIGN SYSTEM: Cream editorial — tokens ============ */
:root {
  --background: oklch(0.982 0.005 95.1);
  --foreground: oklch(0.191 0.002 106.6);
  --card: oklch(0.966 0.009 100);
  --card-foreground: oklch(0.191 0.002 106.6);
  --popover: oklch(0.993 0.003 95);
  --popover-foreground: oklch(0.191 0.002 106.6);
  --primary: oklch(0.57 0.135 39);
  --primary-foreground: oklch(1 0 0);
  --clay: oklch(0.672 0.131 38.8);
  --secondary: oklch(0.948 0.011 95.2);
  --secondary-foreground: oklch(0.191 0.002 106.6);
  --muted: oklch(0.924 0.014 97.5);
  --muted-foreground: oklch(0.478 0.006 95.2);
  --accent: oklch(0.948 0.011 95.2);
  --accent-foreground: oklch(0.191 0.002 106.6);
  --destructive: oklch(0.53 0.17 26);
  --destructive-foreground: oklch(1 0 0);
  --success: oklch(0.52 0.09 160);
  --success-foreground: oklch(1 0 0);
  --warning: oklch(0.772 0.121 67.4);
  --warning-foreground: oklch(0.191 0.002 106.6);
  --border: oklch(0.191 0.002 106.6 / 0.12);
  --input: oklch(0.924 0.014 97.5);
  --line-strong: oklch(0.853 0.014 97.5);
  --ring: oklch(0.57 0.135 39 / 0.4);
  --olive: oklch(0.52 0.07 130);
  --cream-deep: oklch(0.955 0.015 92);
  --ink: oklch(0.23 0.006 78);
  --ink-foreground: oklch(0.966 0.009 100);
  --ink-muted: oklch(0.82 0.012 92);
  --ink-muted-soft: oklch(0.78 0.012 92);
  --scrim: oklch(0.2 0.006 78 / 0.55);
  --success-tint: oklch(0.52 0.09 160 / 0.1);
  --success-text: oklch(0.42 0.08 160);
  --warning-tint: oklch(0.772 0.121 67.4 / 0.16);
  --warning-text: oklch(0.47 0.09 60);
  --radius: 0.625rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.875rem;
  --radius-2xl: 1.125rem;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, ui-serif, serif;
  --shadow-sm: 0 0.0625rem 0.1875rem oklch(0.191 0.002 106.6 / 0.08);
  --shadow-md: 0 0.25rem 0.75rem oklch(0.191 0.002 106.6 / 0.08);
  --shadow-lg: 0 0.5rem 1.5rem -0.25rem oklch(0.191 0.002 106.6 / 0.12);
  --shadow-overlay: 0 1.5rem 3rem -0.75rem oklch(0.191 0.002 106.6 / 0.2), 0 0 0 0.0625rem oklch(0.191 0.002 106.6 / 0.08);
  --transition-duration-fast: 180ms;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  text-underline-position: from-font;
  text-decoration-skip-ink: auto;
}
/* 60+ readability: enlarge the root so every rem scales up uniformly */
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
*,*::before,*::after { box-sizing: border-box; }
/* `hidden` must always win over component display rules (grid/flex) */
[hidden]{display:none !important}

/* ============ DS component CSS (verbatim from kit) ============ */
:where(.ds){font-family:var(--font-sans);color:var(--foreground);background:var(--background);line-height:1.5}
.ds :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small){color:inherit}
.ds h1,.ds h2,.ds h3,.ds h4{font-family:inherit;font-weight:600;margin:0 0 .5em;color:var(--foreground);text-wrap:balance}
.ds .ds-display,.ds .ds-section-title,.ds-card-title{font-family:inherit;text-wrap:balance}
.ds .ds-display{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin:0;color:var(--foreground)}
.ds .ds-section-title{font-size:1.25rem;font-weight:600;line-height:1.2;letter-spacing:-.01em;margin:0;color:var(--foreground)}
.ds .ds-supporting,.ds .ds-card-desc{font-size:.875rem;font-weight:400;line-height:1.5;color:var(--muted-foreground);margin:0;text-wrap:pretty}
.ds a:not(.ds-btn){color:var(--primary);text-decoration:none}
.ds-muted{color:var(--muted-foreground)}
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;font-size:.875rem;font-weight:500;line-height:1;padding:.6rem 1rem;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;touch-action:manipulation;transition:opacity var(--transition-duration-fast) var(--ease-out),background var(--transition-duration-fast) var(--ease-out);text-decoration:none}
.ds-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.ds-btn:disabled{background:var(--muted);color:var(--foreground);border-color:var(--border);opacity:1;cursor:not-allowed}
.ds-btn-primary{background:var(--primary);color:var(--primary-foreground);box-shadow:var(--shadow-sm)}
.ds-btn-secondary{background:var(--secondary);color:var(--secondary-foreground)}
.ds-btn-outline{background:transparent;color:var(--foreground);border-color:var(--line-strong)}
.ds-btn-ghost{background:transparent;color:var(--foreground)}
.ds-btn-sm{padding:.4rem .7rem;font-size:.8125rem}
.ds-btn-lg{padding:.75rem 1.4rem;font-size:1rem}
.ds-label{display:block;font-size:.8125rem;font-weight:500;margin-bottom:.4rem;color:var(--foreground)}
.ds-input{width:100%;font:inherit;font-size:1rem;padding:.7rem .85rem;border-radius:var(--radius-lg);border:1px solid var(--line-strong);background:var(--background);color:var(--foreground);transition:border-color var(--transition-duration-fast) var(--ease-out),box-shadow var(--transition-duration-fast) var(--ease-out)}
.ds-input::placeholder{color:var(--muted-foreground)}
.ds-input:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 35%,transparent)}
.ds-card{display:flex;flex-direction:column;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden}
.ds-card-header{padding:1.1rem 1.25rem .5rem}
.ds-card-body{padding:.5rem 1.25rem 1.1rem}
.ds-card-title{font-size:1.05rem;margin:0 0 .25rem}
.ds-card-desc{font-size:.875rem;color:var(--muted-foreground);margin:0}
.ds-badge{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:600;padding:.2rem .6rem;border-radius:999px;background:var(--secondary);color:var(--secondary-foreground);line-height:1.4}
.ds-badge-primary{background:var(--primary);color:var(--primary-foreground)}
.ds-badge-safe{background:var(--success-tint);color:var(--success-text)}
.ds-badge-warn{background:var(--warning-tint);color:var(--warning-text)}
.ds-divider{height:1px;background:var(--border);border:0;margin:1rem 0}
@media (pointer:coarse){.ds-btn{min-height:44px}.ds-input{min-height:44px;font-size:1rem}}
@media (hover:hover) and (pointer:fine){
  .ds a:not(.ds-btn):hover{text-decoration:underline}
  .ds-btn:hover:not(:disabled){opacity:.9}
  .ds-btn-ghost:hover:not(:disabled){background:var(--accent);opacity:1}
}
.ds ::selection{background:var(--primary);color:var(--primary-foreground)}

/* ============ LAYOUT (bespoke, layout-only, tokens for colour) ============ */
body{margin:0;background:var(--background);color:var(--foreground);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem}
.narrow{max-width:42rem;margin-inline:auto}
.serif{font-family:var(--font-serif)}
.lede{font-size:1.2rem;line-height:1.6;color:var(--muted-foreground);text-wrap:pretty;margin:0}
.prose p{font-size:1.1875rem;line-height:1.65;margin:0 0 1rem;text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
.eyebrow-after{font-size:.95rem;font-weight:600;letter-spacing:.02em;color:var(--primary);margin:.9rem 0 0}
.h-xl{font-family:var(--font-serif);font-weight:600;font-size:clamp(2.15rem,5.2vw,3.4rem);line-height:1.04;letter-spacing:-.02em;margin:0;text-wrap:balance}
.h-lg{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.7rem,3.6vw,2.35rem);line-height:1.1;letter-spacing:-.015em;margin:0 0 .4rem;text-wrap:balance}
.h-md{font-family:var(--font-serif);font-weight:600;font-size:1.4rem;line-height:1.2;margin:0 0 .35rem}
section{padding-block:clamp(2.75rem,6vw,4.75rem)}
.section-tint{background:var(--cream-deep)}
.section-ink{background:var(--ink);color:var(--ink-foreground)}
.section-ink :where(h1,h2,h3,p,li){color:var(--ink-foreground)}
.section-ink .lede{color:var(--ink-muted)}
.center{text-align:center}
.kicker{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;color:var(--primary);
  background:color-mix(in oklab,var(--primary) 10%,transparent);padding:.35rem .75rem;border-radius:999px;margin:0 0 1rem}
.kicker svg{width:1.05em;height:1.05em}

/* top bar */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--background) 86%,transparent);
  backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--border)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.75rem}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-serif);font-weight:600;font-size:1.18rem;letter-spacing:-.01em;color:var(--foreground)}
.brand .mark{width:2rem;height:2rem;color:var(--primary);flex:none}
.topbar-cta{display:flex;align-items:center;gap:.6rem}
.topbar .price-sm{font-size:.82rem;color:var(--muted-foreground)}
/* Small phones: drop the header price so brand + CTA always fit on one row */
@media (max-width:30rem){.topbar .price-sm{display:none}}
/* funnel top bar: logo only, nothing to click away with */
.topbar.minimal .wrap{justify-content:center}
.topbar.minimal .secure{position:absolute;right:1.25rem;font-size:.82rem;color:var(--muted-foreground);display:inline-flex;align-items:center;gap:.35rem}
.topbar.minimal .secure svg{width:1.05em;height:1.05em;color:var(--olive)}
@media (max-width:40rem){.topbar.minimal .secure{display:none}}

/* hero */
.hero{padding-block:clamp(2rem,5vw,3.75rem)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media (min-width:56rem){.hero-grid{grid-template-columns:1.05fr .95fr;gap:3rem}}
.hero h1{margin-top:.4rem}
.hero .lede{margin-top:1.1rem;max-width:34rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin-top:1.25rem;font-size:.95rem;color:var(--muted-foreground)}
.hero-trust span{display:inline-flex;align-items:center;gap:.4rem}
.hero-trust svg{width:1.15em;height:1.15em;color:var(--olive)}
.rating{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.3rem;font-size:.98rem}
.rating .stars{display:inline-flex;color:var(--warning);gap:.1rem}
.rating .stars svg{width:1.15em;height:1.15em}

/* book cover art */
.cover-stage{display:flex;justify-content:center}
.cover{width:min(21rem,86vw);filter:drop-shadow(0 1.75rem 2.5rem oklch(0.3 0.03 50 / .28))}

/* ============ IMAGE SLOTS ============================================
   Pattern turnkey : <img> pointe vers le fichier à ajouter dans images/.
   Tant que le fichier n'existe pas, onerror masque l'<img> et révèle
   l'illustration SVG de secours. Dès que vous déposez le fichier, la
   photo s'affiche seule, sans rien changer dans le code. */
.img-slot{position:relative;display:flex;justify-content:center}
.img-slot > img{display:block;max-width:100%;height:auto}
.img-slot > .slot-fallback{display:none}
/* ===================================================================== */

/* generic pieces */
.btn-wide{font-size:1.06rem;padding:.9rem 1.5rem}
/* Wide buttons may hold a long label + a live price span (two flex items).
   Allow them to wrap so they never force horizontal overflow on narrow screens. */
.btn-wide,.oto-accept{flex-wrap:wrap;white-space:normal;line-height:1.3}
.icon-list{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.85rem}
.icon-list li{display:grid;grid-template-columns:1.6rem 1fr;gap:.75rem;align-items:start;font-size:1.12rem;line-height:1.5}
.icon-list svg{width:1.5rem;height:1.5rem;color:var(--primary);margin-top:.1rem;flex:none}
.pain-list li svg{color:var(--muted-foreground)}

.cards3{display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:2rem}
@media (min-width:48rem){.cards3{grid-template-columns:repeat(3,1fr)}}
.feature{padding:1.5rem}
.feature .ic{width:2.75rem;height:2.75rem;border-radius:var(--radius-lg);display:inline-flex;align-items:center;justify-content:center;
  background:color-mix(in oklab,var(--primary) 12%,transparent);color:var(--primary);margin-bottom:.9rem}
.feature .ic svg{width:1.5rem;height:1.5rem}

/* chapters */
.chapters{display:grid;gap:1rem;margin-top:2rem;grid-template-columns:1fr}
@media (min-width:46rem){.chapters{grid-template-columns:1fr 1fr}}
.chapter{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;padding:1.15rem 1.25rem}
.chapter .num{font-family:var(--font-serif);font-size:1.5rem;font-weight:600;color:var(--primary);line-height:1;min-width:2.1rem}

/* freebie band */
.freebie{display:grid;grid-template-columns:1fr;gap:1.75rem;align-items:center}
@media (min-width:52rem){.freebie{grid-template-columns:1.1fr .9fr}}
.form-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.form-row .ds-input{flex:1 1 15rem}
.form-note{font-size:.9rem;color:var(--muted-foreground);margin-top:.7rem;display:flex;align-items:center;gap:.4rem}
.form-note svg{width:1.05em;height:1.05em;flex:none}
.form-ok{display:none;margin-top:1rem;padding:.85rem 1rem;border-radius:var(--radius-lg);background:var(--success-tint);color:var(--success-text);font-weight:500;font-size:1rem}
.form-ok.show{display:block}

/* bonus stack */
.bonus{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1.1rem 1.25rem}
.bonus + .bonus{margin-top:.85rem}
.bonus .ic{width:2.5rem;height:2.5rem;border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center;background:color-mix(in oklab,var(--olive) 14%,transparent);color:var(--olive);flex:none}
.bonus .ic svg{width:1.4rem;height:1.4rem}
.bonus .val{font-weight:600;color:var(--muted-foreground);white-space:nowrap;font-size:.98rem}
.value-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--border);font-size:1.12rem}
.value-total .amt{font-family:var(--font-serif);font-weight:600;font-size:1.5rem}
.strike{text-decoration:line-through;color:var(--muted-foreground)}

/* author */
.author{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media (min-width:52rem){.author{grid-template-columns:.8fr 1.2fr}}
.portrait{width:min(18rem,70vw);margin-inline:auto}

/* testimonials */
.quotes{display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:2rem}
@media (min-width:48rem){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{padding:1.5rem}
.quote .qmark{width:2rem;height:2rem;color:var(--primary);opacity:.5;margin-bottom:.5rem}
.quote p{font-family:var(--font-serif);font-size:1.18rem;line-height:1.45;margin:0 0 1rem}
.quote .who{font-size:.95rem;color:var(--muted-foreground)}
.quote .stars{display:inline-flex;color:var(--warning);gap:.1rem;margin-bottom:.7rem}
.quote .stars svg{width:1.05em;height:1.05em}

/* offer / price box */
.offer-card{max-width:40rem;margin-inline:auto;overflow:visible}
.offer-top{text-align:center;padding:1.75rem 1.5rem .5rem}
.price-line{display:flex;align-items:baseline;justify-content:center;gap:.7rem;margin:.4rem 0 .2rem}
.price-now{font-family:var(--font-serif);font-weight:700;font-size:3.1rem;line-height:1;color:var(--foreground)}
.price-was{font-size:1.3rem}
.price-save{font-size:.95rem;color:var(--success-text);font-weight:600}
.offer-list{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.7rem}
.offer-list li{display:grid;grid-template-columns:1.4rem 1fr;gap:.6rem;align-items:start;font-size:1.06rem}
.offer-list svg{width:1.3rem;height:1.3rem;color:var(--success-text);margin-top:.1rem}
.bump{display:flex;gap:.75rem;align-items:flex-start;margin-top:1.25rem;padding:1rem;border:1px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--background);cursor:pointer}
.bump input{width:1.25rem;height:1.25rem;margin-top:.15rem;flex:none;accent-color:var(--primary)}
.bump .bt{font-weight:600}
.bump .bd{font-size:.98rem;color:var(--muted-foreground);margin-top:.15rem}
.pay-note{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.1rem;margin-top:1rem;font-size:.92rem;color:var(--muted-foreground)}
.pay-note span{display:inline-flex;align-items:center;gap:.35rem}
.pay-note svg{width:1.05em;height:1.05em;color:var(--olive)}

/* guarantee */
.guarantee{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;max-width:44rem;margin-inline:auto}
.seal{width:5.5rem;height:5.5rem;color:var(--primary);flex:none;margin-inline:auto}
@media (max-width:40rem){.guarantee{grid-template-columns:1fr;text-align:center;gap:1rem}}

/* faq */
.faq{max-width:44rem;margin:2rem auto 0}
.faq details{border-bottom:1px solid var(--border);padding:.3rem 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.1rem .25rem;font-weight:600;font-size:1.14rem;font-family:var(--font-serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{width:1.4rem;height:1.4rem;color:var(--primary);transition:transform var(--transition-duration-fast) var(--ease-out);flex:none}
.faq details[open] summary .chev{transform:rotate(90deg)}
.faq .ans{padding:0 .25rem 1.2rem;font-size:1.08rem;line-height:1.6;color:var(--muted-foreground);text-wrap:pretty}

/* final cta */
.ps{max-width:42rem;margin:1.5rem auto 0;font-size:1.1rem;line-height:1.6;text-wrap:pretty}
.ps strong{font-family:var(--font-serif)}

/* footer */
.foot{background:var(--ink);color:var(--ink-muted);padding-block:2.5rem}
.foot a{color:var(--ink-foreground);text-decoration:none}
.foot .wrap{display:grid;gap:1.25rem}
.foot-links{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;font-size:.95rem}
.foot small{color:var(--ink-muted);font-size:.88rem;line-height:1.6}

/* sticky mobile buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  background:color-mix(in oklab,var(--background) 94%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);padding:.65rem 1rem;box-shadow:0 -0.5rem 1.5rem -0.5rem oklch(0.2 0 0 / 0.15)}
.buybar .inner{max-width:68rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.buybar .bp{font-size:.92rem;color:var(--muted-foreground)}
.buybar .bp b{font-family:var(--font-serif);font-size:1.15rem;color:var(--foreground)}
@media (max-width:52rem){.buybar.show{display:block}}

/* exit-intent modal */
.modal-scrim{position:fixed;inset:0;z-index:60;background:var(--scrim);display:none;align-items:center;justify-content:center;padding:1.25rem}
.modal-scrim.show{display:flex}
.modal{background:var(--background);border-radius:var(--radius-2xl);max-width:30rem;width:100%;box-shadow:var(--shadow-overlay);padding:1.9rem 1.6rem;position:relative;text-align:center}
.modal .close{position:absolute;top:.6rem;right:.6rem;width:2.5rem;height:2.5rem;border:0;background:transparent;color:var(--muted-foreground);cursor:pointer;font-size:1.5rem;border-radius:999px}
.modal .close:hover{background:var(--muted)}
.modal .mg{width:3.25rem;height:3.25rem;color:var(--primary);margin:0 auto .5rem}

/* skip link */
.skip{position:absolute;left:-999px;top:0;background:var(--primary);color:var(--primary-foreground);padding:.6rem 1rem;border-radius:0 0 var(--radius-md) 0;z-index:80}
.skip:focus{left:0}

/* ============ FUNNEL PAGES (commande / OTO / merci / cadeau) ============ */
/* centered panel used on confirmation + OTO pages */
.panel{max-width:46rem;margin-inline:auto}
.panel-narrow{max-width:38rem;margin-inline:auto}

/* big confirmation check / badge at the top of thank-you pages */
.confirm-mark{width:4.25rem;height:4.25rem;color:var(--success-text);margin:0 auto 1rem;display:block}

/* order page: two columns (summary + checkout) */
.order-grid{display:grid;grid-template-columns:1fr;gap:1.75rem;align-items:start}
@media (min-width:54rem){.order-grid{grid-template-columns:1fr 1.1fr;gap:2.5rem}}
.order-summary{position:static}
@media (min-width:54rem){.order-summary{position:sticky;top:5rem}}
.sum-line{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.55rem 0;font-size:1.05rem}
.sum-line + .sum-line{border-top:1px solid var(--border)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.5rem;padding-top:.9rem;border-top:2px solid var(--line-strong);font-size:1.15rem;font-weight:600}
.sum-total .amt{font-family:var(--font-serif);font-size:1.7rem}
.sum-line.is-bump{color:var(--muted-foreground)}
.sum-line.is-bump.on{color:var(--foreground)}

/* checkout embed slot : où coller le paiement (Stripe, Systeme.io, etc.) */
.checkout-slot{border:2px dashed var(--line-strong);border-radius:var(--radius-xl);padding:1.5rem;background:var(--card);text-align:center}
.checkout-slot .ch-ic{width:2.5rem;height:2.5rem;color:var(--muted-foreground);margin:0 auto .5rem;display:block}
.checkout-slot code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92rem;background:var(--muted);padding:.1rem .4rem;border-radius:var(--radius-sm)}

/* OTO: accept button big, decline a plain honest link (no dark pattern) */
.oto-accept{width:100%;font-size:1.12rem;padding:1rem 1.5rem}
.decline{display:inline-block;margin-top:1.1rem;color:var(--muted-foreground);font-size:1rem;text-decoration:underline;text-underline-offset:3px;background:none;border:0;cursor:pointer;font:inherit}
.decline:hover{color:var(--foreground)}
.oto-price{display:flex;align-items:baseline;justify-content:center;gap:.6rem;margin:.3rem 0}
.oto-price .now{font-family:var(--font-serif);font-weight:700;font-size:2.6rem;line-height:1}
.oto-price .was{font-size:1.15rem}

/* thank-you downloads */
.dl-list{display:grid;gap:1rem;margin-top:1.75rem}
.dl-card{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1.1rem 1.25rem}
.dl-card .ic{width:2.6rem;height:2.6rem;border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center;background:color-mix(in oklab,var(--primary) 12%,transparent);color:var(--primary);flex:none}
.dl-card .ic svg{width:1.4rem;height:1.4rem}
.dl-card .t{font-weight:600;font-family:var(--font-serif);font-size:1.12rem}
.dl-card .d{font-size:.98rem;color:var(--muted-foreground)}
@media (max-width:40rem){.dl-card{grid-template-columns:auto 1fr;gap:.85rem}.dl-card .ds-btn{grid-column:1 / -1}}

/* numbered "what happens next" steps */
.steps{counter-reset:step;list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1rem}
.steps li{display:grid;grid-template-columns:2.1rem 1fr;gap:.85rem;align-items:start;font-size:1.08rem;line-height:1.55}
.steps li::before{counter-increment:step;content:counter(step);font-family:var(--font-serif);font-weight:600;color:var(--primary-foreground);background:var(--primary);width:2.1rem;height:2.1rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem}

/* soft cross-sell card on the freebie thank-you page */
.crosssell{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center}
@media (min-width:48rem){.crosssell{grid-template-columns:.7fr 1.3fr}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }

/* ============ CRO additions (landing + checkout) ============ */
/* authority byline above the headline */
.byline{display:flex;align-items:center;gap:.65rem;font-size:.98rem;color:var(--muted-foreground);margin:0 0 1rem}
.byline .av{width:2.5rem;height:2.5rem;border-radius:999px;flex:none;object-fit:cover;background:var(--muted);border:2px solid var(--background);box-shadow:var(--shadow-sm)}
.byline strong{color:var(--foreground);font-weight:600}
/* reassurance line under every primary CTA */
.cta-micro{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-top:.85rem;font-size:.93rem;color:var(--muted-foreground)}
.cta-micro span{display:inline-flex;align-items:center;gap:.35rem}
.cta-micro svg{width:1.1em;height:1.1em;color:var(--olive);flex:none}
.center .cta-micro,.cta-block .cta-micro{justify-content:center}
.cta-block{margin-top:2.25rem;text-align:center}
.soft-link{display:inline-block;margin-top:1.1rem;font-size:1.04rem;font-weight:500;text-decoration:underline;text-underline-offset:3px}
/* look inside: swipe on phones, grid on desktop */
.peek{display:grid;grid-auto-flow:column;grid-auto-columns:min(70%,15rem);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.5rem .25rem 1.25rem;margin-top:2rem;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
@media (min-width:56rem){.peek{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto;overflow:visible}}
.peek figure{margin:0;scroll-snap-align:start}
.peek img{display:block;width:100%;height:auto;aspect-ratio:707/1000;object-fit:cover;object-position:top;border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);border:1px solid var(--border);background:var(--card)}
.peek figcaption{margin-top:.65rem;font-size:.98rem;color:var(--muted-foreground);text-align:center}
.peek-hint{font-size:.92rem;color:var(--muted-foreground);text-align:center;margin:.25rem 0 0}
@media (min-width:56rem){.peek-hint{display:none}}
/* who it is for / not for */
.fit{display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:2rem}
@media (min-width:48rem){.fit{grid-template-columns:1fr 1fr}}
.fit .ds-card{padding:1.5rem 1.6rem}
.fit-yes svg{color:var(--success-text)}
.fit-no svg{color:var(--muted-foreground)}
/* launch deadline (must be a real date) */
.deadline{font-size:1.02rem;font-weight:600;color:var(--foreground);margin:.55rem 0 0}
.value-note{font-size:1rem;color:var(--muted-foreground);margin:.35rem 0 0;font-family:var(--font-serif);font-style:italic}
/* two-step checkout */
.stepper{display:flex;gap:.55rem;align-items:center;justify-content:center;flex-wrap:wrap;font-size:.98rem;color:var(--muted-foreground);margin-top:1.1rem}
.stepper .st{display:inline-flex;align-items:center;gap:.45rem}
.stepper .dot{width:1.7rem;height:1.7rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:.88rem;background:var(--muted);color:var(--foreground)}
.stepper .st.on{color:var(--foreground);font-weight:600}
.stepper .st.on .dot{background:var(--primary);color:var(--primary-foreground)}
.stepper .sep{width:1.75rem;height:1px;background:var(--line-strong)}
.field + .field{margin-top:.95rem}
.ds-label .hint{color:var(--muted-foreground);font-weight:400}
.mini-sum{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.1rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);font-size:1.02rem;margin-bottom:1.25rem}
.mini-sum b{font-family:var(--font-serif);font-size:1.25rem}
@media (min-width:54rem){.mini-sum{display:none}}
@media (max-width:53.99rem){.order-grid .order-summary{order:2}.order-grid .order-main{order:1}}
/* Headlines in the brand serif (the kit's `.ds h1{font-family:inherit}` was overriding the classes) */
.ds :is(.h-xl,.h-lg,.h-md){font-family:var(--font-serif)}

/* ============ PREUVES & URGENCE (données réelles, data/preuves.js) ============ */
/* launch announcement bar */
.announce{background:var(--ink);color:var(--ink-foreground);font-size:.95rem;text-align:center;padding:.55rem 1rem;line-height:1.4}
.announce b{font-variant-numeric:tabular-nums;color:var(--ink-foreground)}
/* launch countdown */
.countdown-label{font-size:.95rem;color:var(--muted-foreground);text-align:center;margin:1rem 0 0}
.countdown{display:flex;justify-content:center;gap:.5rem;margin:.55rem 0 .2rem}
.countdown .u{min-width:3.7rem;padding:.55rem .4rem .45rem;border-radius:var(--radius-md);background:var(--background);border:1px solid var(--line-strong);text-align:center}
.countdown .n{display:block;font-family:var(--font-serif);font-weight:700;font-size:1.65rem;line-height:1;font-variant-numeric:tabular-nums}
.countdown .l{display:block;font-size:.78rem;color:var(--muted-foreground);margin-top:.3rem}
/* stars */
.rv-stars{display:inline-flex;gap:.1rem;color:var(--warning);vertical-align:-.15em}
.rv-stars svg{width:1.1em;height:1.1em}
.rv-stars svg.off{color:var(--line-strong)}
.rating-line{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem .55rem;margin-top:1rem;font-size:1rem;color:var(--muted-foreground);text-decoration:none}
.rating-line b{color:var(--foreground)}
/* reviews */
.rev-summary{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;max-width:34rem;margin:1.75rem auto 0;padding:1.4rem 1.5rem}
@media (max-width:30rem){.rev-summary{grid-template-columns:1fr;text-align:center}}
.rev-avg{display:grid;justify-items:center;gap:.3rem}
.rev-avg .big{font-family:var(--font-serif);font-size:3rem;font-weight:700;line-height:1}
.rev-bars{display:grid;gap:.4rem;font-size:.92rem;color:var(--muted-foreground)}
.rev-bar{display:grid;grid-template-columns:4.4rem 1fr 1.8rem;white-space:nowrap;gap:.55rem;align-items:center}
.rev-bar .track{height:.55rem;border-radius:999px;background:var(--muted);overflow:hidden}
.rev-bar .fill{display:block;height:100%;background:var(--warning)}
.quote .meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .75rem;font-size:.92rem;color:var(--muted-foreground)}
.verified{display:inline-flex;align-items:center;gap:.3rem;font-size:.88rem;color:var(--success-text);font-weight:500}
.verified svg{width:1.05em;height:1.05em}
/* press */
.press-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem 2.25rem;margin-top:.9rem}
.press-row a,.press-row span{font-family:var(--font-serif);font-size:1.25rem;font-weight:600;color:var(--muted-foreground);text-decoration:none}
.press-quote{max-width:40rem;margin:1rem auto 0;text-align:center;font-family:var(--font-serif);font-style:italic;font-size:1.15rem;color:var(--foreground)}
/* recent orders line near the price */
.recent{display:inline-flex;align-items:center;gap:.5rem;font-size:.98rem;font-weight:500;color:var(--foreground);margin:.6rem 0 0}
.recent .dot{width:.6rem;height:.6rem;border-radius:999px;background:var(--success);flex:none}
/* order notification toast */
.toast{position:fixed;left:1rem;bottom:1rem;z-index:50;max-width:23rem;display:flex;gap:.75rem;align-items:center;
  padding:.85rem 2.6rem .85rem 1rem;background:var(--popover);color:var(--popover-foreground);border:1px solid var(--border);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);font-size:.98rem;line-height:1.4;
  opacity:0;transform:translateY(.75rem);pointer-events:none;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.toast.show{opacity:1;transform:none;pointer-events:auto}
.toast .ic{width:2.4rem;height:2.4rem;border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center;flex:none;
  background:color-mix(in oklab,var(--success) 14%,transparent);color:var(--success-text)}
.toast .ic svg{width:1.3rem;height:1.3rem}
.toast .when{display:block;font-size:.86rem;color:var(--muted-foreground)}
.toast .x{position:absolute;top:.35rem;right:.35rem;width:2.25rem;height:2.25rem;border:0;background:transparent;color:var(--muted-foreground);cursor:pointer;border-radius:999px;font-size:1.25rem;line-height:1}
@media (hover:hover) and (pointer:fine){.toast .x:hover{background:var(--muted)}}
@media (max-width:52rem){.toast{left:.75rem;right:.75rem;max-width:none;bottom:5.4rem}}
@media (prefers-reduced-motion: reduce){.toast{transition:none;transform:none}}
/* OTO reservation timer (enforced: the offer really disappears at 0) */
.oto-timer{display:block;margin:0 0 1.25rem;padding:.75rem 1rem;border-radius:var(--radius-lg);
  background:var(--warning-tint);color:var(--warning-text);font-size:1.02rem;text-align:center}
.oto-timer b{font-family:var(--font-serif);font-size:1.3rem;font-variant-numeric:tabular-nums;color:var(--foreground)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ VALUE STACK ============ */
.stack{list-style:none;margin:0;padding:0}
.stack li{display:grid;grid-template-columns:1.5rem 1fr auto;gap:.7rem;align-items:start;padding:.85rem 0;border-bottom:1px dashed var(--line-strong)}
.stack li:first-child{padding-top:0}
.stack svg{width:1.35rem;height:1.35rem;color:var(--success-text);margin-top:.15rem}
.stack .nm{display:block;font-weight:600;font-size:1.08rem}
.stack .sd{display:block;font-size:.96rem;color:var(--muted-foreground);margin-top:.1rem}
.stack .v{font-weight:600;white-space:nowrap;color:var(--muted-foreground);font-size:.98rem;padding-top:.1rem}
.stack-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:1rem;font-size:1.12rem;font-weight:600}
.stack-total .amt{font-family:var(--font-serif);font-size:1.55rem;font-weight:700}
.price-reveal{margin-top:1.4rem;padding:1.4rem 1.25rem 1.2rem;border-radius:var(--radius-lg);background:var(--background);border:1px solid var(--line-strong);text-align:center}
.reveal-lbl{margin:.75rem 0 0;font-size:1.05rem;color:var(--muted-foreground)}
.price-reveal .price-line{margin-top:.25rem}
.bonus .val{text-align:right;line-height:1.35}
.bonus .val b{display:block;color:var(--success-text)}

/* ============ FLOATING BUY BAR (all widths) ============ */
.buybar.show{display:block}
.buybar{padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom))}
.buybar .bp{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .9rem;font-size:.98rem;color:var(--muted-foreground)}
.buybar .bp b{font-family:var(--font-serif);font-size:1.3rem;color:var(--foreground)}
.buybar .tm{font-variant-numeric:tabular-nums;font-weight:600;color:var(--primary)}
.buybar .ds-btn{padding:.8rem 1.4rem;font-size:1.02rem;flex:none}
@media (max-width:40rem){.buybar .bp{display:grid;gap:.05rem;font-size:.9rem}.buybar .ds-btn{padding:.75rem 1rem}}
[data-page="vente"] .toast{bottom:5.9rem}
[data-page="vente"] .foot{padding-bottom:7rem}

/* ============ REVIEW PHOTOS ============ */
.rev-dish{margin:-1.5rem -1.5rem 1rem;aspect-ratio:4/3;background:var(--muted);overflow:hidden}
.rev-dish img{display:block;width:100%;height:100%;object-fit:cover}
.rev-dish.nodish{display:none}
.lc-demo .rev-dish.nodish{display:flex;align-items:center;justify-content:center;border-bottom:2px dashed var(--line-strong);color:var(--muted-foreground);font-size:.95rem;padding:1rem;text-align:center}
.lc-demo .rev-dish.nodish::after{content:"Photo du plat réalisé (à ajouter)"}
.rev-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.7rem}
.rev-av{position:relative;width:3.4rem;height:3.4rem;flex:none;border-radius:999px;overflow:hidden;
  background:color-mix(in oklab,var(--primary) 14%,transparent);color:var(--primary);
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-weight:600;font-size:1.2rem}
.rev-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lc-demo .rev-av{outline:2px dashed var(--line-strong);outline-offset:2px}
.rev-who{font-size:.98rem;line-height:1.35;color:var(--muted-foreground)}
.rev-who b{display:block;color:var(--foreground);font-weight:600;font-size:1.02rem}
.quote .rev-text{font-family:var(--font-serif);font-size:1.18rem;line-height:1.45;margin:.55rem 0 .9rem}
.stack-note{margin:.6rem 0 0;font-size:.88rem;line-height:1.5;color:var(--muted-foreground);text-wrap:pretty}
.hero-video video{display:block;width:100%;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);background:var(--ink);aspect-ratio:16/9}
/* A live price span inside a flex button must not be spaced like an icon: "(17 €)", not "( 17 € )" */
.ds-btn:has(> [data-prix]),.ds-btn:has(> [data-buy-total]){gap:0}

/* ============ OTO pages ============ */
.confirm-strip{padding:1rem 1.25rem;display:flex;gap:.75rem;align-items:center;flex-direction:row;border-color:color-mix(in oklab,var(--success) 40%,var(--border))}
.confirm-strip svg{width:1.8rem;height:1.8rem;color:var(--success-text);flex:none}
.confirm-strip span{font-size:1.05rem}
.choices{border:0;margin:0;padding:0;display:grid;gap:.65rem}
.choice{display:flex;gap:.8rem;align-items:flex-start;padding:.95rem 1rem;border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--background);cursor:pointer}
.choice input{width:1.25rem;height:1.25rem;margin-top:.15rem;flex:none;accent-color:var(--primary)}
.choice .sd{display:block;font-size:.96rem;color:var(--muted-foreground);margin-top:.1rem}
.choice:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 2px var(--ring)}
.choice input:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
/* book fallback illustration (until the real mockup is added) */
.books-fallback{display:none;justify-content:center;gap:.85rem;padding:1.5rem;background:var(--cream-deep);border-radius:var(--radius-xl);width:min(34rem,100%)}
.bk{display:flex;align-items:center;justify-content:center;width:7rem;aspect-ratio:3/4;border-radius:.35rem .6rem .6rem .35rem;
  background:oklch(0.57 0.11 var(--h));color:oklch(0.97 0.02 88);box-shadow:inset .45rem 0 0 oklch(0.3 0.05 var(--h) / .45),var(--shadow-lg);
  font-family:var(--font-serif);font-weight:600;font-size:.95rem;text-align:center;padding:.6rem;line-height:1.2}

/* ============ MYTHS & BEFORE/AFTER ============ */
.myths{display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:2rem}
@media (min-width:48rem){.myths{grid-template-columns:1fr 1fr}}
.myth{padding:1.4rem 1.5rem;align-items:flex-start}
.myth-said{margin:0;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-foreground)}
.myth-q{margin:.4rem 0 .8rem;font-family:var(--font-serif);font-style:italic;font-size:1.22rem;line-height:1.35;color:var(--muted-foreground)}
.myth-true{margin:0 0 .9rem;font-size:1.06rem;line-height:1.55;text-wrap:pretty}
.myth-true strong{color:var(--primary)}
.ba{max-width:52rem;margin:2rem auto 0;display:grid;gap:.75rem}
.ba-head{display:grid;grid-template-columns:1fr 1fr;gap:1rem;font-weight:600;font-size:1rem;color:var(--muted-foreground);padding:0 1rem}
.ba-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.ba-row p{margin:0;display:grid;grid-template-columns:1.4rem 1fr;gap:.6rem;align-items:start;padding:1rem 1.1rem;border-radius:var(--radius-lg);font-size:1.05rem;line-height:1.5}
.ba-row svg{width:1.3rem;height:1.3rem;margin-top:.12rem}
.ba-before{background:var(--background);border:1px solid var(--border);color:var(--muted-foreground)}
.ba-before svg{color:var(--muted-foreground)}
.ba-after{background:var(--card);border:1px solid color-mix(in oklab,var(--success) 35%,var(--border));color:var(--foreground);box-shadow:var(--shadow-sm)}
.ba-after svg{color:var(--success-text)}
@media (max-width:40rem){.ba-head{display:none}.ba-row{grid-template-columns:1fr;gap:.4rem}.ba-row + .ba-row{margin-top:.6rem}}

/* `.lede{margin:0}` was cancelling `.narrow{margin-inline:auto}` → centred ledes drifted left */
.lede.narrow{margin-inline:auto}
/* launch bar: long timer on wide screens, short one on phones (one line) */
.announce .cd-s{display:none}
@media (max-width:40rem){.announce .cd-l{display:none}.announce .cd-s{display:inline}}