/* Landing page — feuille unique, écrite à la main, sans dépendance externe.
   Aucune police distante : Google Fonts chargerait depuis des serveurs hors
   UE, ce qui contredirait la posture de la page (aucun cookie, aucun bandeau,
   liste hébergée en Union européenne). */

:root {
  color-scheme: dark light;

  --fond: #100f0d;
  --fond-2: #222019;
  --surface: #1a1916;
  --trait: #2c2a24;
  --trait-fort: #3d3a32;
  --encre: #f0ede5;
  --sourd: #9b9789;
  --accent: #f59e0b;
  /* L'ambre est lumineux : en aplat il porte de l'encre sombre, pas du blanc.
     `--accent-texte` est la variante lisible en petit corps sur le fond. */
  --accent-texte: #fbbf24;
  --accent-encre: #100f0d;
  --perte: #f87171;

  --rayon: 12px;
  --mesure: 40rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --fond: #f8f5ef;
    --fond-2: #f4f1e8;
    --surface: #ffffff;
    --trait: #e5e0d5;
    --trait-fort: #d4cfc0;
    --encre: #1a1916;
    --sourd: #6b6760;
    --accent: #d97706;
    /* #d97706 en texte tombe à 3,00:1 sur le fond crème : sous le seuil. Les
       liens et les petits corps prennent donc l'ambre foncé, les aplats
       gardent #d97706, qui porte du blanc à 5,11:1. */
    --accent-texte: #b45309;
    /* Blanc sur #d97706 ne donne que 3,19:1 — sous le seuil, et c'est le
       bouton qui porte toute la conversion. L'ambre porte de l'encre sombre
       dans les deux thèmes. */
    --accent-encre: #1a1916;
    /* #ff7b72 tombait à 2,26:1 sur fond clair — sur le chiffre même qui porte
       la démonstration. */
    --perte: #b91c1c;
  }
}

* { box-sizing: border-box; }

/* La lueur du hero déborde volontairement de la colonne (`inset: … -50vw …`),
   ce qui la rend large de 200vw et faisait défiler la page latéralement :
   mesuré 543 px de contenu pour 375 de fenêtre sur mobile. On la rogne ici
   plutôt que de renoncer à l'effet. */
html, body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 17px/1.65 ui-sans-serif, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { max-width: var(--mesure); margin: 0 auto; padding: 0 1.25rem 6rem; }

a { color: var(--accent-texte); text-decoration-thickness: 1px; text-underline-offset: 3px; }

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

/* ------------------------------------------------------------- l'ouverture
   Une lueur très basse derrière le titre : elle donne un point d'ancrage au
   regard sans ajouter d'élément à lire. */
