/* Rituel — les blocs propres aux cinq pages.
   Toutes les valeurs numériques viennent du README §4 : ne pas arrondir. */

.page { display: none }
.page.is-active { display: block }

/* ══ Fenêtre de capture ══
   Toujours rognée par le bas : l'écran « continue » hors du cadre. Un
   validateur automatique y voit du contenu tronqué — c'est un faux positif
   (README §9). */
.shot {
  overflow: hidden; border-radius: 28px 28px 0 0; display: flex;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
  /* La fenêtre est PLUS COURTE que la capture : c'est ce rapport qui produit le
     rognage. Sans hauteur contrainte, l'image entière s'affiche et l'écran ne
     « continue » plus hors du cadre. */
  aspect-ratio: 1 / 1.34;
}
.shot img { display: block; width: 100%; height: auto; align-self: flex-start }

/* ══ Accueil — hero ══
   **Registre propre, celui de la v2** (README §4.2) : le reste du site est
   volumétrique, le hero est calme. Aplats francs, aucune ombre gravée sur le
   titre, boutons plats. Ne pas l'uniformiser avec les autres sections. */
.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: min(1020px, 100vh);
  padding: clamp(118px, 15vh, 180px) 0 clamp(70px, 9vh, 110px);
}

/* Le canvas de l'orbe : transparent, sous le contenu, insensible au doigt. */
.hero__canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block; pointer-events: none;
}

/* Repli si WebGL manque ou refuse de compiler (§7.1). Le reste du site ne
   change pas : seule l'orbe devient une forme CSS. */
.hero__fallback {
  position: absolute; z-index: 0; top: 14%; right: -6%;
  width: min(58vw, 640px); height: min(58vw, 640px);
  opacity: 0; pointer-events: none;
  transition: opacity 600ms var(--ease-out);
  background: radial-gradient(60% 60% at 36% 30%,
              var(--color-accent-300), var(--color-accent-700) 68%, var(--color-accent-800));
  border-radius: 46% 54% 60% 40% / 50% 44% 56% 50%;
  filter: blur(.4px);
  box-shadow: 0 40px 90px -30px rgba(46,43,37,.5);
  animation: morph 19s ease-in-out infinite;
}

.hero__motes { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden }
.hero__motes span {
  position: absolute; border-radius: 999px;
  animation-name: moteDrift; animation-timing-function: linear; animation-iteration-count: infinite;
}

.hero__inner {
  position: relative; z-index: 2; width: 100%;
  display: grid; gap: clamp(36px, 5vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: center;
}
/* **Colonnes déséquilibrées dès qu'il y en a deux.** Mesuré : « La nuit
   parle. » fait 646 px en Caprasimo à 100,8 px (7vw d'un écran de 1440), alors
   que deux colonnes égales n'en donnent que 552, et 713 sont nécessaires. Le titre s'y coupait. La
   passation impose et la taille et les deux lignes : c'est donc le partage
   50/50 qui cède — la carte n'a de toute façon besoin que de 352 px.
   Sous 900 px, la grille retombe sur une colonne et la règle ne s'applique pas. */
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) }
}

.hero__pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 13px; border-radius: var(--radius-pill);
  background: rgba(249,244,237,.66);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.7);
  font-size: 12.5px; letter-spacing: .04em; font-weight: 600; color: var(--color-accent-800);
  animation: fadeUp 700ms var(--ease-out) both;
}
.hero__dot { position: relative; display: inline-flex; width: 8px; height: 8px }
.hero__dot::before, .hero__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--color-accent-2-600);
}
.hero__dot::before { animation: livePulse 2.8s ease-out infinite }

/* Deux lignes, chacune dans son masque. **Aucune ombre** : la v4 gravait le
   titre et le dessinait en verre taillé dans le shader — supprimé en v5. */
.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(44px, 7vw, 104px); line-height: .94; letter-spacing: -.028em;
  max-width: 13ch; margin: 22px 0 0; color: var(--color-text); text-shadow: none;
}
/* Le masque du titre : il clippe **en hauteur seulement**. `overflow: hidden`
   couperait aussi sur les côtés, et « La nuit parle. » à 100,8 px mesure 646 px
   dans une colonne de 552 — la fin du mot disparaissait. `clip-path` avec une
   marge négative à droite laisse la ligne déborder dans la gouttière (94 px,
   soit exactement le jeu qui reste à gauche de la carte) tout en gardant la
   coupe nette au-dessus et en dessous, qui est ce qui fait la montée. */
