/* ============================================================
   public/css/site.css — L'Économe Public Site
   Vert Jean-Talon : accent unique (#4A9E46) sur blanc crème tabac.
   Tokens mirror /public/css/app.css so the public + app share surfaces.
   ============================================================ */

/* ── DESIGN TOKENS (mirror app.css) ─────────────────────────── */
:root {
  --font-display: "Young Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Commissioner", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;

  --paper: oklch(0.985 0.006 75); /* #faf6ec — blanc crème option B */
  --paper-soft: oklch(0.965 0.008 75);
  --paper-sheet: oklch(0.996 0.002 75);
  --paper-deep: oklch(0.935 0.01 75);

  --ink: oklch(0.22 0.016 75);
  --ink-soft: oklch(0.4 0.014 72);
  --ink-muted: oklch(0.52 0.01 70);
  --ink-fade: oklch(0.56 0.01 70); /* remonté à 4.6:1 AA */

  /* Vert Jean-Talon — accent unique */
  --accent: oklch(0.59 0.16 143);
  --accent-deep: oklch(0.44 0.13 143);
  --accent-bright: oklch(0.72 0.17 143);
  --accent-tint: oklch(0.958 0.026 143);
  --accent-tint2: oklch(0.91 0.05 143);
  --accent-glow: 0 6px 28px oklch(0.59 0.16 143 / 0.26);

  /* Danger — oxblood retiré du quotidien */
  --danger: oklch(0.44 0.14 25);
  --danger-deep: oklch(0.34 0.12 25);
  --danger-bright: oklch(0.58 0.16 25);
  --danger-tint: oklch(0.945 0.035 25);

  /* Legacy aliases — tous pointent --accent ou --danger */
  --brick: var(--accent);
  --brick-deep: var(--accent-deep);
  --brick-bright: var(--accent-bright);
  --brick-tint: var(--accent-tint);
  --brick-tint2: var(--accent-tint2);
  --brick-glow: var(--accent-glow);
  --canneberge: var(--danger);
  --labrador: var(--accent);
  --labrador-deep: var(--accent-deep);
  --labrador-bright: var(--accent-bright);
  --labrador-tint: var(--accent-tint);
  --labrador-tint2: var(--accent-tint2);
  --labrador-glow: var(--accent-glow);
  --moutarde: oklch(0.54 0.13 82); /* conservé pour season automne */
  --moutarde-deep: oklch(0.4 0.11 80);
  --moutarde-bright: oklch(0.68 0.13 85);
  --moutarde-tint: oklch(0.945 0.038 82);
  --moutarde-tint2: oklch(0.9 0.045 82);
  --moutarde-glow: 0 6px 28px oklch(0.54 0.13 82 / 0.22);
  --oxblood: var(--danger);
  --oxblood-deep: var(--danger-deep);
  --oxblood-bright: var(--danger-bright);
  --oxblood-tint: var(--danger-tint);

  --courge: oklch(0.62 0.14 68);
  --courge-tint: oklch(0.955 0.038 68);
  --ardoise: oklch(0.52 0.1 220);
  --paille: oklch(0.82 0.13 72);

  /* Fixed cream — text on accent backgrounds, never swaps in dark mode */
  --cream-fixed: oklch(0.992 0.006 75);
  --cream-fixed-soft: oklch(0.992 0.006 75 / 0.82);
  --cream-fixed-fade: oklch(0.992 0.006 75 / 0.55);

  /* Aliases */
  --bg: var(--paper);
  --white: var(--paper-sheet);
  --ink2: var(--ink-soft);
  --muted: var(--ink-muted);
  --muted2: var(--ink-fade);
  --brand: var(--accent);
  --brand-light: var(--accent-bright);
  --brand-dark: var(--accent-deep);
  --brand-pale: var(--accent-tint);
  --red: var(--danger);
  --amber: var(--courge);
  --blue: var(--ardoise);
  --green: var(--accent);
  --green-pale: var(--accent-tint);

  --border: oklch(0.82 0.018 75);
  --border2: oklch(0.88 0.014 75);
  --shadow: 0 1px 2px oklch(0.22 0.016 75 / 0.08), 0 1px 3px oklch(0.22 0.016 75 / 0.09);
  --shadow-md: 0 6px 20px oklch(0.22 0.016 75 / 0.12), 0 2px 6px oklch(0.22 0.016 75 / 0.08);
  --shadow-lg: 0 22px 56px oklch(0.22 0.016 75 / 0.16), 0 4px 12px oklch(0.22 0.016 75 / 0.09);

  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --max-w: 1180px;
}

/* ── DARK MODE — Marketing pages aussi (fix audit sévère 2026-06-04)
   Avant : site.css n'avait aucun [data-theme="dark"], un user qui force
   dark mode système voyait /site, /tarifs, /faq en light forcé. Cohérence
   rompue avec l'app. Palette miroir app.css : warm tabac-dark paper,
   vert Jean-Talon dark plus lumineux pour tenir sur paper sombre. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: oklch(0.18 0.014 75);
    --paper-soft: oklch(0.15 0.012 75);
    --paper-sheet: oklch(0.23 0.016 75);
    --paper-deep: oklch(0.12 0.01 75);

    --ink: oklch(0.94 0.01 75);
    --ink-soft: oklch(0.8 0.012 75);
    --ink-muted: oklch(0.72 0.012 75);
    --ink-fade: oklch(0.6 0.01 75);

    --accent: oklch(0.72 0.14 143);
    --accent-deep: oklch(0.56 0.13 143);
    --accent-bright: oklch(0.84 0.14 143);
    --accent-tint: oklch(0.28 0.042 143);
    --accent-tint2: oklch(0.34 0.05 143);
    --accent-glow: 0 8px 32px oklch(0.72 0.14 143 / 0.28);

    --danger: oklch(0.62 0.18 25);
    --danger-deep: oklch(0.5 0.16 25);
    --danger-bright: oklch(0.74 0.2 25);
    --danger-tint: oklch(0.3 0.06 25);
  }
}
[data-theme="dark"] {
  --paper: oklch(0.18 0.014 75);
  --paper-soft: oklch(0.15 0.012 75);
  --paper-sheet: oklch(0.23 0.016 75);
  --paper-deep: oklch(0.12 0.01 75);
  --ink: oklch(0.94 0.01 75);
  --ink-soft: oklch(0.8 0.012 75);
  --ink-muted: oklch(0.72 0.012 75);
  --ink-fade: oklch(0.6 0.01 75);
  --accent: oklch(0.72 0.14 143);
  --accent-deep: oklch(0.56 0.13 143);
  --accent-bright: oklch(0.84 0.14 143);
  --accent-tint: oklch(0.28 0.042 143);
  --accent-tint2: oklch(0.34 0.05 143);
  --accent-glow: 0 8px 32px oklch(0.72 0.14 143 / 0.28);
  --danger: oklch(0.62 0.18 25);
  --danger-deep: oklch(0.5 0.16 25);
  --danger-bright: oklch(0.74 0.2 25);
  --danger-tint: oklch(0.3 0.06 25);
}

/* ── RESET ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-y: auto;
}
body {
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.58;
  font-size: 16px;
  text-rendering: optimizeLegibility;
}
/* Numbers in editorial prices/hero stats: tabular */
.num,
.hero-stat-val,
.plan-price,
.mockup-budget-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}
ul,
ol {
  list-style: none;
}

/* ── NAV ────────────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--paper-sheet);
  border-bottom: 1px solid var(--border);
  transition:
    transform 0.3s,
    opacity 0.3s,
    color 0.3s,
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
  /* iOS safe area for the notch */
  padding-top: env(safe-area-inset-top, 0px);
}
.site-nav.scrolled {
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 oklch(0.22 0.02 110 / 0.05);
}
.nav-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Sticky CTA visibility — only at mobile widths and only when JS toggles
   `.is-visible` (i.e. when the hero CTA has scrolled out of view). */
@media (max-width: 768px) {
  .sticky-cta-mobile.is-visible {
    display: block;
  }
}
/* Body reserves space only when the sticky CTA is actually visible
   (toggled by JS via IntersectionObserver on the hero CTA). */
@media (max-width: 768px) {
  body.has-sticky-cta {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 101;
}
.nav-logo-text {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.nav-logo-text em {
  color: var(--brand);
  font-style: normal;
}
/* Inline-É glyph — replaces the É character in "L'Économe" so the wordmark
   carries the brand mark without a separate icon. Defensive: overrides the
   global `img { display:block; height:auto; max-width:100% }` reset so the
   SVG stays inline at cap-height regardless of source order / cache state. */
img.brand-e {
  display: inline-block;
  height: 1.08em;
  width: auto;
  max-width: none;
  vertical-align: -0.1em;
  color: var(--brand);
  margin: 0 0.01em;
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links > a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .nav-links > a:hover,
  .nav-links > a.active {
    color: var(--ink);
  }
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-btn-sec {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  /* Hex literal — vert Jean-Talon, pré-oklch Safari fallback */
  color: #4a9e46;
  border-radius: 980px;
  transition:
    transform 0.2s,
    opacity 0.2s,
    color 0.2s,
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .nav-btn-sec:hover {
    background: #e6f1e6;
  }
}
.nav-btn-main {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 20px;
  /* Hex literals — pre-oklch Safari fallback (no cascade tricks: invalid var falls
     to initial value, not previous declaration). Public site has no dark mode
     so hex is final. */
  color: #faf6ec;
  border-radius: 980px;
  background: #4a9e46;
  transition:
    transform 0.2s,
    opacity 0.2s,
    color 0.2s,
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .nav-btn-main:hover {
    background: #3a7f36;
  }
}

/* Burger */
.nav-burger {
  display: none;
  width: 24px;
  height: 20px;
  background: transparent;
  border: 0;
  position: relative;
  z-index: 101;
  cursor: pointer;
}
/* Hit area 44×44 invisible (audit re-pass P1 mobile) : avant 24×20
   strict = iPhone miss rate élevé. Pseudo-élément expand la zone
   tactile sans toucher au layout visuel. */
.nav-burger::after {
  content: "";
  position: absolute;
  inset: -12px -10px;
  /* Garde l'élément invisible mais hittable */
}
.nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  position: absolute;
  left: 0;
  transition:
    transform 0.3s,
    opacity 0.3s,
    color 0.3s,
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}
.nav-burger span:nth-child(1) {
  top: 0;
}
.nav-burger span:nth-child(2) {
  top: 9px;
}
.nav-burger span:nth-child(3) {
  top: 18px;
}
.nav-burger.open span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}
.nav-burger.open span:nth-child(2) {
  opacity: 0;
}
.nav-burger.open span:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 980px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  background: var(--brand);
  color: var(--cream-fixed);
  transition:
    transform 0.2s,
    opacity 0.2s,
    color 0.2s,
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-main:hover {
    background: var(--brand-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
}
.btn-sec {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 980px;
  border: 1.5px solid var(--border);
  background: var(--paper-sheet);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  transition:
    transform 0.2s,
    opacity 0.2s,
    color 0.2s,
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-sec:hover {
    border-color: var(--brand);
    color: var(--brand);
  }
}
.btn-xl {
  padding: 18px 40px;
  font-size: 17px;
}
.btn-full {
  width: 100%;
}

/* ── FLASH ──────────────────────────────────────────────────── */
.site-flash {
  max-width: var(--max-w);
  margin: 80px auto 0;
  padding: 14px 24px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
}
.site-flash-success {
  background: var(--brand-pale);
  color: var(--brand-dark);
  border: 1px solid oklch(0.59 0.16 143 / 0.18);
}

/* ── SECTION HELPERS ────────────────────────────────────────── */
.section {
  padding: clamp(72px, 10vw, 120px) 24px;
}
.section-alt {
  background: var(--paper-soft);
}
.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.section-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 16px;
  display: inline-block;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 400; /* Young Serif is one-weight */
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin-bottom: 22px;
  text-wrap: balance;
  max-width: 22ch;
}
.section-center .section-title {
  margin-left: auto;
  margin-right: auto;
}
.section-title em {
  color: var(--accent);
  font-style: italic;
  font-family: var(--font-display);
}
.section-sub {
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 62ch;
}
.section-center {
  text-align: center;
}
.section-center .section-sub {
  margin: 0 auto 44px;
}

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
  padding: 140px 24px 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  position: relative;
  overflow: visible;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, oklch(0.59 0.16 143 / 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, oklch(0.59 0.16 143 / 0.06) 0%, transparent 50%);
}
.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 64px;
  position: relative;
}
.hero-content {
  flex: 1;
  max-width: 560px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 980px;
  background: var(--brand-pale);
  border: 1px solid oklch(0.59 0.16 143 / 0.14);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-dark);
  margin-bottom: 24px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.5vw, 76px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin-bottom: 26px;
  text-wrap: balance;
}
.hero-title em {
  color: var(--accent);
  font-style: italic;
  font-family: var(--font-display);
}
.hero-sub {
  font-size: 19px;
  color: var(--ink-soft);
  line-height: 1.62;
  margin-bottom: 36px;
  max-width: 52ch;
  font-weight: 400;
}
.hero-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.hero-note {
  font-size: 13px;
  color: var(--muted);
}

