/* Altura — landing page
   Mobile d'abord. Points de rupture : 768px (tablette), 960px (navigation), 1100px (desktop). */

/* ---------- Polices de repli ajustées (18/10/2026) ----------
   Polices locales (rien n'est téléchargé), mises à la largeur et aux hauteurs (ascendante, descendante) des polices
   du site : le texte affiché avant leur arrivée occupe la même place. Sans elles, le titre du hero changeait de
   hauteur au chargement de Newsreader (CLS 0,025 à 412 px). Mesures sur une phrase de la page, à 100 px :
   Newsreader 350 largeur 3155, ascendante 74, descendante 26 ; italique 2692 ; Georgia 3212 (92 / 22),
   Georgia italique 3292 ; Archivo 3174 (88 / 21) ; Helvetica Neue 3267 ; Arial 3254.
   Les hauteurs sont divisées par size-adjust, qui s'applique aussi à elles. */
@font-face {
  font-family: 'Newsreader repli';
  src: local('Georgia');
  size-adjust: 98.2%;
  ascent-override: 75.4%;
  descent-override: 26.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Newsreader repli';
  font-style: italic;
  src: local('Georgia Italic'), local('Georgia-Italic');
  size-adjust: 81.8%;
  ascent-override: 90.5%;
  descent-override: 31.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo repli HN';
  src: local('Helvetica Neue'), local('HelveticaNeue');
  size-adjust: 97.2%;
  ascent-override: 90.5%;
  descent-override: 21.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo repli Arial';
  src: local('Arial'), local('ArialMT');
  size-adjust: 97.5%;
  ascent-override: 90.3%;
  descent-override: 21.5%;
  line-gap-override: 0%;
}

/* ---------- Variables ---------- */
:root {
  /* Fonds. Refonte « Altitude » (18/10/2026) : fond de page #F4F5F6 (était #F7F9FB) et ciel des sections. */
  --bg: #F4F5F6;
  --bg-alt: #F1F5F9;
  --sky-1: #EEF2F6; /* ciel clair : constat, fondu de sortie du hero */
  --sky-2: #E3EAF1;
  --sky-3: #E6ECF3; /* bas de la méthode, haut de la bande « claire vers nuit » */
  --sand: #ECEFF2;  /* bas de la FAQ, haut de l'appel final */
  --surface: #FFFFFF;
  --surface-accent: #E4ECF4;
  --border: #E3E9EF;
  --rule: #CDD6E0; /* filets qui séparent le contenu posé sur le fond (12/10/2026) */

  /* Texte sur fond clair */
  --ink: #1D2B3A;
  --ink-strong: #33475B;
  --ink-muted: #56687A;
  --ink-label: #596B7E; /* remplace #6A7C8F des maquettes (contraste AA) */

  /* Accent */
  --accent: #4B6F95;
  --on-accent: #FFFFFF;
  /* Laiton, usage rare (18/10/2026) : guillemet de la citation, puce de l'étape active du téléphone. Jamais en texte
     sur fond clair (le laiton foncé y atteint 4,42:1). */
  --brass: #B79F7C;
  --brass-deep: #8A6D45;

  /* Fond sombre */
  --dark: #1A2635;
  --dark-chip: #223246;
  --dark-rule: #2C3B4E;
  --on-dark: #EEF3F8;
  --on-dark-body: #C4D0DC;
  --on-dark-muted: #A9B7C6;
  --on-dark-check: #9FB8D3;

  /* Typographie */
  --font-serif: 'Newsreader', 'Newsreader repli', Georgia, serif;
  --font-sans: 'Archivo', 'Archivo repli HN', 'Archivo repli Arial', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-logo: 'Fraunces', Georgia, serif;

  /* Formes */
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow-btn: 0 1px 2px rgba(29, 43, 58, 0.08), 0 6px 16px rgba(75, 111, 149, 0.18);
  --shadow-btn-hover: 0 2px 4px rgba(29, 43, 58, 0.12), 0 16px 32px rgba(75, 111, 149, 0.34);
  --shadow-btn-white: 0 10px 28px rgba(0, 0, 0, 0.3); /* bouton blanc sur fond sombre (hero, en-tête sombre) */
  --shadow-float: 0 2px 6px rgba(29, 43, 58, 0.06), 0 24px 60px rgba(29, 43, 58, 0.14);

  /* Mise en page */
  --container: 1200px;
  --gutter: 24px;
  --focus: 2px solid var(--accent);

  /* Mouvement (18/10/2026) : une seule courbe pour toute la page */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--accent); }
a:hover { color: var(--ink); }

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

main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Utilitaires ---------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-dark);
  font-size: 14px;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--on-dark); }

/* Texte lu par les lecteurs d'écran mais invisible à l'écran (ex. « (nouvelle fenêtre) »).
   Commune à toutes les pages (déplacée de bilan.css, décision du 02/10/2026). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  clip: rect(0 0 0 0); /* repli pour les navigateurs anciens sans clip-path */
  white-space: nowrap;
  border: 0;
}

.nowrap { white-space: nowrap; }

.icon {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Surtitre en capitales */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-label);
}

/* Icônes au trait fin (hero, arguments) */
.icon--line {
  stroke: var(--ink-strong);
  stroke-width: 1.3;
}

/* ---------- Bouton ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 16px 34px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color 0.25s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    transform 0.35s var(--ease-out);
}
.btn .icon { transition: transform 0.35s var(--ease-out); }
/* Clic : le bouton s'enfonce d'1 px (pas sur un bouton désactivé du bilan) */
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); transition-duration: 0.1s; }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-btn);
}
.btn--primary:hover { background: #3F6184; color: var(--on-accent); }
/* Ombre un peu plus marquée au survol, seulement avec une souris (pas d'état collant au toucher) */
@media (hover: hover) {
  .btn--primary:hover { box-shadow: var(--shadow-btn-hover); }
}
.btn--primary:active:not(:disabled):not([aria-disabled="true"]) { box-shadow: var(--shadow-btn); }

/* Survol à la souris (Altitude, 18/10/2026) : le bouton monte de 2 px, la flèche glisse de 4 px, un reflet le
   traverse. Rien en mouvement réduit ni sur un bouton désactivé. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
  }
  .btn:hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-2px); }
  .btn:hover:not(:disabled):not([aria-disabled="true"]) .icon { transform: translateX(4px); }
  .btn:hover:not(:disabled):not([aria-disabled="true"])::after {
    transform: translateX(120%);
    transition: transform 0.8s var(--ease-out);
  }
}

/* Bouton blanc : hero et en-tête sombre (sur la photo et la nuit) */
.btn--white {
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: var(--shadow-btn-white);
}
.btn--white:hover { background: #FFFFFF; color: var(--ink); }
@media (hover: hover) {
  .btn--white:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34); }
}

/* Bouton nuit : appel final, sur le ciel clair */
.btn--night {
  background: var(--dark);
  color: var(--on-dark);
  box-shadow: 0 12px 30px rgba(26, 38, 53, 0.32);
}
.btn--night:hover { background: #24344A; color: var(--on-dark); }

/* Variante compacte (en-tête). 44px au lieu des 40px de la maquette : zone tactile minimale. */
.btn--sm {
  min-height: 44px;
  padding: 10px 22px;
  font-size: 13px;
}

/* Libellé du bouton d'en-tête : « Le bilan » en mobile, « Commencer le bilan » au-delà */
.label-long { display: none; }
@media (min-width: 768px) {
  .label-long { display: inline; }
  .label-short { display: none; }
}
/* Landing : pas de bouton d'en-tête en mobile (12/10/2026) */
@media (max-width: 767px) {
  .site-header__cta { display: none; }
}

/* ---------- En-tête ---------- */
.site-header { border-bottom: 1px solid var(--border); }

.site-header__inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header__start {
  display: flex;
  align-items: center;
  gap: 56px;
}

.logo {
  font-family: var(--font-logo);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ink);
}
/* Logo de l'en-tête : lien vers l'accueil (08/10/2026), zone tactile de 44 px */
a.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.site-nav { display: none; }

