@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  --paper: #f8f6f1;
  --paper-deep: #eee9df;
  --white: #ffffff;
  --ink: #121528;
  --ink-soft: #4e5367;
  --ink-muted: #686d7e;
  --navy: #202652;
  --navy-deep: #171b3d;
  --indigo: #414a9b;
  --indigo-soft: #eceef9;
  --copper: #9c4500;
  --copper-dark: #7e3800;
  --copper-soft: #f7e7d9;
  --green: #0d6146;
  --green-soft: #e5f2ec;
  --red: #8e3026;
  --red-soft: #f7e8e5;
  --line: rgba(18, 21, 40, 0.12);
  --line-strong: rgba(18, 21, 40, 0.2);
  --shadow-small: 0 2px 8px rgba(18, 21, 40, 0.06), 0 12px 30px rgba(18, 21, 40, 0.05);
  --shadow-large: 0 4px 12px rgba(18, 21, 40, 0.08), 0 34px 80px rgba(18, 21, 40, 0.18);
  --radius-small: 14px;
  --radius-medium: 24px;
  --radius-large: 38px;
  --radius-xlarge: 54px;
  --shell: 1220px;
  /* L'en-tête collant mesure 84 px : 24 px d'air. Un seul repère de calage
     vertical pour toute la page, au lieu de trois valeurs éparses. */
  --sticky-top: 108px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Plus Jakarta Sans", ui-rounded, "SF Pro Rounded", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── Sections sombres ─────────────────────────────────────────────────
     Ces neuf teintes vivaient en dur dans la feuille, hors de ce bloc. Qui
     retouchait la palette ici croyait avoir traité toute la page et laissait
     les sections sombres derrière lui — c'est précisément ce qui a fait
     passer un audit de contraste à côté d'elles. */
  --surface-dark: #11142e;   /* fond des sections sombres */
  --surface-darker: #0f1229;   /* variante plus profonde */
  --surface-darkest: #0c0f26;   /* le fond le plus profond */
  --on-dark: #cbd0e7;   /* texte principal sur fond sombre */
  --on-dark-soft: #d8dcef;   /* texte adouci sur fond sombre */
  --on-dark-muted: #aeb4cf;   /* texte secondaire sur fond sombre */
  --on-dark-dim: #8f96b6;   /* texte tertiaire sur fond sombre */
  --on-dark-dimmer: #7e86aa;   /* le plus effacé sur fond sombre */
  --copper-light: #e69050;   /* cuivre éclairci, lisible sur fond sombre */
}

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

* {
  margin: 0;
}

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

body {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

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

button,
a {
  font: inherit;
}

a {
  color: inherit;
}

button {
  color: inherit;
}

strong,
b {
  font-weight: 700;
}

[id] {
  scroll-margin-top: var(--sticky-top);
}

/* Anneau à DEUX tons, et c'est nécessaire. Mesuré le 5 août 2026 : l'ancien
   #df7b2c donnait 2,77:1 sur --paper et 2,48:1 sur --paper-deep, sous les 3:1
   qu'exige WCAG 1.4.11 pour un indicateur de focus. Aucune teinte chaude ne
   franchit 3:1 à la fois sur les fonds clairs ET sur les sections sombres du
   site — testé sur six candidats, la meilleure plafonnait à 2,48.

   D'où deux anneaux concentriques : le cuivre (5,96:1 sur --paper) porte sur
   les fonds clairs, la bande claire qui le double (15,3:1 sur --navy-deep)
   porte sur les fonds sombres. Quel que soit le fond, l'un des deux ressort. */
:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--paper);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* <main> n'était pas focusable : au clavier, « Aller au contenu » défilait la
   page, puis Tab repartait du logo et des liens de navigation. Le focus n'y
   arrive que par programme ou par clic, jamais par tabulation séquentielle —
   :focus et non :focus-visible, qui laisserait passer l'anneau. */
main[tabindex="-1"]:focus {
  outline: none;
}

.reading-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 200;
  width: 100%;
  height: 3px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.shell {
  width: min(calc(100% - 40px), var(--shell));
  /* viewport-fit=cover est déclaré et le fichier ne contenait aucun env() :
     en paysage sur iPhone à encoche, 20 px de marge contre 47 px d'inset
     capteur. env() vaut 0 partout ailleurs — aucun autre écran ne bouge. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: clamp(88px, 10vw, 148px);
}

h1,
h2,
h3 {
  color: var(--ink);
  font-weight: 750;
  /* −0,052 em collait les lettres au point que « Ce soir » se lisait
     « Cesoir », et le chasse du point final décrochait par contraste.
     −0,034 em garde le serré éditorial sans souder les mots. */
  letter-spacing: -0.034em;
  line-height: 1.03;
  text-wrap: balance;
}

h1 {
  max-width: 12.5ch;
  font-size: clamp(44px, 6.1vw, 80px);
}

h2 {
  font-size: clamp(34px, 4.5vw, 58px);
}

h3 {
  font-size: clamp(21px, 2vw, 28px);
  letter-spacing: -0.035em;
  line-height: 1.16;
}

p {
  color: var(--ink-soft);
  font-size: clamp(16px, 1.2vw, 18px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--copper);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 28px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  content: "";
  opacity: 0.72;
}

.centre {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.centre .eyebrow {
  justify-content: center;
}

.centre .eyebrow::after {
  width: 28px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  content: "";
  opacity: 0.72;
}

.section-heading {
  margin-bottom: clamp(44px, 6vw, 76px);
}

.section-heading.centre .section-lead {
  margin: 22px auto 0;
}

.heading-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.65fr);
  align-items: end;
  gap: clamp(32px, 7vw, 100px);
}

.heading-split h2 {
  max-width: 16ch;
}

.section-lead {
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.56;
  letter-spacing: -0.018em;
}

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition: transform 220ms var(--ease-out), background-color 220ms ease,
    border-color 220ms ease, box-shadow 220ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0) scale(0.985);
}

.button-primary {
  background: var(--copper);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(126, 56, 0, 0.23);
}

.button-primary:hover {
  background: var(--copper-dark);
  box-shadow: 0 16px 32px rgba(126, 56, 0, 0.28);
}

.button-secondary {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
}

.button-secondary:hover {
  border-color: rgba(18, 21, 40, 0.32);
  background: var(--white);
}

.button-light {
  background: var(--white);
  color: var(--navy-deep);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.button-light:hover {
  background: var(--paper);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: rgba(248, 246, 241, 0.88);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px rgba(18, 21, 40, 0.05);
}

.nav-shell {
  /* Gabarit PROPRE à la barre, plus large que le corps du texte (1220 px).
     Sans lui, huit onglets ne tiennent à AUCUNE résolution : le contenu de la
     barre en demande environ 1345, et `--shell` plafonne à 1220 quelle que
     soit la largeur de l'écran. Le débordement n'était donc pas une affaire
     de point de rupture — c'était un plafond. */
  --shell: 1400px;
  display: grid;
  min-height: 84px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.brand img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 13px;
  box-shadow: var(--shadow-small);
  transition: transform 420ms var(--ease-out);
}

.brand:hover img {
  transform: rotate(-7deg) scale(1.05);
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 30px);
}

.desktop-nav a {
  position: relative;
  padding-block: 9px;
  white-space: nowrap;
  color: var(--ink-soft);
  font-size: 15.5px;
  font-weight: 650;
  text-decoration: none;
  transition: color 180ms ease;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 2px;
  border-radius: 99px;
  background: var(--copper);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease-out), background-color 200ms ease;
}

/* Survol : trait neutre, aucune couleur d'action. */
.desktop-nav a:hover {
  color: var(--ink);
}

.desktop-nav a:hover::after {
  background: var(--line-strong);
  transform: scaleX(1);
}

/* Section courante : indigo, trait plus épais. Le cuivre reste exclusif au
   bouton d'action. Pas de changement de graisse : la police est variable et
   .desktop-nav est un flex centré — 650 → 750 décalerait tous les liens
   voisins à chaque changement de section pendant le défilement.
   Déclaré APRÈS :hover, à spécificité égale : reste indigo même survolé. */
.desktop-nav a[aria-current="true"] {
  color: var(--indigo);
}

.desktop-nav a[aria-current="true"]::after {
  height: 3px;
  background: var(--indigo);
  transform: scaleX(1);
}

.nav-cta {
  min-height: 46px;
  padding: 12px 20px;
}

.menu-button,
.mobile-nav {
  display: none;
}

.hero {
  position: relative;
  padding: clamp(68px, 8vw, 116px) 0 clamp(30px, 4vw, 52px);
  overflow: hidden;
  background: var(--paper);
}

.hero::before {
  position: absolute;
  top: 18%;
  left: -72px;
  width: 150px;
  height: 150px;
  border: 1px solid var(--line);
  border-radius: 50%;
  content: "";
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 0.82fr);
  align-items: center;
  gap: clamp(56px, 8vw, 112px);
}

.hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding-bottom: 30px;
}

.hero h1 span {
  display: block;
  margin-top: 0.12em;
  color: var(--copper);
}

.hero-lead {
  max-width: 59ch;
  margin-top: 28px;
  color: var(--ink-soft);
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.62;
  letter-spacing: -0.018em;
}

.hero-lead strong {
  color: var(--ink);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.hero-proof span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 700;
}

.hero-product {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 650px;
  place-items: end center;
}

/* Les trois libellés qu'il portait passaient derrière le téléphone et
   ressortaient tronqués en « LA MÉTHODE DE », « ASE », « SA F » : la gouttière
   visible fait 63 px là où 18ch en réclament 139. Ils répétaient une troisième
   fois ce que disent déjà les deux notes et la bande 01·02·03. Le panneau
   devient un simple fond, dégradé au lieu de texte. */
.product-backdrop {
  position: absolute;
  inset: 32px 0 0;
  border-radius: var(--radius-xlarge) var(--radius-xlarge) 0 0;
  background: var(--navy);
  background-image: radial-gradient(
    150% 66% at 50% 0%,
    color-mix(in srgb, var(--indigo) 62%, transparent) 0%,
    transparent 68%
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.product-backdrop::before,
.product-backdrop::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  content: "";
}

.product-backdrop::before {
  top: 112px;
  right: 28px;
  width: 160px;
  height: 160px;
}

.product-backdrop::after {
  right: 90px;
  bottom: 72px;
  width: 82px;
  height: 82px;
}

.phone {
  position: relative;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 40px;
  background: var(--surface-dark);
  box-shadow: var(--shadow-large);
}

.phone img {
  width: 100%;
  height: auto;
  border-radius: 33px;
}

.phone-hero {
  z-index: 2;
  width: min(310px, 69%);
  margin-bottom: -42px;
}

/* La capture du haut de page est le seul texte qu'on demande au visiteur de
   déchiffrer : elle se pose une fois, puis ne bouge plus. Déclaré à l'endroit
   plutôt qu'annulé après coup par le !important de prefers-reduced-motion.
   Pas d'opacity dans l'image-clé : elle porte fetchpriority="high", c'est le
   candidat LCP — la démarrer à 0 retarderait sa première peinture. */
@media (prefers-reduced-motion: no-preference) {
  .phone-hero {
    animation: settle-phone 820ms var(--ease-out) both;
  }
}

@keyframes settle-phone {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0);
  }
}

.real-media-badge {
  position: absolute;
  z-index: 4;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(18, 21, 40, 0.8);
  color: var(--white);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.floating-note {
  position: absolute;
  z-index: 5;
  min-width: 172px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-small);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.28;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.floating-note strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 15.5px;
}