/* Hero stats */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 20px 28px;
  background: var(--paper-sheet);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.hero-stat {
  flex: 1;
  text-align: center;
  padding: 4px 0;
}
.hero-stat-val {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hero-stat-lbl {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.3;
}
.hero-stat-div {
  width: 1px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
}

/* Hero mockup */
.hero-mockup {
  flex-shrink: 0;
  width: 380px;
  position: relative;
}
.mockup-phone {
  background: var(--paper-sheet);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px oklch(0.22 0.02 110 / 0.03);
}
.mockup-status {
  padding: 10px 20px 6px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.mockup-header {
  padding: 8px 20px 14px;
}
.mockup-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.mockup-header p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.mockup-budget {
  margin: 0 16px;
  padding: 16px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent-tint), var(--accent-tint2));
  border: 1px solid oklch(0.59 0.16 143 / 0.14);
}
.mockup-budget-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-dark);
  font-weight: 700;
}
.mockup-budget-amount {
  font-size: 32px;
  font-weight: 800;
  color: var(--ink);
  margin: 4px 0;
}
.mockup-budget-sub {
  font-size: 11px;
  color: var(--muted);
}
.mockup-budget-sub strong {
  color: var(--brand);
}
.mockup-meals {
  padding: 16px;
}
.mockup-meal {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 4px;
  transition: background 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  .mockup-meal:hover {
    background: var(--bg);
  }
}
.mockup-meal-emoji {
  font-family: "Young Serif", Georgia, serif;
  font-size: 22px;
  color: var(--brand-dark, #355c4d);
  font-weight: 400;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: -0.02em;
}
.mockup-meal-info {
  flex: 1;
}
.mockup-meal-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.mockup-meal-detail {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}
.mockup-meal-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.mockup-meal-price.savings {
  color: var(--brand);
}

/* CLEANUP 2026-05-10 — anciennes classes legacy retirées (audit) :
   .features-header, .features-grid, .feat-card, .feat-card-highlight,
   .feat-icon, .feat-title, .feat-desc, .showcase, .showcase-content,
   .showcase-visual, .showcase-visual-inner, .showcase-badge,
   .showcase-features, .showcase-feat, .pricing-grid, .plan-card,
   .plan-featured, .plan-badge, .plan-name, .plan-price, .plan-trial,
   .plan-features. ~120 lignes mortes. Le site utilise désormais les
   chapter-numerals + .home-pricing-grid + tarif/tarif-featured. */

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-q {
  width: 100%;
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  transition: color 0.2s;
  letter-spacing: -0.005em;
}
@media (hover: hover) and (pointer: fine) {
  .faq-q:hover {
    color: var(--accent);
  }
}
.faq-q::after {
  content: "+";
  font-size: 22px;
  font-weight: 300;
  color: var(--muted);
  transition: transform 0.3s;
  flex-shrink: 0;
  margin-left: 16px;
}
.faq-item.open .faq-q::after {
  content: "-";
  color: var(--brand);
}
.faq-a {
  /* Animation grid 0fr → 1fr (cf. fin de file). Plus de max-height clip. */
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
}
.faq-item.open .faq-a {
  padding-bottom: 24px;
}

/* ── CONTACT ────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.contact-info h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}
.contact-info p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 28px;
}
.contact-detail {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.contact-detail-icon {
  font-size: 24px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-detail-text {
  font-size: 14px;
  color: var(--ink2);
}
.contact-detail-text strong {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

.contact-form {
  background: var(--paper-sheet);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow);
}
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--paper-sheet);
  transition: border-color 0.2s;
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px oklch(0.59 0.16 143 / 0.14);
}
.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

/* ── LEGAL PAGES ────────────────────────────────────────────── */
.legal-content {
  max-width: 720px;
  margin: 0 auto;
}
.legal-content h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin: 40px 0 16px;
}
.legal-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 28px 0 12px;
}
.legal-content p {
  font-size: 15px;
  color: var(--ink2);
  line-height: 1.7;
  margin-bottom: 16px;
}
.legal-content ul {
  margin: 0 0 16px 20px;
  list-style: disc;
}
.legal-content ul li {
  font-size: 15px;
  color: var(--ink2);
  line-height: 1.7;
  margin-bottom: 6px;
}