@media (min-width: 960px) {
  .site-header__inner { height: 76px; }
  .logo { font-size: 26px; }

  .site-nav {
    display: flex;
    gap: 32px;
    font-size: 13px;
  }
  /* Zone cliquable portée à 44px de haut sans changer l'apparence */
  .site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink-muted);
    text-decoration: none;
  }
  .site-nav a:hover { color: var(--ink); }
}

/* En-tête flottant de la landing (Altitude, 18/10/2026) : transparent en haut de page, posé sur le hero.
   Au-delà de 30 px de défilement (is-solid, main.js), fond clair translucide et flou ; variante sombre (is-dark)
   quand la section sous l'en-tête est sombre (hero, compagnon). Sans JavaScript, il défile avec la page (absolute)
   et garde la variante sombre du hero. Pages légales et bilan : en-tête inchangé. */
.site-header--float {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  border-bottom: 0;
  transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.js .site-header--float { position: fixed; }
.site-header--float.is-solid {
  background: rgba(244, 245, 246, 0.84);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(29, 43, 58, 0.08);
}
.site-header--float.is-dark .logo { color: var(--on-dark); }
.site-header--float.is-dark.is-solid {
  background: rgba(26, 38, 53, 0.82);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
.site-header--float.is-dark :focus-visible { outline-color: var(--on-dark); }
/* Bouton d'en-tête blanc sur fond sombre, accent bleu sur fond clair */
.site-header--float.is-dark .site-header__cta {
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

@media (min-width: 960px) {
  .site-header--float .site-nav a { position: relative; color: var(--ink-strong); }
  .site-header--float.is-dark .site-nav a { color: var(--on-dark); }
  /* Soulignement qui se dessine au survol */
  .site-header--float .site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-out);
  }
  .site-header--float .site-nav a:hover::after { transform: scaleX(1); }
  .site-header--float .site-nav a:hover { color: var(--ink); }
  .site-header--float.is-dark .site-nav a:hover { color: #FFFFFF; }
}

/* Ancres : elles s'arrêtent sous l'en-tête fixe */
html:has(.site-header--float) { scroll-padding-top: 76px; }
@media (min-width: 960px) {
  html:has(.site-header--float) { scroll-padding-top: 88px; }
}

/* ---------- Hero ---------- */
/* Altitude (18/10/2026) : la photo du hublot en fond plein écran, voiles pour la lisibilité, texte clair à gauche.
   Seul endroit sombre du haut de page ; il se fond dans le ciel clair du constat (.hero::after). */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(100vh, 860px);
  padding: 96px 0 168px; /* le texte reste au-dessus du fondu de sortie (150 px) */
  background: var(--dark); /* fond de secours avant l'image */
  color: var(--on-dark);
  overflow: hidden;
}
/* Déborde de 4 % vers le haut : la parallaxe ne découvre jamais le fond */
.hero__bg {
  position: absolute;
  inset: -4% 0 0 0;
  z-index: 0;
}
.hero__bg picture { display: block; height: 100%; }
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 35%;
  transform-origin: 50% 0;
}
/* Voile : vertical en mobile (le texte occupe toute la largeur, en bas). Haut renforcé (0,68 au lieu de 0,55) :
   à 768 px, le surtitre tombait à 4,17:1 sur le ciel du hublot (mesure du 18/10/2026). */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 28, 41, 0.68) 0%, rgba(18, 28, 41, 0.74) 40%, rgba(18, 28, 41, 0.9) 100%);
}
/* Fondu de sortie vers le ciel du constat */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 150px;
  /* Courbe en S (pente nulle aux deux bords) : aucune ligne visible au début ni à la fin du fondu */
  background: linear-gradient(
    180deg,
    rgba(238, 242, 246, 0.000) 0%,
    rgba(238, 242, 246, 0.020) 8.3%,
    rgba(238, 242, 246, 0.074) 16.7%,
    rgba(238, 242, 246, 0.156) 25%,
    rgba(238, 242, 246, 0.259) 33.3%,
    rgba(238, 242, 246, 0.376) 41.7%,
    rgba(238, 242, 246, 0.500) 50%,
    rgba(238, 242, 246, 0.624) 58.3%,
    rgba(238, 242, 246, 0.741) 66.7%,
    rgba(238, 242, 246, 0.844) 75%,
    rgba(238, 242, 246, 0.926) 83.3%,
    rgba(238, 242, 246, 0.980) 91.7%,
    rgba(238, 242, 246, 1.000) 100%
  );
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; }
.hero__text { max-width: 640px; }
.hero :focus-visible { outline-color: var(--on-dark); }