.note-kicker {
  color: var(--copper);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.note-method {
  top: 92px;
  left: -36px;
}

.note-parent {
  right: -42px;
  bottom: 172px;
}

.hero-mascot {
  position: absolute;
  z-index: 4;
  right: -22px;
  bottom: -38px;
  width: 145px;
  height: auto;
  filter: drop-shadow(0 18px 18px rgba(10, 12, 30, 0.28));
}

.facts {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(78px, 9vw, 118px);
  border: 1px solid var(--line);
  border-radius: var(--radius-medium);
  background: var(--white);
  box-shadow: var(--shadow-small);
}

.facts p {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
  padding: 22px clamp(18px, 2.6vw, 34px);
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 650;
}

.facts p + p {
  border-left: 1px solid var(--line);
}

.facts b {
  color: var(--copper);
  font-size: 13px;
  letter-spacing: 0.1em;
}

.difference {
  background: var(--white);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA DIFFÉRENCE — « CE SOIR, PUIS APRÈS ».

   Le sujet de la section n'est pas ce soir, c'est trois semaines après. Les
   deux phrases qui décident — « Au contrôle, le téléphone n'est plus là » et
   « Au contrôle, il sait comment s'y prendre » — étaient enterrées en bas de
   carte, à 20 px, sous un titre à 36. On inverse : la conséquence devient le
   plus gros texte de la page (jusqu'à 70 px, plus gros que le h2 à 58).

   Le mot que les deux chutes partagent — « Au contrôle, » — est sorti des deux
   phrases et dit UNE SEULE FOIS, en display, dans la même voix que les deux
   fins : ce n'est plus deux cartes voisines, c'est une phrase avec deux fins.
   Il n'est PAS composé comme un surtitre (ni capitales, ni interlettrage) :
   c'est ce qui le fait lire comme un début de phrase et non comme un titre.

   Ce qui relie tout : une seule ligne verticale par colonne, coupée par la
   barre horizontale du « Au contrôle, ». À gauche elle s'éteint avant la barre
   et ne repart pas ; à droite elle arrive pleine et devient la surface. Le
   diagramme dit l'argument sans une légende.

   Asymétrie structurelle, pas seulement colorée : à gauche rien n'est jamais
   une surface — un filet, du texte, puis un socle en pointillé sous la place
   vide du téléphone. À droite, un panneau vert pâle ce soir, la seule surface
   pleine de la section après. Un plein contre un vide ne se lit pas comme deux
   options équivalentes.

   Le fond de section reste celui du bloc PROFONDEUR (`.difference, .daily,
   .pricing`, plus bas dans ce fichier) : rien n'est redéclaré ici, pour ne pas
   écrire une règle que la suite du fichier écrase.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La phrase du fondateur : la seconde moitié porte, elle passe en encre pleine. */
.difference .section-lead strong {
  color: var(--ink);
  font-weight: 750;
}

.suite {
  /* Un seul jeton d'écart vertical : la gouttière ET la longueur des fils qui
     descendent des colonnes vers la barre sont calées dessus. */
  --suite-gap: clamp(24px, 3vw, 42px);
  --suite-pad-a: clamp(18px, 1.8vw, 26px);
  --suite-pad-b: clamp(20px, 2.2vw, 32px);
  /* Filets : recalculés pour passer 3:1 sur blanc ET sur papier.
     ink 55 % ≈ 4,0:1 · red 70 % ≈ 4,0:1 — l'ancien `--line-strong` était à
     1,54:1, quasi invisible en 1×. */
  --suite-rule: color-mix(in srgb, var(--ink) 55%, transparent);
  --suite-stop: color-mix(in srgb, var(--red) 70%, transparent);
  /* Une seule source de vérité pour la géométrie des colonnes : la largeur de
     la première est une longueur, pas une fraction. C'est ce qui permet au
     raccord vert de retomber à l'aplomb de la seconde colonne au pixel près,
     sans dupliquer la définition des pistes. (0,86fr sur 2fr = 0,43.) */
  --suite-cgap: clamp(20px, 3vw, 52px);
  --suite-col-a: calc(0.43 * (100% - var(--suite-cgap)));

  position: relative;
  display: grid;
  grid-template-columns: var(--suite-col-a) minmax(0, 1fr);
  /* stretch et non start : c'est le correctif du fil qui n'atterrissait pas.
     Avec `start`, chaque fil partait du bas de SA colonne ; entre 901 et
     990 px la colonne gauche prenait une ligne de plus et c'est le fil VERT
     qui s'arrêtait en l'air. Étiré, les deux colonnes finissent à la même
     ligne : les deux fils touchent la barre au pixel près, dans les cinq
     langues. Aucune des deux colonnes n'a de fond qui trahisse l'étirement à
     gauche, et le panneau vert pâle de droite gagne à être d'aplomb. */
  align-items: stretch;
  column-gap: var(--suite-cgap);
  row-gap: var(--suite-gap);
}

/* Placement explicite : l'ordre du DOM est l'ordre mobile (ce soir A, ce soir
   B, la barre, la fin A, la fin B), la grille recompose les deux colonnes
   au-dessus de 900 px. Aucune réécriture d'ordre pour le lecteur d'écran. */
.suite-now.is-answer {
  grid-column: 1;
  grid-row: 1;
}

.suite-now.is-binomino {
  grid-column: 2;
  grid-row: 1;
}

.suite-hinge {
  grid-column: 1 / -1;
  grid-row: 2;
}

.suite-then.is-answer {
  grid-column: 1;
  grid-row: 3;
}

.suite-then.is-binomino {
  grid-column: 2;
  grid-row: 3;
}

/* ── CE SOIR — petit devant la conséquence, mais pas écrasé : c'est ici que
      vit la seule information qui EST la différence produit (« La méthode
      vient du cahier de votre enfant »). Elle est en encre pleine, à 16,5 px,
      sur le panneau vert pâle — pas en gris 15 px sur blanc. ── */

.suite-now {
  position: relative;
  min-width: 0;
  padding-block: 4px clamp(18px, 2vw, 28px);
}

/* À gauche : jamais de surface. Un filet en marge, du texte sur la page. */
.suite-now.is-answer {
  padding-inline-start: var(--suite-pad-a);
  border-inline-start: 2px solid var(--suite-stop);
}

/* À droite : un panneau adossé à son filet — bord d'attaque plat, l'autre
   bord arrondi. Ce n'est pas une carte jumelle de celle d'en face : celle d'en
   face n'existe pas. */
.suite-now.is-binomino {
  padding-block: clamp(20px, 2.2vw, 30px);
  padding-inline: var(--suite-pad-b) clamp(20px, 2.4vw, 34px);
  border-inline-start: 2px solid var(--green);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--radius-medium);
  border-end-end-radius: var(--radius-medium);
  background: var(--green-soft);
}

/* Le fil qui descend vers la barre. À gauche il s'éteint avant d'y arriver ;
   à droite il tient jusqu'au bout. La bascule est là, pas dans un « VS ». */
.suite-now::after {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  width: 2px;
  height: var(--suite-gap);
  content: "";
  transform-origin: top center;
}

.suite-now.is-answer::after {
  background-image: linear-gradient(
    to bottom,
    var(--suite-stop) 0%,
    transparent 74%
  );
}

.suite-now.is-binomino::after {
  background: var(--green);
}

.suite-label {
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.suite-now.is-answer .suite-label {
  color: var(--red);
}

.suite-now.is-binomino .suite-label {
  color: var(--green);
}

.suite-title {
  max-width: 20ch;
  color: var(--ink);
  font-size: clamp(21px, 1.95vw, 30px);
  letter-spacing: -0.032em;
  line-height: 1.15;
}

.suite-list {
  display: grid;
  max-width: 34ch;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.suite-list li {
  position: relative;
  padding-inline-start: 20px;
  font-size: 16.5px;
  line-height: 1.48;
}

/* Le procédé adverse est minoré par la STRUCTURE — pas de surface, texte plus
   clair, filet plus fin. Le rouge ne sert qu'à deux choses dans toute la
   section : le surtitre et le filet de marge. Pas de puce rouge, pas de croix,
   pas de balisage négatif. */
.suite-now.is-answer .suite-list li {
  color: var(--ink-muted);
}

.suite-now.is-binomino .suite-list li {
  color: var(--ink);
}

.suite-list li::before {
  position: absolute;
  top: 0.58em;
  inset-inline-start: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
}

.suite-now.is-answer .suite-list li::before {
  background: color-mix(in srgb, var(--ink) 55%, transparent);
}

.suite-now.is-binomino .suite-list li::before {
  background: var(--green);
}

/* ── LA BARRE ET LE MOT — « Au contrôle, » sorti des deux chutes, dit une
      seule fois. La barre vient EN PREMIER, pleine largeur, pour que les deux
      fils descendus des colonnes atterrissent dessus au pixel près ; le mot
      est accroché dessous, à l'aplomb de la première colonne, dans la même
      voix que les deux fins — display, bas de casse, chasse serrée. C'est
      cette identité typographique qui le fait lire comme un DÉBUT DE PHRASE
      et non comme l'intertitre qu'il était en capitales espacées. ── */

/* Le mot pivot est POSÉ SUR la barre, au centre : la barre passe derrière lui
   et s'interrompt de part et d'autre. Calé à gauche — c'était la version
   précédente — il se lisait comme le début de la seule phrase de gauche, et la
   fin de droite devenait un fragment sans commencement. Au centre, il
   n'appartient à aucune des deux colonnes : il appartient à la charnière, et
   les deux fins en descendent. */
.suite-hinge {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
}

.suite-hinge-bar {
  grid-area: 1 / 1;
  width: 100%;
  height: 1px;
  min-width: 0;
  align-self: center;
  background: var(--suite-rule);
  transform-origin: left center;
}

.suite-hinge-word {
  grid-area: 1 / 1;
  z-index: 2;
  justify-self: center;
  max-width: 100%;
  padding-inline: clamp(18px, 2.4vw, 34px);
  /* Le fond du mot masque la barre derrière lui : c'est ce vide qui fait lire
     « une seule phrase, deux fins » plutôt que « un titre et une liste ». */
  background: var(--white);
  color: var(--ink);
  font-size: clamp(22px, 2.6vw, 40px);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.04;
  overflow-wrap: break-word;
}

/* Le raccord : la ligne verte franchit la barre et rejoint la surface. C'est
   la seule verticale qui traverse la section de bout en bout. Rien ne repart
   à gauche — l'absence de trait EST la démonstration, on ne la redit pas avec
   un pointillé de plus. Porté par la charnière (qui ne se translate pas) et
   non par la surface (qui entre en montant) : le raccord reste d'aplomb
   pendant toute la scène. */
.suite-hinge::after {
  position: absolute;
  top: 100%;
  inset-inline-start: calc(var(--suite-col-a) + var(--suite-cgap));
  width: 2px;
  height: var(--suite-gap);
  background: var(--green);
  content: "";
  transform-origin: top center;
}

/* ── LA CONSÉQUENCE — le plus gros texte de la page. ── */

.suite-then {
  min-width: 0;
  letter-spacing: -0.036em;
  line-height: 1.06;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Le téléphone n'est plus là : on en voit la place, vide, au-dessus d'un socle
   en pointillé. Pas de cadre fermé — un cadre arrondi contenant du texte est
   le sosie d'un champ de saisie, et la page en compte déjà. Ici il n'y a
   qu'une ligne sous un espace vide, et le filet de marge n'est pas revenu. */
.suite-then.is-answer {
  /* `start` et non l'étirement de la rangée : le socle en pointillé doit
     fermer la phrase, pas flotter 160 px plus bas à hauteur du bas de la
     surface verte, où il se lisait comme un filet égaré. */
  align-self: start;
  padding-inline-start: calc(2px + var(--suite-pad-a));
  padding-bottom: clamp(26px, 3vw, 44px);
  border-bottom: 1.5px dashed var(--suite-stop);
  color: var(--ink-soft);
  font-size: clamp(24px, 2.7vw + 6px, 46px);
  font-weight: 700;
}

/* La seule surface pleine de la section. Bord d'attaque plat, dans l'exact
   prolongement du filet vert et du panneau de ce soir : la ligne verte est la
   seule qui traverse la section de bout en bout.
   Volontairement PAS un bouton géant : rayon moyen et non large, ombre neutre
   du fichier (`--shadow-large`) et non halo vert de 70 px, et au survol la
   lumière interne monte au lieu d'un bond de 8 px. Le cuivre reste au CTA. */
.suite-then.is-binomino {
  position: relative;
  isolation: isolate;
  padding-block: clamp(26px, 3vw, 46px) clamp(30px, 3.4vw, 54px);
  padding-inline: calc(2px + var(--suite-pad-b)) clamp(24px, 2.6vw, 40px);
  border-start-start-radius: 0;
  border-end-start-radius: var(--radius-medium);
  border-start-end-radius: var(--radius-medium);
  border-end-end-radius: var(--radius-medium);
  background-color: var(--green);
  background-image: linear-gradient(
    152deg,
    color-mix(in srgb, var(--green) 88%, var(--white)) 0%,
    var(--green) 46%,
    color-mix(in srgb, var(--green) 62%, var(--navy-deep)) 100%
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 22%, transparent),
    var(--shadow-large);
  color: var(--white);
  font-size: clamp(29px, 4vw + 10px, 70px);
  font-weight: 800;
}

/* La lumière haute : elle donne au panneau la densité d'un objet éclairé
   plutôt que d'un aplat, et c'est elle qui monte au survol. */
.suite-then.is-binomino::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: radial-gradient(
    78% 62% at 84% 2%,
    color-mix(in srgb, var(--white) 16%, transparent) 0%,
    transparent 64%
  );
  content: "";
  opacity: 0.8;
}

/* Le début de phrase, redit sur chaque fin. Masqué à l'écran au-dessus de
   900 px — la barre le dit une fois pour les deux — mais TOUJOURS dans le DOM,
   donc toujours lu par les lecteurs d'écran : chaque fin leur arrive entière.
   C'est aussi le crochet i18n : si une langue ne partage pas le même début
   dans les deux phrases, `.suite.is-unsplit` suffit à basculer la section,
   sans toucher au HTML ni à la grille. */
.suite-lead,
.suite-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.suite.is-unsplit .suite-hinge-word {
  display: none;
}

.suite.is-unsplit .suite-lead {
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 0.28em;
  overflow: visible;
  clip-path: none;
  font-size: max(14px, 0.56em);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  white-space: normal;
}

.suite.is-unsplit .suite-then.is-answer .suite-lead {
  color: var(--ink-muted);
}

.suite.is-unsplit .suite-then.is-binomino .suite-lead {
  color: color-mix(in srgb, var(--white) 88%, transparent);
}

/* ── SURVOL — les deux côtés répondent. Refuser toute réponse au vide était
      une pique conceptuelle invisible pour presque tout le monde et froide
      pour le reste : ici la fin de gauche s'affermit aussi quand on s'y
      intéresse. Rien ne bouge tout seul — la section respecte la règle déjà
      écrite dans ce fichier (« Ce qui se survole bouge »). ── */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .suite-then.is-binomino {
    transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
  }

  .suite-then.is-binomino::before {
    transition: opacity 520ms var(--ease-out);
  }

  .suite-then.is-binomino:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 26%, transparent),
      var(--shadow-large);
  }

  .suite-then.is-binomino:hover::before {
    opacity: 1;
  }

  .suite-then.is-answer {
    transition: color 420ms var(--ease-out), border-color 420ms var(--ease-out);
  }

  .suite-then.is-answer:hover {
    border-bottom-color: color-mix(in srgb, var(--red) 92%, transparent);
    color: var(--ink);
  }
}

/* ── ENTRÉE — chaque pièce porte sa propre classe `.reveal` : l'observateur
      existant la déclenche quand ELLE arrive à l'écran, pas quand le haut du
      bloc arrive. C'est le correctif de la chorégraphie jouée hors champ :
      sur un téléphone, la section mesure plus d'un écran, et la chute verte
      d'un scénario piloté par le conteneur tombait ~750 px sous le pli — on
      découvrait le panneau déjà posé. Ici on la voit tomber, à toutes les
      hauteurs d'écran.

      Sur grand écran les cinq pièces franchissent le seuil dans le même
      mouvement : les délais rendent alors la séquence entière — les deux
      soirées (0 · 80 ms), les deux fils qui descendent (260 · 320 ms), la
      barre qui se trace (360 ms), le mot qui se pose (480 ms), la fin de
      gauche (560 ms), le raccord vert (620 ms), et la surface verte en
      dernier (680 ms). 1,34 s en tout, une seule fois. Sur téléphone chaque
      pièce n'a que son propre délai — 680 ms au pire — donc rien ne traîne.

      Animations et non transitions : `backwards` tient l'état de départ
      pendant le délai puis rend la main au style de base — le survol reste
      libre de retransformer le panneau après coup, ce qu'un `transition-delay`
      aurait figé. Aucun JavaScript ajouté. ── */

@media (prefers-reduced-motion: no-preference) {
  /* Neutralise l'entrée générique, sinon chaque pièce glisserait deux fois.
     (0,3,0) passe devant `.reveal.reveal-ready` (0,2,0) ET devant
     `p.reveal.reveal-ready` (0,2,1) — trois des cinq pièces sont des <p>. */
  .suite .reveal.reveal-ready {
    transform: none;
    transition: none;
  }

  .suite-now.reveal-ready:not(.is-visible),
  .suite-then.reveal-ready:not(.is-visible) {
    opacity: 0;
  }

  /* La barre ne se fond pas : elle se trace. Sa pièce reste opaque. */
  .suite-hinge.reveal.reveal-ready {
    opacity: 1;
  }

  .suite-now.reveal-ready:not(.is-visible)::after {
    transform: scaleY(0);
  }

  .suite-hinge.reveal-ready:not(.is-visible) .suite-hinge-bar {
    transform: scaleX(0);
  }

  .suite-hinge.reveal-ready:not(.is-visible) .suite-hinge-word {
    opacity: 0;
  }

  .suite-hinge.reveal-ready:not(.is-visible)::after {
    transform: scaleY(0);
  }

  .suite-now.is-answer.reveal-ready.is-visible {
    animation: suite-rise 520ms var(--ease-out) 0ms backwards;
  }

  .suite-now.is-binomino.reveal-ready.is-visible {
    animation: suite-rise 520ms var(--ease-out) 80ms backwards;
  }

  .suite-now.is-answer.reveal-ready.is-visible::after {
    animation: suite-drop 360ms var(--ease-out) 260ms backwards;
  }

  .suite-now.is-binomino.reveal-ready.is-visible::after {
    animation: suite-drop 360ms var(--ease-out) 320ms backwards;
  }

  .suite-hinge.reveal-ready.is-visible .suite-hinge-bar {
    animation: suite-trace 560ms var(--ease-out) 360ms backwards;
  }

  .suite-hinge.reveal-ready.is-visible .suite-hinge-word {
    animation: suite-word 400ms var(--ease-out) 480ms backwards;
  }

  .suite-hinge.reveal-ready.is-visible::after {
    animation: suite-drop 360ms var(--ease-out) 620ms backwards;
  }

  .suite-then.is-answer.reveal-ready.is-visible {
    animation: suite-fade 520ms var(--ease-out) 560ms backwards;
  }

  .suite-then.is-binomino.reveal-ready.is-visible {
    animation: suite-land 660ms var(--ease-out) 680ms backwards;
  }
}

@keyframes suite-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes suite-drop {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes suite-trace {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes suite-word {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes suite-fade {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes suite-land {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Le tracé part du début de ligne : à droite en page arabe. Tout le reste de
   la section est en propriétés logiques (inset-inline, border-inline,
   padding-inline, rayons start/end) et se retourne seul — aucun dégradé
   radial placé en pourcentage physique n'a été laissé dans le bloc. */
[dir="rtl"] .suite-hinge-bar {
  transform-origin: right center;
}

/* ── REPLI — sous 900 px la colonne unique remet la section dans son ordre
      naturel. « Au contrôle, » n'est plus dit une fois en travers : empilé, un
      mot commun à 400 px au-dessus de la seconde fin ne relie plus rien. On
      bascule sur le mécanisme déjà en place pour l'i18n : le mot central se
      retire, et chaque fin retrouve son début — deux phrases entières, la
      rime faisant le lien. Aucun élément ajouté au DOM : c'est le même
      `<span>` que les lecteurs d'écran entendaient déjà.

      La barre, elle, reste : c'est l'horizon entre ce soir et après.
      Les deux fils verticaux disparaissent — empilés, ils relieraient la
      colonne de gauche au panneau vert. ── */

@media (max-width: 900px) {
  .suite {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(22px, 5vw, 32px);
  }

  .suite-now.is-answer,
  .suite-now.is-binomino,
  .suite-hinge,
  .suite-then.is-answer,
  .suite-then.is-binomino {
    grid-column: 1;
    grid-row: auto;
  }

  .suite-now::after,
  .suite-hinge::after {
    display: none;
  }

  .suite-hinge {
    gap: 0;
  }

  .suite-hinge-word {
    display: none;
  }

  .suite-lead {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin-bottom: 0.28em;
    overflow: visible;
    clip-path: none;
    font-size: max(14px, 0.56em);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    white-space: normal;
  }

  .suite-then.is-answer .suite-lead {
    color: var(--ink-muted);
  }

  .suite-then.is-binomino .suite-lead {
    color: color-mix(in srgb, var(--white) 88%, transparent);
  }

  .suite-title {
    max-width: none;
  }

  .suite-list {
    max-width: none;
  }

  .suite-then.is-answer {
    padding-bottom: 24px;
    font-size: clamp(23px, 6.6vw, 38px);
  }

  .suite-then.is-binomino {
    padding-block: 24px 30px;
    padding-inline: 22px;
    font-size: clamp(27px, 9vw, 48px);
  }
}

@media (max-width: 460px) {
  .suite-now.is-binomino,
  .suite-then.is-binomino {
    border-start-end-radius: var(--radius-small);
    border-end-end-radius: var(--radius-small);
  }

  .suite-then.is-binomino {
    border-end-start-radius: var(--radius-small);
  }
}

.method {
  background: var(--paper);
}

.method-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.method-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  background: var(--white);
  box-shadow: var(--shadow-small);
  transition: transform 420ms var(--ease-out), box-shadow 420ms ease;
}

.method-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-large);
}

.method-copy {
  width: 100%;
  min-height: 270px;
  padding: 32px 30px 24px;
}

.step-number {
  display: inline-flex;
  margin-bottom: 22px;
  color: var(--copper);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.method-copy h3 {
  font-size: clamp(21px, 2vw, 27px);
}

.method-copy p {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.58;
}

.phone-step {
  width: min(250px, 76%);
  margin: 12px auto -80px;
  border-radius: 34px 34px 0 0;
  box-shadow: 0 22px 54px rgba(18, 21, 40, 0.2);
  transition: transform 480ms var(--ease-out);
}

.phone-step img {
  border-radius: 28px 28px 0 0;
}

.method-card:hover .phone-step {
  transform: translateY(-10px);
}

.daily {
  background: var(--white);
}

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.feature {
  position: relative;
  min-width: 0;
  min-height: 310px;
  overflow: hidden;
  padding: clamp(28px, 3.5vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  background: var(--paper);
  transition: transform 400ms var(--ease-out), box-shadow 400ms ease;
}

.feature:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-large);
}

.feature-code {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--copper);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.feature h3 {
  max-width: 19ch;
  margin-top: 24px;
}

.feature p {
  max-width: 57ch;
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.62;
}

.feature-language {
  grid-column: span 12;
  min-height: 520px;
  padding-bottom: 0;
  background: var(--navy);
}

.feature-language .feature-code,
.feature-language h3,
.feature-language p {
  color: var(--white);
}

.feature-language p {
  color: var(--on-dark);
}

.feature-language .feature-code {
  border-color: rgba(255, 255, 255, 0.28);
}

.feature-voice {
  grid-column: span 6;
  background: var(--copper-soft);
}

.feature-solo {
  grid-column: span 6;
  background: var(--indigo-soft);
}

.feature-homes {
  grid-column: span 6;
  background: var(--paper-deep);
}

.feature-review {
  grid-column: span 6;
  background: var(--green-soft);
}

/* Titre au-dessus, captures en bande pleine largeur au-dessous.
   En deux colonnes, les quatre vignettes tombaient à 158 px de large : on
   distinguait quatre téléphones, on ne lisait aucune des quatre langues. La
   bande leur rend ~280 px, où l'en-tête traduit se lit. */
.language-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 48px);
}

.language-copy {
  align-self: start;
  padding-bottom: 0;
}

.language-previews {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
  /* La vignette survolée grandit vers le BAS (origine en haut) : il ne faut
     donc de l'air qu'en dessous. Avec une origine centrée, il en fallait
     autant au-dessus, et ça creusait un vide visible au repos. */
  padding: 4px 30px 150px;
}

.language-previews figure {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
}

/* Téléphone ENTIER, plus agrandissement au survol : les vignettes étaient
   coupées en bas, on ne voyait plus un téléphone mais une bande. */
.mini-phone {
  width: 100%;
  min-width: 0;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: var(--surface-darkest);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}

.mini-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 17px;
}

