/* =====================================================================
   La Méthode Rayon — styles
   Mobile d'abord. Toutes les valeurs viennent de tokens.css.
   Ordre de cascade : reset → base → layout → components → sections → utilities
   ===================================================================== */
@layer reset, base, layout, components, sections, utilities;

/* ------------------------------------------------------------------ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
  ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
  img, svg { display: block; max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
}

/* ------------------------------------------------------------------ */
@layer base {
  html {
    scroll-padding-top: calc(var(--nav-h) + var(--sp-5));
    background: var(--bg);
  }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    touch-action: manipulation;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 380;
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-title);
    text-wrap: balance;
    font-variation-settings: 'SOFT' 50, 'opsz' 96;
  }
  h1 em, h2 em, h3 em, .serif-em {
    font-style: italic;
    font-weight: 360;
    color: var(--accent);
    font-variation-settings: 'SOFT' 100, 'opsz' 96;
  }
  p, li, dd { text-wrap: pretty; }
  strong { font-weight: 600; }

  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dur-1) var(--ease); }
  a:hover { color: var(--accent-hover); }

  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
  .on-ink :focus-visible { outline-color: var(--accent-on-dark); }

  ::selection { background: var(--accent-soft); color: var(--ink); }

  /* Grain de papier très discret */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* ------------------------------------------------------------------ */
