/* =========================================================
   90 JOURS DE VENTE PERPÉTUELLE — mise en page
   Construite sur css/ds.css. Ce fichier ne contient QUE de la
   mise en page : aucune couleur de palette, aucune police, aucune
   taille de caractère en dur. Tout vient des tokens et des portées.
   ========================================================= */

/* ---------------------------------------------------------
   EN-TÊTE — le seul élément fixe autorisé (p. 31).
   Transparent, puis plein au défilement, en héritant du
   système de la section courante.
   --------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.nav.is-stuck {
  background: rgb(var(--rgb-bordeaux-abyss) / 0.9);
  backdrop-filter: blur(10px);   /* le flou est réservé à l'en-tête */
  border-bottom-color: rgb(var(--rgb-parchment) / 0.16);
}
.nav__inner {
  max-width: var(--width-content);
  margin-inline: auto;
  padding: var(--space-4) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.nav__mark {
  font-family: var(--font-core);
  font-size: var(--size-core-xs);
  letter-spacing: var(--track-core);
  text-decoration: none;
  color: inherit;
}
.nav__mention { margin: 0; margin-inline-start: auto; opacity: 0.7; }
.nav__sep { opacity: 0.4; padding-inline: 0.4em; }
.nav .btn { padding: 10px 16px; }
@media (max-width: 720px) {
  .nav__mention { display: none; }
  .nav__inner { justify-content: space-between; }
}

/* ---------------------------------------------------------
   HÉROS — centré.
   « Le centrage est l'alignement par défaut » (p. 29). La règle des
   trois lignes ferait basculer à gauche, mais la charte précise que
   « le chiffre est indicatif ; la lisibilité décide » — et ici la
   ligne d'impact en pleine largeur tient l'axe à elle seule.
   Une section = une logique d'alignement : tout est centré, jamais
   un titre centré au-dessus d'un corps aligné à gauche.
   --------------------------------------------------------- */
/* ---- Le héros occupe au moins la hauteur disponible ----
   Objectif : ne rien laisser voir de la section suivante avant le
   premier défilement.

   « Disponible » = la hauteur de l'écran MOINS la barre du haut, qui
   est sticky et occupe donc une place réelle en tête de document.
   --nav-h est mesurée au chargement par js/90.js (la barre change
   de hauteur quand elle se replie en mobile) ; la valeur de repli
   couvre le cas où le script n'a pas encore tourné.

   svh plutôt que vh : sur mobile, vh correspond à l'écran barre
   d'URL MASQUÉE, donc la section déborde tant que la barre est
   visible et la page commence par un saut. svh prend la hauteur la
   plus PETITE — la promesse « au moins un écran plein » est alors
   tenue dans les deux états. La ligne vh reste au-dessus comme repli
   pour les navigateurs qui ignorent svh.

   Le contenu est centré dans cette hauteur : sans ça, il se colle en
   haut et laisse un vide sous lui dès que l'écran est grand.
   Ça reste un min-height — sur un écran court, la section grandit
   normalement au lieu de rogner le contenu. */
.hero {
  /* 96 px : l'air minimum qu'une ligne d'impact doit recevoir
     au-dessus et en dessous (p. 31). Le rythme de section, plus
     large, n'a plus lieu d'être ici — c'est min-height qui donne
     l'ampleur, et le centrage qui répartit l'air. Garder 158 px
     faisait déborder la section sur un écran court sans rien
     apporter sur un écran normal. */
  padding-block: var(--space-9);
  min-height: calc(100vh - var(--nav-h, 70px));
  min-height: calc(100svh - var(--nav-h, 70px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* La colonne éditoriale doit se recentrer, sinon elle reste collée
   à gauche sous un titre centré — l'échec précis de la p. 29. */
.hero .ds-editorial { margin-inline: auto; }

/* ---- Rythme vertical du héros ----
   L'air sous la ligne d'impact est proportionnel à la TAILLE DU TITRE,
   pas fixé en pixels. La charte demande « au minimum 96 px d'air »
   (p. 31), mais ce nombre vaut pour son titre de référence de 168 px —
   soit 0,57 fois sa taille. Exprimé en em du titre, le rapport tient à
   toutes les tailles.

   ATTENTION AVANT DE RETOUCHER --- l'écart VISIBLE n'est pas la marge.
   Le titre est à 80 % d'interlignage et le paragraphe à 150 % : entre
   les deux, les boîtes de ligne ajoutent une trentaine de pixels que
   le CSS ne montre pas. Une marge de 0.9em produisait 68 px d'écart
   optique, soit la taille entière du titre.

   Se mesurer avec une sonde de ligne de base (un inline-block de
   hauteur nulle en vertical-align: baseline), jamais avec les boîtes
   des éléments — elles sous-estiment l'écart de moitié.

   Cible optique tenue ici, en descendant régulièrement :
     titre -> texte          41 px   (0.61 x la taille du titre)
     texte -> engagements    35 px
     engagements -> boutons  32 px
     boutons -> mentions     21 px */
.hero .lockup {
  font-size: var(--size-impact-l);
  /* max() : l'écart suit la taille du titre, mais ne descend jamais
     sous 32 px. Sans ce plancher, en mobile le titre rétrécit et le
     premier écart repasse SOUS le deuxième — le rythme s'inverse. */
  margin-bottom: max(0.5em, 32px);
}
.hero__sub { margin-top: 0; }

.hero__ethics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
}
.hero__ethics li {
  padding: var(--space-1) var(--space-5) var(--space-1) 0;
  margin-right: var(--space-5);
  border-right: 1px solid var(--rule);
}
.hero__ethics li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-5);
}
.hero__mention { margin-top: var(--space-4); opacity: 0.7; }

/* ---------------------------------------------------------
   TÊTES DE SECTION
   --------------------------------------------------------- */
.head { margin-bottom: var(--space-9); }
.head .t-eyebrow { opacity: 0.65; margin-bottom: var(--space-4); }
.head .t-core-l { margin-bottom: var(--space-5); }
.head__lead { opacity: 0.85; }
.ds-centered .head__lead { margin-inline: auto; }

/* ---------------------------------------------------------
   APERÇU — les quatre spécifications
   --------------------------------------------------------- */
/* Colonnes explicites plutôt qu'auto-fit : il faut savoir laquelle est
   la première de sa rangée pour la coller au bord du contenu et donner
   du rembourrage des deux côtés à toutes les autres. Avec auto-fit, le
   nombre de colonnes est décidé par le navigateur et nth-child ne peut
   plus désigner le début de rangée. */
.specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.spec {
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--rule);
}

