/* =========================================================================
   LumenLabs — site vitrine
   Jetons repris de docs/charte/DESIGN.md §3, §4, §5, §7, §8.
   Aucune couleur en dur ailleurs que dans ce fichier.

   Deux thèmes (décision 27 de docs/decisions.md). Le sombre est la charte
   telle quelle. Le clair en est la transposition : Lumen White en fond, cartes
   blanches, texte Graphite, et le même bouton Accent Gold, bordé d'un liseré
   pour rester visible sur fond clair. Tous les textes y passent 4,5:1.
   ====================================================================== */

/*
 * Satoshi, la seule police de la charte, hébergée par le site : une seule fonte variable
 * (300 à 900) couvre toutes les graisses employées, 600 compris, qui n'existe pas en statique.
 * Aucun appel à Google Fonts : la politique de sécurité (`font-src 'self'`) le bloquait, et le
 * site s'affichait dans la police du système.
 */
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --bg: #08080B;
  --card: #1A1A1A;
  --raised: #222222;
  --line: #2A2A2A;
  --line-strong: #3A372F;

  --ink: #F8F6F1;
  --ink-2: #A8A29A;
  --ink-3: #908A82;                /* 4,65:1 sur la surface surélevée, comme l'application */

  --gold: #EAD8B8;
  --gold-hover: #D9C9A8;
  --gold-edge: transparent;        /* liseré du bouton or : inutile sur fond noir */
  --on-gold: #08080B;              /* texte posé sur l'or */
  --champagne: #D9C9A8;            /* accent de texte et de trait */
  --link-hover: #EAD8B8;

  --ok: #7DBF8A;
  --warn: #E0B15A;
  --bad: #E07A6E;
  --info: #5188CD;
  --ok-bg: rgba(125, 191, 138, .15);
  --warn-bg: rgba(224, 177, 90, .15);
  --bad-bg: rgba(224, 122, 110, .15);

  --c1: #B98A00; --c2: #BD658A; --c3: #5188CD; --c4: #BA673F;
  --c5: #009C9C; --c6: #7A6CBC; --c7: #669649; --c8: #AA6BAE;

  --nav-bg: rgba(8, 8, 11, .72);
  --nav-bg-solid: rgba(8, 8, 11, .9);
  --halo: rgba(217, 201, 168, .12);
  --spot: rgba(217, 201, 168, .08);
  --glow: rgba(234, 216, 184, .5);
  --band: rgba(26, 26, 26, .5);    /* bandeau de section, en dégradé vertical */
  --em-hi: #F3E7CE;                /* reflet du dégradé des titres */
  --shadow: 0 24px 60px rgba(0, 0, 0, .5);
  --paper-edge: transparent;       /* bord des documents clairs posés sur la page */
  /* Le « papier » est le rapport d'une agence fictive : toujours clair, dans les deux thèmes du
     site. Ses couleurs ne changent donc pas avec le thème et ne sont déclarées qu'ici. */
  --paper: #F8F6F1;
  --paper-ink: #16181C;
  --paper-ink-2: #6B675F;
  --paper-line: #DED7C8;
  --agence-demo: #1F3A5F;          /* Agence Horizon, la marque fictive des maquettes */
  --specular: #EAD8B8;             /* reflet des boutons : l'or sur fond sombre */

  --r-card: 12px;
  --r-control: 8px;
  --gut: 24px;
  --max: 1160px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Thème clair. Contrastes mesurés sur le fond #F8F6F1 et sur les cartes #FFFFFF :
   texte 16:1, secondaire 7:1, atténué 5,1:1, accent bronze 5,8:1, statuts ≥ 5,2:1,
   liseré du bouton or 3,3:1. Champagne et Accent Gold ne se lisent pas sur fond
   clair (1,5:1) : l'accent de texte y devient un bronze tiré de la même teinte,
   et l'or ne sert plus qu'en aplat, sous du texte Graphite (12,4:1). */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #F8F6F1;
  --card: #FFFFFF;
  --raised: #F1EDE5;
  --line: #E6E0D4;
  --line-strong: #D9C9A8;

  --ink: #1A1A1A;
  --ink-2: #58534B;
  --ink-3: #6E685F;

  --gold: #EAD8B8;
  --gold-hover: #E0CA9F;
  --gold-edge: #A08453;
  --on-gold: #1A1A1A;
  --champagne: #7A5C24;
  --link-hover: #1A1A1A;

  --ok: #276539;                   /* statuts assombris : 4,75:1 au moins dans une étiquette teintée */
  --warn: #7A5209;
  --bad: #9E362C;
  --info: #2F62A4;
  --ok-bg: rgba(46, 116, 67, .12);
  --warn-bg: rgba(138, 94, 11, .12);
  --bad-bg: rgba(176, 62, 51, .12);

  --c1: #9A7100;                   /* colonne « Clair » du §7 */

  --nav-bg: rgba(248, 246, 241, .78);
  --nav-bg-solid: rgba(248, 246, 241, .94);
  --halo: rgba(185, 150, 90, .16);
  --spot: rgba(160, 132, 83, .10);
  --glow: rgba(160, 132, 83, .35);
  --band: rgba(234, 216, 184, .28);
  --em-hi: #A5803A;
  --shadow: 0 24px 60px rgba(26, 26, 26, .10);
  --paper-edge: #E6E0D4;
  --specular: #A08453;             /* l'or ne se voit pas sur Lumen White : bronze */
}