/* Le survol agrandit vraiment : à 195 px de large, le texte de l'app tombe
   à 9 px. À 1,75 fois, il repasse à 16 — on peut enfin lire l'arabe et
   l'espagnol. La vignette survolée recouvre ses voisines, c'est l'effet
   recherché ; les autres reculent pour que l'œil sache où regarder. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .language-previews figure:hover .mini-phone {
    transform-origin: top center;
    transform: scale(1.34);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55);
  }

  /* La carte rogne à overflow:hidden. Les colonnes de bord grandissent donc
     vers l'intérieur, sinon la vignette survolée serait tranchée. */
  .language-previews figure:first-child .mini-phone { transform-origin: top left; }
  .language-previews figure:last-child .mini-phone { transform-origin: top right; }

  .language-previews figure:hover {
    z-index: 5;
  }

  .language-previews:hover figure:not(:hover) .mini-phone {
    opacity: 0.42;
    transform: scale(0.96);
  }

  .language-previews:hover figure:not(:hover) figcaption {
    opacity: 0.42;
  }

  .language-previews figcaption {
    transition: opacity 420ms var(--ease-out);
  }
}



.language-previews figure {
  position: relative;
  z-index: 1;
}

/* La couleur d'origine (var(--on-dark)) venait de la carte sombre du bento. Depuis
   que les captures vivent dans la section « Langues », sur fond indigo pâle,
   elle donnait un contraste de ~1,1:1 : les noms de langues étaient
   illisibles. */
.language-previews figcaption {
  color: var(--navy);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-align: center;
}

.language-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 30px;
}

.language-list span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 700;
}

.language-list .coming {
  border-style: dashed;
  color: var(--on-dark);
}

.voice-demo {
  display: flex;
  height: 70px;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  padding: 14px 18px;
  border: 1px solid rgba(156, 69, 0, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.52);
}