/* Deux colonnes */
@media (min-width: 560px) {
  .specs { grid-template-columns: repeat(2, 1fr); }
  .spec {
    padding-inline: var(--space-6);
    border-right: 1px solid var(--rule);
  }
  .spec:nth-child(2n + 1) { padding-left: 0; }              /* début de rangée */
  .spec:nth-child(2n)     { padding-right: 0; border-right: 0; }  /* fin de rangée */
}

/* Quatre colonnes */
@media (min-width: 900px) {
  .specs { grid-template-columns: repeat(4, 1fr); }
  .spec:nth-child(n) {
    padding-inline: var(--space-6);
    border-right: 1px solid var(--rule);
  }
  .spec:nth-child(4n + 1) { padding-left: 0; }
  .spec:nth-child(4n)     { padding-right: 0; border-right: 0; }
  .spec:last-child        { border-right: 0; }
}
.spec__num {
  display: block;
  font-family: var(--font-core);
  font-size: var(--size-core-xl);
  line-height: var(--lh-core-display);
  letter-spacing: var(--track-core);
  font-variant-numeric: tabular-nums;
}
.spec__unit {
  display: block;
  font-family: var(--font-functional);
  font-variation-settings: 'opsz' 32;
  font-size: var(--size-fn-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  opacity: 0.6;
  margin-top: var(--space-2);
}
.spec__label { margin-top: var(--space-4); }
/* ---------------------------------------------------------
   POUR QUI — deux colonnes
   Pas de puces décoratives, pas d'emoji : un filet par item (p. 34).
   --------------------------------------------------------- */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-9);
}
.col__head {
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--rule);
  margin-bottom: var(--space-6);
}
.col--yes .col__head { border-bottom-color: var(--accent); }
.col ul { list-style: none; margin: 0; padding: 0; }
.col li {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--rule);
}
.col li:last-child { border-bottom: 0; }
.col--no { opacity: 0.78; }

/* ---------------------------------------------------------
   LE PROBLÈME — items numérotés
   --------------------------------------------------------- */