/* ── CTA BANNER ─────────────────────────────────────────────── */
.cta-banner {
  text-align: center;
  padding: 100px 24px;
  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--paper-soft) 50%, var(--accent-tint) 100%);
  border-top: 1px solid var(--border);
}
.cta-banner .section-title {
  margin-bottom: 16px;
}
.cta-banner p {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 32px;
}
.cta-note {
  font-size: 13px;
  color: var(--muted2);
  margin-top: 16px;
}

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 64px 24px 32px;
}
.footer-container {
  max-width: var(--max-w);
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.footer-logo span {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.footer-logo em {
  color: var(--brand);
  font-style: normal;
}
.footer-tagline {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.footer-social {
  display: flex;
  gap: 12px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper-sheet);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition:
    transform 0.2s,
    opacity 0.2s,
    color 0.2s,
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .footer-social a:hover {
    color: var(--brand);
    border-color: var(--brand);
  }
}
.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--muted);
  padding: 6px 0;
  transition: color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .footer-col a:hover {
    color: var(--brand);
  }
}
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer-bottom p {
  font-size: 13px;
  color: var(--muted2);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 1024px) {
  .hero-inner {
    gap: 40px;
  }
  .hero-title {
    font-size: 48px;
    letter-spacing: -2px;
  }
  .hero-mockup {
    width: 320px;
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .section-title {
    font-size: 38px;
    letter-spacing: -1px;
  }
  .showcase {
    gap: 48px;
  }
  .showcase h3 {
    font-size: 28px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .section {
    padding: 64px 20px;
  }

  /* Nav mobile */
  .nav-burger {
    display: block;
  }
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Hex first — works on every browser, even pre-oklch Safari */
    background: #faf6ec !important;
    background-color: #faf6ec !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    opacity: 0;
    visibility: hidden;
    transition:
      transform 0.3s,
      opacity 0.3s,
      color 0.3s,
      background 0.3s,
      border-color 0.3s,
      box-shadow 0.3s;
    z-index: 999;
    padding: 80px 20px 40px;
  }
  .nav-links.open {
    opacity: 1 !important;
    visibility: visible !important;
    background: #faf6ec !important;
    background-color: #faf6ec !important;
  }
  .nav-links > a {
    font-size: 20px;
    font-weight: 600;
  }
  .nav-actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
  }
  .nav-btn-main,
  .nav-btn-sec {
    font-size: 16px;
    padding: 12px 32px;
  }

  /* Hero mobile */
  .hero {
    padding: 100px 20px 64px;
    min-height: auto;
  }
  .hero-inner {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }
  .hero-content {
    max-width: 100%;
  }
  .hero-title {
    font-size: 38px;
    letter-spacing: -1.5px;
  }
  .hero-sub {
    font-size: 16px;
    max-width: 100%;
    margin: 0 auto 28px;
  }
  .hero-badge {
    margin: 0 auto 20px;
  }
  .hero-cta {
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .hero-stats {
    flex-direction: column;
    gap: 16px;
  }
  .hero-stat-div {
    width: 80%;
    height: 1px;
  }
  .hero-mockup {
    width: 100%;
    max-width: 340px;
  }

  /* Features mobile */
  .features-grid {
    grid-template-columns: 1fr;
  }

  /* Showcase mobile */
  .showcase,
  .showcase.reverse {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 64px;
  }
  .showcase-visual {
    min-height: 240px;
    padding: 24px;
  }
  .showcase h3 {
    font-size: 26px;
  }

  /* Pricing mobile */
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .plan-featured {
    transform: none;
  }
  @media (hover: hover) and (pointer: fine) {
    .plan-featured:hover {
      transform: translateY(-4px);
    }
  }
  .plan-badge {
    position: static;
    transform: none;
    display: inline-block;
    margin-bottom: 12px;
  }

  /* Contact mobile */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Footer mobile */
  .site-footer {
    padding: 32px 20px 20px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
  }
  .footer-brand {
    text-align: center;
  }
  .footer-social {
    justify-content: center;
  }
  .footer-col {
    text-align: center;
  }
  .footer-col h4 {
    margin-bottom: 8px;
  }
  .footer-bottom p {
    font-size: 11px;
  }

  /* CTA */
  .cta-banner {
    padding: 64px 20px;
  }
  .cta-banner .section-title {
    font-size: 30px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .hero-title {
    font-size: 32px;
    letter-spacing: -1px;
  }
  .section-title {
    font-size: 28px;
  }
  .btn-xl {
    padding: 14px 28px;
    font-size: 15px;
  }
  .hero-stat-val {
    font-size: 22px;
  }
  .plan-price {
    font-size: 38px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   EDITORIAL ACCUEIL — cookbook / magazine rhythm
   Used only by the public landing. Not shared with the app shell.
   ============================================================ */

/* ── Masthead — fine ligne typographique éditoriale ────────── */
/* Une seule rangée centrée, deux items max séparés par un point.
   La marque est dans la navbar — pas besoin de la répéter ici. */
.masthead {
  max-width: var(--max-w);
  margin: calc(72px + env(safe-area-inset-top, 0px)) auto 0;
  padding: 22px 32px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.masthead span {
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  position: relative;
}
.masthead span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── Hero editorial — asymmetric headline + tilted phone ────── */
.hero-editorial {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 104px) 24px clamp(72px, 10vw, 128px);
  position: relative;
}
.hero-editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: end;
}
.hero-editorial-main {
  position: relative;
}

.hero-editorial-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-editorial-eyebrow::after {
  content: "";
  flex: 1;
  max-width: 140px;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

.hero-editorial-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 8vw, 108px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 32px;
  text-wrap: balance;
}
.hero-editorial-title em {
  color: var(--accent);
  font-style: italic;
  font-family: var(--font-display);
}

.hero-editorial-lede {
  font-family: var(--font-body);
  font-size: clamp(16.5px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 40px;
  max-width: 52ch;
  font-weight: 400;
}
/* Refined drop cap — Young Serif, larger, with a subtle baseline rule */
.hero-editorial-lede::first-letter {
  font-family: var(--font-display);
  font-size: 4.4em;
  line-height: 0.82;
  float: left;
  padding: 10px 16px 4px 0;
  color: var(--accent);
  font-weight: 400;
}

.hero-editorial-cta {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.hero-editorial-cta .hero-note {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-muted);
  font-style: italic;
  line-height: 1.5;
}

/* Hero ticker — typographic line, the live counter as a serif aside */
.hero-ticker {
  position: relative;
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  color: var(--ink-soft);
  padding: 22px 0 0 32px;
  max-width: 52ch;
  line-height: 1.55;
}
.hero-ticker::before {
  content: "";
  position: absolute;
  left: 0;
  top: 32px;
  width: 20px;
  height: 1.5px;
  background: var(--accent);
}
.hero-ticker strong {
  color: var(--accent);
  font-weight: 400;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

/* Receipt hero — the signature moment (Phase 1 — 2026-05-11)
   --------------------------------------------------------------
   Replaces the previous phone mockup. The receipt IS the brand :
   - cream thermal paper with sawtooth perforated top edge
   - monospace dot-matrix items in 2 columns
   - three items struck through with hand-drawn green pen marker
   - editorial side annotation in italic Young Serif
   Convergence /critique + senior consumer DA (2026-05-11). */
.hero-editorial-aside {
  position: relative;
  padding-bottom: 16px;
}
.hero-editorial-receipt-wrap {
  position: relative;
  transform: rotate(-2.4deg);
  transform-origin: 50% 90%;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .hero-editorial-receipt-wrap:hover {
    transform: rotate(-1deg) translateY(-6px);
  }
}

.receipt-hero {
  position: relative;
  background: oklch(0.965 0.022 92); /* warm thermal paper cream */
  color: oklch(0.22 0.02 90);
  max-width: 320px;
  margin: 0 auto;
  padding-top: 14px; /* leaves room for perforation */
  box-shadow:
    0 36px 64px oklch(0.22 0.02 110 / 0.14),
    0 14px 32px oklch(0.22 0.02 110 / 0.08),
    0 0 0 1px oklch(0.22 0.02 110 / 0.04);
  /* subtle paper grain via overlapping gradient noise */
  background-image: linear-gradient(to bottom, oklch(0.965 0.022 92), oklch(0.94 0.022 88));
}
/* Perforated top edge — sawtooth via clip-path */
.receipt-perforation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: inherit;
  background-image: inherit;
  clip-path: polygon(
    0 100%,
    0 50%,
    4% 100%,
    8% 50%,
    12% 100%,
    16% 50%,
    20% 100%,
    24% 50%,
    28% 100%,
    32% 50%,
    36% 100%,
    40% 50%,
    44% 100%,
    48% 50%,
    52% 100%,
    56% 50%,
    60% 100%,
    64% 50%,
    68% 100%,
    72% 50%,
    76% 100%,
    80% 50%,
    84% 100%,
    88% 50%,
    92% 100%,
    96% 50%,
    100% 100%
  );
}

.receipt-content {
  padding: 6px 26px 22px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.receipt-header {
  text-align: center;
  padding: 10px 0 14px;
}
.receipt-store {
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  color: oklch(0.22 0.02 90);
}
.receipt-meta {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: oklch(0.45 0.02 90);
  margin-top: 4px;
}

.receipt-rule {
  border-top: 1px dashed oklch(0.45 0.02 90 / 0.55);
  margin: 6px 0;
}

.receipt-items {
  list-style: none;
  margin: 6px 0;
  padding: 0;
}
.receipt-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  gap: 12px;
}
.receipt-name {
  flex: 1;
  text-transform: uppercase;
  font-weight: 500;
  color: oklch(0.28 0.02 90);
}
.receipt-price {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: oklch(0.28 0.02 90);
  flex-shrink: 0;
}

/* HAND-DRAWN GREEN PEN MARKER on selected items */
.receipt-item--marked {
  color: oklch(0.4 0.16 145);
}
.receipt-item--marked .receipt-name,
.receipt-item--marked .receipt-price {
  color: oklch(0.4 0.16 145);
  font-weight: 700;
}
.receipt-item--marked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  right: -10px;
  height: 2.5px;
  background: oklch(0.55 0.2 145);
  border-radius: 2px;
  transform: translateY(-50%) rotate(-1.2deg);
  opacity: 0.85;
  z-index: 1;
  pointer-events: none;
}
/* small ink bleed at marker ends */
.receipt-item--marked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -12px;
  width: 6px;
  height: 6px;
  background: oklch(0.55 0.2 145);
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: 0.55;
  z-index: 1;
}

.receipt-total {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 0 4px;
  color: oklch(0.22 0.02 90);
}
.receipt-total span:last-child {
  font-variant-numeric: tabular-nums;
}

.receipt-footer {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: oklch(0.45 0.02 90);
  margin-top: 10px;
}

/* Side annotation : handwritten margin note in Young Serif italic */
.receipt-annotation {
  position: absolute;
  top: 32%;
  right: -38px;
  max-width: 160px;
  transform: rotate(3.4deg);
  pointer-events: none;
}
.receipt-annotation em {
  font-family: var(--font-display, "Young Serif", Georgia, serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.35;
  color: oklch(0.4 0.16 145); /* same pen ink as marker */
  display: inline-block;
  letter-spacing: -0.01em;
}
/* Hint context-aware desktop vs touch (audit /critique pass 3) :
   sur device sans hover réel (mobile/tablette touch), on affiche
   "Tape les items cerclés" au lieu de "Survole". */
.receipt-annotation-text-mobile { display: none; }
@media (hover: none), (pointer: coarse) {
  .receipt-annotation-text-desktop { display: none; }
  .receipt-annotation-text-mobile { display: inline-block; }
}
.receipt-annotation-mark {
  display: block;
  font-size: 22px;
  color: oklch(0.55 0.2 145);
  font-family: "Young Serif", Georgia, serif;
  line-height: 1;
  margin-bottom: 4px;
  margin-left: -12px;
  transform: rotate(-20deg);
}

/* Responsive — mobile : straighten + hide side annotation overflow */
@media (max-width: 900px) {
  .hero-editorial-receipt-wrap {
    transform: rotate(-1.2deg);
  }
  .receipt-annotation {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin: 18px auto 0;
    text-align: center;
    max-width: 280px;
  }
  .receipt-annotation-mark {
    margin-left: 0;
    transform: none;
    display: inline-block;
  }
}
@media (max-width: 640px) {
  .hero-editorial-receipt-wrap {
    transform: rotate(0);
  }
  .receipt-hero {
    max-width: 300px;
  }
  .receipt-content {
    padding: 6px 22px 20px;
    font-size: 12px;
  }
}
.hero-editorial-caption {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-style: italic;
  color: var(--ink-muted);
  text-align: right;
  margin-top: 26px;
  padding-right: 10px;
  line-height: 1.55;
  max-width: 300px;
  margin-left: auto;
}
.hero-editorial-caption strong {
  color: var(--ink-soft);
  font-weight: 400;
  display: block;
  margin-bottom: 6px;
}

/* ── Stats rule — horizontal editorial line with 3 stats ───── */
.stats-rule {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--border);
}
.stats-rule-item {
  padding: 40px 28px 36px;
  border-right: 1px solid var(--border);
  text-align: center;
}
.stats-rule-item:last-child {
  border-right: none;
}
.stats-rule-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
.stats-rule-value {
  font-family: var(--font-display);
  font-size: clamp(42px, 5.2vw, 68px);
  color: var(--ink);
  line-height: 0.94;
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
}
.stats-rule-value sub {
  font-family: var(--font-body);
  font-size: 0.26em;
  color: var(--ink-muted);
  vertical-align: baseline;
  font-weight: 400;
  margin-left: 8px;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* ── Chapter — magazine article head (sticky roman numeral) ── */
.chapter {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(88px, 12vw, 144px) 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.chapter-head {
  position: sticky;
  top: 104px;
}
.chapter-numeral {
  font-family: var(--font-display);
  font-size: clamp(96px, 14vw, 180px);
  line-height: 0.82;
  color: var(--accent);
  letter-spacing: -0.04em;
}
.chapter-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 14px;
}
.chapter-body {
  min-width: 0;
}
.chapter-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.8vw, 60px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0 0 26px;
  text-wrap: balance;
}
.chapter-title em {
  color: var(--accent);
  font-style: italic;
  font-family: var(--font-display);
}
.chapter-body > p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 58ch;
  margin-bottom: 20px;
}

/* ── Editorial steps — numbered list with serif numerals ───── */
.editorial-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 44px 0 0;
  padding: 0;
}
.editorial-step {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 28px 0;
  border-top: 1px solid var(--border);
}
.editorial-step:last-child {
  border-bottom: 1px solid var(--border);
}
.editorial-step-n {
  font-family: var(--font-display);
  font-size: 46px;
  color: var(--accent);
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.editorial-step-body h3 {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.008em;
  line-height: 1.16;
}
.editorial-step-body p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
  max-width: 58ch;
}