.hero .eyebrow { color: #C9D5E1; }

.hero__title {
  margin-top: 18px;
  font-family: var(--font-serif);
  font-weight: 350;
  font-size: clamp(42px, 5.4vw, 74px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.hero__title em {
  font-style: italic;
  font-weight: 350;
  color: #CFE0F2;
}

.hero__lead {
  margin-top: 20px;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.6;
  color: #DCE5EE;
}

.hero__cta {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero__cta .btn { width: 100%; }

.hero__note {
  font-size: 13px;
  line-height: 1.5;
  color: #C4D0DC;
}

.hero__features {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero__features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: #E6EDF4;
}
.hero .icon--line { stroke: #BFD3E8; }

/* Preuve de sérieux, discrète (05/10/2026) */
.hero__proof {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #C4D0DC;
}
.hero__proof .icon { flex-shrink: 0; margin-top: 1px; stroke: #C4D0DC; }

/* Apparition au premier chargement (18/10/2026) : surtitre et titre d'abord, le chapeau puis le bouton ensuite.
   CSS seul : le texte s'affiche aussi sans JavaScript. Le titre (élément LCP possible) part sans délai et de
   l'opacité 0,01 : à 0, Chrome ne le compte qu'à la fin du fondu (+1 s de LCP mesuré). La photo de fond ne bouge
   pas à l'arrivée (jamais de fondu sur l'image LCP). */
@media (prefers-reduced-motion: no-preference) {
  .hero__text > * { animation: rise 0.75s var(--ease-out) both; }
  .hero__title { animation-name: rise-title; }
  .hero__lead { animation-delay: 0.12s; }
  .hero__cta { animation-delay: 0.24s; }
  .hero__features { animation-delay: 0.32s; }
  .hero__proof { animation-delay: 0.38s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes rise-title {
  from { opacity: 0.01; transform: translateY(12px); }
}

@media (min-width: 768px) {
  .hero__lead { font-size: 17px; }
  .hero__cta { align-items: flex-start; gap: 14px; }
  .hero__cta .btn { width: auto; }
}

/* Au-delà de 900 px : photo 16:9, voile horizontal (sombre à gauche, sous le texte), contenu centré verticalement */
@media (min-width: 901px) {
  .hero {
    align-items: center;
    padding: 150px 0 172px; /* le texte reste au-dessus du fondu de sortie (150 px) */
  }
  .hero__img { object-position: 60% 40%; }
  /* Voile renforcé par rapport à la maquette (0,74 à 38 %, 0,28 à 70 %) : sous le texte passent les rayures claires
     du hublot et le haut du moteur, où le chapeau tombait à 3,2:1 (mesure du 18/10/2026, image décodée). */
  .hero__bg::after {
    background:
      linear-gradient(90deg, rgba(18, 28, 41, 0.9) 0%, rgba(18, 28, 41, 0.86) 40%, rgba(18, 28, 41, 0.72) 58%, rgba(18, 28, 41, 0.34) 80%, rgba(18, 28, 41, 0.14) 100%),
      linear-gradient(180deg, rgba(18, 28, 41, 0.45) 0%, transparent 22%);
  }
  .hero__title { margin-top: 22px; }
  .hero__lead { margin-top: 28px; font-size: 18px; }
  .hero__cta { margin-top: 34px; }
  .hero__features { margin-top: 38px; }
  .hero__features li { font-size: 15px; }
  .hero__proof { margin-top: 26px; padding-top: 22px; font-size: 14px; }
}
/* De 901 à 1279 px, le texte couvre jusqu'aux deux tiers de la photo, là où le voile horizontal s'éclaircit et où
   passent le ciel et le moteur : voile prolongé (sinon 2,0 à 3,4:1 mesurés à 1024 px). */
@media (min-width: 901px) and (max-width: 1279.98px) {
  .hero__bg::after {
    background:
      linear-gradient(90deg, rgba(18, 28, 41, 0.9) 0%, rgba(18, 28, 41, 0.88) 55%, rgba(18, 28, 41, 0.72) 74%, rgba(18, 28, 41, 0.36) 100%),
      linear-gradient(180deg, rgba(18, 28, 41, 0.45) 0%, transparent 22%);
  }
}

/* ---------- Composants de section (communs) ---------- */
.section { padding: 48px 0; }
.section--alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

/* ---------- Ciel (Altitude, 18/10/2026) ----------
   La page raconte un vol par son décor : aube claire au sol, nuit en croisière (compagnon), retour à la lumière.
   Dégradés de fond seulement, sans JavaScript ; chaque section reprend la couleur où la précédente s'arrête. */
.section--constat { background: linear-gradient(180deg, var(--sky-1), var(--sky-2)); }
.section--methode { background: linear-gradient(180deg, var(--sky-2), var(--sky-3)); }
.section--faq { background: linear-gradient(180deg, var(--bg), var(--sand)); }
/* Appel final : ciel clair, puis, sur ses 120 px du bas (180 px en desktop), la nuit du pied de page, sans coupure */
.section--final { background: linear-gradient(
    180deg,
    #ECEFF2 calc((100% - 120px) * 0),
    #EBEEF1 calc((100% - 120px) * 0.125),
    #E7ECF0 calc((100% - 120px) * 0.25),
    #E3E8ED calc((100% - 120px) * 0.375),
    #DDE4EB calc((100% - 120px) * 0.5),
    #D5DDE6 calc((100% - 120px) * 0.625),
    #CDD7E0 calc((100% - 120px) * 0.75),
    #C7D2DC calc((100% - 120px) * 0.875),
    #C5D0DB calc((100% - 120px) * 1),
    #C1CCD8 calc(100% - 120px + 10px),
    #B5C1CF calc(100% - 120px + 20px),
    #A4B1C1 calc(100% - 120px + 30px),
    #8E9EB0 calc(100% - 120px + 40px),
    #76889D calc(100% - 120px + 50px),
    #5E7189 calc(100% - 120px + 60px),
    #4C5D73 calc(100% - 120px + 70px),
    #3C4B5F calc(100% - 120px + 80px),
    #2E3C4E calc(100% - 120px + 90px),
    #233041 calc(100% - 120px + 100px),
    #1C2938 calc(100% - 120px + 110px),
    #1A2635 calc(100% - 120px + 120px)
  ); }

/* Bandes de transition, vides et décoratives (aria-hidden). Pas de soleil, pas de lueur, aucun libellé.
   Dégradés adoucis (18/10/2026, demande d'Alex : « pas de grosses démarcations ») : couleurs interpolées en oklab
   le long des teintes d'origine, parcourues en courbe en S (pente nulle aux deux bords, donc aucune ligne là où la
   bande rejoint la section voisine), 17 paliers calculés à partir des couleurs clés ci-dessous.
   Clés : claire vers nuit #E6ECF3, #98AAC0, #4C6280, #1A2635 ; nuit vers jour #1A2635, #2E4058, #5E7189, #A7B2BE,
   #F4F5F6. */
.sky-band { height: 300px; } /* allongées le 18/10/2026 : pente plus douce */
.sky-band--dusk {
  background: linear-gradient(
    180deg,
    #E6ECF3 0%,
    #E4EAF1 6.2%,
    #DDE4ED 12.5%,
    #D3DCE7 18.8%,
    #C5D0DE 25%,
    #B6C3D4 31.2%,
    #A5B5C8 37.5%,
    #92A4BB 43.8%,
    #7C90A9 50%,
    #677C97 56.2%,
    #546987 62.5%,
    #435772 68.8%,
    #35465E 75%,
    #2A394C 81.2%,
    #212F40 87.5%,
    #1C2838 93.8%,
    #1A2635 100%
  );
}
.sky-band--dawn {
  height: 340px;
  background: linear-gradient(
    180deg,
    #1A2635 0%,
    #1B2736 6.2%,
    #1D2A3B 12.5%,
    #212F41 18.8%,
    #26354A 25%,
    #2C3D54 31.2%,
    #374A62 37.5%,
    #475971 43.8%,
    #576A82 50%,
    #6C7E94 56.2%,
    #8694A6 62.5%,
    #9EAAB7 68.8%,
    #B7C0CA 75%,
    #D0D6DC 81.2%,
    #E3E6EA 87.5%,
    #F0F1F3 93.8%,
    #F4F5F6 100%
  );
}
@media (min-width: 900px) {
  .sky-band { height: 420px; }
  .sky-band--dawn { height: 500px; }
}

.h2 {
  font-family: var(--font-serif);
  font-weight: 350;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
}

/* En-tête de section : surtitre + titre, puis texte (à droite en desktop) */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 26px;
}
.section-head__title {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Texte en deux paragraphes (constat, 07/10/2026) */
.section-head__text p + p { margin-top: 12px; }
.section-head__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Densité (12/10/2026) : seuls les objets comparables (peurs, délais, étapes) sont des cartes, toutes traitées
   de la même façon : fond teinté, sans filet ni ombre. Le reste est posé sur le fond, sous un filet (.moment). */
.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--surface-accent);
}
.card p,
.moment p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* Contenu posé sur le fond : un filet au-dessus, de l'espace autour */
.moment {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.grid-3 {
  display: grid;
  gap: 18px;
}

/* Constat : frise des trois moments (Altitude, 18/10/2026). Un filet continu au-dessus des colonnes, un point
   plein au début de chacune ; une colonne sous 900 px. */
.timeline { display: grid; gap: 6px; }
.timeline__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 0 18px;
}
.timeline__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(29, 43, 58, 0.22);
}
.timeline__item::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.timeline__item .h3 { font-size: 23px; }
.timeline__item p { font-size: 15px; line-height: 1.55; color: var(--ink-muted); }

/* Photo de section : cadre 21:9 (4:3 sous 900 px), image à 120 % de la hauteur pour la parallaxe interne */
.banner {
  display: block;
  position: relative;
  margin-top: 36px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(29, 43, 58, 0.2);
}
.banner img {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .h2 { font-size: 34px; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

@media (min-width: 900px) {
  .section { padding: 72px 0; }
  .section--constat { padding: 88px 0 110px; }

  .h2 { font-size: 38px; }
  .h3 { font-size: 21px; }

  .section-head {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: start; /* les deux colonnes partent du haut (12/10/2026) */
    margin-bottom: 36px;
  }
  .section-head__text { max-width: 34em; }

  .card {
    gap: 8px;
    padding: 24px 22px 26px;
  }
  .moment { gap: 8px; padding-top: 22px; }
  .card p,
  .moment p { font-size: 13.5px; line-height: 1.55; }

  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 20px; }
  .timeline__item { gap: 8px; padding: 26px 28px 0 0; }
  .timeline__item .h3 { font-size: 26px; }
  .banner { margin-top: 64px; aspect-ratio: 21 / 9; }
}

/* ---------- Petits éléments communs ---------- */
.num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-label);
}

/* Liste à coches */
.checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-strong);
}
.checks .check {
  stroke: var(--accent);
  stroke-width: 1.8;
  margin-top: 1px;
}

/* Fond sombre */
.section--dark { background: var(--dark); }
.section--dark :focus-visible,
.price :focus-visible,
.site-footer :focus-visible { outline-color: var(--on-dark); }

/* Bouton clair (sur fond sombre) */
.btn--light {
  background: var(--on-dark);
  color: var(--dark);
}
.btn--light:hover { background: #FFFFFF; color: var(--dark); }

/* ---------- La méthode ---------- */
/* Section « Le protocole, étape par étape » supprimée le 12/10/2026 : le bloc bilan termine la section. */

.subblock {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.subblock__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 46em;
}

/* Configurateur (Altitude, 18/10/2026) : deux groupes de cases radio natives, à gauche ; la carte « Votre parcours »
   à droite, collante. Une colonne sous 980 px, la carte après les choix. Remplace les cartes repliables. */
.config {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.config__choices { display: flex; flex-direction: column; gap: 30px; }

.choices {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.choices__legend { padding: 0; margin-bottom: 14px; }
.choices__list { display: flex; flex-direction: column; gap: 10px; }

/* Option : la case est masquée mais reste focalisable ; tout le libellé est la zone cliquable */
.choice { position: relative; }
.choice__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.choice__label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 44px;
  padding: 16px 18px;
  border: 1.5px solid transparent;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition:
    background-color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    transform 0.4s var(--ease-out);
}
.choice__label:hover { background: #FFFFFF; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .choice__label:hover { transform: translateX(4px); }
}
.choice__input:focus-visible + .choice__label { outline: var(--focus); outline-offset: 2px; }
.choice__input:checked + .choice__label {
  background: #FFFFFF;
  border-color: var(--accent);
  box-shadow: 0 14px 32px rgba(75, 111, 149, 0.18);
}
/* Anneau de la case (bordure à 5,48:1 sur blanc) ; un point d'accent le remplit à la sélection */
.choice__dot {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border: 1.5px solid var(--ink-label);
  border-radius: 50%;
  transition: border-color 0.3s var(--ease-out);
}
.choice__dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.4s var(--ease-out);
}
.choice__input:checked + .choice__label .choice__dot { border-color: var(--accent); }
.choice__input:checked + .choice__label .choice__dot::after { transform: scale(1); }

.choice__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.choice__quote,
.choice__when {
  font-family: var(--font-serif);
  font-weight: 350;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
}
.choice__quote { font-style: italic; color: var(--ink-strong); }
/* Sous-titre et description : visibles dans l'option sans JavaScript ; avec JavaScript, affichés dans la carte */
.choice__more { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.js .choice__more { display: none; }
.choice__title { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.choice__text { font-size: 14px; line-height: 1.55; color: var(--ink-muted); }

/* ---------- Carte « Votre parcours » ----------
   Fiche récapitulative qui se remplit pendant que la personne choisit (main.js). Pas un billet d'avion. */
.summary {
  padding: 22px 20px 20px;
  border-radius: var(--radius-lg);
  background: #FFFFFF;
  box-shadow: 0 28px 60px rgba(26, 38, 53, 0.16), 0 4px 12px rgba(26, 38, 53, 0.06);
}
.summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
}
.summary__progress { display: flex; gap: 6px; }
.summary__progress i {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: #DCE3EA;
  transition: background-color 0.4s var(--ease-out);
}
.summary__progress i.is-done { background: var(--accent); }

.summary__row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid #E4EAF0;
}
/* Pastille : se remplit d'accent, coche blanche, quand le choix est fait (décorative : le texte dit l'état) */
.summary__mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border: 1.5px solid #B9C5D1;
  border-radius: 50%;
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.summary__mark .icon {
  stroke: #FFFFFF;
  stroke-width: 2.4;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.summary__row.is-done .summary__mark { background: var(--accent); border-color: var(--accent); }
.summary__row.is-done .summary__mark .icon { opacity: 1; transform: none; }

.summary__key {
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-label);
}
/* « À choisir » : #596B7E (5,48:1 sur blanc) au lieu du #6A7A8B de la maquette (4,40:1) */
.summary__empty { font-size: 15px; line-height: 1.5; color: var(--ink-label); }
/* Hauteurs minimales : la carte garde sa place quand son contenu change */
.summary__row[data-config-row="peur"] .summary__content { min-height: 132px; }
.summary__row[data-config-row="delai"] .summary__content { min-height: 52px; }
.summary__value-main {
  font-family: var(--font-serif);
  font-weight: 350;
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink);
}
.summary__value-main--quote { font-style: italic; }
.summary__value-title { margin-top: 8px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.summary__value-text { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }

.summary__result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 128px;
  margin: 6px 0 20px;
  padding: 20px 22px;
  border-radius: var(--radius-md);
  background: var(--sky-1);
  transition: background-color 0.4s var(--ease-out);
}
.summary__result.is-done { background: var(--surface-accent); }
.summary__hint { font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.summary__title {
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-weight: 350;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.summary__desc { font-size: 15px; line-height: 1.55; color: var(--ink-strong); }
.summary__btn { width: 100%; }

/* Contenu qui change : fondu et montée de 8 px (350 ms) */
@media (prefers-reduced-motion: no-preference) {
  .is-swapping { animation: swap 0.35s var(--ease-out); }
}
@keyframes swap {
  from { opacity: 0; transform: translateY(8px); }
}

/* Personnalisation et bilan (05/10/2026) : « deux choses », puis le bilan qui les relie */
.subblock--adapt { margin-top: 0; gap: 10px; }
.adapt__title,
.bilan-block__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
}
/* Sous-titre de la méthode : nettement sous le h2 de la section (12/10/2026) */
.adapt__title { font-size: 22px; line-height: 1.3; }
.bilan-block {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.bilan-block__text { display: flex; flex-direction: column; gap: 12px; }
.bilan-block__side { display: flex; flex-direction: column; gap: 22px; }

@media (min-width: 900px) {
  .bilan-block {
    margin-top: 64px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    padding-top: 40px;
  }
  .bilan-block__title { font-size: 28px; }
}

@media (min-width: 900px) {
  .section--methode { padding: 96px 0 110px; }
  .choice__quote,
  .choice__when { font-size: 22px; line-height: 1.25; }
  .summary { padding: 26px 28px 24px; }
}

@media (min-width: 980px) {
  .config {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: start;
  }
  .adapt__title { font-size: 26px; }
  .config__summary { position: sticky; top: 110px; }
}

/* ---------- Séquence « l'alternance » (19/10/2026) ----------
   Le mécanisme des séances en trois mouvements : refuge, situation ciblée, retour au refuge. Une seule scène
   (SVG décoratif), un seul état piloté par le défilement (main.js, data-state de 0 à 3) et trois variables :
   --p (position du point sur le trajet, 0 à 0,85), --t (rapprochement du hublot, 0 à 1), --open (porte, 0 à 1).
   Sans data-state (sans JavaScript, ou écran trop bas) : scène complète et immobile, mouvements à la suite.
   Rien que opacity, transform et stroke-dashoffset ; aucune animation en mouvement réduit. */
.sequence {
  --p: 0;
  --t: 0;
  --open: 0.45;
  margin: 48px 0 64px;
}
.sequence__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 40em;
  margin-bottom: 28px;
}
.sequence__title {
  font-family: var(--font-serif);
  font-weight: 350;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.sequence__intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 36em;
}

/* Scène */
.sequence__stage {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--sky-1) 100%);
  box-shadow: var(--shadow-float);
}
.seq { width: 100%; height: auto; }

.seq-ground,
.seq-arch {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.seq-ground { stroke: var(--rule); stroke-width: 1.5; }
.seq-arch { stroke: var(--ink-strong); stroke-width: 1.5; }
.seq-arch--1 { opacity: 0.32; }
.seq-arch--2 { opacity: 0.55; }
.seq-arch--3 { opacity: 0.85; }
.seq-refuge__fill { fill: url(#seq-refuge-fill); opacity: 0.9; }

.seq-door__frame { fill: none; stroke: var(--ink-label); stroke-width: 1.5; stroke-linejoin: round; }
.seq-door__panel {
  fill: #F6F8FA;
  stroke: var(--ink-label);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(calc(1 - 0.82 * var(--open)));
}

.seq-window__frame { fill: #FFFFFF; stroke: var(--ink-label); stroke-width: 1.5; }
.seq-window__rim { fill: none; stroke: var(--ink-label); stroke-width: 1; opacity: 0.6; }
.seq-window__horizon line { stroke: #8FA0B3; stroke-width: 1; }
.seq-window__horizon {
  transform-box: view-box;
  transform-origin: 500px 212px;
  transform: translateY(calc(5px * var(--t))) rotate(calc(-7deg * var(--t)));
}
.seq-window__shade { fill: #4C6280; opacity: calc(0.4 * var(--t)); }

.seq-path {
  fill: none;
  stroke: var(--ink-label);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 0 0.022;
  opacity: 0.7;
}
.seq-trail {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--p));
}

.seq-dot__core { fill: var(--accent); }
.seq-dot__halo { fill: rgba(75, 111, 149, 0.12); stroke: rgba(75, 111, 149, 0.35); stroke-width: 1; }
.seq-dot__ripples { opacity: var(--t); }
.seq-dot__ripple,
.seq-dot__settle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.seq-label {
  position: absolute;
  bottom: 7%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-label);
}
.seq-label--refuge { left: 28.125%; }
.seq-label--window { left: 78.125%; }

/* États (JavaScript) */
.sequence[data-state] .seq-ground,
.sequence[data-state] .seq-arch { transition: stroke-dashoffset 1.6s var(--ease-out), opacity 1.2s var(--ease-out), stroke 1.2s var(--ease-out); }
.sequence[data-state] .seq-refuge__fill,
.sequence[data-state] .seq-window,
.sequence[data-state] .seq-path,
.sequence[data-state] .seq-dot,
.sequence[data-state] .seq-label { transition: opacity 1s var(--ease-out); }

.sequence[data-state="0"] .seq-ground,
.sequence[data-state="0"] .seq-arch { stroke-dashoffset: 1; }
.sequence[data-state="0"] .seq-refuge__fill,
.sequence[data-state="0"] .seq-window,
.sequence[data-state="0"] .seq-dot,
.sequence[data-state="0"] .seq-label { opacity: 0; }
.sequence[data-state="0"] .seq-path,
.sequence[data-state="1"] .seq-path { opacity: 0; }

/* Mouvement 1 : les repères s'installent, du centre vers l'extérieur */
.sequence[data-state="1"] .seq-ground { transition-delay: 0.1s; }
.sequence[data-state="1"] .seq-arch--3 { transition-delay: 0.15s; }
.sequence[data-state="1"] .seq-arch--2 { transition-delay: 0.4s; }
.sequence[data-state="1"] .seq-arch--1 { transition-delay: 0.65s; }
.sequence[data-state="1"] .seq-refuge__fill { transition-delay: 0.5s; }
.sequence[data-state="1"] .seq-dot { transition-delay: 0.9s; }
.sequence[data-state="1"] .seq-window,
.sequence[data-state="1"] .seq-label--window { transition-delay: 1.1s; }

/* La situation reste lointaine hors du mouvement 2 */
.sequence[data-state="1"] .seq-window,
.sequence[data-state="3"] .seq-window { opacity: 0.5; }
.sequence[data-state="1"] .seq-label--window,
.sequence[data-state="3"] .seq-label--window { opacity: 0.75; }

/* Mouvement 3 : retour au refuge, qui se teinte de l'accent, et une onde lente qui se dépose */
.sequence.is-settled .seq-arch { stroke: var(--accent); }
.sequence.is-settled .seq-arch--1 { opacity: 0.5; }
.sequence.is-settled .seq-arch--2 { opacity: 0.75; }
.sequence.is-settled .seq-arch--3 { opacity: 1; }
.sequence.is-settled .seq-refuge__fill { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .sequence[data-state="2"] .seq-dot__ripple { animation: seq-ripple 3.2s var(--ease-out) infinite; }
  .sequence[data-state="2"] .seq-dot__ripple--late { animation-delay: 1.6s; }
  .sequence.is-settled .seq-dot__settle { animation: seq-settle 2.8s var(--ease-out) both; }
}
@keyframes seq-ripple {
  from { opacity: 0.5; transform: scale(1); }
  to { opacity: 0; transform: scale(2.6); }
}
@keyframes seq-settle {
  from { opacity: 0.45; transform: scale(1); }
  to { opacity: 0; transform: scale(4.2); }
}

/* Navigation manuelle (JavaScript seulement) */
.sequence__nav { display: none; }
.js .sequence__nav {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
}
.sequence__nav-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 56px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  font: inherit;
}
.sequence__nav-btn::after {
  content: '';
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--rule);
  transition: background-color 0.4s var(--ease-out);
}
.sequence__nav-btn[aria-current="step"] .num { color: var(--ink); }
.sequence__nav-btn[aria-current="step"]::after { background: var(--accent); }

/* Les trois mouvements */
.sequence__steps { display: grid; gap: 32px; }
.sequence__step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sequence__step:focus { outline: none; }
.sequence__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-label);
}
.sequence__label::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--rule);
  transition: background-color 0.5s var(--ease-out);
}
.sequence__step-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  transition: color 0.5s var(--ease-out);
}
/* Textes du 19/10/2026, plus longs : une phrase principale (.sequence__lead), puis les précisions (.sequence__text) */
.sequence__lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-strong);
  max-width: 32em;
}
.sequence__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 32em;
}
.sequence__step-title + .sequence__lead { margin-top: 4px; }
.sequence__outro {
  max-width: 24em;
  margin: 48px auto 0;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 350;
  font-size: 26px;
  line-height: 1.22;
  color: var(--ink);
}
.sequence__outro em { font-style: italic; }