@layer layout {
  .container { width: 100%; max-width: calc(var(--w-page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .container--read { max-width: calc(var(--w-read) + 2 * var(--gutter)); }
  .container--narrow { max-width: calc(var(--w-narrow) + 2 * var(--gutter)); }

  .section { position: relative; padding-block: var(--section-y); z-index: 2; }
  .section--soft { background: var(--bg-soft); }
  .section--deep { background: var(--bg-deep); }
  .section--surface { background: var(--surface); }
  .section--wash { background: var(--accent-wash); }
  .section--ink, .on-ink { background: var(--ink-bg); color: var(--on-ink); }
  .section--tight { padding-block: var(--sp-7); }

  .grid { display: grid; gap: var(--sp-6); }
  @media (min-width: 64rem) {
    .grid--hero { grid-template-columns: 7fr 5fr; gap: var(--sp-8); align-items: center; }
    .grid--split { grid-template-columns: 5fr 7fr; gap: var(--sp-9); align-items: start; }
    .grid--halves { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  }

  .stack > * + * { margin-top: var(--sp-5); }
  .stack-sm > * + * { margin-top: var(--sp-3); }
  .stack-lg > * + * { margin-top: var(--sp-7); }
  .center { text-align: center; margin-inline: auto; }
  .measure { max-width: var(--w-read); }
}

/* ------------------------------------------------------------------ */
@layer components {
  /* ----- Typographie de section ----- */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--accent);
  }
  .eyebrow::before {
    content: '';
    width: 14px; height: 14px; flex: none;
    background: currentColor;
    -webkit-mask: var(--ray-mask) center / contain no-repeat;
    mask: var(--ray-mask) center / contain no-repeat;
  }
  .on-ink .eyebrow, .section--ink .eyebrow { color: var(--accent-on-dark); }
  .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
  .h2 { font-size: var(--fs-h2); line-height: 1.1; }
  .h3 { font-size: var(--fs-h3); }
  .h4 { font-size: var(--fs-h4); }
  .lead { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.55; }
  .muted { color: var(--ink-2); }
  .quiet { color: var(--ink-3); }
  .small { font-size: var(--fs-small); }
  .on-ink .lead, .section--ink .lead, .on-ink .muted, .section--ink .muted { color: var(--on-ink-2); }
  .num { font-family: var(--font-serif); font-variant-numeric: lining-nums; color: var(--accent); }

  /* ----- Ornement rayon (masque réutilisable) ----- */
  :root {
    --ray-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cg stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 1.5v4.2M12 18.3v4.2M1.5 12h4.2M18.3 12h4.2'/%3E%3Cpath d='M4.6 4.6l2.4 2.4M17 17l2.4 2.4M4.6 19.4L7 17M17 7l2.4-2.4' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E");
  }
  .ray-divider {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    color: var(--accent);
    max-width: 18rem;
    margin-inline: auto;
  }
  .ray-divider::before, .ray-divider::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.35; }
  .ray-divider span { width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--ray-mask) center / contain no-repeat; mask: var(--ray-mask) center / contain no-repeat; }

  /* ----- Boutons ----- */
  .btn {
    --btn-bg: var(--accent);
    --btn-fg: var(--accent-ink);
    --btn-bd: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--btn-h);
    padding: var(--sp-3) var(--sp-6);
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--shadow-1);
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  .btn:hover { --btn-bg: var(--accent-hover); color: var(--btn-fg); box-shadow: var(--shadow-2); }
  .btn:active { transform: translateY(1px); box-shadow: var(--shadow-1); }
  .btn__arrow { display: inline-block; transition: transform var(--dur-2) var(--ease); }
  .btn:hover .btn__arrow { transform: translateX(3px); }
  .btn--lg { min-height: var(--btn-h-lg); padding-inline: var(--sp-7); font-size: 1.0625rem; }
  .btn--block { width: 100%; }
  .btn--secondary { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); box-shadow: none; }
  .btn--secondary:hover { --btn-bg: var(--surface); --btn-bd: var(--ink); box-shadow: none; }
  .on-ink .btn, .section--ink .btn { --btn-bg: var(--accent-on-dark); --btn-fg: var(--ink); }
  .on-ink .btn:hover, .section--ink .btn:hover { --btn-bg: var(--cream-50); }
  .on-ink .btn--secondary, .section--ink .btn--secondary { --btn-bg: transparent; --btn-fg: var(--on-ink); --btn-bd: var(--line-on-ink); }
  .on-ink .btn--secondary:hover, .section--ink .btn--secondary:hover { --btn-bg: rgba(247, 241, 232, 0.08); --btn-bd: var(--on-ink); }
  /* Indisponible : couleurs atténuées mais lisibles (6,1:1), sans transparence */
  .btn[aria-disabled='true'], .offer__card .btn[aria-disabled='true'] { --btn-bg: var(--accent-soft); --btn-fg: var(--accent-hover); --btn-bd: var(--accent-soft); cursor: not-allowed; box-shadow: none; }
  .btn[aria-disabled='true']:hover { --btn-bg: var(--accent-soft); }
  .btn[aria-disabled='true']:hover .btn__arrow { transform: none; }
  .btn[aria-busy='true'] { pointer-events: none; }
  .btn[aria-busy='true']::after {
    content: ''; width: 1em; height: 1em; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: spin 700ms linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .link {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    min-height: 44px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.3em;
  }
  .link:hover { color: var(--accent); }
  .on-ink .link, .section--ink .link { color: var(--on-ink); text-decoration-color: var(--accent-on-dark); }
  .on-ink .link:hover, .section--ink .link:hover { color: var(--accent-on-dark); }

  .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
  .reassure {
    display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4);
    list-style: none; padding: 0;
    font-size: var(--fs-small); color: var(--ink-2);
  }
  .reassure li { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .reassure li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
  .on-ink .reassure, .section--ink .reassure { color: var(--on-ink-2); }
  .on-ink .reassure li::before, .section--ink .reassure li::before { background: var(--accent-on-dark); }

  /* ----- Navigation ----- */
  .skip-link {
    position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
    padding: var(--sp-3) var(--sp-4);
    background: var(--ink); color: var(--bg); border-radius: var(--r-sm);
  }
  .skip-link:focus { top: var(--sp-3); color: var(--bg); }

  .nav {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: rgba(247, 241, 232, 0.92);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  }
  @supports (backdrop-filter: blur(1px)) { .nav { background: rgba(247, 241, 232, 0.8); backdrop-filter: saturate(1.4) blur(12px); } }
  .nav.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(31, 27, 22, 0.02), 0 8px 24px rgba(31, 27, 22, 0.04); }
  .nav__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--nav-h); transition: min-height var(--dur-2) var(--ease); }
  .nav.is-scrolled .nav__inner { min-height: 3.75rem; }
  .nav__links { display: none; list-style: none; padding: 0; margin: 0 0 0 auto; gap: var(--sp-6); }
  .nav__link {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--ink-2); font-size: var(--fs-small); font-weight: 500; text-decoration: none;
    background: linear-gradient(var(--accent), var(--accent)) left 75% / 0 1px no-repeat;
    transition: color var(--dur-1) var(--ease), background-size var(--dur-2) var(--ease);
  }
  .nav__link:hover, .nav__link[aria-current='page'] { color: var(--ink); background-size: 100% 1px; }
  .nav__cta { margin-left: auto; min-height: 2.75rem; padding-inline: var(--sp-5); font-size: var(--fs-small); white-space: nowrap; }
  .nav__menu-btn {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px;
    border: 1px solid var(--line); border-radius: var(--r-pill);
    background: var(--surface); color: var(--ink);
  }
  .nav__menu-btn svg { width: 18px; height: 18px; }
  .nav__cta-long { display: none; }
  @media (min-width: 30rem) { .nav__cta-long { display: inline; } .nav__cta-short { display: none; } }
  @media (min-width: 60rem) {
    .nav__links { display: flex; }
    .nav__cta { margin-left: var(--sp-5); }
    .nav__menu-btn { display: none; }
  }
  .menu-panel {
    position: fixed; inset: var(--nav-h) 0 auto 0; z-index: var(--z-menu);
    background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2);
    padding: var(--sp-3) var(--gutter) var(--sp-6);
  }
  .menu-panel ul { list-style: none; padding: 0; margin: 0; }
  .menu-panel a { display: flex; min-height: 52px; align-items: center; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: var(--font-serif); font-size: 1.375rem; }
  @media (min-width: 60rem) { .menu-panel { display: none !important; } }

  .logo { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; color: var(--ink); text-decoration: none; }
  .logo:hover { color: var(--ink); }
  .logo__mark { width: 28px; height: 28px; flex: none; color: var(--accent); }
  .logo__type { font-family: var(--font-serif); font-size: 1.1875rem; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; font-variation-settings: 'SOFT' 50, 'opsz' 24; }
  .logo__type i { font-style: italic; color: var(--accent); }
  @media (max-width: 23.5rem) {
    .nav .logo__pre { display: none; }
    .nav__inner { gap: var(--sp-3); }
    .nav__cta { padding-inline: var(--sp-4); }
  }
  .on-ink .logo, .on-ink .logo:hover { color: var(--on-ink); }
  .on-ink .logo__mark, .on-ink .logo__type i { color: var(--accent-on-dark); }

  /* ----- Cartes ----- */
  .card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    box-shadow: var(--shadow-1);
  }
  .card--lift { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
  @media (hover: hover) { .card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } }

  /* ----- Listes ----- */
  .checklist { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
  .checklist li { position: relative; padding-left: 2rem; }
  .checklist li::before {
    content: ''; position: absolute; left: 0; top: 0.3em;
    width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l2.9 2.9 6-6.3' fill='none' stroke='%23A64B2A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  }
  .crosslist { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
  .crosslist li { position: relative; padding-left: 2rem; color: var(--ink-2); }
  .crosslist li::before {
    content: ''; position: absolute; left: 0; top: 0.3em;
    width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid var(--line-strong);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 10h6' stroke='%236E6358' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  }
  .raylist { list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
  .raylist li { position: relative; padding-left: 2.25rem; }
  .raylist li::before {
    content: ''; position: absolute; left: 0; top: 0.25em;
    width: 1.125rem; height: 1.125rem;
    background: var(--accent);
    -webkit-mask: var(--ray-mask) center / contain no-repeat; mask: var(--ray-mask) center / contain no-repeat;
  }

  /* ----- Citation ----- */
  .quote {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    line-height: 1.3;
    font-weight: 340;
    font-style: italic;
    letter-spacing: -0.01em;
    text-wrap: balance;
    font-variation-settings: 'SOFT' 100, 'opsz' 72;
  }
  .quote--rule { padding-left: var(--sp-5); border-left: 2px solid var(--accent); }

  /* ----- Accordéon FAQ ----- */
  .faq { border-top: 1px solid var(--line); }
  .faq__item { border-bottom: 1px solid var(--line); }
  .faq__q { margin: 0; font-size: inherit; font-family: inherit; letter-spacing: 0; font-weight: inherit; }
  .faq__btn {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--sp-5);
    min-height: 64px; padding: var(--sp-5) 0;
    background: none; border: 0; text-align: left;
    font-family: var(--font-serif); font-size: var(--fs-h4); line-height: 1.3; font-weight: 400;
    color: var(--ink);
  }
  .faq__btn:hover { color: var(--accent); }
  .faq__icon { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; transition: transform var(--dur-3) var(--ease), background-color var(--dur-2) var(--ease); }
  .faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
  .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--dur-3) var(--ease); }
  .faq__btn[aria-expanded='true'] .faq__icon { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
  .faq__btn[aria-expanded='true'] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
  .faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease); }
  .faq__panel > div { overflow: hidden; }
  .faq__panel.is-open { grid-template-rows: 1fr; }
  .faq__answer { padding: 0 var(--sp-6) var(--sp-5) 0; color: var(--ink-2); max-width: 40rem; }
  .faq__answer > * + * { margin-top: var(--sp-3); }

  /* ----- Formulaires ----- */
  .form { display: grid; gap: var(--sp-4); text-align: left; }
  .field { display: grid; gap: var(--sp-2); }
  .field label { font-weight: 600; font-size: var(--fs-small); }
  .field__hint { font-size: var(--fs-small); color: var(--ink-2); }
  .input { min-height: 3.25rem; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 1rem; }
  .input:focus-visible { border-color: var(--accent); }
  .input[aria-invalid='true'] { border-color: var(--danger); }
  .field__error { color: var(--danger); font-size: var(--fs-small); font-weight: 600; }
  .checkbox { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-small); }
  .checkbox input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--accent); flex: none; }
  .form__status { font-weight: 600; font-size: var(--fs-small); }
  .form__status--error { color: var(--danger); }
  .on-ink .field__error, .on-ink .form__status--error { color: #FFC9B8; }
  .on-ink .field__hint { color: var(--on-ink-2); }

  /* ----- Notices ----- */
  .notice { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-small); }
  .notice--accent { background: var(--accent-wash); border-color: var(--accent-soft); }
  .on-ink .notice { background: rgba(247, 241, 232, 0.06); border-color: var(--line-on-ink); color: var(--on-ink-2); }

  /* ----- Image éditoriale (prête à recevoir une photo) ----- */
  .figure { margin: 0; }
  .figure__frame { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-deep); aspect-ratio: var(--ratio, 4 / 5); }
  .figure__frame img { width: 100%; height: 100%; object-fit: cover; }
  .figure figcaption { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--ink-3); }

  /* ----- Badges et notes internes (mode développement uniquement) ----- */
  .dev-note {
    display: inline-flex; gap: var(--sp-2); align-items: center;
    margin-top: var(--sp-3); padding: 2px var(--sp-3);
    border: 1px dashed var(--accent); border-radius: var(--r-sm);
    background: var(--surface); color: var(--accent);
    font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; font-style: normal; letter-spacing: 0;
  }
  html:not(.is-dev) .dev-note, html:not(.is-dev) [data-dev-only] { display: none !important; }
  .dev-panel {
    position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-dev);
    width: min(24rem, calc(100vw - 2rem)); max-height: 60vh; overflow: auto;
    padding: var(--sp-4); border-radius: var(--r-md);
    background: var(--ink-bg); color: var(--on-ink); box-shadow: var(--shadow-3);
    font-size: 0.8125rem; line-height: 1.5;
  }
  .dev-panel h2 { font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; }
  .dev-panel ul { margin-top: var(--sp-2); padding-left: 1.1rem; }
  .dev-panel button { margin-top: var(--sp-3); background: none; border: 1px solid var(--line-on-ink); color: var(--on-ink); border-radius: var(--r-sm); padding: 4px 10px; }

  /* ----- CTA mobile persistant ----- */
  .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-cta);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: rgba(255, 253, 249, 0.96);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(31, 27, 22, 0.06);
    transform: translateY(110%);
    transition: transform var(--dur-3) var(--ease);
  }
  .sticky-cta.is-visible { transform: none; }
  .sticky-cta__price { font-family: var(--font-serif); font-size: 1.375rem; line-height: 1; }
  .sticky-cta__price small { display: block; margin-top: 2px; font-family: var(--font-sans); font-size: 0.75rem; color: var(--ink-3); }
  .sticky-cta .btn { min-height: 3rem; padding-inline: var(--sp-5); }
  @media (min-width: 60rem) { .sticky-cta { display: none; } }

  /* ----- Toast ----- */
  .toast {
    position: fixed; left: 50%; bottom: calc(var(--sticky-h) + var(--sp-4)); z-index: var(--z-toast);
    transform: translateX(-50%);
    max-width: min(30rem, calc(100vw - 2rem));
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-md);
    background: var(--ink-bg); color: var(--on-ink); box-shadow: var(--shadow-3);
    font-size: var(--fs-small);
  }

  /* ----- Consentement (inactif tant qu'aucun traceur soumis à consentement) ----- */
  .consent {
    position: fixed; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-toast);
    max-width: 34rem; padding: var(--sp-5);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3);
  }

  /* ----- Footer ----- */
  .footer { position: relative; z-index: 2; padding-block: var(--sp-9) var(--sp-6); }
  .footer a { color: var(--on-ink); text-decoration: none; }
  .footer a:hover { color: var(--accent-on-dark); text-decoration: underline; }
  .footer__grid { display: grid; gap: var(--sp-7); }
  @media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
  .footer__baseline { margin-top: var(--sp-4); max-width: 22rem; font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; line-height: 1.35; color: var(--on-ink); }
  .footer__title { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-on-dark); }
  .footer__list { list-style: none; padding: 0; margin-top: var(--sp-4); display: grid; gap: var(--sp-1); font-size: var(--fs-small); }
  .footer__list a { display: inline-flex; min-height: 32px; align-items: center; }
  .footer__limits { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--line-on-ink); display: grid; gap: var(--sp-3); font-size: var(--fs-small); color: var(--on-ink-2); }
  @media (min-width: 48rem) { .footer__limits { grid-template-columns: 2fr 1fr; } .footer__copy { text-align: right; } }
}