/* ── Pull quote — full-width italic serif with oversized guillemets ── */
.pull {
  max-width: 960px;
  margin: clamp(48px, 8vw, 96px) auto;
  padding: clamp(48px, 6vw, 80px) 32px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.014em;
  color: var(--ink);
  text-align: center;
  font-style: italic;
  position: relative;
  text-wrap: balance;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pull::before {
  content: "«";
  display: block;
  font-size: 1.8em;
  color: var(--accent);
  opacity: 0.5;
  line-height: 0.5;
  margin-bottom: 24px;
  font-style: normal;
}
.pull::after {
  content: " »";
  color: var(--accent);
  opacity: 0.5;
  font-style: normal;
}
.pull-attribution {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 32px;
}

/* ── Editorial calculator card ─────────────────────────────── */
.calc-editorial {
  background: var(--paper-sheet);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 4vw, 52px);
  max-width: 720px;
  margin: 40px 0 0;
  box-shadow: var(--shadow-md);
}
.calc-editorial-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 22px;
  display: block;
}
.calc-editorial-slider-row {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 40px;
}
.calc-editorial-slider-row input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: var(--paper-deep);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.calc-editorial-slider-row input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 4px oklch(0.59 0.16 143 / 0.3),
    var(--accent-glow);
}
.calc-editorial-slider-row input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px oklch(0.59 0.16 143 / 0.3);
}
.calc-editorial-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: var(--accent-glow);
  border: 4px solid var(--paper-sheet);
  transition: transform 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .calc-editorial-slider-row input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
  }
}
.calc-editorial-slider-row input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 4px solid var(--paper-sheet);
}
.calc-editorial-current {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--ink);
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
  min-width: 140px;
  text-align: right;
  line-height: 1;
}
.calc-editorial-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 32px 0 8px;
  border-top: 1px solid var(--border);
}
.calc-editorial-result-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.calc-editorial-result-value {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  color: var(--ink);
  letter-spacing: -0.022em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.calc-editorial-result-value.hl {
  color: var(--accent);
}
.calc-editorial-cta {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.calc-editorial-cta .hero-note {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-muted);
  max-width: 40ch;
  line-height: 1.5;
}

/* ── Receipts — photographic paper receipts side-by-side ───── */
.receipts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 44px);
  margin: 44px 0 24px;
}
.receipt {
  background: var(--paper-sheet);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 36px 32px 40px;
  box-shadow: var(--shadow-md);
  position: relative;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}
.receipt::before,
.receipt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background-image: radial-gradient(circle at 7px 100%, transparent 5px, var(--paper-sheet) 5.5px);
  background-size: 14px 10px;
  background-repeat: repeat-x;
}
.receipt::before {
  top: -9px;
  transform: rotate(180deg);
}
.receipt::after {
  bottom: -9px;
}
.receipt.receipt-before {
  transform: rotate(-1deg);
}
.receipt.receipt-after {
  transform: rotate(0.8deg);
}
.receipt-head {
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px dashed var(--border);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.receipt-head small {
  display: block;
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 4px;
  font-weight: 600;
}
.receipt.receipt-before .receipt-head small {
  color: var(--danger);
}
.receipt.receipt-after .receipt-head small {
  color: var(--accent-deep);
}
.receipt-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 7px 0;
  line-height: 1.4;
}
.receipt-line em {
  font-style: italic;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
}
.receipt-line span:last-child {
  white-space: nowrap;
}
.receipt-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1.5px solid var(--ink);
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.receipt.receipt-before .receipt-total {
  color: var(--danger);
}
.receipt.receipt-before .receipt-total span:last-child {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: oklch(0.44 0.14 25 / 0.55);
}
.receipt.receipt-after .receipt-total {
  color: var(--accent);
}
.receipts-savings {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 40px);
  color: var(--ink);
  letter-spacing: -0.01em;
  text-align: center;
  margin: 48px 0 0;
  font-style: italic;
  line-height: 1.3;
}
.receipts-savings strong {
  color: var(--accent);
  font-weight: 400;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

/* ── Editorial table of contents (features) ─────────────────── */
.toc {
  list-style: none;
  padding: 0;
  margin: 44px 0 0;
}
.toc-entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 36px;
  align-items: baseline;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  /* Audit P2 : avant on animait une layout property (paint + reflow
     pipeline). Maintenant transform compositor-only (GPU layer). 60fps
     garanti même sur device bas-de-gamme. */
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
.toc-entry:last-child {
  border-bottom: 1px solid var(--border);
}
@media (hover: hover) and (pointer: fine) {
  .toc-entry:hover {
    transform: translateX(16px);
  }
}
@media (hover: hover) and (pointer: fine) {
  .toc-entry:hover .toc-num {
    color: var(--accent);
  }
}
@media (hover: hover) and (pointer: fine) {
  .toc-entry:hover .toc-title {
    color: var(--accent-deep);
  }
}
.toc-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.toc-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.toc-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.012em;
  line-height: 1.14;
  transition: color 0.3s;
}
.toc-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.56;
  color: var(--ink-soft);
  max-width: 58ch;
}
.toc-page {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-fade);
  white-space: nowrap;
}

/* ── Sources — bibliography-style trust bar ─────────────────── */
.sources {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 104px) 24px clamp(64px, 9vw, 104px);
}
.sources-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 24px;
}
.sources-heading {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 0 0 48px;
  max-width: 24ch;
  text-wrap: balance;
}
.sources-heading em {
  color: var(--accent);
  font-style: italic;
  font-family: var(--font-display);
}
.sources-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.source {
  padding: 36px 28px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  transition: background 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .source:hover {
    background: var(--accent-tint);
  }
}
.source-name {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  line-height: 1.05;
}
.source-meta {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  line-height: 1.55;
}
.sources-note {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 28px;
  line-height: 1.7;
  font-style: italic;
  max-width: 72ch;
}

/* ── Letters — testimonials as magazine letters ─────────────── */
.letters {
  background: var(--paper-soft);
  padding: clamp(88px, 12vw, 144px) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.letters-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}
.letters-head {
  margin-bottom: 56px;
}
.letters-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}
.letter {
  background: var(--paper-sheet);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 44px 36px 32px;
  box-shadow: var(--shadow);
  position: relative;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s;
}
@media (hover: hover) and (pointer: fine) {
  .letter:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
  }
}
.letter::before {
  content: "«";
  position: absolute;
  top: 12px;
  left: 28px;
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.22;
  pointer-events: none;
}
.letter p {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.44;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 24px;
  padding-top: 18px;
  text-wrap: pretty;
  position: relative;
  z-index: 1;
}
.letter-signature {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.letter-signature strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 3px;
  font-size: 13.5px;
}
.letter-signature em {
  font-style: italic;
  color: var(--ink-muted);
  font-size: 11.5px;
}

/* ── Back cover — magazine finale ───────────────────────────── */
.back-cover {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(104px, 14vw, 176px) 24px clamp(80px, 10vw, 128px);
  text-align: center;
  position: relative;
}
.back-cover-rule {
  width: 72px;
  height: 2px;
  background: var(--accent);
  margin: 0 auto 48px;
}
.back-cover-headline {
  font-family: var(--font-display);
  font-size: clamp(42px, 6.2vw, 80px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.024em;
  margin: 0 auto 32px;
  max-width: 22ch;
  text-wrap: balance;
}
.back-cover-headline em {
  color: var(--accent);
  font-style: italic;
  font-family: var(--font-display);
}
.back-cover-sub {
  font-family: var(--font-body);
  font-size: 17.5px;
  color: var(--ink-soft);
  line-height: 1.62;
  max-width: 54ch;
  margin: 0 auto 48px;
}
.back-cover .btn-main {
  padding: 18px 42px;
  font-size: 17px;
}
.back-cover-note {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-muted);
  margin-top: 30px;
  letter-spacing: 0.02em;
}

/* ── Tarifs hero ────────────────────────────────────────────── */
.tarifs-hero {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 112px) 24px clamp(48px, 7vw, 88px);
}
.tarifs-hero-inner {
  max-width: 760px;
}
.tarifs-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.tarifs-hero-eyebrow::after {
  content: "";
  flex: 1;
  max-width: 140px;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}
.tarifs-hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin: 0 0 28px;
  text-wrap: balance;
}
.tarifs-hero-title em {
  color: var(--accent);
  font-style: italic;
  font-family: var(--font-display);
}
.tarifs-hero-sub {
  font-family: var(--font-body);
  font-size: clamp(16.5px, 1.4vw, 19px);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ─── Prologue éditorial : « Le moment dimanche soir »
   Section narrative entre le hero et les chapitres techniques.
   Registre Ricardo / NYT Cooking — drop cap typographique,
   règle décorative en haut/bas, max-width étroit pour la
   lecture, signature italique en chute. Background paper-soft
   pour distinguer du flow blanc crème. ─── */
.editorial-prologue {
  background: var(--paper-soft);
  padding: clamp(56px, 8vw, 96px) 24px;
  margin: 0;
}
.editorial-prologue-inner {
  max-width: 720px;
  margin: 0 auto;
}
.editorial-prologue-rule {
  width: 48px;
  height: 1px;
  background: color-mix(in oklch, var(--brand) 60%, transparent);
  margin: 0 auto 28px;
}
.editorial-prologue-rule:last-child {
  margin: 32px auto 0;
}
.editorial-prologue-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-dark, var(--brand));
  text-align: center;
  margin-bottom: 18px;
  font-style: italic;
}
.editorial-prologue-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: center;
  margin: 0 0 36px;
  text-wrap: balance;
}
.editorial-prologue-title em {
  color: var(--brand-dark, var(--brand));
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
}
.editorial-prologue-text {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.78;
  color: var(--ink);
  margin: 0 0 24px;
  /* Pas de max-width ici — le inner gère la largeur de lecture. */
}
/* Drop cap typographique sur le « C » de « C'est ». Float left
   avec margin négative subtile pour aligner le baseline avec la
   2e ligne. Couleur brand-dark, font display Young Serif. Pattern
   magazine cookbook authentique. */
.editorial-prologue-dropcap {
  float: left;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 4.4em;
  line-height: 0.78;
  margin: 0.04em 0.08em 0 0;
  color: var(--brand-dark, var(--brand));
  user-select: none;
}
.editorial-prologue-text-start {
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
  font-weight: 500;
}
/* Force premier mot en small-caps après le drop cap (registre
   éditorial classique) — fallback si small-caps pas supporté. */
@supports not (font-variant-caps: small-caps) {
  .editorial-prologue-text-start {
    text-transform: uppercase;
    font-size: 0.92em;
    letter-spacing: 0.04em;
  }
}
.editorial-prologue-signature {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.65;
  color: var(--ink-soft);
  text-align: center;
  margin: 32px auto 0;
  max-width: 56ch;
  clear: both;
}
.editorial-prologue-signature em {
  font-style: italic;
  color: var(--brand-dark, var(--brand));
  font-weight: 500;
}

/* ── Tarifs plans — toggle mensuel/annuel + card adaptative ──── */
.tarifs-plans {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px clamp(56px, 8vw, 96px);
}

/* Toggle mensuel/annuel — pill horizontal avec indicateur qui slide.
   Pattern Stripe/Vercel/Linear, voix Atelier : registre éditorial
   warm plutôt que SaaS froid. Pure CSS via radios cachés + :has()
   pour le slide de l'indicateur. */