/* Le fondu du changement de thème : posé par theme.js le temps d'une bascule. */
.is-switching, .is-switching *, .is-switching *::before, .is-switching *::after {
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), fill .2s var(--ease), stroke .2s var(--ease) !important;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--champagne); text-decoration: none; }
a:hover { color: var(--link-hover); }

h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.015em; line-height: 1.12; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
.num { font-variant-numeric: tabular-nums; }

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

.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------- mise en page */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: 104px 0; position: relative; }
.section--tight { padding: 72px 0; }

.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
}

.h2 { font-size: clamp(30px, 3.6vw, 44px); }
.h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.lead { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; color: var(--ink-2); }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- halo */
.halo {
  position: absolute; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, var(--halo), transparent);
}

/* ---------------------------------------------------------------- boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px; border-radius: var(--r-control);
  font-size: 15px; font-weight: 500; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.btn--primary { background: var(--gold); border-color: var(--gold-edge); color: var(--on-gold); font-weight: 600; }
.btn--primary:hover { background: var(--gold-hover); color: var(--on-gold); transform: translateY(-1px); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { background: var(--raised); color: var(--ink); }
.btn--sm { height: 38px; padding: 0 16px; font-size: 14px; }

/* ---------------------------------------------------------------- pastilles */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2);
}
.pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--champagne); }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
}
.tag--ok   { background: var(--ok-bg);   color: var(--ok); }
.tag--warn { background: var(--warn-bg); color: var(--warn); }
/* L'unique étape humaine de la chaîne porte l'or, comme dans le produit : dans une suite de
   gestes automatiques, c'est la seule pastille qui vous concerne. */
.tag--or { background: var(--gold); color: var(--on-gold); box-shadow: inset 0 0 0 1px var(--gold-edge, transparent); }
.tag--bad  { background: var(--bad-bg);  color: var(--bad); }

/* ---------------------------------------------------------------- cartes */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 26px;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.card--hover:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card__icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--raised); color: var(--champagne);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}

/* ---------------------------------------------------------------- en-tête */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); background: var(--nav-bg-solid); }
.nav__in { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; flex-shrink: 0; color: var(--ink); }
/* Le logo (brand/LOGO.md) : horizontal à 32 px dans l'en-tête, symbole seul sur téléphone. */
/* Pas de `display` sur les images : c'est la règle du thème (.on-dark / .on-light) qui décide
   laquelle des deux versions se voit. En poser un ici afficherait les deux. */
.brand__large, .brand__compact { display: flex; align-items: center; }
.brand img { height: 32px; width: auto; max-width: none; }
.foot .brand img { height: 28px; }
.brand__compact { display: none; }
.brand__compact img { height: 28px; }
.hero__logo { display: flex; justify-content: center; margin: 0 auto 28px; }
.hero__logo img { height: 240px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 24px; flex-grow: 1; }
.nav__links a { color: var(--ink-2); font-size: 15px; font-weight: 500; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
/* « Se connecter » en double dans la rangée de liens, visible seulement quand celui de l'en-tête
   disparaît (sous 620 px). */
.nav__links .nav__links-login { display: none; }
@media (max-width: 620px) { .nav .nav__links .nav__links-login { display: inline-flex; } }

/* ---------------------------------------------------------------- moments */
/* Un écran, une idée, un geste : chaque moment prend la hauteur de la fenêtre, centré. Les
   entrées sont jouées par src/animations.js (GSAP) ; sans script, tout est là, immobile. */
.moment { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 96px 0; }
.moment__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 64px; align-items: center;
}
.moment__in--inverse .moment__texte { order: 2; }
.moment__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.moment__texte .lead { margin: 0; }
.moment__visuel { position: relative; }
.moment__centre { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.moment__centre .lead { margin: 0 auto; }
.moment .h2 { font-size: clamp(34px, 4.4vw, 58px); letter-spacing: -0.02em; line-height: 1.06; max-width: 15ch; text-wrap: balance; }
.h2--centre, .lead--centre { text-align: center; margin-left: auto; margin-right: auto; }
.h2--grand { font-size: clamp(40px, 5.6vw, 76px) !important; max-width: 14ch !important; }
.moment .hero__cta { margin-top: 10px; }

/* Le lien-geste : un verbe et une flèche, la flèche avance au survol. */
.lien-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  font-size: 17px; font-weight: 500; color: var(--champagne);
}
.lien-cta svg { transition: transform .25s var(--ease); }
.lien-cta:hover svg { transform: translateX(4px); }
.btn--lg { height: 52px; padding: 0 24px; font-size: 16px; }

/* --- héros ---------------------------------------------------------------- */
.hero { text-align: center; padding: 40px 0 72px; overflow: hidden; }
.hero__in { position: relative; display: flex; flex-direction: column; align-items: center; }
.hero__halo { top: -240px; left: 50%; transform: translateX(-50%); width: 900px; height: 620px; }
.hero__logo { display: flex; justify-content: center; margin: 0 auto 28px; }
.hero__logo img { height: 240px; width: auto; }
.hero h1 {
  font-size: clamp(42px, 6.4vw, 84px); letter-spacing: -0.025em;
  max-width: 14ch; margin: 22px auto 0; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--champagne); }