.hero__line { display: block; clip-path: inset(0 -4% 0 0); padding-bottom: .05em }
/* `nowrap` : la passation impose **deux lignes, ce texte exact**. « La nuit
   parle. » fait quatorze signes et déborderait la mesure de 13ch en se coupant
   en deux — quatre lignes au lieu de deux, et un titre qui mange le hero. Le
   débordement est voulu ; la mesure ne sert qu'à décider où la seconde ligne
   commence. */
.hero__line > span { display: inline-block; white-space: nowrap; animation: riseIn 1100ms var(--ease-out) both }
.hero__line + .hero__line { padding-bottom: .04em }
.hero__line + .hero__line > span { color: var(--color-accent-700); animation-delay: 130ms }

.hero__lead {
  margin: 26px 0 0; font-size: clamp(17px, 1.75vw, 20.5px); line-height: 1.55;
  color: var(--color-neutral-700); max-width: 42ch; text-wrap: pretty;
  animation: fadeUp 800ms var(--ease-out) 280ms both;
}

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px;
  animation: fadeUp 800ms var(--ease-out) 400ms both;
}
/* Boutons **plats** : le bouton mécanique extrudé (§5.2) commence après le
   hero. Survol et appui en CSS, pas en JS — ils n'ont ni socle ni parois. */
.hero__btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15.5px; font-weight: 600; text-decoration: none;
  border-radius: var(--radius-pill); will-change: transform;
  transition: transform 560ms var(--ease-spring-soft), box-shadow 320ms var(--ease-out),
              background 240ms ease, border-color 240ms ease;
}
.hero__btn--primary {
  background: var(--color-accent-700); color: var(--color-neutral-100);
  padding: 16px 30px; box-shadow: 0 10px 24px rgba(78,58,34,.26);
}
a.hero__btn--primary:hover { transform: scale(1.05); box-shadow: 0 18px 38px rgba(78,58,34,.3); background: var(--color-accent-600); color: var(--color-neutral-100) }
.hero__btn--ghost {
  background: rgba(255,255,255,.5); color: var(--color-accent-800);
  border: 1px solid var(--color-accent-300); padding: 16px 28px;
}
a.hero__btn--ghost:hover { transform: scale(1.05); background: var(--color-accent-100); border-color: var(--color-accent-400); color: var(--color-accent-800) }
.hero__btn:active {
  transform: scale(1.16, .8) translateY(4px);
  transition: transform 100ms cubic-bezier(.2,.9,.3,1), box-shadow 100ms linear;
}
.hero__btn--primary:active { box-shadow: 0 4px 10px rgba(78,58,34,.3) }

.hero__note {
  margin-top: 26px; font-size: 13.5px; color: var(--color-neutral-700);
  animation: fadeUp 800ms var(--ease-out) 520ms both;
}

.hero__cue {
  display: flex; align-items: flex-start; gap: 14px; margin-top: clamp(34px, 5vh, 62px);
  animation: fadeUp 800ms var(--ease-out) 680ms both;
}
.hero__cue-rail {
  position: relative; display: block; width: 1px; height: 58px; overflow: hidden;
  background: linear-gradient(var(--color-accent-300), transparent);
}
.hero__cue-rail::after {
  content: ""; position: absolute; top: 0; left: -1px; width: 3px; height: 12px;
  border-radius: var(--radius-pill); background: var(--color-accent-600);
  animation: cueDot 2.6s var(--ease-out) infinite;
}
.hero__cue-label {
  font-size: 11.5px; letter-spacing: .17em; text-transform: uppercase; font-weight: 600;
  color: var(--color-neutral-700); padding-top: 2px;
}

/* Colonne droite : la carte s'incline suivant la souris (transform écrit par
   la boucle d'images). **Son animation d'entrée ne touche que l'opacité** —
   une keyframe qui écrit `transform` garderait la main dessus après sa fin,
   fill-mode oblige, et l'inclinaison ne s'appliquerait jamais. */
.hero__stage { display: flex; justify-content: center; perspective: 1400px }
.hero__tilt {
  position: relative; transform-style: preserve-3d;
  animation: anFade 900ms var(--ease-out) 300ms both;
}
.hero__halo {
  position: absolute; inset: -9% -6%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--color-accent-200), transparent 72%);
  filter: blur(16px); transform: translateZ(-40px);
  animation: glowBreathe 9s ease-in-out infinite;
}
.hero__card {
  position: relative; width: min(88vw, 352px); border-radius: 36px;
  padding: 26px 26px 0; overflow: hidden;
  background: linear-gradient(168deg, var(--color-accent-200), var(--color-accent-100));
  box-shadow: 0 34px 70px rgba(46,43,37,.24), inset 0 1px 0 rgba(255,255,255,.6);
  transform-style: preserve-3d;
  transition: transform 620ms var(--ease-spring-soft);
}
.hero__card:hover { transform: scale(1.022) }
.hero__card:active { transform: scale(1.05, .95); transition: transform 110ms ease-out }
.hero__card-title { margin: 0; font-family: var(--font-heading); font-size: 21px; color: var(--color-accent-900) }
.hero__card-text {
  margin: 8px 0 0; font-size: 14px; line-height: 1.5;
  color: var(--color-accent-900); max-width: 30ch; text-wrap: pretty;
}
/* Capture rognée par le bas : voulu, et signalé comme faux positif aux
   validateurs qui y voient du contenu tronqué (§9). */