/* ------------------------------------------------------------------ */
@layer sections {
  /* ----- Hero ----- */
  .hero { position: relative; padding-block: var(--sp-7) var(--section-y); overflow: hidden; }
  .hero::before {
    content: ''; position: absolute; z-index: -1;
    width: 70rem; height: 70rem; right: -28rem; top: -26rem;
    background: var(--glow);
  }
  .hero__title { font-size: var(--fs-h1); line-height: var(--lh-tight); margin-top: var(--sp-5); max-width: 15ch; }
  .hero__sub { margin-top: var(--sp-5); max-width: 36rem; }
  .hero__ctas { margin-top: var(--sp-6); }
  .hero__reassure { margin-top: var(--sp-5); }
  .hero__visual { position: relative; width: min(100%, 30rem); margin-inline: auto; aspect-ratio: 1; }
  .hero__visual svg { width: 100%; height: 100%; overflow: visible; }
  @media (min-width: 64rem) { .hero { padding-top: var(--sp-9); } .hero__title { max-width: 14ch; } }
  @media (max-width: 63.99rem) { .hero__visual { width: min(72%, 17rem); margin-top: var(--sp-4); } }

  .rays-spin { transform-origin: 200px 200px; }
  @media (prefers-reduced-motion: no-preference) {
    .rays-spin { animation: rays-turn 120s linear infinite; }
    .rays-breathe { animation: rays-breathe 7s ease-in-out infinite; transform-origin: 200px 200px; }
  }
  @keyframes rays-turn { to { transform: rotate(360deg); } }
  @keyframes rays-breathe { 50% { opacity: 0.55; transform: scale(1.04); } }

  /* ----- Bandeau de faits ----- */
  .facts { border-block: 1px solid var(--line); background: var(--bg-soft); position: relative; z-index: 2; }
  .facts__list { list-style: none; padding: var(--sp-5) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
  .facts__item { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); color: var(--ink-2); line-height: 1.35; }
  .facts__item strong { color: var(--ink); font-weight: 600; }
  .facts__icon { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--accent); }
  .facts__icon svg { width: 18px; height: 18px; }
  @media (min-width: 64rem) { .facts__list { grid-template-columns: repeat(4, 1fr); padding-block: var(--sp-6); } }

  /* ----- Miroir ----- */
  .mirror__list { list-style: none; padding: 0; margin-top: var(--sp-7); }
  .mirror__list li {
    position: relative;
    padding: var(--sp-4) 0 var(--sp-4) var(--sp-7);
    border-top: 1px solid var(--line);
    font-size: var(--fs-lead);
    line-height: 1.5;
  }
  .mirror__list li::before {
    content: ''; position: absolute; left: 0; top: calc(var(--sp-4) + 0.4em);
    width: 1.25rem; height: 1px; background: var(--accent);
  }
  .mirror__quote { margin-top: var(--sp-8); }
  .bridge { margin-top: var(--sp-7); font-family: var(--font-serif); font-style: italic; font-size: var(--fs-h4); color: var(--accent); }
  .section--ink .bridge { color: var(--accent-on-dark); }

  /* ----- Déclic ----- */
  .gestures { list-style: none; padding: 0; margin-top: var(--sp-8); display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: g; }
  .gesture { padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 3rem 1fr; gap: var(--sp-2) var(--sp-4); align-items: baseline; }
  .gesture__num { font-family: var(--font-serif); font-size: 1.5rem; color: var(--accent); line-height: 1; }
  .gesture__title { font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: 400; letter-spacing: -0.01em; }
  .gesture__text { grid-column: 2; color: var(--ink-2); font-size: var(--fs-small); }
  @media (min-width: 64rem) {
    .gestures { grid-template-columns: repeat(4, 1fr); border-top: 0; gap: var(--sp-5); }
    .gesture { grid-template-columns: 1fr; border: 0; border-top: 1px solid var(--ink); padding-top: var(--sp-5); }
    .gesture__text { grid-column: 1; }
  }

  /* ----- Mécanisme : 4 rayons (onglets) ----- */
  .mech { display: grid; gap: var(--sp-7); margin-top: var(--sp-8); align-items: center; }
  @media (min-width: 64rem) { .mech { grid-template-columns: 5fr 7fr; gap: var(--sp-9); } }
  .mech__diagram { width: min(100%, 26rem); margin-inline: auto; aspect-ratio: 1; }
  .mech__diagram svg { width: 100%; height: 100%; overflow: visible; }
  .mech__ray { stroke: var(--line-strong); stroke-width: 1.2; transition: stroke var(--dur-3) var(--ease), stroke-width var(--dur-3) var(--ease); }
  .mech__ray.is-active { stroke: var(--accent); stroke-width: 2.5; }
  .mech__node { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; transition: fill var(--dur-3) var(--ease), stroke var(--dur-3) var(--ease); }
  .mech__node.is-active { fill: var(--accent); stroke: var(--accent); }
  .mech__node-num { font-family: var(--font-serif); font-size: 15px; fill: var(--ink); transition: fill var(--dur-3) var(--ease); pointer-events: none; }
  .mech__node-num.is-active { fill: var(--accent-ink); }
  .mech__center-label { font-family: var(--font-serif); font-size: 14px; font-style: italic; fill: var(--accent-ink); }
  .mech__label { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink-3); }
  .mech__label.is-active { fill: var(--accent); }

  .tabs__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  @media (min-width: 40rem) { .tabs__list { grid-template-columns: repeat(4, 1fr); } }
  .tab {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    min-height: 64px; padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface); color: var(--ink-2); text-align: left;
    font-size: var(--fs-small); font-weight: 600; line-height: 1.25;
    transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  }
  .tab__num { font-family: var(--font-serif); font-weight: 400; font-size: 1rem; color: var(--accent); }
  .tab:hover { border-color: var(--line-strong); color: var(--ink); }
  .tab[aria-selected='true'] { border-color: var(--accent); background: var(--accent-wash); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
  .tabpanel { margin-top: var(--sp-6); }
  .tabpanel[hidden] { display: none; }
  .tabpanel__q { font-size: var(--fs-h3); line-height: 1.2; }
  .tabpanel__promise { margin-top: var(--sp-4); font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.55; }
  .tabpanel__rows { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
  .tabpanel__row { display: grid; gap: var(--sp-1); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
  .tabpanel__row dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); }
  .tabpanel__row dd { color: var(--ink); }
  @media (prefers-reduced-motion: no-preference) {
    .tabpanel.is-entering { animation: fade-up var(--dur-3) var(--ease); }
  }
  @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* ----- Sensualité ----- */
  .sensuality { overflow: hidden; }
  .sensuality::before { content: ''; position: absolute; width: 60rem; height: 60rem; left: 50%; top: -30rem; transform: translateX(-50%); background: var(--glow-dark); pointer-events: none; }
  .sensuality__statement { margin-top: var(--sp-6); font-size: var(--fs-lead); color: var(--on-ink); max-width: 36rem; }
  .faces { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }
  @media (min-width: 48rem) { .faces { grid-template-columns: 1fr 1fr; } }
  .face { position: relative; padding: var(--sp-6); border: 1px solid var(--line-on-ink); border-radius: var(--r-lg); background: rgba(247, 241, 232, 0.03); }
  .face__icon { width: 44px; height: 44px; color: var(--accent-on-dark); }
  .face__title { margin-top: var(--sp-5); font-size: var(--fs-h3); color: var(--on-ink); }
  .face__text { margin-top: var(--sp-3); color: var(--on-ink-2); }
  .sensuality__quote { margin-top: var(--sp-8); max-width: 44rem; color: var(--on-ink); }
  .sensuality__note { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--on-ink-2); }

  /* ----- 360° : Toi, au centre ----- */
  .orbit { margin-top: var(--sp-8); }
  .orbit__list { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
  .orbit__item { border-bottom: 1px solid var(--line); }
  .orbit__btn { display: grid; width: 100%; gap: 2px; padding: var(--sp-4) 0; background: none; border: 0; text-align: left; color: var(--ink); cursor: default; }
  .orbit__name { font-family: var(--font-serif); font-size: var(--fs-h4); }
  .orbit__desc { font-size: var(--fs-small); color: var(--ink-2); }
  .orbit__stage, .orbit__center { display: none; }
  @media (min-width: 64rem) {
    .orbit { position: relative; width: 44rem; height: 44rem; margin-inline: auto; }
    .orbit__stage { display: block; position: absolute; inset: 0; }
    .orbit__stage svg { width: 100%; height: 100%; }
    .orbit__list { position: absolute; inset: 0; border: 0; display: block; }
    .orbit__item { position: absolute; left: 50%; top: 50%; border: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-19rem) rotate(calc(-1 * var(--a))); }
    .orbit__btn {
      width: auto; padding: var(--sp-2) var(--sp-4); min-height: 44px; place-items: center;
      background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
      box-shadow: var(--shadow-1); cursor: pointer; white-space: nowrap;
      transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
    }
    .orbit__btn:hover, .orbit__btn[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-wash); box-shadow: var(--shadow-2); }
    .orbit__name { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; }
    .orbit__desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .orbit__center {
      display: grid; place-content: center; gap: var(--sp-2);
      position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
      width: 19rem; height: 19rem; padding: var(--sp-6);
      border-radius: 50%; text-align: center;
      background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2);
    }
    .orbit__center-title { font-family: var(--font-serif); font-size: 1.75rem; line-height: 1.1; }
    .orbit__center-text { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; }
  }

  /* ----- Contenu du parcours ----- */
  .included { display: grid; gap: var(--sp-6); margin-top: var(--sp-7); }
  @media (min-width: 64rem) { .included { grid-template-columns: 7fr 5fr; gap: var(--sp-7); align-items: start; } }
  .included__card { padding: var(--sp-6); }
  .included__title { font-size: var(--fs-h4); }
  .included__card .checklist { margin-top: var(--sp-5); }
  .included__not { padding: var(--sp-6); border-radius: var(--r-md); border: 1px dashed var(--line-strong); }
  .included__not .crosslist { margin-top: var(--sp-5); }

  /* ----- Transformation ----- */
  .compare { margin-top: var(--sp-8); display: grid; gap: var(--sp-3); }
  .compare__head { display: none; }
  .compare__row { display: grid; gap: var(--sp-2); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
  .compare__cell { position: relative; padding-left: var(--sp-6); }
  .compare__cell::before { content: attr(data-label); display: block; margin-left: calc(-1 * var(--sp-6)); margin-bottom: 2px; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); }
  .compare__cell--after { color: var(--ink); }
  .compare__cell--before { color: var(--ink-2); }
  @media (min-width: 48rem) {
    .compare { gap: 0; border-top: 1px solid var(--line); }
    .compare__head { display: grid; grid-template-columns: 1fr 3rem 1fr; padding: var(--sp-4) 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); }
    .compare__row { grid-template-columns: 1fr 3rem 1fr; align-items: center; padding: var(--sp-5) 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
    .compare__cell { padding-left: 0; }
    .compare__cell::before { display: none; }
    .compare__arrow { display: block !important; color: var(--accent); }
    .compare__cell--after { font-family: var(--font-serif); font-size: var(--fs-h4); line-height: 1.35; }
  }
  .compare__arrow { display: none; width: 22px; height: 22px; }

  /* ----- Fondatrice ----- */
  .founder { display: grid; gap: var(--sp-7); align-items: center; }
  @media (min-width: 64rem) { .founder { grid-template-columns: 5fr 7fr; gap: var(--sp-9); } }
  .founder__story > * + * { margin-top: var(--sp-4); }
  .founder__sign { margin-top: var(--sp-6); font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; color: var(--accent); }

  /* ----- Témoignages (désactivés sans vrais retours) ----- */
  .testimonials { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
  @media (min-width: 48rem) { .testimonials { grid-template-columns: repeat(2, 1fr); } }
  .testimonial blockquote { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.45; }
  .testimonial figcaption { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--ink-3); }

  /* ----- Pour qui ----- */
  .fit { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
  @media (min-width: 48rem) { .fit { grid-template-columns: 1fr 1fr; } }
  .fit__col { padding: var(--sp-6); border-radius: var(--r-lg); }
  .fit__col--yes { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
  .fit__col--no { border: 1px solid var(--line); }
  .fit__title { font-size: var(--fs-h4); }
  .fit__col ul { margin-top: var(--sp-5); }
  .fit__care { margin-top: var(--sp-6); text-align: center; font-size: var(--fs-small); color: var(--ink-2); }

  /* ----- Offre ----- */
  .offer { overflow: hidden; }
  .offer::before { content: ''; position: absolute; width: 64rem; height: 64rem; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--glow-dark); pointer-events: none; }
  .offer__head { position: relative; text-align: center; max-width: 40rem; margin-inline: auto; }
  .offer__card {
    position: relative;
    max-width: 36rem; margin: var(--sp-7) auto 0;
    padding: var(--sp-6) var(--sp-5);
    background: var(--surface); color: var(--ink);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
  }
  @media (min-width: 40rem) { .offer__card { padding: var(--sp-7); } }
  .offer__badge { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); color: var(--accent); }
  .offer__badge svg { width: 30px; height: 30px; }
  /* La carte d'offre est claire : ses boutons et liens reprennent les styles sur fond clair */
  .offer__card .btn { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); }
  .offer__card .btn:hover { --btn-bg: var(--accent-hover); }
  .offer__card .link { color: var(--ink); text-decoration-color: var(--accent); }
  .offer__card :focus-visible { outline-color: var(--focus); }
  .offer__name { font-size: var(--fs-h3); text-align: center; margin-top: var(--sp-3); }
  .offer__tagline { text-align: center; margin-top: var(--sp-2); color: var(--ink-2); }
  .offer__card .checklist { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
  .offer__price { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line); text-align: center; }
  .offer__amount { font-family: var(--font-serif); font-size: var(--fs-display); line-height: 1; letter-spacing: -0.03em; font-weight: 360; font-variation-settings: 'SOFT' 50, 'opsz' 144; }
  .offer__terms { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); }
  .offer__launch { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--accent); font-weight: 600; }
  .offer__anchor { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--ink-3); }
  .offer__cta { margin-top: var(--sp-6); }
  .offer__soon { margin-top: var(--sp-4); }
  .offer__secure { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-small); color: var(--ink-2); list-style: none; padding: 0; }
  .offer__secure li { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .offer__secure svg { width: 16px; height: 16px; color: var(--sage); }
  .offer__alt { position: relative; margin-top: var(--sp-6); text-align: center; color: var(--on-ink-2); font-size: var(--fs-small); }
  .offer__why { position: relative; max-width: 40rem; margin: var(--sp-8) auto 0; display: grid; gap: var(--sp-6); }
  @media (min-width: 48rem) { .offer__why { grid-template-columns: 1fr 1fr; } }
  .offer__why h3 { font-size: var(--fs-h4); color: var(--on-ink); }
  .offer__why p { margin-top: var(--sp-3); color: var(--on-ink-2); font-size: var(--fs-small); }
  .seal { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-on-ink); color: var(--accent-on-dark); }
  .seal svg { width: 22px; height: 22px; }

  /* ----- FAQ ----- */
  .faq-wrap { max-width: 44rem; margin: var(--sp-7) auto 0; }

  /* ----- CTA final ----- */
  .final { overflow: hidden; text-align: center; }
  .final::before { content: ''; position: absolute; width: 56rem; height: 56rem; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--glow); pointer-events: none; }
  .final > * { position: relative; }
  .final__title { font-size: var(--fs-h2); max-width: 18ch; margin: var(--sp-5) auto 0; }
  .final__text { margin: var(--sp-5) auto 0; max-width: 34rem; }
  .final__ctas { justify-content: center; margin-top: var(--sp-7); }
  .final__last { margin-top: var(--sp-8); font-family: var(--font-serif); font-style: italic; font-size: var(--fs-h4); color: var(--accent); }

  /* ----- Pages simples (légal, merci, 404, programme) ----- */
  .page-head { padding-block: var(--sp-9) var(--sp-7); position: relative; overflow: hidden; }
  .page-head::before { content: ''; position: absolute; z-index: -1; width: 50rem; height: 50rem; right: -20rem; top: -26rem; background: var(--glow); }
  .page-head h1 { font-size: var(--fs-h2); margin-top: var(--sp-4); max-width: 20ch; }
  .page-head .lead { margin-top: var(--sp-4); max-width: 38rem; }
  .legal { padding-bottom: var(--section-y); }
  .legal h2 { font-size: var(--fs-h4); margin-top: var(--sp-7); }
  .legal h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; margin-top: var(--sp-5); }
  .legal p, .legal ul, .legal dl { margin-top: var(--sp-3); }
  .legal ul { padding-left: 1.2rem; }
  .legal dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-5); }
  .legal dt { font-weight: 600; }
  .todo { color: var(--accent); font-weight: 600; }

  .modules { list-style: none; padding: 0; margin-top: var(--sp-7); display: grid; gap: var(--sp-4); }
  .module { display: grid; gap: var(--sp-3); padding: var(--sp-6); }
  @media (min-width: 48rem) { .module { grid-template-columns: 5rem 1fr; gap: var(--sp-5); } }
  .module__num { font-family: var(--font-serif); font-size: 2.25rem; line-height: 1; color: var(--accent); }
  .module__title { font-size: var(--fs-h3); }
  .module dl { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
  .module dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); }

  .steps { list-style: none; padding: 0; margin-top: var(--sp-7); display: grid; gap: var(--sp-5); counter-reset: s; }
  @media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
  .step { counter-increment: s; padding-top: var(--sp-5); border-top: 1px solid var(--ink); }
  .step::before { content: counter(s, decimal-leading-zero); font-family: var(--font-serif); font-size: 1.5rem; color: var(--accent); }
  .step h2, .step h3 { margin-top: var(--sp-3); font-size: var(--fs-h4); }
  .step p { margin-top: var(--sp-2); color: var(--ink-2); font-size: var(--fs-small); }

  .error-page { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: var(--sp-9); }
  .error-page__mark { width: 6rem; height: 6rem; margin: 0 auto var(--sp-5); color: var(--accent); }
}

/* ------------------------------------------------------------------ */
@layer utilities {
  .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  [hidden] { display: none !important; }
  body.menu-open { overflow: hidden; }
  body.has-sticky { padding-bottom: 0; }
  @media (max-width: 59.99rem) { body.has-sticky .footer { padding-bottom: calc(var(--sp-6) + var(--sticky-h)); } }

  /* Apparition douce au défilement (une seule fois) */
  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
    .js [data-reveal].is-visible { opacity: 1; transform: none; }
  }
}