/* Récit au défilement (JavaScript), scène collante. Hauteurs retenues après essais le 19/10/2026 (voir CLAUDE.md) :
   desktop, chaque mouvement occupe au moins --seq-step, texte centré ; mobile, hauteur du texte et un écart fixe. */
.js .sequence__step:not(.is-active) .sequence__step-title { color: var(--ink-label); }
.js .sequence__step.is-active .sequence__label::before { background: var(--accent); }

@media (max-width: 959.98px) {
  .sequence__steps { margin-top: 28px; }
  .sequence__stage,
  .sequence__nav { width: min(100%, 560px); margin-inline: auto; }
  .js .sequence__stage-wrap {
    position: sticky;
    top: 64px;
    z-index: 2;
    padding: 8px 0 0;
    background: #E4EBF2;
    /* fond prolongé jusqu'aux bords de l'écran (sinon le bord de la bande se voit dans les marges) */
    box-shadow: 0 0 0 100vmax #E4EBF2;
    clip-path: inset(0 -100vmax -24px);
  }
  /* La scène garde le fond de la section : le texte qui passe dessous s'efface dans un dégradé */
  .js .sequence__stage-wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    /* jusqu'aux bords de l'écran, pas au-delà : un débordement élargissait la page et permettait de dézoomer (iOS) */
    left: calc(-1 * var(--gutter));
    right: calc(-1 * var(--gutter));
    height: 24px;
    background: linear-gradient(#E4EBF2, rgba(228, 235, 242, 0));
    pointer-events: none;
  }
  /* Scène recadrée sur le dessin (x 30 à 610, y 72 à 392) et limitée à 24 % de la hauteur d'écran : elle laisse au
     texte plus de la moitié de l'écran, même sur un petit téléphone. */
  .js .sequence__stage {
    width: min(100%, 560px, 24svh * 1.8125);
    aspect-ratio: 580 / 320;
  }
  .js .seq {
    width: 110.345%;
    max-width: none;
    margin: -12.414% 0 0 -5.172%;
  }
  .js .seq-label { bottom: 6%; }
  .js .seq-label--refuge { left: 25.86%; }
  .js .seq-label--window { left: auto; right: 4%; transform: none; }
  .seq-label { letter-spacing: 0.1em; }
  .js .sequence__steps { gap: 64px; margin-top: 24px; }
}
@media (max-width: 959.98px) and (max-height: 560px) {
  .js .sequence__stage-wrap { position: static; background: none; }
  .js .sequence__stage-wrap::after,
  .js .sequence__nav { display: none; }
  .js .sequence__steps { gap: 32px; margin-top: 28px; padding-bottom: 0; }
  .js .sequence__step:not(.is-active) .sequence__step-title { color: var(--ink); }
}