.voice-demo span {
  width: 5px;
  height: 18px;
  border-radius: 99px;
  background: var(--copper);
}

/* Quatre allers-retours, soit 4,8 s, puis les barres se posent. C'était
   `infinite`, la seule animation sans fin de la feuille : WCAG 2.2.2 demande
   qu'un mouvement de plus de cinq secondes puisse être arrêté, et le bloc
   global `prefers-reduced-motion: reduce` ne couvre que les visiteurs qui ont
   déclaré la préférence — pas les autres.

   Déclenchée à l'ENTRÉE dans le champ de vision (`.is-visible`, posé par
   l'observateur de site.js) et non au chargement : bornée à 4,8 s depuis le
   chargement, elle serait terminée bien avant qu'on descende jusqu'ici, et le
   mouvement n'aurait été vu par personne. */
.feature-voice.is-visible .voice-demo span {
  animation: voice 1.2s ease-in-out 4 alternate;
}

.voice-demo span:nth-child(2n) {
  height: 34px;
  animation-delay: -0.6s;
}

.voice-demo span:nth-child(3n) {
  height: 48px;
  animation-delay: -0.3s;
}

@keyframes voice {
  to {
    transform: scaleY(0.46);
    opacity: 0.55;
  }
}

.solo-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  color: var(--indigo);
  font-size: 13.5px;
  font-weight: 750;
}

.solo-status span {
  width: 9px;
  height: 9px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(13, 97, 70, 0.12);
}

/* --ink-soft et non --ink-muted : ces deux notes reposent sur --paper-deep
   (var(--paper-deep)) et non sur --paper. Mesuré le 5 août 2026, --ink-muted y donne
   4,26:1 — sous les 4,5:1 exigés par WCAG AA pour du texte de moins de 18,66
   px. --ink-soft y donne 6,30:1. Sur --paper, --ink-muted passe (4,81:1) :
   c'est bien le fond plus sombre qui fait basculer, pas la couleur seule. */
.feature-note {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px !important;
}

.review-pills {
  display: grid;
  gap: 7px;
  margin-top: 24px;
}

.review-pills span {
  display: flex;
  min-height: 34px;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid rgba(13, 97, 70, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--green);
  font-size: 13px;
  font-weight: 750;
}

.continuity {
  overflow: hidden;
  background: var(--paper);
}

.continuity-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1fr);
  align-items: center;
  gap: clamp(60px, 9vw, 126px);
}

.continuity-copy h2 {
  max-width: 13ch;
}

.continuity-copy .section-lead {
  margin-top: 24px;
}

.check-list {
  display: grid;
  gap: 0;
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.check-list li {
  display: grid;
  grid-template-columns: minmax(150px, 0.65fr) 1fr;
  gap: 22px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.check-list b {
  color: var(--ink);
  font-size: 15.5px;
}

.check-list span {
  color: var(--ink-soft);
  font-size: 15.5px;
}

.continuity-media {
  position: relative;
  display: flex;
  min-height: 680px;
  align-items: end;
  justify-content: center;
}

.continuity-media::before {
  position: absolute;
  inset: 8% 2% 0;
  border-radius: var(--radius-xlarge) var(--radius-xlarge) 0 0;
  background: var(--copper-soft);
  content: "";
}

.continuity-media::after {
  position: absolute;
  top: 16%;
  right: 5%;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(156, 69, 0, 0.18);
  border-radius: 50%;
  content: "";
}

.phone-report {
  z-index: 2;
  width: min(294px, 58%);
  margin-left: -80px;
}

.phone-home {
  z-index: 1;
  width: min(224px, 45%);
  margin: 0 0 54px -74px;
  transform: rotate(5deg);
}

.film {
  background: var(--navy-deep);
}

/* Le film est passé en paysage et il montre de vraies familles avec de vrais
   écrans : c'est la meilleure preuve de la page. Il prend donc toute la
   largeur, titre au-dessus, au lieu d'une colonne de 420 px pensée pour une
   vidéo verticale. */
.film-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 4vw, 58px);
}

.film-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: end;
  gap: clamp(28px, 5vw, 72px);
}

@media (max-width: 900px) {
  .film-copy {
    grid-template-columns: 1fr;
  }
}

.film .eyebrow {
  color: var(--copper-light);
}

.film h2,
.film .section-lead {
  color: var(--white);
}

.film .section-lead {
  margin-top: 24px;
  color: var(--on-dark);
}

.film-legend {
  display: grid;
  gap: 0;
  margin-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.film-legend p {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--on-dark);
  font-size: 15.5px;
}

.film-legend span {
  color: var(--white);
  font-weight: 750;
}

.film-stage {
  min-width: 0;
  padding: clamp(18px, 2.6vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-large);
  background: var(--navy);
}

.video-frame {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(12px, 1.4vw, 22px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;
  background: var(--surface-darkest);
}

.video-frame::before,
.video-frame::after {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  content: "";
}

.video-frame::before {
  top: 42px;
  left: 34px;
}

.video-frame::after {
  right: 38px;
  bottom: 34px;
  width: 72px;
  height: 72px;
}

/* Le film est passé du portrait 1080×1920 au paysage 1920×1080 : c'est le
   livrable web officiel. Le cadre suit — largeur pleine, rapport 16/9, et
   plus de hauteur imposée qui laisserait deux bandes noires. */
.video-frame video {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  background: var(--surface-darkest);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.44);
}

.video-frame .real-media-badge {
  top: 14px;
  left: 14px;
}

.play-button {
  position: absolute;
  z-index: 4;
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.4);
  color: var(--navy-deep);
  cursor: pointer;
  transition: transform 280ms var(--ease-out), background-color 200ms ease;
}

.play-button:hover {
  transform: scale(1.08);
  background: var(--paper);
}

.play-button span {
  margin-left: 4px;
  font-size: 27px;
}

.play-button[hidden] {
  display: none;
}

.video-fallback {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--on-dark-soft) !important;
}

.video-fallback a {
  color: var(--white);
  font-weight: 750;
  text-underline-offset: 3px;
}

.film-stage > p {
  margin-top: 14px;
  color: var(--on-dark-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

.trust {
  background: var(--paper);
}

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

.trust-card {
  min-width: 0;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-medium);
  background: var(--white);
  box-shadow: var(--shadow-small);
}

.trust-card > span {
  color: var(--copper);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.trust-card h3 {
  margin-top: 18px;
  font-size: 22px;
}

.trust-card p {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.6;
}

.pricing {
  background: var(--white);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

.price-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 330px;
  flex-direction: column;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-medium);
  background: var(--paper);
}

.price-card-featured {
  border-color: var(--navy);
  background: var(--navy);
  box-shadow: var(--shadow-large);
}

.price-name {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 22px;
}

.price strong {
  color: var(--ink);
  font-size: clamp(34px, 3.5vw, 46px);
  letter-spacing: -0.055em;
  line-height: 1;
}

.price span {
  color: var(--ink-muted);
  font-size: 14.5px;
  font-weight: 650;
}

.price-card > p:not(.price-name):not(.price) {
  margin-top: 22px;
  font-size: 15px;
}

.price-note {
  margin-top: auto;
  padding-top: 24px;
  color: var(--indigo);
  font-size: 14.5px;
  font-weight: 750;
}

.price-card-featured .price-name,
.price-card-featured .price strong,
.price-card-featured .price-note {
  color: var(--white);
}

.price-card-featured .price span,
.price-card-featured > p:not(.price-name):not(.price) {
  color: var(--on-dark);
}

.popular {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pricing-legal {
  max-width: 76ch;
  margin: 24px auto 0;
  color: var(--ink-muted);
  font-size: 13.5px;
  line-height: 1.65;
  text-align: center;
}

.faq {
  background: var(--paper);
}

.faq-grid {
  display: grid;
  /* Le couloir de titre était plus large que nécessaire pour son contenu :
     430 px pour 251 px de texte, contre 661 px à onze questions. */
  grid-template-columns: minmax(230px, 0.45fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(40px, 6vw, 88px);
}

.faq-heading {
  position: sticky;
  top: var(--sticky-top);
}

.faq-heading .section-lead {
  margin-top: 20px;
  font-size: 17px;
}

.text-link {
  display: inline-block;
  margin-top: 24px;
  color: var(--copper);
  font-size: 15px;
  font-weight: 750;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Onze filets gris empilés faisaient de la FAQ le bloc le plus rayé de la
   page, et le fondateur a dit « y'a des traits entre les zones ». Chaque
   question devient sa propre surface : plus aucun filet, et le relief remplace
   la rature. Le registre typographique — plus GRAND et plus LÉGER (700→650,
   16→21 px) — est celui qui donnait son calme à la FAQ de Figma.

   Tout est porté par `.faq-list` : les sélecteurs `details`/`summary` nus
   d'avant descendaient aussi sur `.lang-switch`, qui est un <details>, et lui
   collaient un filet sous le sélecteur de langue dans l'en-tête. */
.faq-list {
  display: grid;
  gap: 8px;
}

.faq-list details {
  border-radius: var(--radius-medium);
  background: var(--white);
  box-shadow: var(--shadow-small);
  transition: box-shadow 240ms var(--ease-out);
}

.faq-list summary {
  position: relative;
  padding: 20px 68px 20px 26px;
  border-radius: var(--radius-medium);
  color: var(--ink);
  cursor: pointer;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.34;
  list-style: none;
  transition: color 200ms ease;
}

/* (hover: hover) : sans ça, la carte reste allumée sur la dernière question
   touchée au doigt, y compris après refermeture. */
@media (hover: hover) {
  .faq-list details:hover {
    box-shadow: var(--shadow-large);
  }

  .faq-list summary:hover {
    color: var(--copper-dark);
  }

  .faq-list summary:hover::after {
    border-color: var(--copper);
  }
}

.faq-list details[open] {
  box-shadow: var(--shadow-large);
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  position: absolute;
  top: 50%;
  right: 22px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--copper);
  content: "+";
  font-size: 21px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 220ms var(--ease-out), border-color 200ms ease;
}

.faq-list details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

/* 15 px était sous le seuil de confort de lecture que le fondateur a signalé
   (« certains textes sont tellement petits qu'on ne peut pas les lire »). */
.faq-list details p {
  max-width: 66ch;
  padding: 0 26px 24px;
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.66;
}

.final-cta {
  padding-top: 0;
  background: var(--paper);
}

.final-panel {
  position: relative;
  display: grid;
  min-height: 540px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.62fr);
  align-items: end;
  overflow: hidden;
  border-radius: var(--radius-xlarge);
  background: var(--navy);
  box-shadow: var(--shadow-large);
}

/* Le cercle tombait pile sur la tête de Mino : il lui faisait une auréole.
   Déplacé derrière le texte, à gauche, et agrandi pour qu'il se lise comme
   une trame de fond et non comme un objet posé sur la mascotte. */
.final-panel::before {
  position: absolute;
  top: -80px;
  left: -60px;
  width: 380px;
  height: 380px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  content: "";
}

.final-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: clamp(46px, 6vw, 78px);
}

.final-copy .eyebrow {
  color: var(--copper-light);
}

.final-copy h2,
.final-copy p {
  color: var(--white);
}

.final-copy p {
  max-width: 52ch;
  margin-top: 22px;
  color: var(--on-dark);
}

.final-copy .button {
  margin-top: 30px;
}

.final-copy small {
  display: block;
  margin-top: 16px;
  color: var(--on-dark-muted);
  font-size: 13px;
}

.final-panel > img {
  position: relative;
  z-index: 2;
  width: min(430px, 100%);
  height: auto;
  align-self: end;
  justify-self: end;
  filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.32));
}

.site-footer {
  padding: 72px 0 36px;
  background: var(--surface-darker);
  color: var(--white);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(140px, 0.65fr));
  gap: clamp(34px, 5vw, 70px);
}

.brand-footer {
  color: var(--white);
}

.brand-footer img {
  box-shadow: none;
}

.footer-brand > p {
  max-width: 32ch;
  margin-top: 18px;
  color: var(--on-dark-muted);
  font-size: 15.5px;
}

/* Pastilles de magasin — gabarit officiel (glyphe, deux lignes, coins très
   arrondis), redessiné en SVG en ligne. Aucune ressource externe. */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 9px 18px 9px 15px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  text-decoration: none;
  transition: transform 240ms var(--ease-out), background-color 240ms ease,
    border-color 240ms ease;
}

a.store-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
}

.store-badge svg {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}

.store-lines {
  display: grid;
  gap: 1px;
  line-height: 1.12;
}

.store-lines small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.store-lines strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Google Play n'est pas prévu au lancement : la pastille reste présente pour
   dire l'intention, mais elle n'est pas cliquable et se lit en retrait. */
.store-badge.is-later {
  opacity: 0.58;
  cursor: default;
}