.tarifs-toggle {
  border: none;
  margin: 0 auto clamp(28px, 4vw, 48px);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.tarifs-toggle-legend {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.012em;
  text-align: center;
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
}
.tarifs-toggle-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pill container — fond paper-soft, border 1px, rounded-full.
   Position relative pour l'indicateur ::before en absolute dessous. */
.tarifs-toggle-pill {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  background: var(--paper-soft);
  border: 1px solid var(--border);
  border-radius: 980px;
  padding: 4px;
  gap: 0;
}
/* Indicateur qui slide — pseudo-element ::before sur le pill.
   Position absolue 50% width, transition translateX. */
.tarifs-toggle-pill::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: calc(50% - 4px);
  background: var(--paper-sheet);
  border: 1px solid color-mix(in oklch, var(--brand) 35%, var(--border));
  border-radius: 980px;
  box-shadow: 0 1px 3px color-mix(in oklch, var(--ink) 8%, transparent);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
/* Slide à droite quand annuel coché */
.tarifs-toggle-pill:has(#tarif-period-annuel:checked)::before {
  transform: translateX(100%);
}
/* Fallback :has() — Safari < 15.4 : indicateur reste à gauche
   (mensuel par défaut). Le toggle ne marchera pas mais le user
   verra le mensuel sélectionné par défaut, c'est cohérent. */

.tarifs-toggle-option {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  min-width: 130px;
  min-height: 40px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-muted);
  letter-spacing: 0;
  text-align: center;
  border-radius: 980px;
  transition: color 0.25s;
  user-select: none;
}
/* Label actif (correspondant au radio checked) → color ink */
.tarifs-toggle-radio:checked + .tarifs-toggle-option {
  color: var(--ink);
}
.tarifs-toggle-radio:focus-visible + .tarifs-toggle-option {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}
/* Badge économie inline dans le label « À l'année » */
.tarifs-toggle-save {
  display: inline-block;
  padding: 2px 8px;
  background: color-mix(in oklch, var(--brand) 15%, transparent);
  color: var(--brand-dark, var(--brand));
  border-radius: 980px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.tarifs-toggle-radio:checked + .tarifs-toggle-option .tarifs-toggle-save {
  background: var(--brand);
  color: var(--cream-fixed, var(--paper));
}

/* Grid 2 plans subscription (I + II). Plan III (Recevoir un groupe)
   est sorti de la grid pour vivre dans .tarifs-special en encart
   éditorial distinct sous les 2 plans. Le toggle :has() swap les
   variantes mensuel/annuel des Plans I et II. */
.tarifs-plans-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .tarifs-plans-inner {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}
/* Toggle :has() mensuel/annuel retiré 2026-05-10 — la refonte tarifs
   Phase 2 a supprimé les classes .tarif--mensuel / .tarif--annuel
   (1 seule card par plan avec sous-ligne annuel). 8 lignes mortes
   nettoyées. Le @supports fallback Safari < 15.4 plus bas est
   également retiré. */

/* Badges modifier */
.tarif-badge--save {
  background: var(--accent);
  color: var(--cream-fixed);
}
.tarif-badge--neutral {
  background: var(--ink-soft);
  color: var(--cream-fixed);
}

/* Suffix sur le tarif-name (ex: « + Tablée famille » sur 2e ligne) */
.tarif-name-suffix {
  display: block;
  font-size: 0.7em;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* ─── Plan III — Recevoir un groupe : encart éditorial distinct.
   Sort de la grid des subscriptions pour un format magazine
   asymétrique. Registre « bonus » avec règle décorative en haut
   et grid 2 colonnes (texte large à gauche, prix+CTA droite). ─── */
.tarifs-special {
  max-width: var(--max-w);
  margin: clamp(40px, 6vw, 72px) auto 0;
  padding: 0 24px;
}
.tarifs-special-rule {
  width: 64px;
  height: 1px;
  background: color-mix(in oklch, var(--brand) 50%, transparent);
  margin: 0 auto 24px;
}
.tarifs-special-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-dark, var(--brand));
  text-align: center;
  margin-bottom: 18px;
}
.tarifs-special-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  background: var(--paper-sheet);
  border: 1px solid color-mix(in oklch, var(--brand) 22%, var(--border));
  border-radius: var(--radius-xl);
  padding: clamp(32px, 4vw, 56px);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 4%, transparent);
}
@media (max-width: 768px) {
  .tarifs-special-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 22px;
  }
}
.tarifs-special-text {
  /* Texte éditorial à gauche */
}
.tarifs-special-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
.tarifs-special-title em {
  color: var(--brand-dark, var(--brand));
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
}
.tarifs-special-lede {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 56ch;
}
.tarifs-special-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
@media (max-width: 480px) {
  .tarifs-special-features {
    grid-template-columns: 1fr;
  }
}
.tarifs-special-features li {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  padding-left: 22px;
  position: relative;
}
.tarifs-special-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background: var(--brand);
  border-radius: 50%;
}
.tarifs-special-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  background: var(--accent-tint);
  border-radius: var(--radius-lg, 14px);
  position: relative;
}
@media (max-width: 768px) {
  .tarifs-special-aside {
    align-items: stretch;
    padding: 22px;
  }
}
.tarifs-special-rank {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--font-display);
  font-size: 32px;
  color: color-mix(in oklch, var(--brand) 35%, var(--ink-fade));
  letter-spacing: -0.02em;
  line-height: 1;
}
.tarifs-special-price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 48px);
  color: var(--ink);
  letter-spacing: -0.022em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
}
.tarifs-special-price span {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-left: 4px;
  letter-spacing: 0;
}
.tarifs-special-meta {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.tarifs-special-login {
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 6px;
  align-self: center;
}
@media (max-width: 768px) {
  .tarifs-special-login {
    align-self: flex-start;
  }
}

/* @supports fallback :has() retiré 2026-05-10 — toggle mensuel/annuel
   supprimé par la refonte tarifs Phase 2 (1 card par plan). */
.tarif {
  background: var(--paper-sheet);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 3vw, 44px) clamp(28px, 2.4vw, 36px);
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s,
    border-color 0.35s;
}
@media (hover: hover) and (pointer: fine) {
  .tarif:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: oklch(0.59 0.16 143 / 0.22);
  }
}
/* Refonte 2026-05-10 (war room Stripe pricing) : avant tarif-featured
   gradient bg + shadow-lg + translateY(-8px) hypertrophiait la card
   recommandée → Plan I lisait comme « moins bien ». Loss aversion qui
   nuisait à la conversion solo. Maintenant : les deux cards au MÊME
   niveau visuel (même bg, même shadow, pas de translateY). Le seul
   marker est une bordure subtile accent + un eyebrow typographique
   flottant -16px au-dessus. Décision sur le contenu, pas sur la
   hiérarchie visuelle déséquilibrée. */