.hero h1 .mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .mot__in { display: inline-block; }
.hero__sub { margin: 20px auto 0; max-width: 46ch; font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.hero__cta { display: flex; justify-content: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero__preuve { margin-top: 26px; font-size: 13px; letter-spacing: .02em; color: var(--ink-3); }
.indice {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink-3);
  animation: indice 2.2s var(--ease) infinite;
}
@keyframes indice { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* --- l'alerte : la carte qui décroche sous les yeux ---------------------- */
.alerte {
  --teinte: var(--ok);
  margin: 0 auto; max-width: 440px; padding: 30px 32px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.alerte__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.alerte__nom { font-size: 18px; font-weight: 500; }
.alerte__score { margin-top: 22px; font-size: clamp(64px, 9vw, 96px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--teinte); transition: color .3s var(--ease); }
.alerte__sur { font-size: 22px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.alerte__barre { margin-top: 18px; height: 8px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.alerte__barre i { display: block; height: 100%; width: var(--w, 82%); border-radius: 999px; background: var(--teinte); transition: background .3s var(--ease); }
.alerte.est-en-risque { --teinte: var(--bad); }
.alerte__motif { margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.alerte__action { margin-top: 12px; font-size: 19px; font-weight: 500; color: var(--ink); }
.alerte__action::after {
  content: ""; display: block; height: 2px; width: 100%; margin-top: 6px;
  background: var(--champagne); transform: scaleX(var(--trait, 1)); transform-origin: 0 50%;
}

/* --- la vente : un chiffre qui suffit ------------------------------------- */
.vente__chiffre { font-size: clamp(72px, 13vw, 168px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--champagne); }
.vente__par { margin-top: -6px; font-size: 17px; color: var(--ink-3); }

/* --- le prix : zoom ---------------------------------------------------------- */
.prix__montant { font-size: clamp(96px, 20vw, 260px); font-weight: 700; line-height: .95; letter-spacing: -0.05em; color: var(--ink); will-change: transform, filter; }
.prix__unite { margin-top: 4px; font-size: clamp(17px, 2vw, 22px); color: var(--ink-2); }
.prix .h2 { max-width: 20ch; }
.prix .lead strong { color: var(--champagne); font-weight: 600; }

/* --- appel final ---------------------------------------------------------------- */
.final { overflow: hidden; }
.final__halo { bottom: -320px; left: 50%; transform: translateX(-50%); width: 820px; height: 560px; }
.briques__suite { margin-top: 28px; text-align: center; }

/* --- le bouton qui suit --------------------------------------------------------- */
.cta-flottant {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.cta-flottant.est-visible { opacity: 1; transform: none; pointer-events: auto; }

/* ---------------------------------------------------------------- marque blanche */
.switch {
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
}
.switch button {
  padding: 8px 18px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.switch button[aria-pressed="true"] { background: var(--raised); color: var(--ink); }

/* La couleur d'agence est une propriété typée : elle peut alors se fondre d'une marque à l'autre,
   et tout le rapport (bandeau, initiales, barres, filet) change d'un seul mouvement. */
@property --brandc {
  syntax: '<color>';
  inherits: true;
  initial-value: #1F3A5F;
}
.paper {
  --brandc: var(--agence-demo);
  max-width: 520px; margin: 0 auto; box-shadow: var(--shadow);
  background: var(--paper); color: var(--paper-ink); border-radius: 10px; padding: 26px 28px;
  border: 1px solid var(--paper-edge);
  transition: box-shadow .3s var(--ease), --brandc .45s var(--ease);
}
.paper__head {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 14px; border-bottom: 2px solid var(--brandc, #1A1A1A);
}
.paper__mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--brandc, #1A1A1A); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.paper__name {
  font-size: 12px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brandc, #1A1A1A);
}
.paper__kpi {
  border: 1px solid var(--paper-line); border-radius: 8px; padding: 11px 9px;
}
.paper__kpi b { display: block; font-size: 17px; font-weight: 700; white-space: nowrap; }
.paper__kpi span {
  display: block; font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--paper-ink-2);
}
.paper__surtitre {
  font-size: 10px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--paper-ink-2);
}
.paper__texte { margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--paper-ink); }
.paper__pied {
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--paper-line);
  font-size: 11px; color: var(--paper-ink-2);
}

/* Le bandeau d'une agence cliente et le bouton Google, tels qu'ils apparaissent dans le produit. */
.bandeau-agence {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border-radius: 8px; background: var(--agence-demo);
}
.bandeau-agence--compact { padding: 11px; }
.bandeau-agence__initiales {
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  background: rgba(255, 255, 255, .2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.bandeau-agence--compact .bandeau-agence__initiales { width: 22px; height: 22px; }
.bandeau-agence__nom { font-size: 11px; font-weight: 600; letter-spacing: .18em; color: #fff; }
.maquette-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px;
  border-radius: 8px; background: var(--paper); color: var(--paper-ink);
  border: 1px solid var(--paper-edge); font-weight: 600; font-size: 14px;
}
.maquette-google--compact { padding: 11px; font-size: 13px; border: 0; }

/* ---------------------------------------------------------------- calcul */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field > label { font-size: 14px; color: var(--ink-2); }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 999px; background: var(--line);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--gold); border: 0; cursor: pointer;
  box-shadow: 0 0 0 1px var(--gold-edge);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--gold); border: 0; cursor: pointer;
  box-shadow: 0 0 0 1px var(--gold-edge);
}
.stat { font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.stat--gold { color: var(--champagne); }

/* ---------------------------------------------------------------- tarif */
.price { display: flex; align-items: baseline; gap: 10px; }
.price b { font-size: 52px; font-weight: 700; line-height: 1; }
.check { display: flex; gap: 11px; align-items: flex-start; padding: 7px 0; font-size: 15px; }
.check svg { flex-shrink: 0; margin-top: 4px; color: var(--ok); }

/* ---------------------------------------------------------------- questions */
details {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
details summary {
  /* 27 px de texte, 45 px de cible : la marge négative rend l'espace que le remplissage prend. */
  margin: -9px 0; padding: 9px 0;
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  font-size: 17px; font-weight: 500;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: ""; margin-left: auto; flex-shrink: 0;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .25s var(--ease);
}
details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
details p { margin-top: 12px; color: var(--ink-2); max-width: 78ch; }

/* ---------------------------------------------------------------- pied */
.foot { border-top: 1px solid var(--line); padding: 56px 0 40px; }
.foot__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
/* Un h2 et non un h4 : le pied suit des h2, sauter deux niveaux égarait les lecteurs d'écran. */
.foot__titre {
  margin: 0 0 14px; font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { color: var(--ink-2); font-size: 15px; }
.foot a:hover { color: var(--ink); }
.foot__legal {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-size: 13px; color: var(--ink-3);
}

/* ---------------------------------------------------------------- apparitions */
/* Caché seulement quand le script est là pour le révéler : sans JavaScript (ou s'il échoue avant
   de charger), le contenu reste lisible. La classe `js` est posée par theme.js, dans <head>. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.d1 { transition-delay: .07s; }
.reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; }

/* ---------------------------------------------------------------- adaptatif */
@media (max-width: 960px) {
  .section { padding: 76px 0; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  /* Sous 960 px, la navigation passe sur une seconde rangée qui défile de côté, au lieu de
     disparaître : le visiteur sur tablette ou téléphone n'atteignait Tarifs que par le pied. */
  .nav__in { flex-wrap: wrap; height: auto; padding-top: 12px; row-gap: 0; }
  .nav__links {
    order: 10; flex-basis: 100%; gap: 22px;
    overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut);
  }
  .nav__links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
  .nav .brand { margin-right: auto; }
}

@media (max-width: 620px) {
  :root { --gut: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr auto; }
  .row .hide-s { display: none; }
  .hero { padding-top: 48px; }

  .foot__cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* =========================================================================
   Ajouts : briques en profondeur, relief au curseur, jauge de défilement
   ====================================================================== */

/* --- jauge de défilement en haut de page ------------------------------- */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--champagne), var(--gold));
  z-index: 60; pointer-events: none;
}

/* --- relief au curseur sur les cartes ---------------------------------- */
.spot { position: relative; isolation: isolate; }
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
              var(--spot), transparent 70%);
  opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; z-index: -1;
}
.spot:hover::before { opacity: 1; }

/* --- bouton principal : halo doux -------------------------------------- */
.btn--primary { box-shadow: 0 0 0 0 transparent; }
.btn--primary:hover { box-shadow: 0 8px 28px -8px var(--glow); }

/* Le titre du héros : la seconde ligne en Champagne, plein. Le dégradé de texte d'avant ne
   survivait pas au découpage mot à mot (un fond découpé ne traverse pas les enfants) et la charte
   fait de Champagne l'accent de texte. */

/* --- les six briques en profondeur -------------------------------------- */
/* Sans script : une grille de cartes. Avec : assets/briques.js monte le carrousel DepthCarousel
   (React Bits, React et GSAP) et ajoute `profondeur--monte`, qui pose le texte à gauche. */
.carrousel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.carte {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
}
.carte__tete { display: flex; align-items: center; justify-content: space-between; }
.carte__icone {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--raised); color: var(--champagne);
  display: flex; align-items: center; justify-content: center;
}
.carte__rang { font-size: 13px; color: var(--ink-3); letter-spacing: .08em; }
.carte__titre { font-size: 18px; font-weight: 500; color: var(--ink); letter-spacing: 0; line-height: 1.3; }
.carte__accroche { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.carte .stage { margin-top: auto; }

.profondeur--monte {
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.5fr);
  gap: 32px; align-items: center;
}
.profondeur__texte { display: flex; flex-direction: column; gap: 14px; }
.profondeur__rang { font-size: 13px; font-weight: 500; letter-spacing: .12em; color: var(--champagne); }
.profondeur__total { color: var(--ink-3); }
.profondeur__titre { font-size: clamp(26px, 3vw, 36px); font-weight: 400; letter-spacing: -0.015em; line-height: 1.15; }
.profondeur__accroche { font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.profondeur__points, .carte__points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.profondeur__points li, .carte__points li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.profondeur__points li::before, .carte__points li::before {
  content: ""; flex-shrink: 0; width: 5px; height: 5px; margin-top: 9px;
  border-radius: 999px; background: var(--champagne);
}
.profondeur__scene { position: relative; height: 620px; }
/* La pile peut filer au-delà de la colonne ; elle s'arrête au bord de l'écran, sans défilement. */
#briques { overflow-x: clip; }
/* Les écrans de l'application sont sombres, comme la page : un liseré détache chaque carte du
   fond pour que la profondeur se lise. */
.profondeur__scene .depth-carousel__card {
  box-shadow:
    0 0 0 1px var(--line-strong),
    0 30px 60px -20px rgba(0, 0, 0, 0.65),
    0 8px 20px -10px rgba(0, 0, 0, 0.5);
}
/* Le focus du carrousel au Champagne de la charte, lisible dans les deux thèmes. */
.profondeur__scene .depth-carousel:focus-visible { outline-color: var(--champagne); }
.profondeur__scene .depth-carousel__arrow:focus-visible,
.profondeur__scene .depth-carousel__dot:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

.stage {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; font-size: 13px;
}
.stage__line {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.stage__line:last-child { border-bottom: 0; }
.stage__bar { flex-grow: 1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.stage__bar > i { display: block; height: 100%; border-radius: 3px; clip-path: inset(0 calc(100% - var(--w, 50%)) 0 0 round 3px); }

/* --- calcul : la comparaison avant / après ------------------------------ */
.vs { display: grid; gap: 10px; margin-top: 4px; }
.vs__row { display: grid; grid-template-columns: 118px 1fr 46px; gap: 12px; align-items: center; }
.vs__row .small { white-space: nowrap; }
.vs__row .num { text-align: right; }
.vs__track { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.vs__track > i { display: block; height: 100%; border-radius: 999px; clip-path: inset(0 calc(100% - var(--w, 100%)) 0 0 round 999px); transition: clip-path .6s var(--ease); }

@media (max-width: 960px) {
  .carrousel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profondeur--monte { grid-template-columns: 1fr; gap: 20px; }
  /* le carrousel d'abord, le texte dessous ; la pile ne déborde pas de l'écran */
  .profondeur__scene { order: -1; height: 580px; overflow-x: clip; margin: 0 calc(-1 * var(--gut)); }
}
@media (max-width: 620px) {
  .carrousel { grid-template-columns: 1fr; }
  .profondeur__scene { height: 520px; }
}
@media (prefers-reduced-motion: reduce) { .progress { display: none; } }

/* =========================================================================
   Thèmes : bouton de bascule, logo selon le fond, bandeaux
   ====================================================================== */

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; padding: 0; border-radius: 999px;
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink-2);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.theme-toggle:hover { background: var(--raised); color: var(--ink); }
.theme-toggle svg { width: 17px; height: 17px; }
/* L'icône montre le thème vers lequel on passe : un soleil sur la page sombre. */
.theme-toggle__moon { display: none; }
[data-theme="light"] .theme-toggle__sun { display: none; }
[data-theme="light"] .theme-toggle__moon { display: block; }

/* La charte (§2) : monogramme Champagne sur fond sombre, Graphite plein sur fond clair. */
.on-light { display: none; }
[data-theme="light"] .on-dark { display: none; }
[data-theme="light"] .on-light { display: block; }

.band { background: linear-gradient(180deg, transparent, var(--band), transparent); }

/* Les pictogrammes dessinés en ligne prennent la couleur d'accent du thème. */
.ic { color: var(--champagne); }

@media (max-width: 640px) {
  .nav .brand__large { display: none; }
  .nav .brand__compact { display: block; }
  .hero__logo img { height: 180px; }
}

@media (max-width: 620px) {
  .nav__in { gap: 12px; }
  .nav__login { display: none; }
  .nav .btn { white-space: nowrap; }
}
/* Sur téléphone, le bouton de l'en-tête se réduit à « Réserver » : le héros,
   juste dessous, porte déjà « Réserver 15 minutes » en entier. */
@media (max-width: 480px) {
  .nav__more { display: none; }
}

/* =========================================================================
   Pages juridiques : un document à lire
   Colonne de texte mesurée, sommaire qui suit la lecture, articles séparés
   par un simple filet. Claires par défaut : on y lit longtemps.
   ====================================================================== */

.doc-head { padding: 72px 0 36px; border-bottom: 1px solid var(--line); }
.doc-head h1 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 300; letter-spacing: -0.02em; max-width: 20ch; }
.doc-meta {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px;
  font-size: 14px; color: var(--ink-3);
}

.doc { padding: 48px 0 104px; }
.doc-inner {
  display: grid; grid-template-columns: 236px minmax(0, 700px);
  column-gap: clamp(40px, 6vw, 96px); align-items: start;
}
.doc-inner > :not(.toc) { grid-column: 2; }

.doc-lead {
  margin-bottom: 8px; padding: 22px 26px; border-radius: var(--r-card);
  background: var(--card); border: 1px solid var(--line);
  font-size: 18px; line-height: 1.6; color: var(--ink-2);
}
.doc-lead strong { color: var(--ink); font-weight: 600; }

/* Sommaire : collant sur grand écran, jamais plus haut que la fenêtre ;
   replié dans un volet sur mobile (site.js). Sans script, il reste ouvert. */
.toc {
  grid-column: 1; grid-row: 1 / span 60;
  position: sticky; top: 96px; max-height: calc(100vh - 120px);
  overflow-y: auto; overscroll-behavior: contain;
}
/* Le sommaire est un <details> : il ne reprend pas le style des questions fréquentes. */
.toc details { border-bottom: 0; padding: 0; }
.toc summary {
  list-style: none; padding-bottom: 12px; cursor: default;
  font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: none; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc li a {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px;
  margin-left: -1px; padding: 6px 0 6px 14px; border-left: 2px solid transparent;
  font-size: 14px; line-height: 1.4; color: var(--ink-2);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.toc li a:hover { color: var(--ink); }
.toc li a.actif { color: var(--ink); border-left-color: var(--champagne); font-weight: 500; }
.toc li a span { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 1px; }

.art {
  max-width: 68ch; padding: 34px 0 6px; border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
}
.doc-lead + .art { border-top: 0; }
.art-num {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--champagne);
  font-variant-numeric: tabular-nums;
}
.art h2 { margin: 0 0 16px; font-size: clamp(23px, 2.3vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.art h3 { margin: 24px 0 8px; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.art p { margin: 0 0 14px; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.art strong { color: var(--ink); font-weight: 600; }
.art a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.art ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.art ul li { position: relative; padding-left: 20px; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.art ul li::before {
  content: ""; position: absolute; left: 3px; top: .7em;
  width: 5px; height: 5px; border-radius: 999px; background: var(--champagne);
}
.art code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em;
  padding: 1px 6px; border-radius: 5px; background: var(--raised); color: var(--ink); overflow-wrap: anywhere;
}

/* Fiches : une information par ligne, lisible sans tableau sur téléphone. */
.fiches { display: grid; gap: 0; margin: 4px 0 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.fiches > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; padding: 13px 18px; border-top: 1px solid var(--line); }
.fiches > div:first-child { border-top: 0; }
.fiches dt { font-size: 14px; color: var(--ink-3); }
.fiches dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }

/* Encadré : ce qui engage le plus, dit une fois, sans crier. */
.note {
  margin: 4px 0 18px; padding: 16px 20px; border-radius: var(--r-control);
  border-left: 3px solid var(--champagne); background: var(--raised);
}
.art .note p { margin: 0; color: var(--ink); }

@media (max-width: 980px) {
  .doc-inner { grid-template-columns: minmax(0, 1fr); }
  .doc-inner > :not(.toc) { grid-column: 1; }
  .toc {
    position: static; grid-row: auto; max-height: none; overflow: visible;
    margin-bottom: 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card);
  }
  .toc summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; cursor: pointer; }
  .toc summary::after {
    content: "+"; width: auto; height: auto; border: 0; transform: none;
    font-size: 20px; line-height: 1; color: var(--champagne);
  }
  .toc details[open] summary::after { content: "−"; transform: none; }  /* la règle des questions ferait pivoter le signe */
  .toc ol { padding: 0 18px 8px; border-left: 0; }
  .toc li a { margin-left: 0; padding: 11px 0; border-left: 0; border-top: 1px solid var(--line); font-size: 15px; }
}

@media (max-width: 620px) {
  .doc-head { padding: 48px 0 28px; }
  .fiches > div { grid-template-columns: 1fr; gap: 2px; }
}
.fiches em { font-style: normal; color: var(--ink-2); }

/* =========================================================================
   Reflet des boutons (assets/specular.js, décision 33)
   Les couleurs du reflet passent par --sb-line et --sb-base, lues par le
   script : toujours des jetons hexadécimaux, jamais de color-mix().
   ====================================================================== */
.btn, [data-specular] { position: relative; isolation: isolate; }
/* Le bouton qui suit reste fixé à l'écran : la règle ci-dessus le renvoyait sous le pied de page. */
.btn.cta-flottant { position: fixed; }
/* Le menu garde déjà « Réserver » à l'écran, sur ordinateur comme sur téléphone : le bouton qui suit
   ne faisait que recouvrir le contenu (retiré le 28/09/2026). */
.btn.cta-flottant { display: none; }
.btn--primary { --sb-line: var(--specular); --sb-base: var(--specular); }
.btn--ghost, .theme-toggle { --sb-line: var(--champagne); --sb-base: var(--line-strong); }

/* Le canvas déborde de 20 px pour que la lueur passe le bord. */
.specular__fx { position: absolute; inset: -20px; pointer-events: none; z-index: 1; }
.specular__fx canvas { display: block; width: 100%; height: 100%; }

/* Mode CSS : même trait au repos, un halo discret au survol et au focus. */
[data-effet="css"]:where(:hover, :focus-visible) {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sb-line) 55%, transparent),
    0 0 18px -4px color-mix(in srgb, var(--sb-line) 70%, transparent);
}

/* =========================================================================
   Toggle (Untitled UI, adapté à la charte) : réglage à effet immédiat.
   Piste or quand il est actif, curseur noir : l'état se lit aussi par le
   contraste et la position.
   ====================================================================== */
.toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 0; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.toggle__piste {
  position: relative; flex-shrink: 0; width: 36px; height: 20px; padding: 2px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--raised);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.toggle__curseur {
  display: block; width: 14px; height: 14px; border-radius: 999px; background: var(--ink-3);
  transition: transform .15s var(--ease), background .1s linear;
}
.toggle[aria-checked="true"] .toggle__piste { background: var(--gold); border-color: var(--gold-edge); }
.toggle[aria-checked="true"] .toggle__curseur { transform: translateX(16px); background: #08080B; }
.toggle:hover .toggle__piste { border-color: var(--champagne); }
.toggle:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; border-radius: 6px; }
.toggle__aide { color: var(--ink-3); font-weight: 400; }

/* ---------------------------------------------------------------- évitement */
/* Premier arrêt du clavier : sauter l'en-tête et ses sept liens. Invisible jusqu'au focus. */
.evitement {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-control);
  background: var(--card); color: var(--ink); font-size: 14px; font-weight: 500;
  border: 1px solid var(--line-strong);
}
.evitement:focus { top: 12px; }
main:focus { outline: none; }

/* ---------------------------------------------------------------- au doigt */
/* Sur écran tactile, quelle que soit la largeur (tablette comprise), chaque cible fait 44 px. */
@media (pointer: coarse) {
  .brand { min-height: 44px; min-width: 44px; }
  .theme-toggle, .nav .btn { min-height: 44px; min-width: 44px; }
  .switch button { min-height: 44px; }
  .foot li a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .lien-cta { min-height: 44px; }
}

/* Entre 961 et 1180 px, « Se connecter » et « Réserver 15 minutes » passaient sur deux lignes. */
.nav__login, .nav .btn { white-space: nowrap; }
@media (max-width: 1180px) { .nav__more { display: none; } .nav__links { gap: 18px; } }

/* --- moments : tablette et téléphone ------------------------------------------ */
@media (max-width: 960px) {
  .moment { min-height: 0; padding: 80px 0; }
  .moment__in { grid-template-columns: 1fr; gap: 36px; }
  .moment__in--inverse .moment__texte { order: 0; }
  /* Plein écran pour le héros de l'accueil seulement : les autres pages ont un en-tête court. */
  .hero.moment { min-height: 100svh; padding-top: 32px; }
  .hero__logo img { height: 200px; }
}
@media (max-width: 620px) {
  .moment { padding: 64px 0; }
  .hero__logo img { height: 170px; }
  .hero__sub { font-size: 17px; }
  .hero__cta .btn { width: 100%; }
  .alerte { padding: 24px 22px; }
  .cta-flottant { right: 16px; left: 16px; bottom: 14px; justify-content: center; }
  .indice { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .indice { animation: none; }
  .cta-flottant { transition: none; }
}

/* =========================================================================
   Décision 48 (28/09/2026) — l'offre d'essai, la visite de l'application, les tarifs sans minimum
   ====================================================================== */


/* --- la bande « deux semaines offertes » (décision 51) ------------------------------------
   Pleine largeur, en champagne dans les deux thèmes, texte sombre : la seule surface dorée pleine
   de la page, pour qu'on la voie tout de suite. Des paillettes scintillent (posées par site.js),
   et un reflet la traverse toutes les cinq secondes. Mouvement réduit : immobile. */
:root {
  --offre-fond: #EAD8B8;
  --offre-fond-2: #D9C9A8;
  --offre-reflet: #FBF3E2;
  --offre-encre: #0A0A0A;
  --offre-lisere: #A08453;
}
.offre {
  display: block; position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(100deg, var(--offre-fond-2) 0%, var(--offre-fond) 38%, var(--offre-fond) 62%, var(--offre-fond-2) 100%);
  color: var(--offre-encre); border-bottom: 1px solid var(--offre-lisere);
}
.offre:hover, .offre:focus-visible { color: var(--offre-encre); }
.offre:focus-visible { outline: 2px solid var(--offre-encre); outline-offset: -4px; }
.offre__in {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 28px;
  min-height: 72px; padding-top: 14px; padding-bottom: 14px; text-align: center;
}
.offre__texte { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; justify-content: center; }
.offre__texte strong { font-size: clamp(18px, 1.9vw, 22px); font-weight: 700; letter-spacing: -0.01em; }
.offre__suite { font-size: 15px; font-weight: 500; opacity: .72; }
.offre__action {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 11px 20px; border-radius: 999px;
  background: var(--offre-encre); color: var(--offre-fond);
  font-size: 16px; font-weight: 600;
  box-shadow: 0 6px 18px -8px rgba(10, 10, 10, .55);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease;
}
.offre__action svg { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.offre:hover .offre__action { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(10, 10, 10, .6); }
.offre:hover .offre__action svg { transform: translateX(4px); }

/* Le reflet : une bande de lumière qui traverse, puis repos, en boucle. */
.offre::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, var(--offre-reflet) 50%, transparent 62%);
  background-size: 250% 100%; background-position: 130% 0; opacity: .85;
  animation: offre-reflet 5s cubic-bezier(.45, 0, .2, 1) 1s infinite;
}
@keyframes offre-reflet {
  0% { background-position: 130% 0; }
  45%, 100% { background-position: -30% 0; }
}

/* Les paillettes : de petites étoiles à quatre branches qui naissent, brillent et s'éteignent. */
.offre__paillettes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.paillette {
  position: absolute; width: var(--t, 10px); height: var(--t, 10px);
  left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(0); opacity: 0;
  background: radial-gradient(circle, #FFFFFF 0 35%, #FFF6E0 70%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: paillette var(--d, 2.6s) ease-in-out var(--r, 0s) infinite;
}
.paillette--sombre { background: var(--offre-lisere); }
@keyframes paillette {
  0%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
  45% { transform: translate(-50%, -50%) scale(1) rotate(45deg); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(.4) rotate(70deg); opacity: .6; }
}

.offre + .hero.moment { min-height: calc(100svh - 68px - 72px); }
@media (max-width: 620px) {
  .offre__in { flex-direction: column; gap: 10px; min-height: 0; padding-top: 16px; padding-bottom: 16px; }
  .offre__texte { flex-direction: column; align-items: center; gap: 2px; }
  .offre__action { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .offre::before, .paillette { animation: none; }
  .offre__paillettes { display: none; }
}

/* --- les sources, en liste plutôt qu'en cartes identiques --------------------------------- */
.sources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 36px 0 0; }
.sources > div { border-top: 1px solid var(--line-strong); padding-top: 16px; }
.sources dt { font-size: 16px; font-weight: 500; color: var(--ink); }
.sources dd { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 960px) { .sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sources { grid-template-columns: 1fr; gap: 20px; } }

/* --- tarifs : les deux semaines offertes, le calcul ---------------------------------------- */
.essai { border-color: var(--line-strong); }
.essai__etapes { list-style: none; counter-reset: essai; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.essai__etapes li { counter-increment: essai; display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.essai__etapes li::before { content: counter(essai); font-weight: 700; color: var(--champagne); font-variant-numeric: tabular-nums; line-height: 1.5; }
.essai__etapes b { color: var(--ink); font-weight: 500; }
.calc__titre { font-size: 14px; font-weight: 500; color: var(--ink-2); margin: 0 0 6px; letter-spacing: 0; }

/* La sélection de texte et le curseur de saisie portent aussi la marque. */
::selection { background: rgba(217, 201, 168, .32); color: var(--ink); }
[data-theme="light"] ::selection { background: rgba(160, 132, 83, .24); }

/* Un titre centré suivi de son sous-titre : jamais collés (le sous-titre touchait « pas quarante »). */
.h2--centre + .lead--centre { margin-top: 18px; }

/* =========================================================================
   Décision 50 (28/09/2026) — la page Démo : la vraie application, dans un cadre
   ====================================================================== */
.demo-tete { padding: 56px 0 20px; text-align: center; }
.demo-tete h1 { font-size: clamp(38px, 5vw, 64px); font-weight: 300; letter-spacing: -0.02em; }
.demo-tete .hero__sub { margin: 16px auto 0; max-width: 58ch; }

.demo-scene { padding: 12px 0 40px; }
.demo-scene__wrap { max-width: 1400px; }

.demo-pistes { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.demo-pistes__titre { font-size: 13px; color: var(--ink-3); }
.demo-pistes__liste { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.demo-piste {
  min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
  font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.demo-piste:hover { border-color: var(--line-strong); color: var(--ink); }
.demo-piste[aria-pressed="true"] { border-color: var(--champagne); color: var(--ink); background: var(--raised); }
.demo-piste:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }

.demo-cadre { border: 1px solid var(--line-strong); border-radius: var(--r-card); overflow: hidden; background: var(--card); }
.demo-cadre__barre {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg);
  font-size: 13px; color: var(--ink-3);
}
.demo-cadre__adresse { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.demo-cadre__adresse span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-cadre__plein { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--champagne); font-weight: 500; }
.demo-cadre__plein:hover { color: var(--link-hover); }
.demo-cadre__vue { position: relative; height: clamp(600px, calc(100svh - 240px), 900px); background: #08080B; }
.demo-cadre__vue iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.demo-cadre__etat {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px;
  padding: 24px; text-align: center; font-size: 15px; color: var(--ink-2); background: var(--bg);
  transition: opacity .35s ease;
}
.demo-cadre__etat[hidden] { display: none; }
.demo-cadre.est-pret [data-demo-attente] { opacity: 0; pointer-events: none; }
.demo-note { margin-top: 12px; font-size: 13px; color: var(--ink-3); text-align: center; }

@media (max-width: 620px) {
  .demo-tete { padding: 32px 0 12px; }
  .demo-pistes { justify-content: flex-start; }
  .demo-pistes__titre { width: 100%; }
  .demo-pistes__liste { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); }
  .demo-pistes__liste::-webkit-scrollbar { display: none; }
  .demo-piste { min-height: 44px; }
  .demo-cadre__vue { height: 76svh; }
  .demo-cadre__barre { padding: 8px 12px; }
}

/* --- le calendrier de réservation (Cal.com) ---------------------------------------------------- */
.rdv-calendrier { padding-top: 8px; }
.rdv-cadre { position: relative; padding: 12px; min-height: 640px; overflow: hidden; }
.rdv-cadre__calendrier { width: 100%; min-height: 616px; overflow: auto; }
.rdv-cadre__attente, .rdv-cadre__repli {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px;
  padding: 24px; text-align: center; font-size: 15px; color: var(--ink-2); background: var(--card);
}
.rdv-cadre__repli p { max-width: 46ch; }
.rdv-cadre__attente[hidden], .rdv-cadre__repli[hidden] { display: none; }
@media (max-width: 620px) {
  .rdv-cadre { padding: 4px; min-height: 560px; }
  .rdv-cadre__calendrier { min-height: 552px; }
}