.recon { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.recon__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  padding-block: var(--space-7);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.recon__num {
  font-family: var(--font-core);
  font-size: var(--size-core-m);
  letter-spacing: var(--track-core);
  font-variant-numeric: tabular-nums;
  opacity: 0.45;
}
@media (max-width: 560px) {
  .recon__item { grid-template-columns: 1fr; gap: var(--space-3); }
}

.ennemis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-9);
}
.ennemi__name { margin-block: var(--space-3) var(--space-4); }

/* ---------------------------------------------------------
   QUI JE SUIS
   --------------------------------------------------------- */
.philo { margin-bottom: var(--space-10); }
.philo__lead { margin-bottom: var(--space-5); }

.guide {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: var(--space-9);
  margin: 0;
  align-items: start;
}
@media (max-width: 820px) { .guide { grid-template-columns: 1fr; } }
.guide__portrait img { display: block; width: 100%; height: auto; }
.guide__caption {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.guide__name { display: block; font-family: var(--font-core); font-size: var(--size-core-s); letter-spacing: var(--track-core); }
.guide__role { display: block; opacity: 0.65; margin-top: var(--space-1); }

.chapter { padding-block: var(--space-6); border-bottom: 1px solid var(--rule); }
.chapter:first-child { padding-top: 0; }
.chapter__tag { display: block; margin-bottom: var(--space-3); opacity: 0.6; }

.proof { padding-top: var(--space-7); }
.proof__num {
  display: block;
  font-family: var(--font-core);
  font-size: var(--size-core-xl);
  line-height: var(--lh-core-display);
  letter-spacing: var(--track-core);
  font-variant-numeric: tabular-nums;
}
.proof__num-label {
  display: block;
  font-family: var(--font-functional);
  font-variation-settings: 'opsz' 32;
  font-size: var(--size-fn-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  opacity: 0.6;
  margin-top: var(--space-3);
}
.proof__row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.proof__note { margin-top: var(--space-5); opacity: 0.8; }

/* ---------------------------------------------------------
   LA MÉTHODE
   --------------------------------------------------------- */
.principes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}
.principe__num {
  display: block;
  font-family: var(--font-core);
  font-size: var(--size-core-m);
  letter-spacing: var(--track-core);
  font-variant-numeric: tabular-nums;
  opacity: 0.45;
  margin-bottom: var(--space-4);
}
.principe__title { margin-bottom: var(--space-3); }

.declic {
  margin-top: var(--space-9);
  padding-top: var(--space-7);
  border-top: 2px solid var(--accent);
}
.declic__label { display: block; color: var(--accent); margin-bottom: var(--space-5); }
.declic__lead { margin-bottom: var(--space-5); }

/* ---------------------------------------------------------
   CE QU'IL Y A DEDANS
   --------------------------------------------------------- */
.inside {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}
.inside-item__name { margin-block: var(--space-3) var(--space-4); }

/* ---- La maquette de méga template ----
   C'est une IMAGE DE PRODUIT, pas de la chrome de site : un document
   reproduit dans un cadre. Sa mécanique à cinq couleurs lui appartient
   et ne suit donc pas la règle « un seul accent par section ».
   Ces cinq teintes ne doivent jamais sortir de ce cadre. */
.megatpl { margin-top: var(--space-10); }
.megatpl__intro { margin-bottom: var(--space-7); }
.megatpl__intro h3 { margin-block: var(--space-4); }

.paper {
  --mt-1: oklch(0.55 0.13 25);
  --mt-2: oklch(0.55 0.12 85);
  --mt-3: oklch(0.50 0.11 165);
  --mt-4: oklch(0.50 0.12 245);
  --mt-5: oklch(0.47 0.14 305);
  /* Parchment : « la référence claire de toute l'identité » (charte p. 18).
     Contraste avec le Stone de la section sans sortir du continuum Marron. */
  background: var(--parchment);
  color: var(--truffe);
  border: 1px solid var(--rule);
  border-radius: var(--radius-section);
}
.paper__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid rgb(var(--rgb-truffe) / 0.16);
}
.paper__file { opacity: 0.8; }
.paper__pageno { margin-inline-start: auto; opacity: 0.55; }
.paper__page { padding: var(--space-6) var(--space-5); }
.paper__step-kicker { display: block; opacity: 0.55; margin-bottom: var(--space-2); }
.paper__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.paper__col-label { margin-bottom: var(--space-4); opacity: 0.55; }
.mt-point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgb(var(--rgb-truffe) / 0.12);
  border-left: 3px solid var(--mt-c);
  margin-bottom: var(--space-2);
}
.mt-point__mark { color: var(--mt-c); line-height: 1.3; }
.mt-point:nth-child(1) { --mt-c: var(--mt-1); }
.mt-point:nth-child(2) { --mt-c: var(--mt-2); }
.mt-point:nth-child(3) { --mt-c: var(--mt-3); }
.mt-point:nth-child(4) { --mt-c: var(--mt-4); }
.mt-point:nth-child(5) { --mt-c: var(--mt-5); }
.paper__example {
  border: 1px solid rgb(var(--rgb-truffe) / 0.12);
  padding: var(--space-5);
  align-self: start;
}
.paper__example-tag { display: block; margin-bottom: var(--space-4); opacity: 0.55; }
.paper__example p { margin-block: 0 var(--space-3); }
.mt-hl { background: none; color: inherit; border-bottom: 2px solid var(--hl); padding-bottom: 1px; }
.mt-hl--1 { --hl: var(--mt-1); }
.mt-hl--2 { --hl: var(--mt-2); }
.mt-hl--3 { --hl: var(--mt-3); }
.mt-hl--4 { --hl: var(--mt-4); }
.mt-hl--5 { --hl: var(--mt-5); }

