/* ==========================================================================
   LES ANNEAUX — styles.css
   Maison d'édition contemporaine : chaud, imprimé, artisanal.
   Palette identique au livre, non négociable.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
s { text-decoration: none; }

/* ---- Tokens ---- */
:root {
  --paper:    #EDE7D6;
  --paper-up: #F4EFE2;
  --ink:      #211D17;
  --forest:   #33422E;
  --ochre:    #B98A3D;
  --rosewood: #7A3B34;

  /* L'ocre de marque ne fait que 2,51:1 sur le papier : illisible en texte.
     On le garde pour les FORMES (fruits, anneaux, logo, puces) et on
     dérive ce ton plus profond, même famille, pour le TEXTE — 4,71:1. */
  --ochre-deep: #825F26;

  --ink-soft: #4A4438;
  --line:      rgba(33, 29, 23, 0.14);
  --line-soft: rgba(33, 29, 23, 0.07);

  --font-title: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:  'Lora', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', 'Space Mono', ui-monospace, Consolas, monospace;

  --container: 1180px;
  --pad-inline: clamp(1.25rem, 5vw, 3.25rem);
  --section-pad: clamp(4.5rem, 11vw, 9rem);
  --header-h: 4.75rem;

  --radius-s: 3px;
  --radius-m: 6px;

  /* Hauteur de la barre d'achat fixe. Valeur de secours le temps que
     main.js prenne la mesure réelle (ResizeObserver) : elle inclut déjà
     la safe area iPhone, qui fait partie du padding de la barre. */
  --sticky-buy-height: 5rem;

  /* courbes d'animation — une seule grammaire pour tout le site */
  --ease:     cubic-bezier(.22, .7, .2, 1);      /* glissement calme */
  --ease-out: cubic-bezier(.16, 1, .3, 1);       /* sortie longue */
  --spring:   cubic-bezier(.34, 1.45, .5, 1);    /* retour élastique */

  --shadow-warm:    0 24px 48px -22px rgba(66, 44, 26, 0.34);
  --shadow-warm-lg: 0 40px 70px -26px rgba(66, 44, 26, 0.44);
}

html { background: var(--paper); color: var(--ink); }
html.smooth-scroll { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.4vw + 0.92rem, 1.125rem);
  line-height: 1.65;
  background: var(--paper);
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

.section { padding-block: var(--section-pad); border-top: 1px solid var(--line-soft); }

/* ---- Typographie ---- */
.surtitle {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--forest);
}
.surtitle--rosewood { color: var(--rosewood); }
.surtitle--ochre    { color: var(--ochre-deep); }

h1, h2, h3 { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.012em; }

.section-title {
  font-size: clamp(2.1rem, 2.4vw + 1.35rem, 3.6rem);
  line-height: 1.05;
  max-width: 17ch;
  margin-top: 1rem;
}

.lede {
  font-style: italic;
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.3rem);
  color: var(--ink-soft);
  max-width: 44ch;
  line-height: 1.5;
  margin-top: 1.4rem;
}

p { max-width: 62ch; }
p + p { margin-top: 1.1em; }

/* ---- Accessibilité ---- */
.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 300;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem; border-radius: var(--radius-s);
  font-family: var(--font-mono); font-size: 0.85rem;
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--rosewood); outline-offset: 3px; border-radius: 2px; }

/* ==========================================================================
   GRAIN — texture papier, générée en CSS (aucune image)
   ========================================================================== */
.grain {
  position: fixed; inset: -50%;
  z-index: 400; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.motion-ok .grain { animation: grain-drift 8s steps(6) infinite; }
@keyframes grain-drift {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-1.5%, 1%); }
  40% { transform: translate(1%, -1.5%); }
  60% { transform: translate(-1%, -1%); }
  80% { transform: translate(1.5%, 1.5%); }
}

/* ==========================================================================
   CURSEUR — point ocre à inertie (pointeur fin uniquement)
   ========================================================================== */
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ochre);
  z-index: 350; pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity .3s var(--ease), width .35s var(--spring),
              height .35s var(--spring), background-color .35s var(--ease);
  mix-blend-mode: multiply;
}
html.has-cursor .cursor-dot { opacity: 1; }
html.has-cursor.cursor-active .cursor-dot {
  width: 44px; height: 44px;
  background: rgba(122, 59, 52, 0.22);
}
@media (hover: none), (pointer: coarse) { .cursor-dot { display: none; } }

/* ==========================================================================
   BOUTONS — remplissage ocre qui monte, léger grossissement
   ========================================================================== */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 1.05rem 2.1rem;
  border-radius: var(--radius-s);
  cursor: pointer;
  will-change: transform;
  /* --mx / --my sont posés par le curseur magnétique (main.js) ;
     le grossissement du survol reste géré ici. */
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1);
  transition: transform .4s var(--spring), box-shadow .5s var(--ease), color .35s var(--ease);
}
.btn__label { position: relative; z-index: 2; }