@media (min-width: 768px) {
  .sequence__title { font-size: 44px; }
}
@media (min-width: 960px) {
  .sequence { --seq-step: 56vh; margin: 88px 0 104px; }
  .sequence__head { margin-bottom: 40px; }
  .sequence__title { font-size: 56px; line-height: 1.04; }
  .sequence__intro { font-size: 17px; }
  .sequence__body {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: start;
  }
  .sequence__stage-wrap { grid-column: 2; grid-row: 1; }
  .sequence__steps { grid-column: 1; grid-row: 1; padding-top: 24px; gap: 48px; }
  .js .sequence__stage-wrap {
    position: sticky;
    top: max(96px, calc(50vh - 250px));
    width: min(100%, calc((100vh - 200px) * 1.52));
    justify-self: end;
  }
  .js .sequence__steps { gap: 0; padding-top: 0; padding-bottom: 10vh; }
  .js .sequence__step { min-height: var(--seq-step); justify-content: center; padding: 32px 0; }
  .sequence__step-title { font-size: 32px; line-height: 1.12; }
  .sequence__lead { font-size: 17px; }
  .sequence__text { font-size: 15.5px; }
  .sequence__outro { margin-top: 72px; font-size: 40px; line-height: 1.15; }
}

/* Mouvement réduit : pas de hauteurs pensées pour l'animation, les mouvements se suivent comme du texte */
@media (prefers-reduced-motion: reduce) {
  .js .sequence__step { min-height: 0; }
  .js .sequence__steps { gap: 56px; padding-bottom: 0; }
}