.ouverture {
  position: relative;
  padding: 5rem 0 3rem;
}
.ouverture::before {
  content: "";
  position: absolute;
  inset: -6rem -50vw auto;
  height: 26rem;
  background: radial-gradient(60% 60% at 50% 0%,
              color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  pointer-events: none;
  /* Surtout pas `z-index: -1` : la lueur passerait derrière le fond opaque du
     body et deviendrait invisible. On la laisse dans le flux et on relève le
     texte au-dessus. */
  z-index: 0;
}
.ouverture > * { position: relative; z-index: 1; }
.ouverture h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.05rem, 7.5vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}
.promesse {
  margin: 0;
  font-size: clamp(1.08rem, 3.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--sourd);
  max-width: 32rem;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- sections */
section { margin: 4.5rem 0; }

section h2 {
  margin: 0 0 1.25rem;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.legende {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--sourd);
}

/* ------------------------------------------------------------ le formulaire
   Traité en carte : c'est la seule action de la page, elle doit se détacher
   du texte qui l'entoure. */
form {
  margin: 2rem 0;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

input[type="email"] {
  width: 100%;
  padding: 0.85rem 0.9rem;
  font: inherit;
  color: var(--encre);
  background: var(--fond-2);
  border: 1px solid var(--trait-fort);
  border-radius: 8px;
}
input[type="email"]::placeholder { color: var(--sourd); opacity: 0.75; }
input[type="email"]:focus-visible { border-color: var(--accent); }

button {
  margin-top: 0.65rem;
  width: 100%;
  padding: 0.9rem;
  font: inherit;
  font-weight: 600;
  color: var(--accent-encre);
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
button:hover { filter: brightness(1.08); }
button:active { filter: brightness(0.94); }

.finalite {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--sourd);
}

/* ---------------------------------------------------------- amorce et punch
   Deux lignes qui encadrent la maquette du drill. L'amorce annonce ce qu'on
   regarde ; la punch transforme le chiffre de la carte en argument, ce qui est
   le seul travail que la maquette ne peut pas faire toute seule. */
.amorce {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sourd);
}

.punch {
  margin: 1.75rem 0 0;
  font-size: clamp(1.15rem, 4vw, 1.4rem);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  border-left: 3px solid var(--accent);
  padding-left: 1.1rem;
}

/* ---------------------------------------------------------- le pot-de-miel
   Champ que Brevo attend et qui doit arriver VIDE : un robot qui remplit tout
   se trahit en le remplissant. Caché à l'œil ici, et retiré du parcours au
   clavier comme de la vocalisation par les attributs sur la balise — sinon un
   lecteur d'écran annoncerait le piège et son utilisateur se ferait rejeter
   sans jamais savoir pourquoi. */
.pot-de-miel { display: none; }

/* ------------------------------------------------------------- les raisons */
.raisons ul { list-style: none; margin: 0; padding: 0; }
.raisons li {
  padding: 1rem 0;
  border-top: 1px solid var(--trait);
}
.raisons li:last-child { border-bottom: 1px solid var(--trait); }
.raisons strong { display: block; margin-bottom: 0.15rem; }

/* ------------------------------------------------- les thèmes, les étapes
   Deux séquences : l'ordre de découverte des leçons, et les trois étapes de
   mise en route. Frise numérotée pour les deux. Les numéros viennent d'un
   compteur CSS : c'est une progression, pas un inventaire, et le fil qui
   relie les pastilles est ce qui le fait lire ainsi. */
.themes,
.etapes {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  counter-reset: theme;
}
.themes li,
.etapes li {
  position: relative;
  padding: 0.85rem 0 0.85rem 2.75rem;
  line-height: 1.45;
  color: var(--sourd);
}
.themes b,
.etapes strong { color: var(--encre); font-weight: 600; }
.themes li::before,
.etapes li::before {
  counter-increment: theme;
  content: counter(theme);
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-encre);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 50%;
}
.themes li::after,
.etapes li::after {
  content: "";
  position: absolute;
  left: 0.875rem;
  top: 2.45rem;
  bottom: -0.15rem;
  width: 1px;
  background: var(--trait);
}
.themes li:last-child::after,
.etapes li:last-child::after { display: none; }

/* ----------------------------------------------------------- les fonctions
   La plateforme n'est plus un appendice de la page : elle a droit à la même
   liste bordée que les raisons, sous ses captures. */
.fonctions { list-style: none; margin: 2rem 0 0; padding: 0; }
.fonctions li {
  padding: 0.9rem 0;
  border-top: 1px solid var(--trait);
  color: var(--sourd);
  line-height: 1.55;
}
.fonctions li:last-child { border-bottom: 1px solid var(--trait); }
.fonctions strong { color: var(--encre); }

/* --------------------------------------------------------------- questions
   Le bloc d'objections. Les questions en encre pleine, les réponses en sourd :
   le lecteur balaie les questions et ne s'arrête que sur la sienne. */
.faq { margin: 0; }
.faq dt {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--trait);
  font-weight: 600;
  line-height: 1.4;
}
.faq dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.faq dd {
  margin: 0.5rem 0 0;
  color: var(--sourd);
  line-height: 1.6;
}

/* ---------------------------------------------------------------- captures */
figure { margin: 0 0 1.25rem; }

/* Les captures de plateforme débordent de la colonne de texte : un tableau de
   bord de 1 280 px réduit à 40 rem devient décoratif — on voit que c'est
   complet, on ne lit rien. Restreint à `.plateforme` : les autres blocs
   montrent des maquettes de drill construites en HTML, qui suivent déjà la
   colonne. */
.plateforme figure {
  width: min(58rem, 94vw);
  margin-left: 50%;
  transform: translateX(-50%);
}

img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--fond-2);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--sourd);
}

/* ------------------------------------------------------------- le rappel
   Second appel : encadré pour se distinguer du corps, sans crier. */