.megatpl__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-5);
}
.mt-key { display: inline-flex; align-items: center; gap: var(--space-2); opacity: 0.8; }
.mt-key__dot { width: 9px; height: 9px; background: var(--k); display: inline-block; }
.mt-key:nth-child(2) .mt-key__dot { --k: oklch(0.62 0.15 25); }
.mt-key:nth-child(3) .mt-key__dot { --k: oklch(0.62 0.15 95); }
.mt-key:nth-child(4) .mt-key__dot { --k: oklch(0.58 0.13 165); }
.mt-key:nth-child(5) .mt-key__dot { --k: oklch(0.58 0.14 245); }
.mt-key:nth-child(6) .mt-key__dot { --k: oklch(0.55 0.16 305); }

.megatpl__why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.megatpl__why h4 { margin-bottom: var(--space-3); }

.inside__cta { margin-top: var(--space-9); }

/* ---------------------------------------------------------
   FAQ — pas de chevron coloré, pas d'emoji.
   Un signe + / − composé en trait, et un filet par item.
   --------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq__q { font-family: var(--font-core); font-size: var(--size-core-s); letter-spacing: var(--track-core); }
/* Le signe dit l'état : + fermé, – ouvert. Caractères typographiques
   simples, jamais un chevron coloré ni un dingbat (p. 34). */
.faq__sign { flex: none; opacity: 0.5; transition: opacity var(--dur-base) var(--ease-standard); }
.faq__sign::before { content: '+'; }
.faq__item[open] .faq__sign::before { content: '\2013'; }
.faq__item[open] .faq__sign { opacity: 1; color: var(--accent); }
.faq__item summary:hover .faq__sign { opacity: 1; }
.faq__a { padding-bottom: var(--space-6); }
.faq__a p { margin: 0; }

/* ---------------------------------------------------------
   PRIX
   --------------------------------------------------------- */
.price { margin-top: var(--space-9); }
.price__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--rule);
}
.price__rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  padding-block: var(--space-7);
}
.price__label { display: block; opacity: 0.6; margin-bottom: var(--space-3); }
.price__amount {
  font-family: var(--font-core);
  font-size: var(--size-core-xl);
  line-height: var(--lh-core-display);
  letter-spacing: var(--track-core);
  font-variant-numeric: tabular-nums;
}
.price__times { font-family: var(--font-core); font-size: var(--size-core-m); opacity: 0.65; }
.price__alt { font-family: var(--font-core); font-size: var(--size-core-s); letter-spacing: var(--track-core); }

.price__note {
  padding: var(--space-5);
  border: 1px solid var(--rule);
  background: var(--card-tint);
  margin-bottom: var(--space-5);
}
.price__note-tag { display: block; margin-bottom: var(--space-3); color: var(--accent); }
.price__note p { margin: 0 0 var(--space-3); }
.price__note p:last-child { margin-bottom: 0; }

.btn--block { width: 100%; justify-content: center; text-align: center; }
.btn--xl { padding: 20px 28px; font-size: var(--size-fn-l); }

.signoff { margin-top: var(--space-9); }

/* ---------------------------------------------------------
   PIED DE PAGE
   --------------------------------------------------------- */
.footer__inner {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}
.footer__inner p { margin: 0; opacity: 0.75; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-4); }
.footer__legal .ds-link { font-size: var(--size-fn-s); }