.footer-grid h3 {
  margin-bottom: 17px;
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-grid > div:not(.footer-brand) a {
  display: block;
  width: fit-content;
  padding: 5px 0;
  color: var(--on-dark-muted);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

.footer-grid > div:not(.footer-brand) a:hover {
  color: var(--white);
  transform: translateX(3px);
}

.footer-grid > div:not(.footer-brand) p {
  max-width: 26ch;
  color: var(--on-dark-dim);
  font-size: 13.5px;
  line-height: 1.7;
}

.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-legal p {
  max-width: 68ch;
  color: var(--on-dark-dimmer);
  font-size: 13px;
  line-height: 1.65;
}

.reveal.reveal-ready {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
}

.reveal.reveal-ready.is-visible {
  opacity: 1;
  transform: none;
}

/* Les blocs de structure entrent ; le texte courant se contente d'apparaître.
   86 éléments portent .reveal, dont 39 <p>. L'observateur les déclenche
   indépendamment : chaque paragraphe démarrait sa translation alors qu'il
   était déjà à l'écran, et glissait sous l'œil pendant qu'on le lisait.
   (0,2,1) passe devant (0,2,0). */
p.reveal.reveal-ready {
  transform: none;
  transition: opacity 300ms var(--ease-out);
}

/* ── Bascule de la barre de navigation ───────────────────────────────────
   Point de rupture SÉPARÉ de celui du héros (1080 px). La barre bascule vers
   le menu déroulant dès qu'elle ne tient plus, pas à une largeur choisie pour
   une autre raison.

   1279 et non 1080. Mesuré le 5 août 2026 : logo 173 + huit onglets 651 +
   sélecteur de langue 128 + bouton 101, plus 7 écarts internes au minimum de
   la clamp et 3 écarts de grille, font 1233 px de contenu — soit 1273 px de
   fenêtre avec les marges du shell. À 1080 px la barre débordait donc de près
   de 200 px, et la page prenait une barre de défilement horizontale.

   Le défaut PRÉEXISTAIT : avec sept onglets il fallait déjà 1154 px. Il ne se
   voyait pas parce qu'on regarde le site sur un écran large. Le huitième
   onglet (« Les vacances », ajouté le 5 août) l'a simplement rendu criant.

   Rien n'est perdu sous 1280 px : le menu déroulant contient les huit liens,
   dont « Les vacances », plus l'appel à l'action.

   ⚠️ Le script porte le même seuil dans son matchMedia. Les deux doivent
   bouger ENSEMBLE — ils ont déjà divergé une fois (1080 en CSS, 901 en JS), et
   le menu se refermait tout seul dans l'intervalle. */
@media (max-width: 1279px) {
  .desktop-nav,
  .nav-cta {
    display: none;
  }

  .nav-shell {
    grid-template-columns: 1fr auto;
  }

  .menu-button {
    display: grid;
    width: 46px;
    height: 46px;
    place-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    cursor: pointer;
  }

  .menu-button span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 99px;
    background: var(--ink);
    transition: transform 240ms var(--ease-out);
  }

  .menu-button[aria-expanded="true"] span:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  .menu-button[aria-expanded="true"] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  .mobile-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    gap: 2px;
    padding: 12px 20px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    box-shadow: var(--shadow-large);
    /* Le menu débordait sous le pli sans jamais pouvoir être atteint. Mesuré
       le 5 août 2026 à 844x390 (téléphone en paysage) : le menu ouvert
       s'étendait de y=76 à y=589 pour une fenêtre de 390 px — « Tarifs » et le
       bouton d'appel à l'action étaient hors écran, et défiler n'y changeait
       rien : l'en-tête est collant, il épingle le menu avec lui. Même chose à
       320x480.

       Il défile donc dans sa propre boîte. Le pourcentage de max-height se
       résout sur le bloc conteneur — l'en-tête — donc `100dvh - 100%` vaut
       bien « la fenêtre moins la barre ». La ligne en `vh` est le repli pour
       les navigateurs sans `dvh`, où 84 px est la hauteur nominale de la
       barre. */
    max-height: calc(100vh - 84px);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    /* Sans ça, arriver en bas du menu poursuit le défilement sur la page
       derrière — le menu se referme sous le doigt. */
    overscroll-behavior: contain;
  }

  .mobile-nav.is-open {
    display: grid;
  }

  .mobile-nav > a:not(.button) {
    padding: 13px 4px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }

  .mobile-nav .button {
    margin-top: 10px;
  }
}