.tarif-featured {
  border: 1.5px solid var(--accent);
}
.tarif-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  color: var(--brand-dark, var(--accent));
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  padding: 0 10px;
  white-space: nowrap;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tarif-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.tarif-rank {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.tarif-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.tarif-price-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.tarif-price {
  font-family: var(--font-display);
  font-size: clamp(48px, 5.2vw, 64px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.022em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.tarif-price span {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-muted);
  margin-left: 4px;
}
.tarif-trial {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.tarif-pitch {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 24px;
  font-style: italic;
}
.tarif-features {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tarif-features li {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  padding: 11px 0 11px 26px;
  border-bottom: 1px solid var(--border2);
  line-height: 1.5;
  position: relative;
}
.tarif-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 14px;
  height: 6px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
/* Bullet "add-on" pour Forfait Réception en option dans Plan I Solo
   (refonte 2026-05-18) : visuellement distinct du check vert (c'est
   pas inclus, c'est une option). Plus de border-top haute pour
   séparation visuelle douce. */
.tarif-feature--addon {
  margin-top: 8px;
  padding-top: 14px !important;
  border-top: 1px dashed color-mix(in oklch, var(--brand) 30%, var(--border));
  color: var(--ink-soft) !important;
}
.tarif-feature--addon::before {
  border-color: var(--brand-dark) !important;
  opacity: 0.7;
}
.tarif-feature--addon strong {
  color: var(--brand-dark);
}
.tarif-features li:last-child {
  border-bottom: none;
}
.tarif-features-locked {
  opacity: 0.42;
  margin-bottom: 28px;
}
.tarif-features-locked li::before {
  border-color: var(--ink-fade);
  content: "";
  border: none;
  width: 12px;
  height: 1.5px;
  background: var(--ink-fade);
  top: 21px;
  transform: none;
}
.tarif > .btn-main,
.tarif > .btn-sec {
  margin-top: auto;
}

/* ── Sticky mobile CTA — respects iOS safe-area and doesn't crush content ── */
.sticky-cta-mobile {
  display: none;
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 20px;
  right: 20px;
  padding: 15px 24px;
  border-radius: 980px;
  background: var(--accent);
  color: var(--cream-fixed);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-shadow:
    0 14px 36px oklch(0.22 0.02 110 / 0.22),
    0 4px 12px oklch(0.22 0.02 110 / 0.14);
  z-index: 90;
  letter-spacing: 0.01em;
}
@media (hover: hover) and (pointer: fine) {
  .sticky-cta-mobile:hover {
    background: var(--accent-deep);
  }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-editorial-grid {
    gap: 48px;
  }
  .hero-editorial-title {
    font-size: clamp(44px, 7vw, 72px);
  }
  .chapter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 48px;
  }
  .chapter-numeral {
    font-size: clamp(80px, 10vw, 120px);
  }
  .sources-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .masthead {
    font-size: 10px;
    padding: 16px 20px;
    gap: 6px 0;
    margin-top: calc(64px + env(safe-area-inset-top, 0px));
    flex-direction: column;
    letter-spacing: 0.16em;
  }
  .masthead span {
    padding: 0;
  }
  .masthead span + span::before {
    display: none;
  }
  .masthead span + span {
    color: var(--accent-deep);
    font-weight: 600;
  }

  .hero-editorial {
    padding: 32px 22px 48px;
  }
  .hero-editorial-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-editorial-eyebrow {
    margin-bottom: 18px;
    font-size: 11px;
  }
  .hero-editorial-eyebrow::after {
    display: none;
  }
  .hero-editorial-title {
    font-size: clamp(36px, 10vw, 52px);
    line-height: 0.98;
    margin-bottom: 20px;
  }
  .hero-editorial-lede {
    max-width: 100%;
    font-size: 15.5px;
    margin-bottom: 28px;
    line-height: 1.62;
  }
  /* Drop cap stays on mobile but smaller and tighter */
  .hero-editorial-lede::first-letter {
    font-size: 3.6em;
    padding: 6px 12px 2px 0;
  }
  .hero-editorial-cta {
    gap: 14px 18px;
    margin-bottom: 32px;
  }
  .hero-editorial-cta .btn-main.btn-xl {
    padding: 14px 28px;
    font-size: 15px;
    width: auto;
  }
  .hero-editorial-cta .hero-note {
    font-size: 12px;
    line-height: 1.5;
  }
  .hero-ticker {
    padding: 20px 0 0 26px;
    font-size: 14.5px;
  }
  .hero-ticker::before {
    top: 30px;
    width: 16px;
  }
  .hero-editorial-aside {
    max-width: 320px;
    margin: 0 auto;
  }
  .hero-editorial-caption {
    max-width: 280px;
    font-size: 12.5px;
  }

  .stats-rule {
    grid-template-columns: repeat(3, 1fr);
    padding: 0 12px;
  }
  .stats-rule-item {
    border-right: 1px solid var(--border);
    border-bottom: none;
    padding: 20px 8px;
  }
  .stats-rule-item:last-child {
    border-right: none;
  }
  .stats-rule-eyebrow {
    font-size: 9px;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
  }
  .stats-rule-value {
    font-size: 28px;
  }
  .stats-rule-value sub {
    font-size: 0.3em;
    margin-left: 4px;
    display: block;
    margin-top: 4px;
  }

  .chapter {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 72px 20px;
  }
  .chapter-head {
    position: static;
    display: flex;
    align-items: baseline;
    gap: 20px;
  }
  .chapter-numeral {
    font-size: 72px;
  }
  .chapter-label {
    margin-top: 0;
  }
  .chapter-title {
    font-size: clamp(30px, 7vw, 44px);
  }

  .editorial-step {
    grid-template-columns: 54px 1fr;
    gap: 20px;
  }
  .editorial-step-n {
    font-size: 34px;
  }

  .pull {
    font-size: clamp(22px, 5.5vw, 32px);
    padding: 48px 24px;
    margin: 32px 20px;
  }

  .receipts {
    grid-template-columns: 1fr;
  }
  .receipt.receipt-before,
  .receipt.receipt-after {
    transform: none;
  }

  .toc-entry {
    grid-template-columns: auto 1fr;
    gap: 20px;
    padding: 24px 0;
  }
  .toc-page {
    display: none;
  }
  .toc-title {
    font-size: 21px;
  }

  .sources {
    padding: 64px 20px;
  }
  .sources-list {
    grid-template-columns: 1fr;
  }
  .source {
    padding: 28px 24px;
  }
  .source:last-child {
    border-bottom: none;
  }

  .letters-inner {
    padding: 0 20px;
  }
  .letters-stack {
    grid-template-columns: 1fr;
  }

  .back-cover {
    padding: 88px 20px 72px;
  }
}

@media (max-width: 480px) {
  .masthead {
    font-size: 9.5px;
    padding: 14px 20px;
  }
  .hero-editorial-title {
    font-size: clamp(38px, 11vw, 52px);
  }
  .calc-editorial-slider-row {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .calc-editorial-current {
    text-align: center;
  }
  .calc-editorial-results {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .back-cover {
    padding-bottom: 120px;
  }
}

/* ── Tarifs responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .tarifs-plans-inner {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
    gap: 24px;
  }
}
@media (max-width: 900px) {
  .tarifs-hero {
    padding: 56px 20px 48px;
  }
  .tarifs-plans {
    padding: 0 20px 56px;
  }
}

/* Back cover with multiple buttons */
.back-cover-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.back-cover-actions .btn-main,
.back-cover-actions .btn-sec {
  padding: 16px 36px;
  font-size: 16px;
}

/* ── Contact editorial split ────────────────────────────────── */
.contact-editorial {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) 24px clamp(72px, 10vw, 112px);
}
.contact-editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.contact-editorial-info {
  padding-top: 12px;
}
.contact-editorial-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 22px;
}
.contact-editorial-heading {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.contact-editorial-heading em {
  color: var(--accent);
  font-style: italic;
  font-family: var(--font-display);
}
.contact-editorial-intro {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.64;
  color: var(--ink-soft);
  margin: 0 0 36px;
  max-width: 50ch;
}
.contact-editorial-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact-editorial-item {
  padding: 22px 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: baseline;
}
.contact-editorial-item:last-child {
  border-bottom: 1px solid var(--border);
}
.contact-editorial-item-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 4px;
}
.contact-editorial-item-value {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -0.008em;
  line-height: 1.25;
}
.contact-editorial-item-meta {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 6px;
  font-style: italic;
  line-height: 1.5;
  grid-column: 2;
}

.contact-editorial-form-card {
  background: var(--paper-sheet);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(36px, 4vw, 56px);
  box-shadow: var(--shadow-md);
}
.contact-editorial-form-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 14px;
}
.contact-editorial-form-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 28px;
  letter-spacing: -0.012em;
  line-height: 1.1;
}
.contact-editorial-form-title em {
  color: var(--accent);
  font-style: italic;
  font-family: var(--font-display);
}
.contact-editorial-form .form-group {
  margin-bottom: 22px;
}
.contact-editorial-form label {
  font-family: var(--font-body);
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.contact-editorial-form input,
.contact-editorial-form textarea,
.contact-editorial-form select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 18px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.contact-editorial-form input:focus,
.contact-editorial-form textarea:focus,
.contact-editorial-form select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px oklch(0.59 0.16 143 / 0.16);
}
.contact-editorial-form textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
}
.contact-editorial-form .btn-main {
  margin-top: 8px;
  padding: 16px 32px;
}

@media (max-width: 1024px) {
  .contact-editorial-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .contact-editorial {
    padding: 40px 20px 64px;
  }
  .contact-editorial-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .contact-editorial-item-meta {
    grid-column: 1;
  }
}