/* ---------- Téléphone du compagnon de vol ----------
   Altitude (18/10/2026) : dessiné à taille réelle (plus de canevas réduit) pour que chaque bouton fasse au moins
   44 px de haut. Archivo et IBM Plex Mono, comme le reste de la page (Figtree et DM Mono ne sont plus chargées). */
.phone {
  position: relative;
  width: 300px;
  max-width: 100%;
  padding: 12px;
  border-radius: 44px;
  background: #0E1116;
  box-shadow: 0 50px 90px rgba(0, 0, 0, 0.55), inset 0 0 0 1.5px #2A3340;
}
.phone__screen {
  display: flex;
  flex-direction: column;
  min-height: 580px;
  padding: 26px 18px 18px;
  border-radius: 34px;
  background: #16202B;
  color: #E9EEF3;
}
.ph-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9AA7B6;
}
.ph-flight__top { display: flex; justify-content: space-between; }
.ph-flight__title {
  margin: 12px 0 4px;
  font-family: var(--font-serif);
  font-weight: 350;
  font-size: 26px;
  line-height: 1.15;
  color: #E9EEF3;
}
.ph-flight__note { margin-bottom: 22px; font-size: 12px; line-height: 1.45; color: #9AA7B6; }
.ph-flight__steps { display: grid; flex-grow: 1; align-content: start; gap: 8px; }
.ph-step {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 34px 12px 14px;
  border: 0;
  border-radius: 12px;
  background: #1B2733;
  color: #C6CFDA;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.4s var(--ease-out),
    color 0.4s var(--ease-out),
    transform 0.4s var(--ease-out);
}
.ph-step:hover { background: #223246; }
.ph-step[aria-pressed="true"] {
  background: #E9EEF3;
  color: #16202B;
  font-weight: 600;
  transform: scale(1.02);
}
/* Étape en cours : petite pastille laiton qui pulse */
.ph-step[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brass);
}
.ph-flight__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ph-flight__buttons button {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: #34506F;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), transform 0.2s var(--ease-out);
}
.ph-flight__buttons button:hover { background: #3F6083; }
.ph-flight__buttons button:active { transform: scale(0.96); }

@media (prefers-reduced-motion: no-preference) {
  .ph-step[aria-pressed="true"]::after { animation: pulse 2s infinite; }
  .phone.is-shaking { animation: shake 0.6s; }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(183, 159, 124, 0.6); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(183, 159, 124, 0); }
}
@keyframes shake {
  0%, 100% { transform: none; }
  15% { transform: translate(-4px, 1px) rotate(-0.6deg); }
  35% { transform: translate(4px, -1px) rotate(0.6deg); }
  55% { transform: translate(-3px, 1px) rotate(-0.4deg); }
  75% { transform: translate(2px, 0) rotate(0.3deg); }
}

/* ---------- Le compagnon de vol ---------- */
.section--dark.section { padding: 56px 0; }
/* Nuit : la bande « claire vers nuit » arrive juste au-dessus, d'où un haut de section réduit. Étoiles très
   discrètes (points en radial-gradient) dont l'opacité oscille lentement ; immobiles en mouvement réduit. */
.section--companion { position: relative; overflow: hidden; }
.section--dark.section--companion { padding-top: 16px; }
.section--companion::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 14%, #FFFFFF 50%, transparent 51%),
    radial-gradient(1px 1px at 19% 62%, #FFFFFF 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 33% 28%, #FFFFFF 50%, transparent 51%),
    radial-gradient(1px 1px at 47% 80%, #FFFFFF 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 58% 12%, #FFFFFF 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 71% 48%, #FFFFFF 50%, transparent 51%),
    radial-gradient(1px 1px at 83% 22%, #FFFFFF 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 92% 70%, #FFFFFF 50%, transparent 51%),
    radial-gradient(1px 1px at 26% 90%, #FFFFFF 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 64% 92%, #FFFFFF 50%, transparent 51%);
  opacity: 0.4;
}
.section--companion > .container { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .section--companion::before { animation: twinkle 7s ease-in-out infinite; }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.6; }
}
.companion .eyebrow { color: var(--on-dark-muted); }
.companion .h2 { color: var(--on-dark); }
.companion__text { display: flex; flex-direction: column; gap: 14px; }
.companion__lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-dark-body);
  max-width: 32em;
}
/* Trois points en colonne : pastille d'icône de 48 px, titre serif de 23 px (Altitude, 18/10/2026) */
.companion__features {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 520px;
}
.companion__features li { display: flex; gap: 18px; align-items: flex-start; }
.companion__features li > div { display: flex; flex-direction: column; gap: 4px; }
.chip {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--dark-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chip .icon { stroke: var(--on-dark-check); stroke-width: 1.5; }
.companion__title {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--on-dark);
}
.companion__features p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--on-dark-body);
}
.companion__note {
  margin-top: 10px;
  font-size: 14px;
  color: var(--on-dark-muted);
}
/* Halo bleu flou derrière le téléphone (immobile) */
.companion__phone {
  position: relative;
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
.companion__phone::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  height: 340px;
  max-width: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(75, 111, 149, 0.55), transparent);
  filter: blur(20px);
  pointer-events: none;
}