@media (max-width: 1080px) {
  .nav-shell {
    min-height: 76px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.78fr);
    gap: 44px;
  }

  .note-method {
    left: -10px;
  }

  .note-parent {
    right: -10px;
  }

  .method-copy {
    min-height: 300px;
    padding-inline: 24px;
  }

  .feature-voice,
  .feature-solo,
  .feature-homes,
  .feature-review {
    grid-column: span 6;
  }

  .review-pills {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {

  .hero {
    padding-top: 62px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .hero-copy {
    max-width: 720px;
  }

  .hero-product {
    width: min(100%, 610px);
    min-height: 640px;
    margin-inline: auto;
  }

  .heading-split {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
  }

  .method-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .method-card:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 10px);
    justify-self: center;
  }

  .feature-language,
  .feature-voice,
  .feature-solo,
  .feature-homes,
  .feature-review {
    grid-column: span 6;
  }

  .feature-language {
    grid-column: span 12;
    padding-bottom: 34px;
  }

  .language-layout {
    grid-template-columns: 1fr;
  }

  .language-copy {
    padding-bottom: 0;
  }

  .feature-review {
    min-height: 310px;
  }

  .review-pills {
    grid-template-columns: 1fr;
  }

  .continuity-grid,
  .film-shell {
    grid-template-columns: 1fr;
  }

  .continuity-copy h2 {
    max-width: 16ch;
  }

  .continuity-media {
    width: min(100%, 630px);
    margin-inline: auto;
  }

  .film-copy {
    max-width: 720px;
  }

  .video-frame video {
    height: min(72vw, 550px);
  }

  .trust-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .price-card {
    min-height: 270px;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .faq-heading {
    position: static;
  }

  .final-panel {
    grid-template-columns: 1fr minmax(230px, 0.55fr);
  }

  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .shell {
    width: min(calc(100% - 32px), var(--shell));
  }

  .section {
    padding-block: 84px;
  }

  h1 {
    font-size: clamp(40px, 12vw, 58px);
  }

  h2 {
    font-size: clamp(32px, 9.5vw, 46px);
  }

  .hero-actions {
    display: grid;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-product {
    min-height: 570px;
  }

  .product-backdrop {
    inset-inline: 0;
    border-radius: 40px 40px 0 0;
  }

  .phone-hero {
    width: min(286px, 68vw);
  }

  .floating-note {
    min-width: 150px;
    padding: 11px 13px;
  }

  .note-method {
    top: 90px;
    left: 8px;
  }

  .note-parent {
    right: 8px;
    bottom: 136px;
  }

  .hero-mascot {
    right: 0;
    width: 112px;
  }

  .facts {
    grid-template-columns: 1fr;
    margin-top: 82px;
  }

  .facts p + p {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .method-steps {
    grid-template-columns: 1fr;
  }

  .method-card:last-child {
    grid-column: auto;
    width: 100%;
  }

  .method-copy {
    min-height: 0;
  }

  .feature-language,
  .feature-voice,
  .feature-solo,
  .feature-homes,
  .feature-review {
    grid-column: span 12;
  }

  .language-previews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
  }

  .feature {
    min-height: 280px;
  }

  .continuity-media {
    min-height: 600px;
  }

  .phone-report {
    width: min(278px, 64%);
    margin-left: -42px;
  }

  .phone-home {
    width: min(206px, 48%);
    margin-left: -62px;
  }

  .film-stage {
    padding: 14px;
  }

  .video-frame {
    min-height: 500px;
  }

  .video-frame video {
    height: min(122vw, 530px);
  }

  .check-list li {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .final-panel {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .final-copy {
    padding-bottom: 24px;
  }

  .final-panel > img {
    width: min(330px, 78%);
    justify-self: center;
  }

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

  .footer-legal {
    flex-direction: column;
  }
}

@media (max-width: 460px) {
  .brand {
    font-size: 20px;
  }

  .brand img {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .hero-proof {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hero-proof span:last-child {
    grid-column: 1 / -1;
  }

  .hero-product {
    min-height: 520px;
  }

  .product-backdrop {
    padding: 30px 22px;
  }

  .phone-hero {
    width: min(250px, 72vw);
  }

  .floating-note {
    min-width: 0;
    max-width: 150px;
  }

  .note-method {
    top: 72px;
    left: -6px;
  }

  .note-parent {
    right: -5px;
    bottom: 112px;
  }

  .floating-note strong {
    font-size: 13.5px;
  }

  .hero-mascot {
    width: 90px;
  }

  .method-copy,
  .feature,
  .trust-card,
  .price-card {
    padding-inline: 24px;
  }

  .continuity-media {
    min-height: 520px;
  }

  .phone-report {
    width: 66%;
    margin-left: -20px;
  }

  .phone-home {
    width: 47%;
    margin: 0 0 38px -52px;
  }

  .video-frame {
    min-height: 440px;
  }

  .play-button {
    width: 66px;
    height: 66px;
  }

  .film-legend p {
    grid-template-columns: 86px 1fr;
  }

  .faq-list summary {
    padding: 18px 56px 18px 20px;
  }

  .faq-list summary::after {
    right: 14px;
  }

  .faq-list details p {
    padding: 0 20px 22px;
  }

  .final-panel {
    border-radius: 34px;
  }

  .final-copy {
    padding: 40px 24px 20px;
  }

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

  .footer-brand {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reading-progress {
    display: none;
  }

  .reveal.reveal-ready {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .site-header,
  .reading-progress,
  .play-button,
  .final-cta {
    display: none;
  }

  body,
  .section,
  .film,
  .site-footer {
    background: #fff;
    color: #000;
  }

  .section {
    break-inside: avoid;
    padding-block: 36px;
  }
}

/* ── Rythme de lecture ─────────────────────────────────────────────────────
   `pretty` évite qu'un paragraphe finisse sur un mot seul, et que les titres
   se coupent après un article. `balance` est déjà appliqué aux titres.
   Ignoré par les navigateurs qui ne le connaissent pas : aucun risque. */
p, li, summary, figcaption, dd {
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTIONS AJOUTÉES LE 2 AOÛT 2026 — voir handoff/SITE-MESSAGE-V3.md
   Bandeau vacances · De mon temps · À treize ans · Le suivi · Le programme
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bandeau saisonnier — composant autonome, retirable avec son <aside>. */
.holiday-band {
  padding: 20px 0;
  background: var(--copper-soft);
}

.holiday-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 22px;
}

.holiday-kicker {
  flex-shrink: 0;
  color: var(--copper-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.holiday-text {
  flex: 1 1 340px;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.6;
}

.holiday-text strong { color: var(--ink); }

.holiday-link {
  flex-shrink: 0;
  color: var(--copper-dark);
  font-size: 15.5px;
  font-weight: 750;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.holiday-link:hover { color: var(--copper); }

/* Lien de lecture du film — remplace le second bouton du haut de page :
   deux boutons de même poids, c'est zéro appel à l'action. */
.text-play {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 750;
  text-decoration: none;
}

.text-play span {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 12px;
  padding-left: 2px;
}

.text-play:hover span { border-color: var(--ink); }

/* --ink-soft et non --ink-muted : ces deux notes reposent sur --paper-deep
   (var(--paper-deep)) et non sur --paper. Mesuré le 5 août 2026, --ink-muted y donne
   4,26:1 — sous les 4,5:1 exigés par WCAG AA pour du texte de moins de 18,66
   px. --ink-soft y donne 6,30:1. Sur --paper, --ink-muted passe (4,81:1) :
   c'est bien le fond plus sombre qui fait basculer, pas la couleur seule. */
/* Remplace le bouton de collecte d'adresses retiré le 6 août 2026. Sur le
   panneau sombre de la section finale, --on-dark-muted donne 6,4:1 — au-dessus
   des 4,5:1 exigés en AA. */
.final-attente {
  margin-top: 18px;
  color: var(--on-dark-muted);
  font-size: 16px;
  line-height: 1.5;
}

.cta-note {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

/* Deux colonnes texte + téléphone, motif commun aux nouvelles sections. */
.oldways-grid,
.teen-grid,
.follow-grid,
.holidays-grid,
.syllabus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(34px, 5vw, 68px);
}

/* align-items: center sur des colonnes très inégales — 828 px de texte contre
   333 px d'extrait dans « De mon temps » — laissait 1 368 px d'espace mort
   cumulé sur la page. L'extrait accompagne maintenant la lecture. Le motif
   exige start sur la grille ET align-self sur l'item, sinon la zone de grille
   n'offre aucune course. */
.oldways-grid > .shot,
.teen-grid > .shot,
.follow-grid > .shot,
.holidays-grid > .shot,
.syllabus-grid > .shot {
  position: sticky;
  top: var(--sticky-top);
  align-self: start;
}

/* Le plus grand extrait fait 454 px : 108 + 454 = 562. Sous ~570 px de hauteur
   de fenêtre, son bas resterait rogné pendant tout le collage. */
@media (max-height: 620px) {
  .oldways-grid > .shot,
  .teen-grid > .shot,
  .follow-grid > .shot,
  .holidays-grid > .shot,
  .syllabus-grid > .shot {
    position: static;
  }
}

/* :where() compte pour zéro : le sélecteur retombe à (0,0,1). Écrit en
   (0,1,1), il battait .eyebrow, .section-lead et .cta-note (0,1,0) — le
   surtitre de ces sections sortait à 16,5 px gris au lieu de 12 px cuivre,
   et le chapô à 16,5 au lieu de 18. Mesuré au navigateur avant correction. */
:where(.oldways-copy, .holidays-copy, .follow-copy, .syllabus-copy) p {
  max-width: 56ch;
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.68;
}

.oldways-copy .button,
.holidays-copy .button { margin-top: 26px; }

/* Téléphone ENTIER + loupe sur le point mis en avant. Le recadrage seul
   réglait la hauteur mais coupait l'écran : on ne voyait plus que c'était un
   téléphone. La loupe agrandit la zone qui porte le message à ~1,7 fois
   l'échelle du téléphone — c'est ce qui la rend lisible. */
.shot {
  position: relative;
  padding-bottom: 26px;
}

.shot-phone {
  width: min(286px, 74%);
  margin-inline: auto;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 38px;
  background: var(--surface-dark);
  box-shadow: var(--shadow-large);
  transition: transform 520ms var(--ease-out);
}

.shot-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 31px;
}

.shot-zoom {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(340px, 72%);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 18px 44px rgba(18, 21, 40, 0.22);
  transition: transform 520ms var(--ease-out), box-shadow 520ms var(--ease-out);
}

.shot-zoom img {
  display: block;
  width: 100%;
  height: auto;
}

/* Le survol écarte les deux plans au lieu de les agrandir : on comprend que la
   loupe est un détail du téléphone, pas une seconde image. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .shot:hover .shot-phone {
    transform: translateY(-10px) scale(1.02);
  }

  .shot:hover .shot-zoom {
    transform: translate(10px, 10px) scale(1.06);
    box-shadow: 0 26px 60px rgba(18, 21, 40, 0.3);
  }
}

/* « De mon temps » — la phrase de bascule, en relief. */
.oldways { background: var(--paper-deep); }

.oldways-punch {
  margin-top: 26px;
  padding: 20px 24px;
  border-left: 3px solid var(--indigo);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background: var(--white);
  color: var(--ink);
  font-size: 17.5px;
  font-weight: 700;
}

.oldways-punch em { font-style: italic; }

/* « À treize ans » — le mode solo. Papier profond, comme « De mon temps » :
   .film en navy-deep suivi de .teen en navy faisait 1 780 px d'un bleu quasi
   identique, lus comme un seul bloc noir — 11,7 % de la page. Les deux
   sections qui posent une difficulté avant d'y répondre partagent maintenant
   le même ton, et #film redevient la seule section sombre avant la sortie. */
.teen { background: var(--paper-deep); }

.teen .section-lead { color: var(--ink-soft); }

.teen-list {
  margin-top: 26px;
  display: grid;
  gap: 15px;
  list-style: none;
  padding: 0;
}

.teen-list li {
  max-width: 58ch;
  padding-left: 20px;
  border-left: 2px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.62;
}

.teen-list strong { color: var(--ink); }

.teen-note {
  margin-top: 28px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

/* Le suivi. */
.follow-items {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.follow-items p,
.syllabus-steps p {
  display: grid;
  grid-template-columns: minmax(112px, auto) 1fr;
  gap: 4px 18px;
  max-width: none;
  margin-top: 0;
  align-items: baseline;
}

.follow-items b,
.syllabus-steps b {
  color: var(--indigo);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.follow-items span,
.syllabus-steps span {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
}

.follow-honest {
  margin-top: 24px;
  color: var(--ink);
  font-weight: 700;
}

.follow-limit,
.syllabus-legal {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 15.5px;
  line-height: 1.62;
}

/* Le programme. Seul aplat froid pâle pleine largeur, et collé au seul aplat
   chaud (.holidays). Les deux filets ne sont pas décoratifs : le haut rétablit
   la frontière #suivi/#programme que le lavis assurait seul — les deux
   sections partagent grille, listes et note de bas de bloc. */
.syllabus {
  background: var(--white);
}
.syllabus-steps { display: grid; gap: 14px; margin-top: 4px; }

/* Les vacances. */
.holidays { background: var(--copper-soft); }
.holidays .eyebrow { color: var(--copper-dark); }
.holidays .eyebrow::before { background: var(--copper); }

@media (max-width: 900px) {
  .oldways-grid,
  .teen-grid,
  .follow-grid,
  .holidays-grid,
  .syllabus-grid {
    grid-template-columns: 1fr;
  }

  /* L'extrait passe sous le texte, pas au-dessus : on lit d'abord. Et il
     cesse de s'étirer : la source ne fait que 1000 px, au-delà de 560 on
     n'ajoute que du défilement. */
  .shot {
    order: 2;
    width: min(100%, 470px);
    margin-inline: auto;
  }

  .shot-zoom {
    position: static;
    width: 100%;
    margin-top: 16px;
  }

  /* Annulation du collage : les cinq sélecteurs complets sont obligatoires —
     .shot seul (0,1,0) perdrait contre .oldways-grid > .shot (0,2,0)
     et le collage resterait actif en colonne unique. */
  .oldways-grid > .shot,
  .teen-grid > .shot,
  .follow-grid > .shot,
  .holidays-grid > .shot,
  .syllabus-grid > .shot {
    position: static;
  }

  /* Trois cartes empilées montraient 446 px de téléphone chacune, soit 55 % de
     l'écran trois fois de suite : on ne lisait plus que des captures. On rogne
     la tête du téléphone, qui suffit à reconnaître l'écran. */
  .phone-step {
    width: min(186px, 58%);
    margin-bottom: -60px;
  }

  .oldways-copy,
  .teen-copy,
  .follow-copy,
  .holidays-copy,
  .syllabus-copy { order: 1; }

  .follow-items p,
  .syllabus-steps p { grid-template-columns: 1fr; gap: 2px; }

  .holiday-inner { gap: 8px 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LOT INTERFACE — 3 août 2026. Blocs NEUFS uniquement ; tout le reste du
   plan est édité en place. Cette section est volontairement HORS du
   @media (max-width: 900px) qui fermait le fichier : un bloc collé « à la
   fin » y tombait dedans et ne s'appliquait qu'en mobile.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Au-dessus de 1081 px : la gouttière gauche est assez large pour porter les
   deux notes HORS de la capture. À droite il n'y a que 20 px de marge de page,
   donc tout débord y est tranché par l'overflow du corps — d'où le passage à
   gauche, qui supprime en même temps le rognage mesuré entre 1081 et 1305 px. */
@media (min-width: 1081px) {
  .hero-product {
    --phone-w: min(310px, 69%);
    --note-inset: 56px;
  }

  .phone-hero {
    width: var(--phone-w);
  }

  .floating-note {
    right: auto;
    left: calc(-1 * var(--note-inset));
    min-width: 0;
    width: max-content;
    max-width: calc((100% - var(--phone-w)) / 2 + var(--note-inset) - 12px);
  }

  .note-method {
    top: 78px;
  }

  .note-parent {
    top: auto;
    bottom: 126px;
  }

  .hero-mascot {
    right: 0;
  }
}

/* 1081–1200 px : la colonne produit est bloquée à son minimum. On rend 30 px
   de téléphone pour que la note garde 132 px — en dessous de ~120 px elle
   devient illisible. L'inset de 64 px reste sous le gap de grille : aucune
   collision avec le texte du titre. */
@media (min-width: 1081px) and (max-width: 1200px) {
  .hero-product {
    --phone-w: min(280px, 64%);
    --note-inset: 64px;
  }
}

/* Sous 1081 px : les notes quittent la couche flottante et deviennent une
   bande de légende à deux colonnes SOUS le téléphone. Recouvrement nul.
   Coupure à 1080 et non 700 : entre 901 et 1080 px la colonne produit fait
   390–436 px, une note posée hors capture y tomberait à une centaine de
   pixels de large, illisible. */
@media (max-width: 1080px) {
  .hero-product {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr auto;
    align-items: end;
    justify-items: stretch;
    min-height: 0;
    column-gap: 10px;
  }

  .product-backdrop {
    inset: 32px 0 96px;
  }

  .phone-hero {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    margin-bottom: 0;
  }

  .floating-note {
    position: static;
    grid-row: 2;
    min-width: 0;
    max-width: none;
    margin-top: 16px;
    align-self: stretch;
  }

  .note-method {
    grid-column: 1;
  }

  .note-parent {
    grid-column: 2;
  }

  /* 96 et non 80 : à 320 px « Regarde les unités. » passe sur trois lignes et
     ne laissait que 5,6 px sous le hibou. */
  .hero-mascot {
    right: 0;
    bottom: 96px;
  }
}

@keyframes nav-drop {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFONDEUR — 3 août 2026. « les zones de textes et couleurs sont plates…
   trop plates. Ce n'est pas dynamique. » Les aplats deviennent des dégradés
   très doux, les cartes gagnent une lumière haute, et ce qui est cliquable
   répond au survol. Aucune couleur nouvelle : uniquement les jetons de :root.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Les fonds de section : un aplat unique se lit comme du papier peint. Un
   dégradé de 3 % suffit à donner un sens de lecture, de haut en bas.
   `.difference` est SORTIE de cette liste : elle passe en sombre, voir le bloc
   « LA DIFFÉRENCE PASSE EN SOMBRE » plus bas. */
.daily,
.pricing {
  background-image: linear-gradient(
    180deg,
    var(--paper) 0%,
    var(--white) 22%,
    var(--white) 100%
  );
}

.oldways,
.teen {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--paper-deep) 55%, var(--white)) 0%,
    var(--paper-deep) 46%
  );
}

.holidays {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--copper-soft) 46%, var(--white)) 0%,
    var(--copper-soft) 52%
  );
}

.syllabus,
.trust,
.questions {
  background-image: linear-gradient(180deg, var(--paper) 0%, var(--white) 34%);
}

/* Les cartes : une lumière haute à l'intérieur du bord, comme un objet posé
   sous une source de lumière — au lieu d'un rectangle de couleur pleine. */
/* La section « La différence » en est volontairement absente : ses panneaux
   portent leurs propres fonds, que ce voile blanc laverait. */
.method-card,
.trust-card,
.price-card,
.feature {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.66) 0%,
    rgba(255, 255, 255, 0) 42%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--shadow-small);
}

/* Ce qui se survole bouge. Rien ne bouge tout seul. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .feature,
  .trust-card,
  .price-card {
    transition: transform 340ms var(--ease-out), box-shadow 340ms var(--ease-out);
  }

  .feature:hover,
  .trust-card:hover,
  .price-card:hover {
    transform: translateY(-5px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--shadow-large);
  }

  .facts p {
    transition: background-color 260ms ease;
  }

  .facts p:hover {
    background: var(--paper);
  }
}

/* Le panneau final et la carte langue : une lueur indigo au lieu d'un marine
   uniforme sur 700 px de haut. */
.final-panel,
.feature-language {
  background-image: radial-gradient(
    120% 82% at 18% 0%,
    color-mix(in srgb, var(--indigo) 52%, transparent) 0%,
    transparent 62%
  );
}

/* ═══════════════════════════════════════════════════════════════════════════
   SÉLECTEUR DE LANGUE — <details> natif, sans JavaScript. Le site existe dans
   les cinq langues de l'application ; le français est la version par défaut.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La coquille passe à quatre colonnes : marque · navigation · langue · action. */
.nav-shell {
  grid-template-columns: auto 1fr auto auto;
  gap: 18px;
}

.lang-switch {
  position: relative;
}

.lang-switch summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  list-style: none;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.lang-switch summary::-webkit-details-marker {
  display: none;
}

.lang-switch summary::after {
  width: 9px;
  height: 9px;
  border-right: 1.8px solid var(--ink-muted);
  border-bottom: 1.8px solid var(--ink-muted);
  content: "";
  transform: translateY(-2px) rotate(45deg);
  transition: transform 220ms var(--ease-out);
}

.lang-switch[open] summary::after {
  transform: translateY(1px) rotate(-135deg);
}

.lang-switch summary:hover {
  border-color: var(--line-strong);
  background: var(--white);
}

.lang-switch summary svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--ink-muted);
}

.lang-switch ul {
  position: absolute;
  z-index: 120;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: 178px;
  gap: 2px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-large);
  list-style: none;
}

.lang-switch ul a {
  display: block;
  padding: 11px 13px;
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}

.lang-switch ul a:hover {
  background: var(--paper-deep);
  color: var(--ink);
}

/* La langue affichée : cochée, en indigo, et elle ne se survole pas comme
   les autres — on ne « choisit » pas la page où l'on est déjà. */
.lang-switch ul a[aria-current="true"] {
  background: var(--indigo-soft);
  color: var(--indigo);
  font-weight: 750;
}

.lang-switch ul a[aria-current="true"]::after {
  float: right;
  content: "\2713";
}

.lang-switch ul [lang="ar"] {
  font-size: 16px;
}

@media (max-width: 1080px) {
  /* Le sélecteur reste visible quand la navigation passe au burger : c'est la
     seule commande qui ne doit jamais se cacher dans un menu déroulé, sinon un
     parent arabophone ne trouve pas sa version. */
  .nav-shell {
    grid-template-columns: 1fr auto auto;
  }

  .lang-switch summary span {
    display: none;
  }

  .lang-switch summary {
    padding: 10px 12px;
  }

  .lang-switch summary svg {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DROITE-À-GAUCHE — page arabe. `dir="rtl"` retourne le flux du texte et les
   grilles, mais PAS les règles écrites en left/right physiques : le fichier en
   compte 34. On ne les convertit pas toutes en propriétés logiques — trop de
   surface pour un gain nul sur quatre langues LTR. On bascule ce qui se voit.
   ═══════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] .skip-link {
  right: 12px;
  left: auto;
}

[dir="rtl"] .check-list li {
  padding-right: 30px;
  padding-left: 0;
}

[dir="rtl"] .check-list li::before {
  right: 0;
  left: auto;
}

/* Filets d'accent : ils marquent le début de la ligne, donc la droite. */
[dir="rtl"] .oldways-punch {
  border-right: 3px solid var(--indigo);
  border-left: 0;
  border-radius: var(--radius-small) 0 0 var(--radius-small);
}

[dir="rtl"] .teen-list li {
  padding-right: 20px;
  padding-left: 0;
  border-right: 2px solid var(--line-strong);
  border-left: 0;
}

/* Accordéon : le marqueur + / × passe à gauche, le rembourrage avec lui. */
[dir="rtl"] .faq-list summary {
  padding: 20px 26px 20px 68px;
}

[dir="rtl"] .faq-list summary::after {
  right: auto;
  left: 22px;
}

/* Haut de page : notes flottantes, mascotte, loupe. */
[dir="rtl"] .note-method {
  right: -36px;
  left: auto;
}

[dir="rtl"] .note-parent {
  left: -42px;
  right: auto;
}

[dir="rtl"] .hero-mascot {
  left: -22px;
  right: auto;
  transform: scaleX(-1);
}

[dir="rtl"] .shot-zoom {
  left: 0;
  right: auto;
}

[dir="rtl"] .final-panel::before {
  right: -60px;
  left: auto;
}

/* Sélecteur de langue : le panneau s'ouvre du côté du texte. */
[dir="rtl"] .lang-switch ul {
  left: 0;
  right: auto;
}

[dir="rtl"] .lang-switch ul a[aria-current="true"]::after {
  float: left;
}

/* Les cercles décoratifs du fond marine du haut de page. */
[dir="rtl"] .product-backdrop::before {
  left: 28px;
  right: auto;
}

[dir="rtl"] .product-backdrop::after {
  left: 90px;
  right: auto;
}

/* Le triangle de lecture ne se retourne pas : les commandes de lecture
   restent orientées dans le sens du média, pas dans celui du texte. */
[dir="rtl"] .text-play span {
  padding-right: 2px;
  padding-left: 0;
}

@media (min-width: 1081px) {
  /* Les notes du haut de page se logent dans la gouttière : à droite en RTL. */
  [dir="rtl"] .floating-note {
    left: auto;
    right: calc(-1 * var(--note-inset));
  }
}

@media (max-width: 1080px) {
  [dir="rtl"] .note-method {
    grid-column: 2;
  }

  [dir="rtl"] .note-parent {
    grid-column: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHOTOS DE FAMILLE — générées par Codex, prolongement de la campagne vidéo.
   Les captures prouvent le produit ; ces images disent à qui il s'adresse.
   ═══════════════════════════════════════════════════════════════════════════ */

.scene {
  position: relative;
  overflow: hidden;
}

.scene img {
  display: block;
  width: 100%;
  height: clamp(320px, 46vw, 620px);
  object-fit: cover;
  object-position: center 42%;
}

/* Le texte se pose sur le tiers droit, laissé libre à la génération. */
.scene-copy {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(560px, 46%);
  padding: clamp(26px, 3.4vw, 52px);
}

.scene-copy .eyebrow {
  color: var(--copper);
  margin-bottom: 12px;
}

.scene-copy .eyebrow::before {
  background: var(--copper);
}

.scene-copy h2 {
  max-width: 15ch;
  color: var(--navy);
  font-size: clamp(26px, 3.2vw, 46px);
}
/* Le bandeau est désormais une illustration au trait sur fond lavande : le
   texte passe sur une carte claire plutôt qu'en blanc sur une photo sombre. */
/* L'illustration se lit en entier (trois familles) ; le texte vient dessous,
   sur le même lavande, à toutes les largeurs. */
.scene { background: #e9e4ff; }
.scene img { height: auto; max-height: 620px; object-fit: contain; object-position: center bottom; }
.scene-copy { position: static; width: 100%; background: #e9e4ff; padding-top: 18px; }
@media (max-width: 900px) {
  .scene-copy { background: #e9e4ff; }
}

.feature-photo {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 24px;
  border-radius: var(--radius-medium);
  object-fit: cover;
}

@media (max-width: 900px) {
  /* En colonne unique, le texte ne tient plus sur le tiers droit : il passe
     sous l'image, sur un aplat, plutôt que de se poser sur un visage. */
  .scene-copy {
    position: static;
    width: 100%;
    background: var(--navy);
  }

  .scene img {
    height: clamp(260px, 62vw, 420px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DU CP À LA TERMINALE — la page l'affirmait sans jamais le montrer. Quatre
   âges, quatre foyers, quatre rôles de parent. C'est aussi ce qui porte la
   diversité d'origines : elle est un fait dans les images, pas un sujet dans
   le texte.
   ═══════════════════════════════════════════════════════════════════════════ */

.ages {
  background-image: linear-gradient(180deg, var(--paper) 0%, var(--white) 34%);
}

.ages-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.ages-grid figure {
  min-width: 0;
  margin: 0;
}

.ages-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-small);
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}

.ages-grid figcaption {
  display: grid;
  gap: 3px;
  margin-top: 16px;
}

.ages-grid figcaption b {
  color: var(--indigo);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.ages-grid figcaption span {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.5;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ages-grid figure:hover img {
    transform: translateY(-6px);
    box-shadow: var(--shadow-large);
  }
}

@media (max-width: 900px) {
  .ages-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
  }
}

@media (max-width: 460px) {
  /* À 320 px, quatre demi-colonnes tombent à 140 px : les visages n'y sont
     plus lisibles. Une seule colonne, et on fait défiler. */
  .ages-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA DIFFÉRENCE PASSE EN SOMBRE

   Quatrième reprise de cette section. Les trois précédentes ont changé la MISE
   EN PAGE — deux cartes, puis une carte surélevée, puis la charnière « Au
   contrôle, ». Le fondateur a redemandé la même chose à chaque fois : « il faut
   plus highlighter ça », « ça c'est pas top », « ça doit ressortir, attirer
   l'œil ». Le diagnostic n'était donc pas la mise en page.

   La page est crème du haut en bas. Elle n'a qu'UN seul moment sombre, le
   panneau final — et c'est le seul endroit qui a de la présence. Tant que
   l'argument central reste de l'encre sur de la crème, il a la même voix que
   les onze autres sections et l'œil glisse dessus. On ne change pas la
   géométrie, qui est juste : on change la MATIÈRE.

   Ce bloc ne fait que re-teinter. Toute la grille, la charnière, les fils
   verticaux et le repli mobile restent définis plus haut et ne sont pas
   retouchés — c'est ce qui permet à la refonte de tenir dans les cinq langues
   et en RTL sans être rejouée.

   Contrastes vérifiés sur --navy-deep var(--navy-deep) :
     blanc 15,9:1 · --copper-soft 12,6:1 · blanc 72 % 9,1:1
     --green sur --green-soft (le panneau clair) 7,4:1
   ═══════════════════════════════════════════════════════════════════════════ */

.difference {
  position: relative;
  isolation: isolate;
  background-color: var(--navy-deep);
  background-image:
    radial-gradient(76% 58% at 78% 0%,
      color-mix(in srgb, var(--indigo) 46%, transparent) 0%, transparent 62%),
    radial-gradient(62% 52% at 8% 100%,
      color-mix(in srgb, var(--green) 26%, transparent) 0%, transparent 58%),
    linear-gradient(178deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: var(--white);
}

/* Deux filets clairs en lisière : la bascule sombre est franche, pas une zone
   qui bave sur les sections voisines. */
.difference::before,
.difference::after {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 2;
  height: 1px;
  background: color-mix(in srgb, var(--white) 16%, transparent);
  content: "";
}

.difference::before { top: 0; }
.difference::after  { bottom: 0; }

/* ── Le chapeau ── */

.difference .eyebrow {
  color: var(--copper-soft);
}

.difference .eyebrow::before {
  background: var(--copper-soft);
}

.difference .section-heading h2 {
  color: var(--white);
}

.difference .section-lead {
  color: color-mix(in srgb, var(--white) 76%, transparent);
}

.difference .section-lead strong {
  color: var(--white);
  font-weight: 750;
}

/* ── Les jetons de la suite, retournés pour le fond sombre ── */

.difference .suite {
  --suite-rule: color-mix(in srgb, var(--white) 42%, transparent);
  /* Le rouge de marque est trop sombre sur la marine : il disparaîtrait. On
     garde sa teinte, éclaircie jusqu'à passer le contraste. */
  --suite-stop: color-mix(in srgb, var(--red) 42%, var(--white));
}

/* CE SOIR, à gauche : toujours aucune surface. Du texte clair sur le fond. */
.difference .suite-now.is-answer .suite-label {
  color: color-mix(in srgb, var(--red) 34%, var(--white));
}

.difference .suite-now.is-answer .suite-title {
  color: color-mix(in srgb, var(--white) 88%, transparent);
}

.difference .suite-now.is-answer .suite-list li {
  color: color-mix(in srgb, var(--white) 68%, transparent);
}

.difference .suite-now.is-answer .suite-list li::before {
  background: color-mix(in srgb, var(--white) 46%, transparent);
}

/* CE SOIR, à droite : le panneau vert pâle devient une LUMIÈRE sur la marine.
   C'est le même jeton qu'avant (--green-soft) : sur crème il était discret,
   sur marine il éclaire. La matière fait le travail, pas une couleur de plus. */
.difference .suite-now.is-binomino {
  border-inline-start-color: color-mix(in srgb, var(--green) 55%, var(--white));
  box-shadow: 0 24px 60px color-mix(in srgb, var(--navy-deep) 60%, transparent);
}

.difference .suite-now.is-binomino .suite-title,
.difference .suite-now.is-binomino .suite-list li {
  color: var(--navy-deep);
}

.difference .suite-now.is-binomino .suite-label {
  color: var(--green);
}

.difference .suite-now.is-binomino::after {
  background: color-mix(in srgb, var(--green) 55%, var(--white));
}

/* ── La charnière ── */

.difference .suite-hinge-word {
  /* Le mot masque la barre derrière lui : son fond doit être celui de la
     section, pas du blanc. Sans cette ligne il apparaissait en pastille
     blanche au milieu du sombre. */
  background: transparent;
  color: var(--white);
}

/* La barre passe derrière le mot ; sur fond transparent il faut donc la couper
   pour de bon. Deux segments plutôt qu'un trait continu masqué. */
.difference .suite-hinge-bar {
  background: linear-gradient(
    to right,
    var(--suite-rule) 0%,
    var(--suite-rule) calc(50% - 8.5em),
    transparent calc(50% - 8.5em),
    transparent calc(50% + 8.5em),
    var(--suite-rule) calc(50% + 8.5em),
    var(--suite-rule) 100%
  );
}

.difference .suite-hinge::after {
  background: color-mix(in srgb, var(--green) 55%, var(--white));
}

/* ── LA CONSÉQUENCE ── */

.difference .suite-then.is-answer {
  border-bottom-color: var(--suite-stop);
  color: color-mix(in srgb, var(--white) 58%, transparent);
}

/* Le point d'arrivée. Sur crème c'était un bloc vert foncé ; sur marine il
   s'éteindrait. Il devient le seul objet CLAIR de la section : c'est lui qui
   attire l'œil, et l'argument est gagné avant d'être lu. */
.difference .suite-then.is-binomino {
  background-color: var(--green-soft);
  background-image: linear-gradient(
    152deg,
    var(--white) 0%,
    var(--green-soft) 52%,
    color-mix(in srgb, var(--green-soft) 82%, var(--green)) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--white) 30%, transparent),
    0 32px 90px color-mix(in srgb, var(--navy-deep) 74%, transparent);
  color: var(--green);
}

.difference .suite-then.is-binomino::before {
  background-image: radial-gradient(
    78% 62% at 84% 2%,
    color-mix(in srgb, var(--white) 70%, transparent) 0%,
    transparent 64%
  );
}

/* Sous 900 px la charnière change de rôle : le mot pivot est masqué et chaque
   chute reprend « Au contrôle, » pour son compte. Deux conséquences que la
   bascule en sombre imposait de traiter. */
@media (max-width: 900px) {
  /* 1. Le mot n'est plus là : la barre n'a plus à lui ménager un trou. */
  .difference .suite-hinge-bar {
    background: var(--suite-rule);
  }

  /* 2. Le rappel « Au contrôle, » de la chute gagnante était en blanc, hérité
        du temps où le panneau était vert foncé. Le panneau est désormais
        clair : en blanc, la ligne devenait illisible. */
  .difference .suite-then.is-binomino .suite-lead {
    color: color-mix(in srgb, var(--green) 78%, var(--white));
  }

  .difference .suite-then.is-answer .suite-lead {
    color: color-mix(in srgb, var(--white) 54%, transparent);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA SIGNATURE — « Les devoirs, à deux. »

   Posée SOUS le nom et non à côté : c'est ce qui la fait lire comme la
   définition de la marque plutôt que comme un élément de menu. Elle porte
   l'idée de duo — le cœur de Binomino — sans employer le mot « binôme », qui
   est une marque verbale concurrente vivante dans les mêmes classes.

   Volontairement discrète : plus petite que le nom, en graisse normale, en gris.
   Une signature qui crie concurrence le nom au lieu de l'ancrer.
   ═══════════════════════════════════════════════════════════════════════════ */

.brand-stack {
  display: inline-flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.brand-name {
  line-height: 1.05;
}

.brand-line {
  color: var(--ink-muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
}

.brand-footer .brand-line {
  color: color-mix(in srgb, var(--white) 62%, transparent);
}

/* L'en-tête est une grille à quatre colonnes automatiques : marque, barre de
   navigation, sélecteur de langue, menu. La signature élargit la PREMIÈRE, et
   c'est la deuxième qui paie. Mesuré à 1075 px avec la signature la plus longue
   des cinq langues — le portugais, « Trabalhos de casa, a dois. », 151 px
   contre 108 en français : la barre tombait exactement à sa largeur minimale,
   zéro marge, et trois éléments sortaient de l'en-tête.

   Somme des colonnes avec la signature portugaise : 207 + 694 + 141 + 97, plus
   trois gouttières de 18 et 48 px de marges de coque — il faut 1241 px. En
   dessous, la signature quitte l'en-tête.

   Elle ne quitte JAMAIS le pied de page, qui a toute la largeur, ni le titre de
   l'onglet, ni la carte de partage : c'est là que se fait l'essentiel de
   l'ancrage. Dans l'en-tête elle n'est qu'un rappel, sur les écrans qui en ont
   la place. */
@media (max-width: 1240px) {
  .site-header .brand-line {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA CHARNIÈRE ET LES FILS — géométrie reprise à la racine

   Le fondateur : « c'est brouillon, les traits ne sont pas alignés, c'est
   entrecoupé ». Trois défauts distincts, tous mesurés :

   1. Le raccord vert sous la barre était posé à
      `calc(var(--suite-col-a) + var(--suite-cgap))`, une APPROXIMATION de la
      première colonne de la grille (0,43 fr écrit en longueur). À 1680 px il
      tombait à 777 px quand la bordure du panneau au-dessus était à 776 : 1 px
      d'écart sur un trait de 2 px, donc un décrochement visible. Il est
      désormais porté par la chute gagnante elle-même, à `inset-inline-start: 0`
      — la grille donne la position, plus aucun calcul ne l'estime.

   2. La barre creusait le trou du mot avec un dégradé en `em`. La découpe ne
      correspondait ni à la largeur réelle du mot ni aux colonnes. Remplacée par
      deux pièces en flex qui se partagent la place restante.

   3. Le fil de gauche était un dégradé qui s'éteignait avant la barre. Voulu
      comme « la ligne s'arrête », lu comme une ligne cassée. Supprimé : la
      bordure du panneau s'arrête net avec le panneau, et c'est tout. L'ABSENCE
      de trait dit la même chose sans ressembler à un défaut d'affichage.

   Résultat : UNE seule verticale traverse la section de bout en bout, la verte.
   ═══════════════════════════════════════════════════════════════════════════ */

.suite-hinge {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 30px);
  place-items: initial;
}

.suite-hinge-bar {
  /* `1 1 0` et non `1 1 auto` : les deux pièces partent de zéro et se partagent
     exactement la place restante, donc le mot est centré quelle que soit sa
     longueur — « Au contrôle, » en français, « في الاختبار، » en arabe. */
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 1px;
  grid-area: auto;
}

.suite-hinge-word {
  flex: 0 0 auto;
  padding-inline: 0;
  /* Plus rien à masquer : la barre s'arrête d'elle-même de part et d'autre. */
  background: none;
  grid-area: auto;
}

/* Le fil de gauche disparaît — voir le point 3 ci-dessus. */
.suite-now.is-answer::after {
  content: none;
}

/* Le raccord vert quitte la charnière pour la chute qu'il rejoint : la position
   n'est plus estimée, elle est héritée de la colonne. */
.suite-hinge::after {
  content: none;
}

.suite-then.is-binomino {
  /* La pièce déborde vers le haut : il faut que ça reste visible. */
  overflow: visible;
}

.suite-then.is-binomino::after {
  position: absolute;
  bottom: 100%;
  inset-inline-start: 0;
  width: 2px;
  height: var(--suite-gap);
  background: var(--green);
  content: "";
  transform-origin: bottom center;
}

.difference .suite-then.is-binomino::after {
  background: color-mix(in srgb, var(--green) 55%, var(--white));
}

/* Sous 900 px les colonnes s'empilent : plus aucun fil vertical n'a de sens,
   et les deux pièces de barre se rejoignent en un seul trait continu puisque
   le mot est masqué. */
@media (max-width: 900px) {
  .suite-then.is-binomino::after {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RÉSEAUX SOCIAUX — état « bientôt »

   Les comptes n'existent pas encore. Ce sont donc des <span role="img">, pas
   des <a> : une icône cliquable qui ne mène nulle part est pire que pas
   d'icône, et un lecteur d'écran annoncerait quatre liens morts. Même parti
   que les pastilles App Store / Google Play, déjà en « bientôt » sur ce pied
   de page — le site ne promet rien qui n'existe pas.

   Pour activer un compte : remplacer le <span> par <a href="…">, retirer
   `is-soon`, et adapter l'aria-label. Rien d'autre.
   ═══════════════════════════════════════════════════════════════════════════ */

.socials-label {
  margin-top: 26px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--white) 52%, transparent);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  text-decoration: none;
  transition: transform 240ms var(--ease-out), background-color 240ms ease,
    border-color 240ms ease;
}

.social svg {
  width: 20px;
  height: 20px;
}

/* En attente : l'icône est là, visiblement en retrait, et ne réagit pas au
   survol — rien ne suggère qu'on puisse cliquer. */
.social.is-soon {
  color: color-mix(in srgb, var(--white) 58%, transparent);
  cursor: default;
}

/* Le survol n'est donné qu'aux vrais liens, quand ils arriveront. */
@media (hover: hover) {
  a.social:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES LANGUES — une bande sous l'en-tête, et une section à part entière

   Les cinq langues étaient une carte parmi cinq dans le bento « Au quotidien ».
   C'est pourtant la promesse qui DÉCIDE pour une partie du public : un parent
   qui lit mal le français ne cherche pas « une app de devoirs », il cherche à
   comprendre ce que son enfant doit faire ce soir. Enterrée au milieu d'une
   grille, l'information n'était vue que par ceux qui n'en avaient pas besoin.

   Trois registres de fond cohabitent désormais sur la page, et c'est voulu :
   crème pour le récit, marine pour « La différence », indigo pâle ici. Trois
   moments, trois matières — pas douze sections identiques.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La bande, juste sous l'en-tête ── */

.langbar {
  border-bottom: 1px solid color-mix(in srgb, var(--indigo) 16%, transparent);
  background: linear-gradient(
    180deg,
    var(--indigo-soft) 0%,
    color-mix(in srgb, var(--indigo-soft) 55%, var(--paper)) 100%
  );
}

.langbar-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-block: 11px;
  column-gap: 16px;
  row-gap: 8px;
}

.langbar-label {
  color: var(--indigo);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.langbar-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  column-gap: 10px;
  row-gap: 6px;
  list-style: none;
}

/* Un point de séparation entre les langues plutôt qu'un trait : le fondateur
   ne veut pas de filets, et une puce se lit comme une énumération. */
.langbar-list li {
  position: relative;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.langbar-list li + li {
  padding-inline-start: 16px;
}

.langbar-list li + li::before {
  position: absolute;
  top: 50%;
  inset-inline-start: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--indigo) 42%, transparent);
  content: "";
  transform: translateY(-50%);
}

.langbar-link {
  color: var(--indigo);
  font-size: 13.5px;
  font-weight: 750;
  text-decoration: none;
  text-underline-offset: 4px;
}

.langbar-link:hover {
  text-decoration: underline;
}

/* Sous 720 px, l'énumération passe seule sur sa ligne et le lien disparaît :
   la section est de toute façon à un doigt dans le menu. */
@media (max-width: 720px) {
  .langbar-shell {
    column-gap: 12px;
  }

  .langbar-label,
  .langbar-link {
    display: none;
  }

  .langbar-list li {
    font-size: 13.5px;
  }
}

/* ── La section ── */

.langues {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--indigo-soft) 62%, var(--paper)) 0%,
    var(--indigo-soft) 46%,
    color-mix(in srgb, var(--indigo-soft) 70%, var(--white)) 100%
  );
}

.langues .section-heading {
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
}

.langues .section-lead {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.5vw, 20px);
}

/* Les cinq langues en grand : c'est la pièce que le fondateur voulait voir
   « de façon visible ». Elles ne sont pas cliquables — ce sont les langues de
   l'APPLICATION, pas celles du site. Le sélecteur du site est dans l'en-tête. */
.langues-jetons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: clamp(30px, 3.6vw, 46px) 0 0;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.langues-jetons li {
  padding: 11px 20px;
  border: 1px solid color-mix(in srgb, var(--indigo) 22%, transparent);
  border-radius: 999px;
  background: var(--white);
  box-shadow: var(--shadow-small);
  color: var(--navy);
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 750;
  letter-spacing: -0.018em;
}

.langues-texte {
  max-width: 62ch;
  margin: clamp(26px, 3vw, 38px) auto 0;
  color: var(--ink-soft);
  font-size: clamp(16.5px, 1.4vw, 18.5px);
  line-height: 1.62;
  text-align: center;
}

.langues-texte strong {
  color: var(--ink);
  font-weight: 750;
}

.langues .language-previews {
  margin-top: clamp(34px, 4vw, 54px);
}

.langues-preuve {
  margin: clamp(20px, 2.4vw, 30px) auto 0;
  color: var(--ink-muted);
  font-size: 14.5px;
  text-align: center;
}

/* L'invitation au survol n'a de sens que là où le survol existe. Elle vient du
   HTML et non d'un `content:` CSS, pour être traduite comme le reste. */
.langues-survol {
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 650;
  text-align: center;
}

@media (hover: none) {
  .langues-survol {
    display: none;
  }
}

/* ── L'onglet de saison ───────────────────────────────────────────────────
   Le fondateur demandait un onglet qui clignote. Un clignotement de plus de
   cinq secondes doit pouvoir être interrompu (WCAG 2.2.2), et un clignotement
   soutenu peut déclencher une crise chez une personne photosensible
   (WCAG 2.3.1). D'où une pulsation FINIE : trois cycles, 4,2 s au total, puis
   plus rien. L'œil est attrapé, personne n'est mis en danger, et le point
   d'accent reste ensuite en place — c'est lui qui porte l'information.

   L'attribut est posé par le script pendant la saison seulement : hors été,
   l'onglet redevient un onglet ordinaire, sans qu'on ait à y toucher. */
.nav-saison[data-en-saison] {
  color: var(--copper);
  font-weight: 750;
}

.nav-saison[data-en-saison]::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-start: 6px;
  border-radius: 999px;
  background: var(--copper);
  vertical-align: 1px;
}

@media (prefers-reduced-motion: no-preference) {
  .nav-saison[data-en-saison]::after {
    animation: saison-pouls 1400ms var(--ease-out) 3;
  }
}

@keyframes saison-pouls {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(156, 69, 0, 0);
  }
  35% {
    box-shadow: 0 0 0 5px rgba(156, 69, 0, 0.22);
  }
}