/* FAQ inside the editorial chapter */
.chapter .faq-list {
  max-width: none;
  margin: 36px 0 0;
}
.chapter .faq-item {
  border-top: 1px solid var(--border);
  border-bottom: none;
}
.chapter .faq-item:last-child {
  border-bottom: 1px solid var(--border);
}
.chapter .faq-q {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 400;
  color: var(--ink);
  padding: 24px 0;
  letter-spacing: -0.01em;
}
.chapter .faq-a {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.chapter .faq-item.open .faq-a {
  padding-bottom: 24px;
}

/* ── Tableau comparatif (accueil chapitre ∞) ─────────────
   Pourquoi pas Flipp gratuit ? Réponse honnête en tableau.
   Mobile : scroll horizontal natif si le tableau dépasse. */
.comparatif-table-wrap {
  margin: 28px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.comparatif-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--paper-sheet, #fefdfa);
  min-width: 600px;
}
.comparatif-table th,
.comparatif-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.comparatif-table thead th {
  background: var(--paper-soft, #f3eee0);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.comparatif-table tbody tr:last-child td {
  border-bottom: none;
}
.comparatif-table tbody td:first-child {
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-soft, #f3eee0);
}
.comparatif-table .td-yes {
  color: var(--brand, #4a9e46);
  font-weight: 500;
}
.comparatif-table .td-no {
  color: var(--ink-muted, #998);
  font-weight: 400;
}
.comparatif-table .comparatif-self {
  background: color-mix(in oklch, var(--brand, #4a9e46) 8%, transparent);
}
.comparatif-table thead .comparatif-self {
  background: var(--brand, #4a9e46);
  color: var(--cream-fixed, #fefdfa);
}
.comparatif-table tbody .comparatif-self {
  color: var(--brand-dark, #2f6a2c);
  font-weight: 600;
}
.chapter-fineprint {
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
}
/* Lien inline éditorial (« Voir tout le sommaire → »). Souligné
   discret, hover plus marqué. Évite le style="text-decoration:underline"
   inline et garde une cohérence design system. */
.chapter-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  color: var(--ink, var(--accent-deep));
}
@media (hover: hover) and (pointer: fine) {
  .chapter-link:hover {
    text-decoration-thickness: 2px;
    color: var(--brand, var(--accent));
  }
}

/* ════════════════════════════════════════════════════
   TARIFS — Add-on Tablée famille (RETIRÉ — Phase 5 pricing).
   Tablée famille est devenu un Plan complet en grid avec
   L'Économe et Recevoir un groupe. Les 4 cards .tarifs-addon-*
   ne sont plus utilisées — CSS retiré pour éviter dead code.
   Le contenu vit maintenant dans .tarif--famille (mensuel + annuel).
   ════════════════════════════════════════════════════ */
/* TARIF ÉTUDIANT — ligne sobre */
.tarifs-etudiant {
  padding: 32px 24px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.tarifs-etudiant-inner p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.tarifs-etudiant-inner strong {
  color: var(--ink);
  font-weight: 600;
}
.tarifs-etudiant-inner a {
  display: block;
  margin-top: 10px;
  color: var(--brand-dark, var(--brand));
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .tarifs-etudiant-inner a:hover {
    text-decoration: underline;
  }
}

/* ─── Phase 4 P4-5 : Lien partage allergies invités (public, sans auth) ─── */
.invite-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--paper-soft, #faf8f3);
}
.invite-card {
  max-width: 520px;
  width: 100%;
  background: var(--paper, #fff);
  border: 1px solid var(--border, #d4d2cb);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.05);
}
.invite-eyebrow {
  font-family: var(--font-display, "Young Serif", serif);
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--brand-dark, #4a9e46);
  font-weight: 700;
  margin-bottom: 10px;
}
.invite-title {
  font-family: var(--font-display, "Young Serif", serif);
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 1.25;
  color: var(--ink, #1a1a18);
}
.invite-title em {
  font-style: italic;
  color: var(--brand-dark, #4a9e46);
}
.invite-sub {
  font-size: 14px;
  color: var(--muted, #5d5b56);
  margin: 0 0 20px 0;
}
.invite-intro {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink2, #2e2e26);
  margin: 0 0 18px 0;
}
.invite-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.invite-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.invite-field label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink2, #2e2e26);
  font-weight: 700;
}
.invite-field input {
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--border, #d4d2cb);
  border-radius: 10px;
  background: var(--paper, #fff);
  color: var(--ink, #1a1a18);
  min-height: 48px;
}
.invite-field input:focus {
  outline: none;
  border-color: var(--brand-dark, #4a9e46);
  box-shadow: 0 0 0 3px rgba(74, 158, 70, 0.18);
}
.invite-hint {
  font-size: 11.5px;
  color: var(--muted, #5d5b56);
  margin: 4px 0 0 0;
}
.invite-btn {
  background: var(--brand-dark, #4a9e46);
  color: var(--paper, #fff);
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 10px;
  cursor: pointer;
  min-height: 48px;
  transition:
    background 0.12s,
    transform 0.12s;
}
@media (hover: hover) and (pointer: fine) {
  .invite-btn:hover {
    background: #3d8639;
    transform: translateY(-1px);
  }
}
.invite-btn:active {
  transform: translateY(0);
}
.invite-fineprint {
  font-size: 11px;
  color: var(--muted, #8a8780);
  margin-top: 22px;
  line-height: 1.6;
  text-align: center;
}
.invite-error {
  background: #fef2f0;
  border: 1px solid #f5b3a8;
  color: #8a3622;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.invite-card-merci,
.invite-card-expire {
  text-align: center;
}

/* Phase 4 P4-1 : Bundle hint dans le bloc Forfait Réception */
.tarifs-special-bundle {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--paper-soft, #faf8f3);
  border: 1px solid var(--border, #d4d2cb);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink2, #2e2e26);
}
.tarifs-special-bundle strong {
  color: var(--brand-dark, #4a9e46);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   HOME — refacto 2026-05-10 (Phase 2 anti-AI)
   La home extends layouts/site (avant : layout standalone).
   Pattern éditorial cohérent avec /fonctionnalites + /faq + /tarifs.
   ═══════════════════════════════════════════════════════════════ */

.home-hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.home-hero-title {
  font-family: var(--font-display, "Young Serif", serif);
  font-size: clamp(36px, 5.5vw, 56px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ink, #1a1a18);
  margin: 0 0 22px 0;
}
.home-hero-title em {
  font-style: italic;
  color: var(--brand-dark, #4a9e46);
}
.home-hero-lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink2, #2e2e26);
  margin: 0 0 30px 0;
  max-width: 520px;
}
.home-hero-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.home-hero-cta-note {
  font-size: 12.5px;
  color: var(--muted, #5d5b56);
}
.home-hero-mockup .mockup-card {
  background: var(--paper, #fff);
  border: 1px solid var(--border, #d4d2cb);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
}

@media (max-width: 900px) {
  .home-hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 40px 20px 24px;
  }
  .home-hero-mockup {
    order: -1;
    max-width: 440px;
    margin: 0 auto;
  }
}

/* ═══ 4 chapitres éditoriaux ═══ */
.home-chapters {
  background: var(--paper-soft, #faf8f3);
  padding: 72px 24px;
}
.home-chapters-inner {
  max-width: 760px;
  margin: 0 auto;
}
.home-chapter {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 36px 0;
  border-bottom: 1px solid var(--border2, #e6e4dc);
}
.home-chapter:last-of-type {
  border-bottom: none;
}
.home-chapter-numeral {
  font-family: var(--font-display, "Young Serif", serif);
  font-size: 36px;
  color: var(--brand-dark, #4a9e46);
  line-height: 1;
  letter-spacing: 0.04em;
}
.home-chapter-title {
  font-family: var(--font-display, "Young Serif", serif);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 400;
  color: var(--ink, #1a1a18);
  line-height: 1.25;
  letter-spacing: -0.008em;
  margin: 0 0 14px 0;
}
.home-chapter p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink2, #2e2e26);
  margin: 0;
}
.home-chapters-link {
  margin: 32px 0 0 0;
  text-align: center;
}
.home-chapters-link a {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-dark, #4a9e46);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .home-chapters-link a:hover {
    color: var(--ink, #1a1a18);
  }
}

@media (max-width: 768px) {
  .home-chapter {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 28px 0;
  }
  .home-chapter-numeral {
    font-size: 28px;
  }
}

/* ═══ Tarifs compacts (2 plans) ═══ */
.home-pricing {
  padding: 72px 24px;
}
.home-pricing-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.home-pricing-title {
  font-family: var(--font-display, "Young Serif", serif);
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink, #1a1a18);
  margin: 0 0 12px 0;
  letter-spacing: -0.01em;
}
.home-pricing-title em {
  font-style: italic;
  color: var(--brand-dark, #4a9e46);
}
.home-pricing-sub {
  font-size: 15px;
  color: var(--muted, #5d5b56);
  margin: 0 0 36px 0;
}
.home-pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  text-align: left;
  margin-bottom: 28px;
}
.home-plan {
  position: relative;
  background: var(--paper, #fff);
  border: 1px solid var(--border, #d4d2cb);
  border-radius: 14px;
  padding: 28px 26px;
}
.home-plan--featured {
  border-color: var(--brand-dark, #4a9e46);
  border-width: 1.5px;
}
.home-plan-tag {
  position: absolute;
  top: -10px;
  left: 24px;
  background: var(--brand-dark, #4a9e46);
  color: var(--paper, #fff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.home-plan-name {
  font-family: var(--font-display, "Young Serif", serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink, #1a1a18);
  margin-bottom: 10px;
}
.home-plan-price {
  font-family: var(--font-display, "Young Serif", serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--ink, #1a1a18);
  letter-spacing: -0.018em;
}
.home-plan-price span {
  font-family: var(--font-body, "Commissioner", sans-serif);
  font-size: 14px;
  color: var(--muted, #5d5b56);
  margin-left: 4px;
}
.home-plan-meta {
  font-size: 12.5px;
  color: var(--muted, #5d5b56);
  margin: 6px 0 16px 0;
}
.home-plan-pitch {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink2, #2e2e26);
  margin: 0 0 22px 0;
}
.home-pricing-note {
  font-size: 13.5px;
  color: var(--muted, #5d5b56);
  line-height: 1.7;
  max-width: 620px;
  margin: 18px auto 0;
}
.home-pricing-note a {
  color: var(--brand-dark, #4a9e46);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .home-pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* Phase 3 : .feat-bonus-card extrait des inline-styles fonctionnalites */
.feat-bonus-card {
  margin-top: 28px;
  padding: 24px;
  background: var(--paper-soft, #faf8f3);
  border: 1px solid var(--border, #d4d2cb);
  border-radius: 14px;
}
.feat-bonus-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}
.feat-bonus-eyebrow {
  font-family: var(--font-body, "Commissioner", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-dark, #4a9e46);
  margin-bottom: 6px;
}
.feat-bonus-title {
  font-family: var(--font-display, "Young Serif", serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink, #1a1a18);
  margin: 0;
  letter-spacing: -0.012em;
}
.feat-bonus-pricing {
  text-align: right;
}
.feat-bonus-price {
  font-family: var(--font-display, "Young Serif", serif);
  font-size: 38px;
  color: var(--ink, #1a1a18);
  line-height: 0.95;
  letter-spacing: -0.022em;
}
.feat-bonus-price span {
  font-family: var(--font-body, "Commissioner", sans-serif);
  font-size: 14px;
  color: var(--ink-muted, #5d5b56);
  margin-left: 4px;
}
.feat-bonus-meta {
  font-size: 12px;
  color: var(--ink-muted, #5d5b56);
  margin-top: 6px;
}

/* ════════════════════════════════════════════════════════════════════
   PHASE B 2026-05-10 — Trust signals + comparatif Plan I vs II
   + TOC sticky aside fonctionnalites/faq + FAQ accordion grid
   ════════════════════════════════════════════════════════════════════ */

/* Trust strip sous les 2 cards plans — discrétion maximale */
.tarifs-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 8px 14px;
  margin: 24px auto 0;
  max-width: 880px;
  padding: 14px 18px;
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  text-align: center;
  border-top: 1px solid color-mix(in oklch, var(--ink) 6%, transparent);
}
.tarifs-trust-item strong {
  color: var(--ink);
  font-weight: 700;
}
.tarifs-trust-sep {
  opacity: 0.45;
  user-select: none;
}
/* Mobile : items wrappent et les séparateurs « · » se retrouvaient
   seuls sur leur ligne (fix capture user 2026-05-18). Maintenant
   séparateurs cachés sur petit viewport, items stackés en colonne
   avec gap vertical clean. */
@media (max-width: 640px) {
  .tarifs-trust {
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
  }
  .tarifs-trust-sep {
    display: none;
  }
}

/* Comparatif éditorial Plan I vs II — table magazine sobre */
.tarifs-compare {
  margin: 48px auto 0;
  max-width: 880px;
  padding: 0 16px;
}
.tarifs-compare-title {
  font-family: var(--font-display, "Young Serif", serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.2;
}
.tarifs-compare-title em {
  color: var(--brand-dark, var(--accent));
  font-style: italic;
}
.tarifs-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--paper-sheet);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  font-size: 14px;
  color: var(--ink);
}
.tarifs-compare-table thead th {
  background: color-mix(in oklch, var(--brand) 6%, transparent);
  padding: 16px 14px;
  font-family: var(--font-display, "Young Serif", serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  text-align: center;
  border-bottom: 1px solid var(--border);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.tarifs-compare-table thead th span {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.tarifs-compare-table thead .tarifs-compare-feat {
  text-align: left;
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tarifs-compare-table thead .tarifs-compare-col--featured {
  background: color-mix(in oklch, var(--brand) 14%, transparent);
  color: var(--brand-dark, var(--accent));
}
.tarifs-compare-table tbody th,
.tarifs-compare-table tbody td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--border2, var(--border));
}
.tarifs-compare-table tbody tr:last-child th,
.tarifs-compare-table tbody tr:last-child td {
  border-bottom: none;
}
.tarifs-compare-table tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
}
.tarifs-compare-table tbody td {
  text-align: center;
  color: var(--ink2, var(--ink-soft));
  vertical-align: middle;
  line-height: 1.45;
}
.tarifs-compare-table tbody td strong {
  color: var(--brand-dark, var(--accent));
  font-weight: 700;
}
.tarifs-compare-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--brand) 16%, transparent);
  color: var(--brand-dark, var(--accent));
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.tarifs-compare-no {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Mobile : table responsive — passe en cards stacked < 600px.
   Fix Codex P2 PR #81 : avant on avait 2 règles (mobile hide table +
   desktop hide mobile-list) qui dépendaient de la cascade. Maintenant
   tout dans le même @media (max-width: 640px) — base est display:none
   sur la mobile-list, mobile-only le swap à display:flex. */
/* Bug source order corrigé 2026-05-18 : la baseline .tarifs-compare-
   mobile { display: none } (ligne 4342) était déclarée APRÈS ce
   @media → en cascade source order, le display: none gagnait sur
   mobile, et la liste "Ce que Famille + ajoute en plus" restait
   invisible. Vide complet sous le h2 sur capture user iPhone.
   Bloc @media déplacé APRÈS la baseline ci-dessous. */

/* Décision 5 (2026-05-11) : sur mobile, on cache 3 features
   « extras » par plan (alertes/SMS/allergies pour Plan I,
   quota/annulation pour Plan II) pour passer de 9 à 5 visibles.
   Forfait Réception toujours visible (sweet spot conversion).
   Lien « voir tout » pointe vers /fonctionnalites complète. */
@media (max-width: 640px) {
  .tarif-feature--extra {
    display: none;
  }
  .tarif-features-more-hint {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.5;
  }
  .tarif-features-more-hint a {
    color: var(--brand-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}
@media (min-width: 601px) {
  .tarif-features-more-hint {
    display: none;
  }
}

/* Décision 1 (2026-05-11) : sous le recap personnalisé du register
   slider, on ancre le chiffre signature communauté 1 248 $/an. */
.wiz-recap-anchor {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  color: var(--ink-muted);
  text-align: center;
  line-height: 1.5;
}
.wiz-recap-anchor strong {
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}

/* Liste éditoriale mobile (Phase polish 2026-05-11) :
   remplace le tableau dense par 5 deltas clairs. Marie 42 voit
   en 5 secondes ce qu'elle gagne.
   Fix Codex P2 PR #81 : base display:flex écrasait le desktop
   display:none ligne 3248 (même spécificité, cascade order).
   Maintenant tout dans @media (max-width: 640px) — desktop voit
   uniquement la table complète. */
.tarifs-compare-mobile {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: none; /* hidden by default, mobile-only overrides below */
  flex-direction: column;
  gap: 18px;
}
.tarifs-compare-mobile li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px;
  background: var(--paper-sheet);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.tarifs-compare-mobile-add {
  flex-shrink: 0;
  font-family: var(--font-display, "Young Serif", Georgia, serif);
  font-size: 28px;
  line-height: 1;
  color: var(--brand-dark);
  width: 32px;
  text-align: center;
  margin-top: -2px;
}
.tarifs-compare-mobile li strong {
  display: block;
  font-family: var(--font-display, "Young Serif", Georgia, serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.3;
}
.tarifs-compare-mobile-note {
  display: block;
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* ── Forfait Réception — note compacte (refonte 2026-05-18) ──────
   Avant : aside lourd 700px+ avec eyebrow, h2, 8 bullets, dual cards.
   User : "intègre dans l'offre au lieu d'alourdir". Maintenant ~150px
   inline avec dual pricing en colonne droite (mobile : empilé).
   ────────────────────────────────────────────────────────────── */
.tarifs-recevoir {
  max-width: var(--max-w);
  margin: clamp(40px, 6vw, 64px) auto 0;
  padding: 0 24px;
}
.tarifs-recevoir-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  padding: clamp(24px, 3vw, 32px) clamp(22px, 3vw, 32px);
  background: var(--accent-tint, oklch(0.59 0.16 143 / 0.06));
  border: 1px solid color-mix(in oklch, var(--brand) 18%, var(--border));
  border-radius: var(--radius-xl, 18px);
}
@media (max-width: 768px) {
  .tarifs-recevoir-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
.tarifs-recevoir-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-dark, var(--brand));
  margin-bottom: 10px;
}
.tarifs-recevoir-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
}
.tarifs-recevoir-title em {
  color: var(--brand-dark, var(--brand));
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
}
.tarifs-recevoir-lede {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.tarifs-recevoir-pricing {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tarifs-recevoir-price-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-muted);
  padding: 8px 0;
}
.tarifs-recevoir-price-line strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tarifs-recevoir-price-line--bundle {
  padding-top: 8px;
  border-top: 1px dashed color-mix(in oklch, var(--brand) 25%, var(--border));
}
.tarifs-recevoir-price-line--bundle strong {
  color: var(--brand-dark, var(--brand));
}
.tarifs-recevoir-price-line em {
  font-style: italic;
  color: var(--brand-dark, var(--brand));
  font-weight: 600;
}
.tarifs-recevoir .btn-main {
  margin-top: 6px;
}

/* @media DÉPLACÉ ICI (fix bug source order capture user 2026-05-18) :
   doit venir APRÈS la baseline .tarifs-compare-mobile { display: none }
   pour que le swap mobile flex/desktop none fonctionne correctement.
   Avant : @media était à 4282, baseline à 4342 → cascade override
   inversée → mobile restait display: none → vide complet sous le h2
   sur iPhone. */
@media (max-width: 640px) {
  .tarifs-compare-table {
    display: none;
  }
  .tarifs-compare-mobile {
    display: flex;
  }
}

/* TOC sticky aside — position: fixed à gauche, visible >= 1280px
   pour pas overlapper le contenu (page max-width ~1100px). Pas de
   wrapper markup requis : élément autonome dans le content section. */
.toc-aside {
  display: none;
}
@media (min-width: 1280px) {
  .toc-aside {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    top: 50%;
    left: clamp(16px, 3vw, 40px);
    transform: translateY(-50%);
    padding: 18px 16px;
    border-left: 1px solid color-mix(in oklch, var(--brand) 28%, transparent);
    /* Glassmorphism backdrop-filter retiré 2026-06-04 (audit sévère :
       AI slop tell). Paper full-opacity suffit pour la lisibilité du
       TOC aside éditorial. */
    background: var(--paper);
    border-radius: 0 8px 8px 0;
    font-size: 12.5px;
    max-width: 200px;
    z-index: 30;
  }
}
.toc-aside-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.toc-aside-link {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 5px 0;
  letter-spacing: 0.01em;
  transition: color 0.15s;
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.3;
}
.toc-aside-link::before {
  content: attr(data-num);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  flex-shrink: 0;
  min-width: 14px;
}
@media (hover: hover) and (pointer: fine) {
  .toc-aside-link:hover,
  .toc-aside-link.is-active {
    color: var(--brand-dark, var(--accent));
    font-weight: 600;
  }
}
.toc-aside-link.is-active::before {
  color: var(--brand-dark, var(--accent));
}

/* FAQ accordion (fix 2026-05-18 capture user — items toujours ouverts) :
   le pattern grid-template-rows 0fr → 1fr ne collapse PAS quand .faq-a
   contient du texte direct (pas un élément wrapper). Les TextNodes ne
   sont pas des grid items éligibles au min-height: 0. Maintenant on
   utilise max-height transition qui marche sans wrapper markup.
   Trade-off : transition pas parfaitement smooth (anime sur 2000px max
   même pour contenu court), mais c'est imperceptible vs le bug actuel
   d'items toujours ouverts. */
.faq-list .faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              padding 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.faq-item.open .faq-a {
  max-height: 2000px; /* largement assez pour la plus longue réponse */
}

/* Skip-link a11y — WCAG 2.4.1 — hidden until focused (clavier).
   Présent en site.blade.php (qui ne charge pas app.css). */
.skip-link {
  position: absolute;
  top: 8px;
  left: 16px;
  transform: translateY(-200%);
  background: var(--accent, #4a9e46);
  color: #faf6ec;
  padding: 10px 18px;
  border-radius: 8px;
  z-index: 9999;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--accent, #4a9e46);
  outline-offset: 2px;
}

/* Asterisques source CASL — hero ticker + calc editorial */
.hero-ticker-mark {
  font-size: 0.85em;
  vertical-align: super;
  margin-left: 2px;
  color: var(--ink-muted);
}
.hero-ticker-source {
  font-size: 11px;
  color: var(--ink-muted, #5d5b56);
  line-height: 1.55;
  margin-top: 8px;
  max-width: 56ch;
}
.hero-ticker-source a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.calc-editorial-source {
  font-size: 11px;
  color: var(--ink-muted, #5d5b56);
  line-height: 1.55;
  margin: 14px 0 0 0;
  max-width: 56ch;
  font-style: italic;
}

/* ── Receipt interactive notes : annotation manuscrite révélée
   au hover (desktop) ou tap (mobile) sur les items cerclés.
   Pen vert Jean-Talon, Young Serif italic, légère rotation.
   Le moment "wow" signature de la home. ─────────────────────── */
.receipt-item--marked {
  cursor: pointer;
}
.receipt-item--marked:hover,
.receipt-item--marked.is-active,
.receipt-item--marked:focus-visible {
  outline: none;
}
.receipt-item--marked:focus-visible::before {
  height: 3.5px;
  opacity: 1;
}
/* Motion sur les rows : translateX hover/focus seulement si user
   n'a pas demandé reduced-motion (fix Codex review : avant la
   transition + transform vivaient à la base, reduced-motion users
   voyaient encore le shift au hover/focus malgré le fix précédent
   sur receipt-note-pop). */
@media (prefers-reduced-motion: no-preference) {
  .receipt-item--marked {
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .receipt-item--marked:hover,
  .receipt-item--marked.is-active,
  .receipt-item--marked:focus-visible {
    transform: translateX(2px);
  }
}

.receipt-note-pop {
  position: absolute;
  top: var(--note-top, 50%);
  left: calc(100% + 24px);
  max-width: 230px;
  padding: 14px 16px 16px;
  background: oklch(0.99 0.012 90);
  border: 1px solid oklch(0.55 0.2 145 / 0.35);
  border-radius: 6px;
  /* Base : opacity 0 + translateY centering, PAS de rotate/scale ici.
     Le rotate(2.2deg) + scale(0.94→1) vit DANS @media (prefers-
     reduced-motion: no-preference) — motion-sensitive users voient
     juste la note apparaître droite, sans tilt/scale animation
     (audit re-pass P0 P1 fix). */
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 26px oklch(0.2 0.04 90 / 0.12),
              0 2px 6px oklch(0.2 0.04 90 / 0.06);
  z-index: 5;
}
.receipt-note-pop.is-visible {
  opacity: 1;
}
.receipt-note-pen {
  display: inline-block;
  font-family: "Young Serif", Georgia, serif;
  font-size: 18px;
  line-height: 1;
  color: oklch(0.45 0.18 145); /* 5.8:1 sur cream — assombri pour lisibilité lumière vive */
  transform: rotate(-14deg);
  margin-right: 4px;
  vertical-align: -2px;
}
.receipt-note-text {
  font-family: var(--font-display, "Young Serif", Georgia, serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.4;
  /* Vert pen assombri : 0.4 → 0.32 = 6.1:1 contrast (vs 4.2:1 avant).
     Audit /audit P1 : lisibilité Marie au IGA lumière vive. */
  color: oklch(0.32 0.16 145);
  letter-spacing: -0.005em;
}

/* Mobile : note sous le reçu (overflow desktop side n'est pas viable
   sur 375px). safe-area-inset bottom: composer-bar ~52px + marge.
   Audit re-pass P0 : sur iPhone SE 1 sans notch, env(safe-area-inset-
   bottom) = 0, donc fallback à 120px pour couvrir composer-bar + cushion. */
@media (max-width: 900px) {
  .receipt-note-pop {
    position: fixed;
    top: auto !important;
    bottom: max(120px, calc(env(safe-area-inset-bottom, 0px) + 60px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: 88vw;
    width: max-content;
    text-align: center;
  }
}

/* Motion : appliquée SEULEMENT si user n'a pas demandé reduced-motion.
   Avant : base transform avec rotate/scale, clause reduce override en
   !important → fragile et motion appliquée par défaut. Maintenant base
   = état statique, motion comme enhancement. */
@media (prefers-reduced-motion: no-preference) {
  .receipt-note-pop {
    transform: translateY(-50%) rotate(2.2deg) scale(0.94);
    transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .receipt-note-pop.is-visible {
    transform: translateY(-50%) rotate(2.2deg) scale(1);
  }
  @media (max-width: 900px) {
    .receipt-note-pop {
      transform: translateX(-50%) rotate(0deg) scale(0.96);
    }
    .receipt-note-pop.is-visible {
      transform: translateX(-50%) rotate(0deg) scale(1);
    }
  }
}