@media (min-width: 900px) {
  .section--dark.section { padding: 80px 0; }
  .section--dark.section--companion { padding: 24px 0 120px; }
  .companion {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 70px;
    align-items: center;
  }
  .companion__text { gap: 16px; }
  .companion .h2 { font-size: 42px; }
  .companion__lead { font-size: 17px; }
  .companion__title { font-size: 23px; }
  .companion__note { margin-top: 18px; }
  .companion__phone { margin-top: 0; }
}

/* ---------- Cadre + praticien ----------
   Altitude (18/10/2026) : style seulement, textes intouchables. Cadre en carte blanche translucide ; portrait
   arrondi avec ombre ; citation dans un bloc nuit, guillemet laiton. */
.section--trust.section { padding: 24px 0 64px; }
.trust { display: flex; flex-direction: column; gap: 44px; }

.notlist {
  padding: 24px 22px 10px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.55);
}
.notlist__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.notlist__head .icon { width: 26px; height: 26px; margin-top: 2px; }
.notlist .h3 { font-size: 23px; line-height: 1.2; }
.notlist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(29, 43, 58, 0.12);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-strong);
}
.notlist__x {
  stroke: var(--ink-label);
  stroke-width: 1.5;
  margin-top: 3px;
}

.practitioner { display: flex; flex-direction: column; gap: 24px; }
.practitioner__title { font-size: 30px; }
.practitioner__grid { display: flex; flex-direction: column; gap: 32px; }
.bio {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  grid-template-areas: "photo id" "text text";
  gap: 18px 20px;
  align-items: start;
}
.bio__photo { grid-area: photo; }
.bio__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 24px 50px rgba(26, 38, 53, 0.2);
}
.bio__id {
  grid-area: id;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
}
.bio__name {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
}
.bio__role { font-size: 14px; line-height: 1.4; color: var(--ink-muted); }
.bio__text {
  grid-area: text;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-strong);
}
.bio__text p + p { margin-top: 12px; }

.quote {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 26px;
  border-radius: 26px;
  background: linear-gradient(135deg, var(--dark), #2A3B52);
  color: var(--on-dark);
  overflow: hidden;
}
.quote__mark {
  position: absolute;
  top: 14px;
  left: 24px;
  font-family: var(--font-serif);
  font-size: 96px;
  line-height: 0.8;
  color: var(--brass);
  opacity: 0.8;
}
.quote blockquote {
  position: relative;
  padding-top: 40px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 350;
  font-size: 24px;
  line-height: 1.3;
  color: var(--on-dark);
}
.quote figcaption {
  padding-top: 16px;
  font-size: 14px;
  color: var(--on-dark-muted);
}

@media (min-width: 768px) {
  .bio {
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-areas: "photo id" "photo text";
    grid-template-rows: auto 1fr;
    gap: 0 30px;
  }
  .bio__name { font-size: 26px; }
  .bio__text { margin-top: 14px; font-size: 15.5px; }
  .quote { padding: 36px 36px 30px; }
  .quote__mark { left: 30px; font-size: 110px; }
  .quote blockquote { padding-top: 44px; font-size: clamp(24px, 2.6vw, 32px); }
}

@media (min-width: 900px) {
  .section--trust.section { padding: 40px 0 110px; }
  .practitioner__title { font-size: clamp(30px, 3.2vw, 42px); }
  .notlist { padding: 30px 30px 14px; }
  .notlist .h3 { font-size: 26px; }
}

@media (min-width: 1100px) {
  .trust {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 64px;
    align-items: start;
  }
}

/* ---------- Accès + Pour qui ---------- */
.section--offer.section { padding: 0 0 64px; }
.offer { display: flex; flex-direction: column; gap: 16px; }

/* Carte du tarif (Altitude, 18/10/2026) : halo bleuté en haut à droite, plus d'ambre */
.price {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 34px 26px 28px;
  border-radius: 32px;
  background: var(--dark);
  color: var(--on-dark);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(26, 38, 53, 0.35);
}
.price::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -160px;
  width: 420px;
  height: 420px;
  background: radial-gradient(closest-side, rgba(120, 150, 185, 0.28), transparent);
  pointer-events: none;
}
.price > * { position: relative; }
.price .eyebrow { color: var(--on-dark-muted); font-weight: 400; }
/* « Votre parcours complet » (05/10/2026) */
.price__title {
  margin-top: -8px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--on-dark);
}
/* Phrase de valeur sous le titre (07/10/2026) */
.price__lead { margin-top: -8px; font-size: 15px; line-height: 1.6; color: var(--on-dark-body); }
.price__row { display: flex; flex-direction: column; gap: 8px; }
.price__amount {
  font-family: var(--font-serif);
  font-weight: 350;
  font-size: clamp(64px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}
.price__terms { font-size: 14px; color: var(--on-dark-muted); }
/* « accès à vie » → CGV, article 7 (03/10/2026) : couleur du texte, soulignement pour signaler le lien */
.price__terms a { color: inherit; text-underline-offset: 3px; }
.price__terms a:hover { color: var(--on-dark); }
.checks--dark li { font-size: 15px; color: var(--on-dark-body); }
.checks--dark .check { stroke: var(--on-dark-check); }
.price__cta {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.price__cta .btn { width: 100%; }
.price__note { font-size: 13px; color: var(--on-dark-muted); text-align: center; }

.audience {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.audience__block { display: flex; flex-direction: column; gap: 12px; }
.audience__block .eyebrow { font-weight: 400; }
.audience__block--alt { gap: 10px; }
.audience__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
}
.audience__subtitle { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.audience__list { display: flex; flex-direction: column; gap: 10px; }
.audience__list--tight { gap: 8px; }
.audience__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-strong);
}
.audience__list .icon { stroke-width: 1.8; margin-top: 2px; }
.audience__yes { stroke: var(--accent); }
.audience__no { stroke: var(--ink-label); }
.audience__rule { height: 1px; background: var(--rule); }

@media (min-width: 900px) {
  .section--offer.section { padding: 0 0 110px; }
  .offer {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: start;
  }
  .audience__title { font-size: 30px; }
  .price { gap: 22px; padding: 46px 44px 40px; }
  .price__title { font-size: clamp(30px, 3.4vw, 40px); }
  .price__row { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 12px 18px; }
  .checks--dark li { gap: 14px; }
  .price__cta { flex-direction: row; flex-wrap: wrap; gap: 12px 20px; margin-top: 6px; }
  .price__cta .btn { width: auto; flex-shrink: 0; }
  .price__note { text-align: left; }
  .audience { gap: 22px; padding-top: 38px; }
  .audience__block { gap: 14px; }
  .audience__block--alt { gap: 10px; }
  .audience__list li { gap: 14px; }
}

/* ---------- FAQ ---------- */
.faq__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.faq__intro { font-size: 16px; line-height: 1.6; color: var(--ink-muted); }

.faq__list { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 0;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color 0.3s var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }
.faq__item summary:focus-visible { outline-offset: -3px; border-radius: 12px; }
/* Commutateur rond (Altitude, 18/10/2026) : le « + » pivote de 135° à l'ouverture et devient « × » */
.faq__icon {
  width: 30px;
  height: 30px;
  padding: 8px;
  border: 1px solid rgba(29, 43, 58, 0.25);
  border-radius: 50%;
  stroke: var(--ink);
  stroke-width: 1.6;
  transition: transform 0.5s var(--ease-out), background-color 0.3s var(--ease-out);
}
.faq__item[open] > summary .faq__icon { transform: rotate(135deg); background: #FFFFFF; }
/* « Autres questions » (18/10/2026) : quatre questions dans un <details> de même style, séparées par des
   pointillés ; le filet du groupe ferme la liste (pas de double filet). */
.faq__more-list { border-top: 1px dashed rgba(29, 43, 58, 0.2); }
.faq__more-list > .faq__item { border-bottom: 1px dashed rgba(29, 43, 58, 0.2); }
.faq__more-list > .faq__item:last-child { border-bottom: 0; }
.faq__more-list summary { font-size: 18px; min-height: 56px; }
.faq__item p {
  padding: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 46em;
}
/* Réponse : fondu et montée de 8 px à l'ouverture */
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] > p,
  .faq__item[open] > .faq__more-list { animation: swap 0.5s var(--ease-out); }
}