.hero__shot {
  margin-top: 22px; height: clamp(250px, 30vw, 330px);
  display: flex; justify-content: center; overflow: hidden; border-radius: 28px 28px 0 0;
}
.hero__shot img {
  width: min(100%, 300px); height: auto; align-self: flex-start;
  border-radius: 28px 28px 0 0; box-shadow: 0 -1px 0 rgba(255,255,255,.5);
}

.hero__badge { position: absolute; padding: 13px 17px; border-radius: 20px; white-space: nowrap }
.hero__badge i {
  display: block; font-style: normal; font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; font-weight: 600;
}
.hero__badge b {
  display: block; margin-top: 3px; font-family: var(--font-heading);
  font-size: 23px; line-height: 1.1; font-weight: 400;
}
.hero__badge--light {
  bottom: 104px; left: clamp(-40px, -3vw, -14px);
  background: rgba(249,244,237,.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 16px 34px rgba(46,43,37,.16);
  animation: floatA 7.5s ease-in-out infinite;
}
.hero__badge--light i { color: var(--color-neutral-700) }
.hero__badge--light b { color: var(--color-accent-2-800) }
.hero__badge--night {
  top: -28px; right: clamp(-38px, -2.8vw, -12px);
  background: var(--night-ground);
  box-shadow: 0 18px 38px rgba(39,43,26,.34);
  animation: floatB 9.5s ease-in-out infinite;
}
.hero__badge--night i { color: color-mix(in srgb, var(--night-ink) 64%, transparent) }
.hero__badge--night b { color: var(--night-ink) }

/* En colonne unique, les deux pastilles débordaient sur l'indice de défilement
   au-dessus et sur le bord de l'écran à droite : elles rentrent dans la carte. */
@media (max-width: 700px) {
  /* En colonne unique, la carte montait sur l'indice de défilement. */
  .hero__stage { margin-top: 22px }
  .hero__badge--light { bottom: 96px; left: -4px }
  /* Au-dessus de la capture, pas au-dessus du texte : en colonne unique, le
     coin haut de la carte porte « Cette nuit » et sa phrase. */
  .hero__badge--night { top: auto; bottom: 186px; right: -4px }
}

/* ══ Accueil — rail horizontal épinglé ══ */
.rail-section { position: relative }
.rail-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center }
.rail {
  display: flex; width: max-content; gap: 30px;
  padding-inline: clamp(18px, 4vw, 56px); will-change: transform;
}
.rail__panel { flex: 0 0 auto; width: min(86vw, 372px); display: flex; align-items: center }
.rail__panel--intro, .rail__panel--outro { width: min(86vw, 420px) }

.rail__title {
  position: absolute; top: clamp(90px, 13vh, 140px); left: clamp(18px, 4vw, 56px);
  right: clamp(18px, 4vw, 56px); z-index: 2; pointer-events: none;
  font-family: var(--font-heading); font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -.02em; color: var(--color-text);
}
.rail__progress {
  position: absolute; left: clamp(18px, 4vw, 56px); right: clamp(18px, 4vw, 56px);
  bottom: clamp(28px, 5vh, 52px); height: 6px; border-radius: var(--radius-pill);
  background: rgba(46,43,37,.1);
  box-shadow: inset 0 2px 3px rgba(46,43,37,.18);
  overflow: hidden;
}
.rail__progress-fill {
  height: 100%; width: 0%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-accent-500), var(--color-accent-700));
}

/* Carte de mesure */
.measure__kicker {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
  color: var(--color-accent-700);
}
.measure__value {
  font-family: var(--font-heading); font-size: clamp(40px, 4.6vw, 54px);
  line-height: 1; margin: 10px 0 2px; letter-spacing: -.02em;
}
.measure__value small { font-family: var(--font-body); font-size: .38em; font-weight: 600; margin-left: 6px }
/* Sparkline : viewBox 0 0 120 36 étiré en largeur, trait d'épaisseur constante.
   La teinte alterne bronze / sauge d'une mesure à l'autre, portée par l'attribut
   stroke de chaque polyline — jamais un hex, toujours un jeton. */