.rappel {
  padding: 1.75rem;
  background: var(--fond-2);
  border: 1px solid var(--trait);
  border-radius: 16px;
}
.rappel h2 { margin-top: 0; }
.rappel form { background: var(--surface); }

/* --------------------------------------------------------------- pied de page
   La profondeur, en texte seul : réassurance pour qui descend jusqu'ici, sans
   rien coûter à l'attention de qui ne descend pas. */
.et-aussi {
  margin-top: 4.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--trait);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--sourd);
}

/* ------------------------------------------------------------ page de texte */
.texte { padding-top: 3.5rem; max-width: 34rem; }
.texte h1 { font-size: 1.6rem; letter-spacing: -0.01em; }
.texte p { margin-bottom: 1.15rem; }
.texte strong { color: var(--encre); }

/* ------------------------------------------------------- page de remerciement
   Elle existe pour une seule raison : sans elle, le visiteur qui valide le
   formulaire atterrit sur `sibforms.com`. Changer de domaine et de marque à la
   seconde où quelqu'un vient de confier son adresse, c'est là qu'on se demande
   si on s'est fait avoir. */
.merci { text-align: left; }
.merci .coche { margin: 0 0 0.75rem; font-size: 2.25rem; line-height: 1; }
.merci h1 { margin: 0 0 1rem; }
.merci .promesse { font-size: 1.15rem; color: var(--encre); margin-bottom: 1.5rem; }
.merci hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--trait);
}
.merci .retour { margin-top: 2.5rem; font-size: 0.9rem; color: var(--sourd); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media (max-width: 26rem) {
  .rappel { padding: 1.25rem; }
}

/* Sous 352 px, les trois actions du drill ne tiennent plus sur une ligne :
   mesuré, elles passent à deux rangs entre 345 et 352, et « Raise » se
   retrouve seul en pleine largeur — ce qui le fait lire comme un contrôle
   d'une autre nature alors que les trois forment un seul choix. Empilées, la
   lecture tient et la cible tactile grandit. */
@media (max-width: 22rem) {
  .drill-actions { flex-direction: column; }
  .drill-bouton { flex: 1 1 auto; }
}

/* ------------------------------------------------------- maquette du drill
   Construite en HTML plutôt qu'en capture : nette à toutes les tailles, et
   elle suit le thème clair comme le sombre, ce qu'une image ne fait pas.
   Elle arrive juste sous le premier formulaire, avant le moindre argument :
   à trente secondes d'attention, montrer bat expliquer. */
.drill {
  position: relative;
  margin: 0 0 0.75rem;
  padding: 1.5rem 1.5rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  border-radius: 14px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent),
              0 18px 40px -24px rgb(0 0 0 / 0.9);
}

.drill p { margin: 0 0 0.55rem; }
.drill p:last-child { margin-bottom: 0; }

/* Le thème et le rang de session : ils disent que ce drill appartient à une
   suite, ce qui est le changement de fond de la V1. En capitales ambrées pour
   se lire comme une étiquette, pas comme une ligne de texte. */
.drill-theme {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-texte);
}

.drill-contexte {
  font-size: 0.78rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sourd);
}
.drill-toi { font-size: 1.22rem; line-height: 1.4; }
.drill-toi b { color: var(--accent-texte); }
.drill-vilain { color: var(--sourd); }

/* Le jeton reprend le code couleur des boutons du drill : violet = tapis. */
.jeton {
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  vertical-align: baseline;
}
.jeton--tapis { background: #a970ff; }

.drill-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.drill-bouton {
  flex: 1 1 auto;
  text-align: center;
  padding: 0.75rem 0.8rem;
  font-size: 1rem;
  background: var(--fond-2);
  border: 1px solid var(--trait-fort);
  border-radius: 8px;
  white-space: nowrap;
}
/* Le bouton choisi : c'est lui qui raconte que le joueur a DÉCIDÉ avant de
   voir la réponse — l'argument de la section juste en dessous. */
.drill-bouton--choisi {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.drill--reponse { background: var(--fond-2); }
.drill-verdict { font-size: 1.15rem; }

.drill-lignes {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 1rem;
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--trait);
  font-size: 1rem;
}
.drill-lignes dt { color: var(--sourd); }
.drill-lignes dd { margin: 0; text-align: right; }
.drill-lignes dd { font-weight: 600; }
.drill-perte { color: var(--perte); }

.drill-avertissement {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--sourd);
}