@media (min-width: 900px) {
  .section--faq.section { padding: 100px 0; }
  .faq {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 64px;
    align-items: start;
  }
  .faq__head { margin-bottom: 0; }
  .faq__head .h2 { font-size: clamp(30px, 3.4vw, 40px); }
  .faq__intro { max-width: 22em; }
  .faq__item summary { gap: 20px; font-size: 21px; }
  .faq__more-list summary { font-size: 19px; }
  .faq__item p { padding-right: 50px; font-size: 15.5px; }
}

/* ---------- Appel final ---------- */
.section--final.section { padding: 56px 0 160px; } /* le bas de section accueille le passage vers la nuit */
.final {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.final__title { font-size: 32px; }
.final__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-strong); /* 7,4:1 sur #DCE3EA, au milieu du dégradé (le gris atténué y tombe à 4,4:1) */
  max-width: 30em;
}
.final__cta { margin-top: 10px; width: 100%; }
.final__cta .btn { width: 100%; }
.final__media { width: 100%; max-width: 760px; }
.final__media img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 24px;
  margin-top: 24px;
  box-shadow: 0 30px 70px rgba(29, 43, 58, 0.2);
}

@media (min-width: 768px) {
  .final__cta { width: auto; margin-top: 14px; }
  .final__cta .btn { width: auto; }
  .final__media img { height: 300px; border-radius: 28px; margin-top: 30px; }
}

@media (min-width: 900px) {
  .section--final.section { padding: 110px 0 230px; }
  .section--final {
    background: linear-gradient(
      180deg,
      #ECEFF2 calc((100% - 180px) * 0),
      #EBEEF1 calc((100% - 180px) * 0.125),
      #E7ECF0 calc((100% - 180px) * 0.25),
      #E3E8ED calc((100% - 180px) * 0.375),
      #DDE4EB calc((100% - 180px) * 0.5),
      #D5DDE6 calc((100% - 180px) * 0.625),
      #CDD7E0 calc((100% - 180px) * 0.75),
      #C7D2DC calc((100% - 180px) * 0.875),
      #C5D0DB calc((100% - 180px) * 1),
      #C1CCD8 calc(100% - 180px + 15px),
      #B5C1CF calc(100% - 180px + 30px),
      #A4B1C1 calc(100% - 180px + 45px),
      #8E9EB0 calc(100% - 180px + 60px),
      #76889D calc(100% - 180px + 75px),
      #5E7189 calc(100% - 180px + 90px),
      #4C5D73 calc(100% - 180px + 105px),
      #3C4B5F calc(100% - 180px + 120px),
      #2E3C4E calc(100% - 180px + 135px),
      #233041 calc(100% - 180px + 150px),
      #1C2938 calc(100% - 180px + 165px),
      #1A2635 calc(100% - 180px + 180px)
    );
  }
  .final { gap: 18px; }
  .final__title { font-size: 46px; }
}

/* ---------- Pied de page ---------- */
.site-footer {
  background: var(--dark);
  color: var(--on-dark-muted);
  padding: 40px 0 36px;
}
.site-footer__inner { display: flex; flex-direction: column; gap: 22px; }
.site-footer__top { display: flex; flex-direction: column; gap: 22px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.logo--footer { color: var(--on-dark); }
.site-footer__nav { display: flex; flex-direction: column; font-size: 14px; }
.site-footer__nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-dark-muted);
  text-decoration: none;
}
.site-footer__nav a:hover { color: var(--on-dark); text-decoration: underline; }
.site-footer__rule { height: 1px; background: var(--dark-rule); }
.site-footer__legal { font-size: 12.5px; line-height: 1.6; max-width: 70em; }

@media (min-width: 900px) {
  .site-footer { padding: 48px 0 40px; }
  .site-footer__inner { gap: 28px; }
  .site-footer__top { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .logo--footer { font-size: 24px; }
  .site-footer__nav { flex-direction: row; gap: 28px; font-size: 13px; margin-top: -10px; }
}

/* ---------- Bouton fixe mobile ---------- */
.sticky-cta { display: none; }

@media (max-width: 767px) {
  /* Bouton flottant (18/10/2026, demande d'Alex) : plus de bande opaque ni de filet, qui découpaient le ciel et la
     nuit ; le bouton seul, avec une ombre douce. Blanc sur une zone sombre (is-dark, main.js), comme l'en-tête.
     Apparition en fondu et montée de 12 px (instantanée en mouvement réduit). */
  .sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: block;
    padding: 0 var(--gutter) calc(14px + env(safe-area-inset-bottom));
    pointer-events: none;
    visibility: hidden; /* retiré aussi de l'ordre de tabulation tant qu'il est masqué */
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.35s var(--ease-out),
      transform 0.35s var(--ease-out),
      visibility 0s linear 0.35s;
  }
  .sticky-cta.is-visible {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .sticky-cta .btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 22px;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(26, 38, 53, 0.12), 0 12px 30px rgba(26, 38, 53, 0.28);
  }
  .sticky-cta.is-dark .btn {
    background: #FFFFFF;
    color: var(--ink);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  }
  .sticky-cta.is-dark :focus-visible { outline-color: var(--on-dark); }

  /* Un élément atteint au clavier ou par une ancre s'arrête au-dessus du bouton fixe */
  html:has([data-sticky-cta]) { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* Le bouton se masque quand le pied de page est à l'écran : plus de réserve, seulement la marge iOS */
  .site-footer { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
}

/* ---------- Apparition au défilement (18/10/2026) ---------- */
/* Levée de l'interdit validée par Alex le 18/10/2026. Les classes sont posées par main.js, uniquement sur les
   éléments encore sous l'écran au chargement : sans JavaScript, ou avec « mouvement réduit », rien n'est masqué.
   Une seule fois par élément ; main.js retire les classes à la fin de la transition. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
}
.reveal--scale { transform: scale(0.98); }
.reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s var(--ease-out) var(--reveal-delay, 0s),
    transform 0.7s var(--ease-out) var(--reveal-delay, 0s);
}
.reveal--scale.is-revealed { transition-duration: 0.8s; }

@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}