/* le fond qui monte depuis le bas */
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--ochre);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }

.btn--sm { padding: 0.72rem 1.35rem; font-size: 0.72rem; }
.btn--lg { padding: 1.2rem 2.6rem; font-size: 0.85rem; }

.btn--primary { background: var(--forest); color: var(--paper); }
.btn--primary:hover, .btn--primary:focus-visible { color: var(--ink); }

.btn--buy { background: var(--rosewood); color: var(--paper); font-weight: 600; }
.btn--buy:hover, .btn--buy:focus-visible { color: var(--ink); }

.btn:hover, .btn:focus-visible {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1.045);
  box-shadow: var(--shadow-warm);
}
.btn:active {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(0.985);
  transition-duration: .12s;
}

/* ---- Lien souligné : trait qui se dessine de gauche à droite ---- */
.link-underline {
  position: relative;
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.05em;
  padding-bottom: 0.35em;
  transition: color .35s var(--ease);
}
.link-underline::before,
.link-underline::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
}
.link-underline::before,
.link-underline::after { bottom: var(--ul-offset, 0); }
.link-underline::before { background: var(--line); }
.link-underline::after {
  background: var(--rosewood);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.link-underline:hover, .link-underline:focus-visible { color: var(--rosewood); }
.link-underline:hover::after, .link-underline:focus-visible::after { transform: scaleX(1); }

/* ==========================================================================
   HEADER — se transforme au scroll (aucune barre qui surgit)
   ========================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--header-h);
  display: flex; align-items: center; gap: 1.25rem;
  padding-inline: var(--pad-inline);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--ease), border-color .5s var(--ease),
              box-shadow .5s var(--ease), transform .5s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(237, 231, 214, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 12px 30px -26px rgba(66, 44, 26, 0.5);
}
/* Menu ouvert : le sommaire EST la navigation, donc les liens du header
   s'effacent. Le fond plein masque le contenu qui défile en dessous. */
.site-header.is-menu-open {
  background: var(--paper-up);
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header.is-menu-open .header-nav,
.site-header.is-menu-open .header-buy {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --- marque --- */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; margin-right: auto; }
.brand__mark { width: 30px; height: 30px; flex: none; display: block; }
.brand__mark svg { width: 100%; height: 100%; overflow: visible; }
.brand__arc, .brand__ring, .brand__fruit { transition: transform .7s var(--ease), opacity .5s var(--ease); transform-origin: 60px 60px; }
.brand:hover .brand__arc  { transform: rotate(-28deg); }
.brand:hover .brand__ring { transform: rotate(20deg) scale(1.05); }
.brand:hover .brand__fruit { transform: scale(1.28); }
.brand__word {
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.28em; white-space: nowrap;
  transition: color .35s var(--ease);
}
.brand:hover .brand__word { color: var(--rosewood); }

/* --- nav inline (desktop) --- */
.header-nav {
  display: none; gap: 1.6rem;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.header-nav a {
  position: relative;
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.06em; color: var(--ink-soft);
  padding-block: 0.35rem;
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  transition: color .35s var(--ease), transform .4s var(--ease);
}
.header-nav__num { color: var(--ochre-deep); font-size: 0.66rem; transition: color .35s var(--ease); }
.header-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--rosewood);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.header-nav a:hover, .header-nav a:focus-visible { color: var(--rosewood); transform: translateY(-2px); }
.header-nav a:hover .header-nav__num { color: var(--rosewood); }
.header-nav a:hover::after, .header-nav a:focus-visible::after { transform: scaleX(1); }
.header-nav a.is-current { color: var(--ink); }
.header-nav a.is-current::after { transform: scaleX(1); background: var(--ochre-deep); }

/* --- prix + CTA dans le header ---
   C'est notre barre d'achat collante version bureau : elle glisse en place
   après le premier tiers de la page, et s'efface quand la section Offre
   est déjà à l'écran (le bouton y est alors juste sous les yeux). */
.header-buy {
  display: none; align-items: center; gap: 0.9rem;
  opacity: 0; transform: translateX(18px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility .3s var(--ease);
  pointer-events: none;
}
.header-buy.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.header-buy__price {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; color: var(--rosewood);
}

/* --- bouton menu : trois traits de largeurs différentes --- */
.menu-toggle {
  display: inline-flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 0.15rem;
  transition: color .35s var(--ease);
}
.menu-toggle__lines { display: grid; gap: 4px; width: 22px; }
.menu-toggle__lines i {
  display: block; height: 1.5px; background: var(--ink); border-radius: 2px;
  transform-origin: center;
  transition: transform .5s var(--spring), background-color .35s var(--ease), width .45s var(--ease), opacity .3s var(--ease);
}
.menu-toggle__lines i:nth-child(1) { width: 22px; }
.menu-toggle__lines i:nth-child(2) { width: 15px; }
.menu-toggle__lines i:nth-child(3) { width: 19px; }
.menu-toggle:hover .menu-toggle__lines i { background: var(--rosewood); width: 22px; }
.menu-toggle:hover .menu-toggle__lines i:nth-child(2) { transform: translateX(-3px); }

.menu-toggle__text {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.menu-toggle:hover { color: var(--rosewood); }

/* état ouvert : les traits deviennent une croix */
.menu-toggle[aria-expanded="true"] .menu-toggle__lines i { width: 22px; background: var(--rosewood); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines i:nth-child(1) { transform: translateY(5.5px) rotate(-45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines i:nth-child(3) { transform: translateY(-5.5px) rotate(45deg); }

@media (min-width: 1080px) {
  .header-nav { display: flex; }
  .header-buy { display: flex; }
  .menu-toggle { margin-left: 0.6rem; }
}

/* ==========================================================================
   MENU — le sommaire du livre, en plein écran
   ========================================================================== */
/* Le voile est peint par le fond du panneau lui-même : en pseudo-élément
   « absolute » il ne couvrait que la hauteur de l'écran, et s'arrêtait net
   au milieu de la liste dès que le sommaire dépassait. */
.menu {
  position: fixed; inset: 0; z-index: 190;
  background-color: var(--paper-up);
  background-image:
    radial-gradient(120% 90% at 82% 8%, rgba(185, 138, 61, 0.14), transparent 60%),
    radial-gradient(90% 80% at 10% 96%, rgba(122, 59, 52, 0.12), transparent 62%);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }

.menu__inner {
  position: relative;
  min-height: 100%;
  padding-top: calc(var(--header-h) + clamp(1.5rem, 5vw, 3.5rem));
  padding-bottom: clamp(2.5rem, 7vw, 4.5rem);
  display: grid;
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-content: start;
}

.menu__label { margin-bottom: 1.4rem; }

/* --- colonne des sections --- */
.menu__list { display: flex; flex-direction: column; }
.menu__list a {
  display: flex; align-items: baseline; gap: 1rem;
  padding-block: clamp(0.5rem, 1.4vw, 0.85rem);
  border-bottom: 1px solid var(--line-soft);
  transition: color .4s var(--ease), transform .5s var(--ease), border-color .4s var(--ease);
}
.menu__num {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--ochre-deep); flex: none; width: 2ch;
  transition: color .4s var(--ease);
}
.menu__title {
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.12; font-weight: 500;
}
.menu__list a:hover, .menu__list a:focus-visible {
  color: var(--rosewood);
  transform: translateX(12px);
  border-bottom-color: var(--rosewood);
}
.menu__list a:hover .menu__num { color: var(--rosewood); }

/* --- colonne des branches --- */
.menu__branches { display: flex; flex-direction: column; gap: 0.15rem; }
.menu__branches li {
  display: flex; align-items: baseline; gap: 0.85rem;
  font-size: 0.95rem; color: var(--ink-soft);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-s);
  transition: color .35s var(--ease), background-color .35s var(--ease), transform .4s var(--ease);
}
.menu__branches li span {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--ochre-deep); flex: none;
}
.menu__branches li:hover {
  color: var(--rosewood);
  background: rgba(122, 59, 52, 0.06);
  transform: translateX(6px);
}

.menu__cta {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem;
}
.menu__cta-label {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}
.menu__cta-price { font-family: var(--font-title); font-size: 1.6rem; margin-top: 0.3rem; }
.menu__cta-price s { color: var(--rosewood); opacity: 0.85; text-decoration: line-through; font-size: 1.05rem; margin-right: 0.35rem; }
.menu__cta-price strong { font-weight: 700; }

/* entrée décalée des éléments du menu — lisibles par défaut */
[data-menu-item] { opacity: 1; transform: none; }
html.motion-ok [data-menu-item] { opacity: 0; transform: translateY(22px); }
html.motion-ok .menu.is-open [data-menu-item] {
  animation: menu-in .7s var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes menu-in { to { opacity: 1; transform: none; } }

@media (min-width: 900px) {
  .menu__inner { grid-template-columns: 1.05fr 0.95fr; gap: clamp(3rem, 7vw, 7rem); }
}

/* ==========================================================================
   RÉVÉLATIONS AU SCROLL
   ========================================================================== */
/* Le masquage n'est PAS conditionné à « le JavaScript s'est lancé » mais à
   « l'observateur qui rendra le contenu est en place et fonctionne ».
   main.js ne pose .reveal-armed qu'une fois l'observateur créé sans erreur.
   Sans JavaScript, ou si quoi que ce soit échoue avant, tout le contenu
   reste simplement visible. */
html.reveal-armed [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.reveal-armed [data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
/* Colonne : le bloc de texte se centre dans l'espace disponible et
   l'invite « Descendre » reste DANS le flux, sous lui. En absolu elle
   finissait par chevaucher la ligne de chiffres sur les écrans courts. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 4rem));
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}

.hero__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); width: 100%; margin-block: auto; }
.hero__text { max-width: 46rem; }
.hero__surtitle { margin-bottom: 1.4rem; }

.hero__title {
  font-size: clamp(2.9rem, 4vw + 2.3rem, 6.9rem);
  line-height: 0.96; letter-spacing: -0.022em;
}
.hero__title .line { display: block; }
.hero__title em { font-style: italic; color: var(--rosewood); }

.hero__subtitle {
  margin-top: 1.6rem;
  font-style: italic;
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.4rem);
  color: var(--ink-soft);
  max-width: 34ch; line-height: 1.5;
}

.hero__actions {
  margin-top: 2.4rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
}

.hero__meta {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.hero__meta li { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.hero__meta strong { font-size: 1rem; font-weight: 700; color: var(--ochre-deep); }

/* mobile : on resserre pour que le hero tienne dans un écran */
@media (max-width: 600px) {
  .hero { padding-bottom: clamp(4rem, 10vh, 5.5rem); }
  .hero__subtitle { margin-top: 1.2rem; }
  .hero__actions { margin-top: 1.9rem; gap: 1.1rem 1.4rem; }
  .hero__actions .btn { padding: 0.95rem 1.5rem; }
  .hero__meta {
    margin-top: 1.9rem; padding-top: 1.1rem;
    gap: 0.45rem 1.15rem; font-size: 0.65rem;
  }
  .hero__meta strong { font-size: 0.9rem; }
}

.hero__tree { width: 100%; max-width: 300px; margin-inline: auto; }
.hero__stage { position: relative; }
.hero__stage .tree { position: relative; z-index: 1; width: 100%; }

/* anneaux de croissance : le symbole de la marque en filigrane,
   centrés sur la ligne de sol de l'arbre (61,8 % de la hauteur) */
.hero__rings {
  position: absolute;
  left: 50%; top: 61.8%;
  width: 168%; height: auto; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* Visibles PAR DÉFAUT : sans JavaScript, les anneaux restent affichés.
   L'animation ne fait que les révéler, elle ne conditionne pas leur
   présence. Même principe partout ailleurs sur le site. */
.hero__rings circle { opacity: 0.16; transform-origin: center; }
html.motion-ok .hero__rings circle {
  opacity: 0;
  animation: ring-in 1.5s var(--ease-out) forwards;
  animation-delay: calc(1.1s + var(--i) * 170ms);
}
@keyframes ring-in {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 0.16; transform: scale(1); }
}

/* --- rail vertical (desktop) --- */
.hero__rail {
  display: none;
  position: absolute; left: max(1.15rem, 2vw); top: 46%;
  transform: translateY(-50%);
  align-items: center; gap: 1rem;
  writing-mode: vertical-rl;
}
.hero__rail-text {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft);
  opacity: 0.75;
}
.hero__rail-line { width: 1px; height: 72px; background: linear-gradient(to bottom, var(--line), transparent); }

/* --- invitation à descendre --- */
.scroll-cue {
  align-self: center;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
  transition: color .35s var(--ease);
}
.scroll-cue:hover { color: var(--rosewood); }
.scroll-cue__line { display: block; width: 1px; height: 46px; background: var(--line); position: relative; overflow: hidden; }
.scroll-cue__line::after {
  content: ''; position: absolute; inset: 0; background: var(--rosewood);
  transform: translateY(-100%);
}
html.motion-ok .scroll-cue__line::after { animation: cue 2.4s var(--ease) infinite; }
@keyframes cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* sur téléphone, on scrolle sans qu'on le demande : l'invite ne sert
   qu'au bureau, et elle chevauchait les racines de l'arbre */
@media (max-width: 859px) {
  .scroll-cue { display: none; }
  .hero__tree { margin-top: 1.75rem; }
}

@media (min-width: 860px) {
  .hero__inner { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
  .hero__tree { margin-inline: 0; max-width: 520px; }
}
@media (min-width: 1240px) { .hero__rail { display: flex; } }

/* ==========================================================================
   ARBRE ANIMÉ — racines, puis tronc, puis branches, puis fruits
   ========================================================================== */
html.motion-ok .tree.is-ready .tree__roots path,
html.motion-ok .tree.is-ready .tree__trunk,
html.motion-ok .tree.is-ready .tree__branches path {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
html.motion-ok .tree.is-ready .tree__ground,
html.motion-ok .tree.is-ready .tree__roottips circle,
html.motion-ok .tree.is-ready .tree__buds circle,
html.motion-ok .tree.is-ready .tree__fruits circle { opacity: 0; }

html.motion-ok .tree.is-growing .tree__roots path {
  animation: draw 1.2s var(--ease) forwards;
  animation-delay: calc(var(--i) * 90ms);
}
html.motion-ok .tree.is-growing .tree__ground { animation: fade-in .8s var(--ease) .15s forwards; }
html.motion-ok .tree.is-growing .tree__roottips circle {
  animation: pop .5s var(--spring) forwards;
  animation-delay: calc(900ms + var(--i) * 60ms);
}
html.motion-ok .tree.is-growing .tree__trunk { animation: draw .55s var(--ease) 1.2s forwards; }
html.motion-ok .tree.is-growing .tree__branches path {
  animation: draw 1s var(--ease) forwards;
  animation-delay: calc(1.6s + var(--i) * 110ms);
}
html.motion-ok .tree.is-growing .tree__buds circle {
  animation: pop .5s var(--spring) forwards;
  animation-delay: calc(2.35s + var(--i) * 70ms);
}
html.motion-ok .tree.is-growing .tree__fruits circle {
  animation: pop .62s var(--spring) forwards;
  animation-delay: calc(2.6s + var(--i) * 85ms);
}

@keyframes draw    { to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 0.25; } }
@keyframes pop     { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

.tree__roottips circle, .tree__buds circle, .tree__fruits circle { transform-box: fill-box; transform-origin: center; }

/* ==========================================================================
   LE CONSTAT
   ========================================================================== */
.constat__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.constat__body { max-width: 56rem; }
.constat__body p { font-size: clamp(1.05rem, 0.4vw + 0.98rem, 1.2rem); color: var(--ink-soft); }

.blockquote {
  position: relative; overflow: hidden;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--forest); color: var(--paper);
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--radius-m);
  max-width: 46rem;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.blockquote::after {
  content: ''; position: absolute; right: -60px; bottom: -60px;
  width: 180px; height: 180px; border-radius: 50%;
  border: 1px solid rgba(237, 231, 214, 0.18);
  transition: transform .9s var(--ease);
}
.blockquote:hover { transform: translateY(-4px); box-shadow: var(--shadow-warm-lg); }
.blockquote:hover::after { transform: scale(1.18) rotate(20deg); }
.blockquote p {
  font-family: var(--font-title); font-style: italic;
  font-size: clamp(1.3rem, 1.4vw + 1rem, 1.9rem);
  line-height: 1.35; max-width: none; color: var(--paper);
  position: relative; z-index: 1;
}

@media (min-width: 860px) { .constat__grid { grid-template-columns: 0.9fr 1.1fr; } }

/* ==========================================================================
   LES HUIT BRANCHES
   ========================================================================== */
.branches__head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.branches__layout { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }

/* La carte ne « colle » que dans la mise en page à deux colonnes.
   Empilée sur une seule colonne (téléphone), un élément collant glisse
   sur toute la hauteur de la grille et passe derrière la liste des
   branches : le texte se superposait à l'illustration. */
.branches__map { position: static; }
.branches__map-frame {
  border-radius: var(--radius-m); overflow: hidden;
  box-shadow: var(--shadow-warm);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.branches__map:hover .branches__map-frame { transform: scale(1.025); box-shadow: var(--shadow-warm-lg); }
.branches__map figcaption {
  margin-top: 0.9rem;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}

.branch-list { border-top: 1px solid var(--line); }

.branch-card {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: clamp(1.5rem, 3vw, 2.3rem) clamp(0.9rem, 2.5vw, 1.6rem);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  cursor: default;
  transition: transform .55s var(--ease), background-color .5s var(--ease), padding-left .55s var(--ease);
}
/* filet rosewood qui pousse depuis le haut */
.branch-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--rosewood);
  transform: scaleY(0); transform-origin: top;
  transition: transform .55s var(--ease);
}
.branch-card:hover::before { transform: scaleY(1); }
.branch-card:hover {
  transform: scale(1.015);
  background: rgba(122, 59, 52, 0.045);
  padding-left: clamp(1.4rem, 3.2vw, 2.2rem);
}

.branch-card__num {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  color: var(--ochre-deep); opacity: 0.85; line-height: 1;
  transition: opacity .5s var(--ease), color .5s var(--ease), transform .55s var(--spring);
}
.branch-card:hover .branch-card__num { opacity: 1; color: var(--rosewood); transform: scale(1.08); }

.branch-card__title {
  font-size: clamp(1.22rem, 1.4vw + 0.9rem, 1.65rem);
  line-height: 1.15; margin-bottom: 0.65rem;
  transition: color .45s var(--ease);
}
.branch-card:hover .branch-card__title { color: var(--rosewood); }

.branch-card__quote {
  font-style: italic; color: var(--ink-soft);
  font-size: 0.97rem; max-width: 52ch;
  border-left: 2px solid var(--line); padding-left: 1rem;
  transition: border-color .5s var(--ease), color .45s var(--ease);
}
.branch-card:hover .branch-card__quote { border-left-color: var(--ochre); color: var(--ink); }

@media (min-width: 860px) {
  .branches__layout { grid-template-columns: 0.85fr 1.15fr; }
  .branch-card { grid-template-columns: 5.5rem 1fr; }
  .branches__map { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* ==========================================================================
   UN LIVRE, PAS UN DOCUMENT — tilt 3D
   ========================================================================== */
.interior__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 44rem; }

.interior__gallery {
  display: flex; gap: 1.25rem;
  overflow-x: auto; padding: 0.5rem 0 1.25rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--ochre) transparent;
  perspective: 1100px;
}
.interior__gallery::-webkit-scrollbar { height: 5px; }
.interior__gallery::-webkit-scrollbar-thumb { background: var(--ochre); border-radius: 4px; }
.interior__gallery::-webkit-scrollbar-track { background: transparent; }

.page-card { flex: 0 0 min(82vw, 560px); scroll-snap-align: center; }

.page-card__frame {
  border-radius: var(--radius-m); overflow: hidden;
  box-shadow: var(--shadow-warm);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.page-card:hover .page-card__frame { box-shadow: var(--shadow-warm-lg); }
.page-card__frame img { width: 100%; }

.page-card__caption {
  margin-top: 1rem;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft);
  transition: color .4s var(--ease);
}
.page-card__caption span:last-child { color: var(--rosewood); }
.page-card:hover .page-card__caption { color: var(--ink); }

@media (min-width: 900px) {
  .interior__gallery { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .page-card { flex: none; }
}

/* ==========================================================================
   L'AUTEUR
   ========================================================================== */
.author__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.author__image {
  border-radius: var(--radius-m); overflow: hidden; max-width: 340px;
  box-shadow: var(--shadow-warm);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.author__image:hover { transform: scale(1.03) rotate(-0.6deg); box-shadow: var(--shadow-warm-lg); }
.author__name { max-width: none; }
.author__text p { font-size: clamp(1.05rem, 0.4vw + 0.98rem, 1.2rem); color: var(--ink-soft); }
.author__signature {
  margin-top: 1.6rem;
  font-family: var(--font-title); font-style: italic;
  font-size: clamp(1.15rem, 1vw + 0.9rem, 1.4rem);
  color: var(--rosewood);
}
@media (min-width: 860px) { .author__grid { grid-template-columns: auto 1fr; } }

/* ==========================================================================
   OFFRE
   ========================================================================== */
.offer { scroll-margin-top: var(--header-h); }
.offer__card {
  position: relative; overflow: hidden;
  background: var(--paper-up);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: clamp(2rem, 5vw, 4rem);
  display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
}
.offer__card::after {
  content: ''; position: absolute; right: -140px; top: -140px;
  width: 380px; height: 380px; border-radius: 50%;
  border: 1px solid rgba(122, 59, 52, 0.13);
  pointer-events: none;
}

.offer__cover {
  border-radius: var(--radius-s); overflow: hidden;
  box-shadow: var(--shadow-warm);
  max-width: 320px; margin-inline: auto;
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.offer__cover:hover { transform: scale(1.045) translateY(-6px); box-shadow: var(--shadow-warm-lg); }

.offer__body { position: relative; z-index: 1; }
.offer__label { margin-bottom: 1.2rem; }

/* L'ancien prix se lit AU-DESSUS du nouveau : on descend du prix barré
   vers le prix de lancement, le regard fait le calcul tout seul. */
.offer__price {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.3rem; margin-block: 1.2rem;
}
.offer__price-old {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(1.35rem, 1.4vw + 1rem, 1.7rem);
  letter-spacing: 0.04em;
  color: var(--rosewood);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-underline-offset: 0;
}
.offer__price-new {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(3rem, 5vw, 4.5rem); color: var(--ink); line-height: 1;
}

.offer__edition {
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 0.9rem;
}
.offer__legal { font-size: 0.92rem; color: var(--ink-soft); max-width: 42ch; }
.offer__action { margin-top: 2rem; }

.offer__reassurance {
  margin-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--forest);
}
.offer__reassurance li { transition: color .35s var(--ease), transform .4s var(--ease); }
.offer__reassurance li:hover { color: var(--rosewood); transform: translateY(-2px); }
.offer__reassurance li::before { content: '· '; color: var(--ochre-deep); }
.offer__reassurance li:first-child::before { content: ''; }

.offer__waiver {
  margin-top: 1.75rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.78rem; line-height: 1.55; color: var(--ink-soft);
  max-width: 48ch;
}
.offer__waiver a { color: var(--rosewood); border-bottom: 1px solid currentColor; transition: opacity .3s var(--ease); }
.offer__waiver a:hover { opacity: 0.7; }

@media (min-width: 860px) { .offer__card { grid-template-columns: 0.8fr 1.2fr; } }

/* ==========================================================================
   FAQ — pas d'icône, un filet rosewood + glissement de la réponse
   ========================================================================== */
.faq__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.faq__layout { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.faq__list { border-top: 1px solid var(--line); }

.faq__aside {
  position: relative;
  background: var(--paper-up);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .5s var(--ease);
}
.faq__aside:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-warm);
  border-color: rgba(122, 59, 52, 0.35);
}
.faq__aside-mark { display: block; width: 40px; margin-bottom: 1.1rem; }
.faq__aside-mark svg { width: 100%; transition: transform .8s var(--ease); }
.faq__aside:hover .faq__aside-mark svg { transform: rotate(-16deg); }
.faq__aside-text { margin-top: 0.9rem; margin-bottom: 1.3rem; color: var(--ink-soft); font-size: 0.95rem; }

@media (min-width: 960px) {
  .faq__layout { grid-template-columns: 1.55fr 0.85fr; }
  .faq__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.faq-item { position: relative; border-bottom: 1px solid var(--line); }
.faq-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--rosewood);
  transform: scaleY(0); transform-origin: center;
  transition: transform .5s var(--ease);
}
.faq-item:hover::before, .faq-item[open]::before { transform: scaleY(1); }

.faq-item summary {
  cursor: pointer; list-style: none;
  padding: 1.5rem 1rem 1.5rem 0;
  font-family: var(--font-title);
  font-size: clamp(1.05rem, 1vw + 0.82rem, 1.32rem);
  transition: color .4s var(--ease), transform .5s var(--ease), padding-left .5s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }

.faq-item:hover summary,
.faq-item[open] summary {
  color: var(--rosewood);
  transform: scale(1.018);
  transform-origin: left center;
  padding-left: 1.15rem;
}

/* le panneau : hauteur animée par JS, overflow masqué */
.faq-item__panel { overflow: hidden; }
.faq-item__answer {
  padding: 0 1rem 1.6rem 1.15rem;
  color: var(--ink-soft);
  max-width: 58ch;
}
.faq-item__answer p { max-width: none; }

/* ==========================================================================
   BARRE D'ACHAT MOBILE — glisse depuis le bas
   ========================================================================== */
.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--ink); color: var(--paper);
  padding: 0.8rem 1.1rem;
  padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 0.9rem;
  transform: translateY(105%);
  transition: transform .55s var(--ease);
  will-change: transform;
}
.sticky-buy.is-up { transform: translateY(0); }
.sticky-buy__price {
  font-family: var(--font-mono); font-weight: 700;
  color: var(--ochre); font-size: 1.05rem; margin-right: auto;
}
.sticky-buy .btn { padding: 0.72rem 1.35rem; font-size: 0.72rem; white-space: nowrap; }

@media (min-width: 1080px) { .sticky-buy { display: none; } }

/* Réserve d'espace sous le document, de la hauteur exacte de la barre, pour
   que le pied de page défile entièrement au-dessus d'elle. La classe n'est
   posée par main.js que si la barre existe ET est réellement en position
   fixe : les pages légales, qui n'en ont pas, ne reçoivent aucun espace.
   Réservée en permanence (et non seulement quand la barre est sortie) afin
   qu'aucun saut de mise en page ne se produise à son apparition. */
html.has-sticky-buy body { padding-bottom: var(--sticky-buy-height); }
html.has-sticky-buy { scroll-padding-bottom: calc(var(--sticky-buy-height) + 1rem); }

/* ==========================================================================
   COMPTEUR D'ANNEAUX — un cerne se dessine à chaque section
   ========================================================================== */
.ring-counter {
  position: fixed; right: 1.75rem; bottom: 1.75rem; z-index: 140;
  display: none; align-items: center; gap: 0.65rem;
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ochre);
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.ring-counter.is-visible { opacity: 0.9; transform: none; }
@media (min-width: 1080px) { .ring-counter { display: flex; } }

.ring-counter__dial { width: 30px; height: 30px; flex: none; overflow: visible; }
.ring-counter__dial circle { transition: stroke-dashoffset .9s var(--ease), opacity .6s var(--ease); }
.ring-counter__label { transition: color .4s var(--ease); }

/* ==========================================================================
   TOAST — confirmation de copie de l'adresse
   Un lien mailto échoue sans logiciel de messagerie (ou dans un cadre
   isolé) : on copie l'adresse au clic et on le dit, pour ne jamais
   laisser le lecteur dans une impasse.
   ========================================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  z-index: 450;
  transform: translate(-50%, 150%);
  opacity: 0;
  pointer-events: none;
  max-width: min(92vw, 30rem);
  padding: 0.85rem 1.3rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-warm-lg);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-align: center;
  transition: transform .55s var(--spring), opacity .35s var(--ease);
}
.toast.is-up { transform: translate(-50%, 0); opacity: 1; }
.toast strong { color: var(--ochre); font-weight: 600; }

/* sur téléphone la barre d'achat occupe le bas : on passe au-dessus,
   en s'appuyant sur sa hauteur réellement mesurée */
@media (max-width: 1079px) {
  .toast { bottom: calc(var(--sticky-buy-height) + 0.75rem); }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { padding-block: clamp(3.5rem, 8vw, 6rem); border-top: 1px solid var(--line); }

/* (L'ancienne réserve forfaitaire de 4,25 rem sur le pied de page a été
   remplacée par la réserve mesurée appliquée au document — voir
   --sticky-buy-height. La conserver ferait compter l'espace deux fois.) */
.site-footer__top { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.site-footer__logo { width: 46px; display: block; }
.site-footer__logo svg { width: 100%; transition: transform .8s var(--ease); }
.site-footer__logo:hover svg { transform: rotate(-14deg); }
.site-footer__mark { font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.5em; text-indent: 0.5em; }
.site-footer__edition {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.site-footer__links {
  margin-top: 2.2rem;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1.6rem;
  font-family: var(--font-mono); font-size: 0.73rem; color: var(--ink-soft);
}
.site-footer__links a { transition: color .35s var(--ease), transform .4s var(--ease); display: inline-block; }
.site-footer__links a:hover { color: var(--rosewood); transform: translateY(-2px); }

/* ==========================================================================
   PAGES LÉGALES
   ========================================================================== */
.legal { padding-block: calc(var(--header-h) + clamp(3rem, 8vh, 5rem)) var(--section-pad); }
.legal h1 { font-size: clamp(2.2rem, 3vw + 1.3rem, 3.2rem); margin-bottom: 2rem; }
.legal h2 { font-size: 1.25rem; margin-top: 2.6rem; margin-bottom: 0.8rem; }
.legal p, .legal li { color: var(--ink-soft); max-width: 68ch; }
.legal li { margin-left: 1.4rem; list-style: disc; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 1em; }
.legal .placeholder {
  color: var(--rosewood); background: rgba(122, 59, 52, 0.08);
  padding: 0.1em 0.4em; border-radius: 3px;
}
.legal a.back { display: inline-block; margin-bottom: 2.5rem; }

/* Le bloc de contournement du script Gumroad a été retiré en même temps que
   le script lui-même : les boutons d'achat sont de simples liens .btn--buy
   et reprennent donc l'habillage normal défini plus haut. */

/* ==========================================================================
   ÉCRANS TACTILES — zones de tap confortables
   Au doigt, une cible sous ~44 px se rate. On agrandit la surface
   sensible par du remplissage transparent : l'apparence ne bouge pas.
   ========================================================================== */
@media (pointer: coarse), (max-width: 900px) {
  .menu-toggle { padding-block: 0.85rem; }
  .brand { padding-block: 0.55rem; }

  .site-footer__links { gap: 0.6rem 1.6rem; }
  .site-footer__links a { padding-block: 0.8rem; }

  /* le soulignement est recalé pour ne pas s'éloigner du texte */
  .link-underline { padding-block: 0.75rem 1.05rem; --ul-offset: 0.7rem; }

  .offer__waiver a { display: inline-block; padding-block: 0.78rem; }

  .sticky-buy .btn { padding-block: 0.95rem; }
  .header-nav a { padding-block: 0.7rem; }
}

/* ==========================================================================
   MOUVEMENT RÉDUIT — tout reste lisible, rien ne bouge
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .grain { animation: none; }
  .sticky-buy { transition: none; }
}