.measure__spark {
  display: block; width: 100%; height: 44px; margin-top: 20px; overflow: visible;
  filter: drop-shadow(0 2px 1px rgba(46,43,37,.22));
}
.measure__spark polyline {
  fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
}
.measure__phrase { font-size: 15px; line-height: 1.5; color: var(--color-neutral-700) }
.card--night .measure__phrase { color: color-mix(in srgb, var(--night-ink) 80%, transparent) }
.measure__foot { margin-top: 14px; font-size: 12px; color: var(--color-neutral-500) }
.card--night .measure__foot { color: color-mix(in srgb, var(--night-ink) 64%, transparent) }

/* ══ Sections courantes ══ */
.section { padding: clamp(70px, 9vw, 130px) 0 }
.section__head { max-width: 46rem; margin-bottom: clamp(34px, 4vw, 54px) }
.section__head h1, .section__head h2 {
  font-size: clamp(30px, 4.1vw, 56px); line-height: 1.04; letter-spacing: -.026em;
  margin: 14px 0 18px;
  /* --ink bascule clair/nuit à chaque image : sans cette ligne, le titre des
     Conditions restait en encre noire sur le sol nuit, donc illisible. */
  color: var(--ink);
}

.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(18px, 2.2vw, 26px); margin-top: clamp(30px, 4vw, 48px) }
.numbers__item { text-align: center }
.numbers__value { font-family: var(--font-heading); font-size: clamp(42px, 5vw, 68px); line-height: 1; color: var(--color-accent-700) }
.numbers__label { margin-top: 8px; font-size: 13px; color: var(--color-neutral-600) }

.step__index {
  font-family: var(--font-heading); font-size: 30px; line-height: 1;
  color: var(--color-accent-400); margin-bottom: 12px;
}
.card--night .step__index { color: var(--color-accent-2-400) }
.card h3, .card--night h3 { font-size: 21px; line-height: 1.2; margin-bottom: 10px }
.card p { font-size: 15px; color: var(--color-neutral-700) }
.card--night p { color: color-mix(in srgb, var(--night-ink) 80%, transparent) }

/* Liste des six mesures — chaque ligne se décale de 14px au survol (§4.5) */
.measures-list { list-style: none; margin: 0; padding: 0; display: grid }
.measures-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 18px 4px; border-bottom: 1px solid var(--color-divider);
  transition: transform 320ms var(--ease-out), color 320ms var(--ease-out);
}
.measures-list li:hover { transform: translateX(14px); color: var(--color-accent-700) }
.measures-list b { font-weight: 600; font-size: 17px }
.measures-list span { font-family: var(--font-heading); font-size: 19px }

/* Encadré sauge — page Confidentialité */
.notice {
  margin-top: clamp(30px, 4vw, 48px); padding: clamp(24px, 3vw, 34px);
  border-radius: var(--radius-lg);
  background: var(--color-accent-2-100);
  box-shadow: inset 0 0 0 1px var(--color-accent-2-200);
}
.notice h1, .notice h2 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 12px; color: var(--color-accent-2-800) }
.notice p { color: var(--color-accent-2-800); font-size: 15.5px }

/* ══ Conditions — thème nuit ══ */
/* Le sol de la page est peint par le canvas ; ces règles ne concernent que
   l'encre, qui suit --ink et --night-ink. */
.articles {
  padding: clamp(26px, 3.4vw, 44px);
  display: grid; gap: 0;
}
.articles > div { padding: 26px 0; border-top: 1px solid rgba(239,241,229,.14) }
.articles > div:first-child { border-top: 0 }
.articles h3 { font-size: 19px; margin-bottom: 8px }
.articles p { font-size: 15px; color: color-mix(in srgb, var(--night-ink) 80%, transparent) }

/* ══ Télécharger ══ */
.triptych {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(18px, 2.2vw, 26px); align-items: center;
  margin-top: clamp(40px, 5vw, 70px);
}
.triptych__slot { max-width: 260px; margin-inline: auto; width: 100% }
.triptych__slot--center { max-width: 300px }

.faq { margin-top: clamp(40px, 5vw, 70px); display: grid; gap: 14px }
.faq__item { padding: 0 clamp(18px, 2.4vw, 28px) }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--color-text);
}
.faq__sign {
  flex: 0 0 auto; font-size: 22px; line-height: 1; color: var(--color-accent);
  transition: transform 460ms var(--ease-out);
}
.faq__item.is-open .faq__sign { transform: rotate(135deg) }
.faq__a {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 460ms var(--ease-out), opacity 460ms var(--ease-out);
}
.faq__item.is-open .faq__a { max-height: 280px; opacity: 1 }
.faq__a p { padding-bottom: 24px; font-size: 15.5px; color: var(--color-neutral-700) }