/* ===== LA FEUILLE DE STYLE DE RECALL NOTE =====
   ⚠️ **Sortie du fichier le 26 août, quand une DEUXIÈME page est née**
   (`careers.html`). Elle vivait en `<style>` dans `index.html` : la dupliquer
   aurait garanti que les deux pages divergent au premier réglage.
   ⚠️ **Ce n'est PAS une requête externe** : le fichier est servi depuis la même
   origine que la page, au même titre que `fonts/` et `captures/`. La règle
   « zéro requête externe » vise les CDN et les polices distantes, pas les
   fichiers du dossier.
   ⚠️ Les chemins des polices restent relatifs à CE fichier — donc à `landing/`,
   comme avant. */
/* ===== LA POLICE — Inter, hébergée ICI, aucune requête externe =====
   ⚠️ Aymane, 25 août : Clash Display / Clash Grotesk (les polices
   d'OpenNote) = « catastrophique ». On revient à **Inter**, pour tout.
   ⚠️ **Elle est POSÉE, pas seulement déclarée** : `CLAUDE.md` note que la
   pile de l'application « déclare Inter mais rend system-ui » — Inter n'est
   pas installée sur le Mac et les requêtes externes sont interdites. Deux
   fichiers ici, et elle prend pour de vrai.
   ⚠️ **Fichiers VARIABLES** (Google Fonts v20) : un seul par sous-ensemble
   couvre 100→900, d'où `font-weight: 100 900`. Déclarer un poids fixe
   ferait synthétiser le gras par le navigateur.
   Inter est sous SIL Open Font License — hébergement autorisé.
   `latin-ext` porte les accents dont une version française aura besoin. */
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  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: 'Inter';
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  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;
}

/* ===== DM Serif Text — les TITRES =====
   ⚠️ Fournie par Aymane (`~/Downloads/DM_Serif_Text/`, 25 août) : « pour le
   texte du hero et certains titres, utilise cette typo ».
   Convertie en woff2 (30 Ko la coupe, contre 74 Ko en TTF) ; la licence
   voyage AVEC la police, c'est ce que l'OFL exige : `fonts/DM_Serif_Text-OFL.txt`.
   ⚠️ **Elle n'a QU'UN poids, 400.** Toute déclaration en 600/700 ferait
   SYNTHÉTISER le gras par le navigateur — un faux gras baveux. Les titres
   qui la portent passent donc en `font-weight: 400`, et c'est sa taille,
   pas sa graisse, qui fait la hiérarchie. */
@font-face {
  font-family: 'DM Serif Text';
  src: url('fonts/dm-serif-text-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Serif Text';
  src: url('fonts/dm-serif-text-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ===== Tokens — les seules couleurs de la page ===== */
:root {
  --encre: #1A1A19;        /* texte */
  --secondaire: #6B6A66;   /* texte d'appui */
  --fond: #F7F7F5;         /* le fond de l'app */
  --carte: #FFFFFF;        /* les cadres, comme les cartes du produit */
  --coquille: #EFEFED;     /* bouton secondaire, chips */
  --filet: #E6E5E2;        /* bordures fines */
  /* ⚠️ **LE BLEU-GRIS, relevé sur le bouton « New » de l'application**
     (Aymane, 25 août, capture à l'appui — pixel dominant `#618693`).
     Il remplace le rouge terre `#DA5742` du canvas.
     ⚠️ **Le REMPLISSAGE des boutons n'est pas cette teinte-là** : mesuré,
     blanc sur `#618693` vaut **3,93:1**, sous le seuil AA de 4,5 pour du
     texte de 17 px semi-gras ; sur `#587B87` il vaut **4,57:1**. La teinte
     de marque ne bouge pas d'un octet — c'est le fond du bouton qui
     s'assombrit de deux crans. Ne pas les « harmoniser » en croyant
     réparer une incohérence. */
  /* ⚠️ **DEUX RÔLES, DEUX VALEURS — et c'est le fond de la correction.**
     Le bouton portait `#587B87`, la teinte relevée sur une capture du
     PRODUIT. Un mi-ton en aplat sur un grand fond clair donne un bouton
     terne, et il ne tenait AA que de justesse (4,57:1). L'accent reste la
     teinte de marque, qui vit dans le TRAIT ; le bouton, lui, prend un
     pétrole profond : blanc dessus à **13,5:1**, et il se détache du fond
     sans crier. Une couleur pour se faire voir, une couleur pour marquer. */
  --accent: #618693;       /* LA teinte de marque : le trait de surligneur */
  --accent-plein: #16323B; /* le remplissage des boutons — 13,52:1 */
  --accent-fort: #0E2229;  /* le survol : il fonce, il ne délave pas */
  --surligneur: rgba(97, 134, 147, 0.22); /* le trait, teinte de l'accent */

  /* ——— LE BLOC DE CLÔTURE (26 août) ———
     ⚠️ **Trois jetons, pas une couleur en dur**, parce que la teinte du bloc
     décide AUSSI de la couleur de son texte : les changer séparément est le
     chemin le plus court vers un texte gris clair sur fond clair. Ils bougent
     ensemble ou pas du tout.
     ⚠️⚠️ **LA TEINTE N'EST PAS INVENTÉE : c'est celle de la PREMIÈRE BANDE**
     (`--teinte: #B9CBD1`, `--encre-bloc: #2C3E45`, posées en ligne sur la
     section « Surligner ton cours »). La page parle DÉJÀ le langage du bloc
     teinté — trois bandes, une par onglet. Un quatrième bloc dans une teinte
     à lui aurait été une langue de plus sur une page qui en a déjà une.
     Fermer sur la teinte de la bande principale, c'est refermer la boucle sur
     la promesse d'ouverture. */
  --cloture-fond: #B9CBD1;
  --cloture-encre: #2C3E45;
  /* ⚠️ **#41565F ET PAS #445A63, et c'est mesuré.** La teinte d'origine valait
     **4,34:1** sur `--cloture-fond` — sous le seuil AA de 4,5 pour du texte de
     16 px, qui est exactement ce que porte `.cloture p`. Quatre pour cent plus
     sombre suffit : **4,60:1**, à teinte constante.
     ⚠️ **C'est la TROISIÈME fois que ce piège se pose sur un bloc teinté** :
     les paragraphes des bandes d'onglet étaient tombés à 4,30 et 4,47 en
     reprenant le « 80 % de l'encre du bloc » d'OpenNote, et étaient passés à
     85 %. Une encre secondaire posée sur un aplat clair ne se choisit pas à
     l'œil — elle se calcule. */
  --cloture-encre-2: #41565F;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  /* `<html>` rendait en Times : la pile n'était posée que sur `body`, donc
     tout ce qui échappe à cet héritage retombait sur la serif du
     navigateur. Relevé à l'audit. */
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  scroll-behavior: smooth; /* pour l'ancre #demo — coupé si reduced-motion */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--fond);
  color: var(--encre);
  /* 16 px / 24 px : leur réglage de corps, mesuré. */
  line-height: 1.5;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

/* Sélectionner le texte EST le geste du produit */
::selection {
  background: var(--surligneur);
  color: var(--encre);
}

/* ===== Focus : anneau visible partout, jamais outline:none ===== */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 3px;
  border-radius: 10px;
}

a, button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Lien d'évitement : visible seulement au focus clavier */
.evitement {
  position: absolute;
  left: 1rem;
  top: -100px;
  background: var(--encre);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  z-index: 10;
}
.evitement:focus-visible { top: 1rem; }

/* ===== Barre de navigation ===== */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
}
.nav .marque {
  /* Le nom porte la même serif que les titres (Aymane, 25 août).
     ⚠️ `font-weight: 400` — DM Serif Text n'a pas d'autre poids, et 700
     ferait synthétiser un faux gras ; la taille compense.
     ⚠️ Le `letter-spacing` était déclaré DEUX FOIS ici (résidu du canvas) :
     la première ligne ne servait à rien, la seconde gagnait. */
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.004em;
  color: var(--encre);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
/* L'ancre — le dessin d'Aymane, détouré (fond blanc rendu transparent).
   ⚠️ Hauteur en `em` : elle suit la taille du nom, jamais l'inverse.
   ⚠️ `alt=""` : le nom est écrit juste à côté — le décrire une seconde fois
   ferait dire deux fois « Recall Note » à un lecteur d'écran. */
.logo-marque {
  height: 1.05em; /* un cran sous la hauteur du mot : l'ancre accompagne le nom, elle ne le domine pas */
  width: auto;
  display: block;
  flex: none;
}

/* ===== Boutons ===== */
.bouton {
  display: inline-block;
  background: var(--encre);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  /* ⚠️ **LE REMPLISSAGE EST L'ENCRE, pas la teinte de marque** (Aymane,
     26 août : « mets en noir le rectangle »). Le pétrole `#16323B` sort du
     bouton ; l'accent bleu-gris reste ce qu'il a toujours été, le TRAIT de
     surligneur. Blanc sur `#1A1A19` : 17,6:1. */
  /* ⚠️ **400, pas 600.** Aymane, 26 août : une typo plus fine sur le bouton du
     hero. C'est aussi la mesure relevée chez OpenNote — leurs boutons sont en
     400, comme tout le reste de leur page. Appliqué à TOUS les boutons : deux
     graisses de bouton sur une même page se remarquent sans qu'on sache
     pourquoi, et les boutons des panneaux étaient déjà en 400. */
  font-weight: 400;
  line-height: 1.3;
  transition: background-color 120ms ease, transform 80ms ease;
}
/* le survol FONCE l'accent, il ne délave pas */
.bouton:hover { background: #000; }
.bouton:active { transform: translateY(1px); }

/* ⚠️ **LE BOUTON DE LA NAV EST UN FILET, PAS UN APLAT** (Aymane, 26 août,
   capture d'OpenNote à l'appui). Le motif est bon : un aplat foncé en haut à
   droite de CHAQUE écran tire l'œil en permanence et vole la vedette au vrai
   appel à l'action, celui qui suit la démonstration. En filet, il reste
   disponible sans réclamer. */
.bouton--petit {
  background: transparent;
  color: var(--encre);
  border: 1px solid var(--filet);
  font-size: 0.9375rem;
  /* 0,72rem rendait 43 px, un pixel sous le minimum tactile ; le filet retire
     encore 2 px, d'où 0,8rem. */
  padding: calc(0.8rem - 1px) 1.05rem;
}
.bouton--petit:hover { background: var(--coquille); border-color: #D9D8D4; }
.bouton--principal {
  /* 16 px et non 17 : un appel à l'action n'a pas besoin d'être plus gros que
     le texte qu'il conclut pour être le premier vu — sa couleur suffit. */
  font-size: 1rem;
  padding: 0.8rem 1.4rem;
}

/* Le bouton SECONDAIRE du hero — coquille, filet, mêmes rayons */
.bouton-second {
  display: inline-block;
  background: var(--carte);
  color: var(--encre);
  border: 1px solid var(--filet);
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
  line-height: 1.3;
  font-size: 1.0625rem;
  padding: calc(0.85rem - 1px) 1.5rem; /* le filet compense pour la même hauteur */
  transition: background-color 120ms ease, transform 80ms ease;
}
.bouton-second:hover { background: #E6E5E2; }
.bouton-second:active { transform: translateY(1px); }

/* ===== Hero ===== */
.hero {
  max-width: 46rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 0;
  text-align: center;
}
/* Les titres passent en serif LOCAL (inspirations Simétrica / cartes serif) :
   l'accent éditorial sans une requête réseau */
.hero h1 {
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400; /* elle n'existe qu'en 400 — voir le bloc @font-face */
  /* 48 px à 1440, leur taille de H1. */
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3rem);
  line-height: 1.08;
  /* Un serrage à peine négatif : une serif de titre a déjà son rythme, et
     le -0.028em réglé pour Inter lui écraserait les empattements. */
  letter-spacing: -0.008em;
  text-wrap: balance;
}
/* ⚠️ **LE TITRE SE COUPE ENTRE SES DEUX PHRASES, PAS AU MILIEU D'UNE.**
   `text-wrap: balance` cherche des lignes de longueur ÉGALE — il ne sait rien
   des phrases. En français il coupait « Prends ce qui / compte. Retiens
   tout. », ce qui se lit comme une faute. Chaque phrase devient un
   `inline-block` : le point de coupure préféré est l'espace entre les deux.
   ⚠️ **Et ça reste sûr sur un téléphone** : un `inline-block` trop large pour
   la place se réduit à la largeur disponible et coupe À L'INTÉRIEUR — mesuré à
   390 px, la phrase passe sur deux lignes au lieu de déborder. C'est ce qui
   distingue cette solution d'un `<br>` (qui casserait sur mobile) et d'un
   `white-space: nowrap` (qui déborderait). */
.hero h1 .phrase { display: inline-block; }
/* Le mot marqué au surligneur : le fond déborde légèrement, comme un vrai trait */
.marque-trait {
  background: var(--surligneur);
  color: var(--encre);
  padding: 0.04em 0.14em;
  margin: -0.04em -0.06em;
  border-radius: 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero .sous-ligne {
  margin-top: 1.25rem;
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.3rem);
  color: var(--secondaire);
}
.hero .cta-bloc { margin-top: 2rem; }
.cta-paire {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.hero .micro-ligne {
  /* ⚠️ **1,5 rem, pas 0,7.** Aymane, 26 août : la ligne était « contre » le
     bouton. À 11 px d'écart, elle se lisait comme un morceau du bouton — une
     légende collée dessous — au lieu d'une réassurance qui se lit seule.
     ⚠️ Elle ne doit pas s'en détacher non plus : au-delà de ~2 rem elle
     appartient au vide entre le bouton et la capture, et cesse de répondre à
     la question qu'on se pose au moment de cliquer. */
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--secondaire);
}

/* ⚠️ **LES GRIFFONNAGES SONT SUPPRIMÉS** (Aymane, 26 août) : poulie F=mg,
   ADN, benzène, champ de charges, parabole. Ils venaient de la direction
   artistique « la marge du cahier » du 11 août. Ne pas les réintroduire.
   `main { position: relative }` reste : il ne servait qu'à les ancrer, mais
   il ne coûte rien et d'autres positions absolues pourraient en dépendre. */
main { position: relative; }

/* ===== L'avion en papier du CTA final — le geste d'envoi ===== */
.avion-final {
  display: block;
  margin: 0 auto 0.75rem;
  width: 150px;
  height: auto;
}

/* ===== La démo — LA seule image produit de la page ===== */
.demo {
  max-width: 62rem;
  margin: 3.5rem auto 0;
  padding: 0 1.5rem;
  scroll-margin-top: 2rem; /* cible de l'ancre #demo */
}
/* Le cadre EST l'image : 1440×900 = exactement le 16/10 du cadre, donc
   aucune déformation et aucun vide. `display:block` évite le liseré de
   ligne de base sous une image en ligne. */
.demo .cadre {
  aspect-ratio: 1440 / 900; /* le rapport EXACT de la capture : zéro rognage */
  width: 100%;
  height: auto;
  display: block;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  object-fit: cover;
  object-position: top left;
}
.demo figcaption { display: contents; }
.demo .legende {
  color: var(--secondaire);
  font-size: 1.125rem;
  text-align: center;
}
.demo .legende .mot-jaune {
  background: var(--surligneur);
  color: var(--encre);
  padding: 0.05em 0.25em;
  border-radius: 0.15em;
}

/* ===== Sections texte ===== */
/* ⚠️ **UNE SEULE COLONNE, UN SEUL BORD GAUCHE.** Chaque section était
   centrée sur SA propre largeur : une section à capture (62 rem) et une
   section de texte (65 ch) ne commençaient donc pas au même x, et les
   titres zigzaguaient en descendant la page. La colonne est posée UNE fois,
   ici ; les sections s'y alignent à gauche. */
.sections { max-width: 65.75rem; /* 1052 px, la largeur mesurée de leur bande */ margin: 0 auto; padding: 4.5rem 1.5rem 0; }
.section { margin: 0; scroll-margin-top: 2rem; }
.section + .section { margin-top: 4.5rem; }
.section h2 {
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  /* ⚠️ **UNE SEULE TAILLE DE H2 : 32 px.** La page en avait DEUX, 32 px
     dans les blocs et 29,6 px dans les sections de texte — un écart de
     2,4 px, invisible à l'œil nu et suffisant pour que l'échelle ne soit
     plus une échelle. Mesuré, pas supposé. */
  font-size: 2rem;
  line-height: 1.25;
  letter-spacing: -0.004em;
  margin-bottom: 0.9rem;
  text-wrap: balance;
}
.section .texte { max-width: 65ch; }
/* Le reset met toutes les marges à zéro : deux paragraphes se colleraient. */
.section p + p { margin-top: 0.9rem; }

/* ===== LES SECTIONS DE TEXTE — mesuré, puis corrigé =====
   ⚠️ **LA CAUSE DU « MUR » EST UN CHIFFRE : 82 caractères par ligne.**
   Relevé sur la page rendue à 1440. Le confort de lecture se situe entre
   45 et 75, l'optimum autour de 66 : à 82, l'œil perd sa ligne en revenant
   à la marge, et trois blocs de suite se lisent comme un bloc unique.
   `65ch` était déclaré, mais `.sections` (65,75 rem) le laissait dépasser.
   ⚠️ **Un filet ouvre chaque section** : elles n'avaient AUCUNE frontière —
   même taille de titre, même longueur, même gris. Le filet ne décore pas,
   il dit « autre sujet ». */
.section--texte {
  /* ⚠️ **56ch, pas 62** : l'unité `ch` mesure la largeur du ZÉRO, plus
     large que la lettre moyenne. Mesuré pour de vrai avec un gabarit de
     26 lettres : `62ch` rendait 73 caractères par ligne, `56ch` en rend
     66, l'optimum de lecture. Ne pas régler cette valeur à l'estime. */
  max-width: 56ch;
  /* ⚠️ **CENTRÉE, et c'est une correction d'équilibre.** Calée à gauche
     dans une colonne de 1052 px, une colonne de lecture de 626 px laissait
     426 px de vide à droite : la moitié de la page ne portait rien, et le
     bas se lisait comme une page inachevée. Centrer le BLOC (pas le texte,
     qui reste aligné à gauche) referme ce vide et fait de la fin de page
     une coda plus étroite que les blocs qui précèdent. */
  margin-inline: auto;
  border-top: 1px solid var(--filet);
  padding-top: 2.25rem;
}

/* Sections à CAPTURE (1 et 3) : le texte dans sa colonne de lecture, et
   l'écran du produit EN PLEINE LARGEUR dessous. La grille texte + dessin
   qui vivait ici est retirée le 25 août — Aymane : les deux illustrations
   dessinées ne montraient rien. Une capture au format d'un écran ne tient
   pas dans une colonne de 2/5 : elle y devient illisible. */
.section--capture { max-width: 100%; }
.section--capture .texte { max-width: 65ch; }
/* ⚠️ Une capture n'a pas à remplir la largeur pour être lue : celle du
   geste fait 837 px de large, l'étirer à 62 rem la floute et l'écrase.
   Elle s'affiche à sa taille, dans la colonne de lecture. */
.capture--etroite { max-width: 44rem; }
.capture {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 2rem;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}



/* ===== LA BARRE D'ONGLETS ===== */
.onglets {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  margin-bottom: 2.25rem;
}
.onglet {
  appearance: none;
  background: none;
  border: 0;
  /* Leur réglage typographique exact (16 px, 400, filet à 8 px sous le
     mot), mais la CIBLE monte à 44 px de haut : un onglet de 34 px est
     sous le minimum tactile, et c'est le seul contrôle de la page qu'on
     touche pour naviguer. Le filet reste à 8 px du mot grâce au
     `padding-bottom`, le reste est du dégagement au-dessus. */
  padding: 12px 0 8px;
  min-height: 44px;
  font: inherit;
  font-size: 1rem;
  color: var(--secondaire);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.onglet:hover { color: var(--encre); }
/* ⚠️ L'onglet actif se marque par le POIDS et un filet, pas par une
   couleur : la règle du produit — les couleurs ne signifient rien — vaut
   ici aussi. On ne doit pas avoir à LIRE une teinte pour savoir où l'on est. */
/* ⚠️ **L'ACTIF NE GROSSIT PAS** : chez eux les deux états sont en graisse
   400, seul un filet apparaît sous le mot actif. Une graisse qui change
   fait bouger la largeur du mot, donc toute la barre, à chaque clic. */
.onglet[aria-selected="true"] {
  color: var(--encre);
  border-bottom-color: var(--encre);
}
.section.bloc[data-cache] { display: none; }
/* ⚠️ **LE PANNEAU NE PREND PAS LA MARGE DE SON VOISIN CACHÉ.**
   `.section + .section { margin-top }` regarde l'ORDRE DU DOM, pas
   l'affichage : les panneaux 2 et 3 héritaient donc d'une marge que le
   premier n'avait pas, et la bande descendait de 36 px en changeant
   d'onglet — « le rectangle se déplace un peu vers le bas ». Mesuré :
   y = 596 pour le premier, 632 pour les deux autres. Un seul panneau est
   visible à la fois : aucun d'eux n'a de voisin à espacer. */
.section.bloc + .section.bloc { margin-top: 0; }

/* ===== LES BLOCS D'ÉTAPE — le motif d'OpenNote =====
   Un panneau teinté à gauche (titre, une phrase, la porte), l'écran du
   produit à droite qui DÉBORDE du cadre : on comprend qu'il continue.
   ⚠️ **Une seule famille de couleur**, trois teintes du même bleu-gris.
   OpenNote change de couleur à chaque bloc ; ici la règle du produit tient
   — une seule couleur d'accent — et c'est la CLARTÉ qui varie. L'encre
   reste noire sur les trois (contraste > 10:1), aucun texte blanc à risque.
   ⚠️ Le fond réglé : des filets horizontaux en dégradé répété, pas une
   image — la page ne fait toujours aucune requête. */
.bloc { padding: 0; }
/* ===== LA BANDE — relevé au pixel sur opennote.com le 26 août =====
   Mesures prises en lisant les styles CALCULÉS de leur page, pas à l'œil :
   bande **1052×696**, `padding: 6px`, `gap: 52px`, colonne de texte
   **304 px**, média **684×684**, `border-radius: 0` partout, aucune ombre.
   1052 = 6 + 304 + 52 + 684 + 6. C'est cette arithmétique qui est reprise.
   ⚠️ **Une seule chose diverge, et c'est une décision d'Aymane** : leur
   média est CARRÉ et en `object-fit: cover`, donc recadré. Ici les écrans
   se montrent entiers, quatre bords visibles — la case garde donc la place
   restante et l'écran s'y pose en `contain`. */
.bloc-carte {
  display: grid;
  /* ⚠️ **HAUTEUR FIXE, PAS UN PLANCHER.** `min-height` laissait chaque
     bande suivre la longueur de SON texte : d'un onglet à l'autre le
     rectangle grandissait de quelques pixels et semblait glisser vers le
     bas. Une hauteur figée + trois captures au MÊME rapport (1,6) donnent
     trois blocs rigoureusement identiques. */
  height: 33rem;
  grid-template-columns: 304px minmax(0, 1fr);
  gap: 52px;
  padding: 6px;
  background: var(--teinte);
  border-radius: 0;
  overflow: hidden;
  align-items: stretch;
}

.bloc-panneau {
  padding: 2.75rem 1.5rem 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* ⚠️ **LE PANNEAU EST UN APLAT.** Il portait des filets de cahier ; chez
     eux le panneau est d'une seule couleur et c'est la PAGE derrière la
     bande qui est réglée. Des lignes qui traversent le texte le rendent
     plus dur à lire pour rien. */
  background: var(--teinte);
}
/* ⚠️ **LE TEXTE PREND LA TEINTE DU PANNEAU, IL N'EST PAS NOIR.** Relevé chez
   eux : sur le bloc bleu, le titre est `rgb(36,45,100)` et le paragraphe le
   MÊME ton à 80 %. C'est ce qui fait qu'un bloc coloré se lit comme un
   objet d'une seule matière, au lieu d'un aplat sur lequel on aurait posé
   du texte noir. Chaque panneau porte donc son `--encre-bloc`. */
.bloc-panneau h2 {
  margin-bottom: 0;
  font-size: 2rem;          /* 32 px, leur taille de titre de bloc */
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--encre-bloc);
}
.bloc-panneau p {
  font-size: 1rem;          /* 16 px */
  line-height: 1.5;         /* 24 px */
  max-width: 34ch;
  /* ⚠️ **85 %, PAS 80 %.** Leur paragraphe est à 80 % de la teinte sombre ;
     repris tel quel sur NOS trois teintes, deux blocs tombaient à 4,30 et
     4,47:1, sous le seuil AA de 4,5 pour du texte de 16 px. À 85 % les
     trois passent (4,80 · 5,05 · 5,24). On copie leur INTENTION — un texte
     de la même matière que le panneau — pas leur nombre, qui vaut pour
     leurs couleurs et pas pour les nôtres. */
  color: color-mix(in srgb, var(--encre-bloc) 85%, transparent);
}
/* Leur appel à l'action dans un panneau n'est pas un bouton plein : un
   filet de la teinte sombre, fond transparent, texte de la même encre. */
.bloc-panneau .bouton {
  margin-top: auto;
  align-self: flex-start;
  background: transparent;
  color: var(--encre-bloc);
  border: 1px solid color-mix(in srgb, var(--encre-bloc) 45%, transparent);
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 400;
  padding: 0.7rem 1.25rem;
}
.bloc-panneau .bouton:hover {
  background: color-mix(in srgb, var(--encre-bloc) 8%, transparent);
}

.bloc-ecran {
  display: block;
  width: 100%;
  height: 100%;
  /* `contain` : l'écran entre EN ENTIER, ses quatre bords visibles. Chez eux
     c'est `cover` sur un carré ; c'est la seule divergence assumée. */
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
  /* ⚠️ Fond TRANSPARENT : `contain` laisse des bandes vides au-dessus et
     au-dessous d'un écran qui n'a pas la proportion de sa case. En blanc,
     ces bandes se lisaient comme une deuxième carte posée dans la
     première ; en transparent, c'est la teinte du panneau qui continue et
     le cadre de 6 px reste lisible tout autour. */
  background: transparent;
}

/* ⚠️ **LA COLONNE DE TEXTE MAIGRIT AVANT QUE L'ÉCRAN NE DEVIENNE ILLISIBLE.**
   Mesuré : le panneau restait figé à 304 px pendant que la case rétrécissait,
   donc à 800 px de fenêtre le produit se rendait en **384×240** — une
   application de 1440 px réduite à un quart, où l'on ne lit plus rien. Le
   panneau cède le premier : c'est du texte, il se reflue ; l'écran, lui, ne
   peut que rapetisser. */
@media (max-width: 1100px) {
  .bloc-carte { grid-template-columns: minmax(200px, 248px) minmax(0, 1fr); gap: 32px; }
  .bloc-panneau { padding: 2rem 1.25rem 1.25rem 1.75rem; }
  .bloc-panneau h2 { font-size: 1.65rem; }
}

/* ⚠️ **ON EMPILE À 900, PAS À 760** — et la hauteur cesse d'être figée.
   Aymane, 26 août : « quand on réduit la largeur, faudrait pouvoir voir tout
   l'écran ». Deux causes mesurées, pas une :
    ① entre 760 et 1024 px, la mise en deux colonnes tenait encore mais l'écran
      du produit tombait à 345×216 — présent, et illisible ;
    ② en dessous de 760, `.bloc-carte` gardait `height: 33rem` **avec
      `overflow: hidden`** : empilés, le panneau et l'écran dépassaient et le
      bas était COUPÉ — 219 px à 760, 83 px à 390. C'est le bas de l'éditeur
      tranché sur sa capture.
   ⚠️ La hauteur figée n'est pas retirée par distraction : elle existe pour que
   les trois onglets fassent exactement le même rectangle (sinon la bande
   semble glisser d'un onglet à l'autre). Cet argument ne vaut **qu'en deux
   colonnes** — empilé, chaque bloc a la hauteur de son propre texte de toute
   façon, et rien ne justifie de couper l'écran pour l'obtenir. */
@media (max-width: 900px) {
  .bloc-carte {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    gap: 1.5rem;
  }
  .bloc-panneau { padding: 2rem 1.5rem; }
  .bloc-panneau h2 { font-size: 1.75rem; }
  /* `height: auto` + `contain` : l'écran prend toute la largeur et sa hauteur
     suit sa proportion — les quatre bords restent visibles, entiers. */
  .bloc-ecran { height: auto; }
}



/* ===== LE CHAPEAU DE SECTION — la forme d'OpenNote =====
   Chez eux, un titre de section vaut 42 px et se pose SEUL, centré, avant
   ce qu'il annonce. Il ne porte aucun paragraphe : c'est une respiration
   et un panneau indicateur, pas un bloc de texte de plus. */
.chapeau {
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.625rem); /* 42 px au maximum */
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
  max-width: 22ch;
  margin: 0 auto 2.25rem;
}

/* ===== LES TROIS CLAUSES ===== */
.trois { margin-top: 6rem; }
.trois-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem 3rem;
}
.trois-grille h3 {
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  text-wrap: balance;
}
.trois-grille p { color: var(--secondaire); max-width: 34ch; }

/* ===== L'INVENTAIRE — une liste dense, sans aplat =====
   Les six pavés colorés ont été essayés puis retirés le 26 août : six teintes
   se lisaient comme un nuancier, chaque pavé était à moitié vide, et la couleur
   ne disait rien. Un nom, une ligne, un filet. */
.inventaire { margin-top: 6rem; }
.objets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 4rem;
  max-width: 58rem;
  margin: 0 auto;
}
.objets > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-top: 1px solid var(--filet);
}
.objets dt {
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 1.125rem;
}
.objets dd { color: var(--secondaire); }

/* ⚠️ **LA RÈGLE MOBILE DES SECTIONS NEUVES** — elle avait été emportée en
   supprimant le bloc des pavés colorés, et la page s'est mise à DÉBORDER
   horizontalement à 390 px (mesuré par `landing/rendre.mjs`, qui échoue sur ce
   défaut). Une colonne de 8,5 rem plus du texte ne tient pas sur un téléphone.
   Leçon : quand on supprime un bloc de CSS, regarder ce qui vit AU MILIEU. */
@media (max-width: 760px) {
  .trois-grille { grid-template-columns: 1fr; gap: 2rem; }
  .objets { grid-template-columns: 1fr; gap: 0; }
  .objets > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .trois, .inventaire { margin-top: 4rem; }
}

/* ===== L'AVIS — étoiles, la phrase en grand, le nom dessous ===== */
.avis {
  text-align: center;
  max-width: 46rem;
  /* L'avis a besoin d'air des deux côtés : il n'est pas une section (donc
     la règle `.section + .section` ne le pousse pas) et il se collait au
     bloc du dessus comme à celui du dessous. */
  margin: 5.5rem auto;
  padding: 1rem 0;
}
.avis-etoiles {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  color: var(--encre);
  margin-bottom: 1.4rem;
}
.avis-etoiles svg { width: 20px; height: 20px; display: block; }
.avis blockquote {
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 1.9vw, 2.2rem);
  line-height: 1.24;
  letter-spacing: -0.004em;
  text-wrap: balance;
}
.avis figcaption {
  margin-top: 1.3rem;
  font-size: 0.9375rem;
  color: var(--secondaire);
}


/* La ligne de possession, sous l'inventaire. ⚠️ Son style avait été
   emporté en réécrivant le bloc de la clôture juste en dessous : elle
   s'affichait alignée à gauche, pleine largeur, collée aux objets. */
.inventaire-coda {
  margin: 2.25rem auto 0;
  text-align: center;
  color: var(--secondaire);
  max-width: 60ch;
}

/* ===== LA CLÔTURE — UN RECTANGLE POSÉ, plus une section nue =====
   Aymane, 26 août, référence OpenNote à l'appui : *« pour le dernier CTA ce
   serait bien un petit rectangle un peu comme ici »*.

   ⚠️ **Ce qui change, et ce qui ne change pas.** La clôture était centrée sur
   le fond de la page, séparée du pied par un filet. Elle devient un BLOC : sa
   propre teinte, ses propres marges, son texte à gauche — le motif d'OpenNote,
   où le dernier geste de la page est posé sur une surface qui lui appartient
   au lieu de flotter sur le papier. Le titre, le texte et le bouton ne bougent
   pas d'un mot.

   ⚠️ **LE FILET DU HAUT EST RETIRÉ — et il le faut.** Un rectangle teinté
   POSÉ sur un filet se lit comme deux séparateurs empilés : la surface sépare
   déjà, le trait ne fait que la doubler. */
.cloture {
  /* La marge du bas était de 5 rem « plus bas que haut, et c'est voulu »
     (26 août) : le raisonnement TIENT et devient même plus fort — un bloc a
     des bords, et un bord qui frôle le filet du pied paraît lui appartenir. */
  margin: 6rem 0 5rem;
  padding: 3rem;
  /* ⚠️⚠️ **LE BOUTON PART À DROITE — décision d'Aymane, 26 août, deux
     maquettes à l'appui.** Sa référence (OpenNote) empile titre, phrase et
     bouton à gauche, et remplit la moitié droite d'une ILLUSTRATION. On n'en
     a pas : empilés à gauche, les 500 px de droite restaient vides et la
     bande se lisait comme une bande à qui il manque son image. Les trois
     éléments se répartissent donc sur la largeur — la bande est pleine, et
     elle se lit comme une clôture. ⚠️ Ne pas « revenir à la référence » sans
     avoir une image à mettre à droite. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  /* ⚠️ **ANGLE VIF, comme les trois bandes** (`border-radius: 0`, relevé au
     pixel sur opennote.com le 26 août). Un coin arrondi ici aurait fait du
     CTA une carte, alors que tout le reste de la page est en bandes. */
  border-radius: 0;
  background: var(--cloture-fond);
  /* ⚠️ **À GAUCHE, comme la référence.** Un texte centré dans un rectangle
     large laisse deux vides symétriques qui le font flotter ; à gauche, il
     s'appuie sur le bord et le bloc se lit comme un objet, pas comme une zone
     de fond. */
  text-align: left;
}
.cloture h2 {
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.625rem);
  line-height: 1.1;
  /* ⚠️ **UN TITRE DE CLÔTURE TIENT SUR UNE OU DEUX LIGNES.** Le précédent
     faisait trois phrases et quatre lignes : à cette taille, ce n'est plus
     un titre, c'est un paragraphe en gros. */
  max-width: 18ch;
  /* ⚠️ Plus de `margin: auto` ni de marge basse : elle centrait le bloc de
     texte, et en rangée une marge sous le titre le décalerait tout seul vers
     le haut par rapport à ses deux voisins. */
  margin: 0;
  color: var(--cloture-encre);
  text-wrap: balance;
  /* Il ne se comprime pas : c'est lui qu'on lit en premier. */
  flex: 0 1 auto;
}
.cloture p {
  color: var(--cloture-encre-2);
  /* ⚠️ Une BASE, pas seulement un plafond : sans `flex-basis`, la phrase se
     comprime jusqu'à passer en cinq lignes étroites pendant que le titre
     garde toute sa place. */
  flex: 1 1 22ch;
  max-width: 34ch;
  margin: 0;
}
.cloture .bouton {
  margin-top: 0;
  /* Un bouton ne se comprime jamais : son libellé passerait à la ligne. */
  flex: none;
}

/* ⚠️ **SOUS 640 px le rectangle respire moins, jamais moins que ses bords.**
   Sans ça, 3 rem de chaque côté sur un écran de 375 px ne laissent que 279 px
   au texte — le titre passerait à cinq lignes. */
/* ⚠️⚠️ **SOUS 62 rem LA RANGÉE REDEVIENT UNE PILE, et c'est obligatoire.**
   Trois éléments côte à côte dans 700 px donnent trois colonnes étranglées :
   le titre passe à cinq lignes et le bouton se colle au bord. La bascule se
   fait bien AVANT le mobile — c'est la largeur du CONTENU qui la décide, pas
   celle d'un téléphone. */
@media (max-width: 62rem) {
  .cloture {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  /* ⚠️⚠️ **`flex` DOIT ÊTRE NEUTRALISÉ ICI, et l'oublier fabrique un trou.**
     `flex: 1 1 22ch` sur la phrase vise sa LARGEUR en rangée — mais en
     COLONNE, `flex-grow` et `flex-basis` s'appliquent à la HAUTEUR : la
     phrase s'étirait jusqu'à remplir le bloc, et le bouton se retrouvait
     projeté 400 px plus bas, seul en bas d'une bande vide. Mesuré sur un
     écran de 390 px, pas supposé. */
  .cloture h2,
  .cloture p,
  .cloture .bouton { flex: none; }
  /* Empilé, le bouton redevient un geste isolé : il reprend son air. */
  .cloture .bouton { margin-top: 0.75rem; }
  .cloture h2 { max-width: 20ch; }
  .cloture p { max-width: 46ch; }
}

@media (max-width: 40rem) {
  .cloture { padding: 2.5rem 1.5rem 2.75rem; }
}

/* ===== CTA final ===== */
.cta-final {
  text-align: center;
  padding: 5rem 1.5rem 5.5rem;
}

/* ===== Footer colonné ===== */
footer {
  border-top: 1px solid var(--filet);
  padding: 3rem 1.5rem 2rem;
}
.pied {
  max-width: 68rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem 2.5rem;
}
.pied-id .ligne-marque {
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--encre);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sociaux {
  list-style: none;
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.sociaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -0.5rem 0 0 -0.7rem; /* cible 44px sans gonfler la rangée */
  border-radius: 10px;
  color: var(--secondaire);
}
.sociaux a:hover { color: var(--encre); }
.sociaux svg { display: block; }
.pied-id .langue,
.pied-id .copyright {
  margin-top: 0.55rem;
  font-size: 0.875rem;
  color: var(--secondaire);
}
/* ⚠️ **LA LANGUE COURANTE NE DOIT PAS RESSEMBLER À UN LIEN.** Les deux mots se
   suivent (« English · Français ») : sans différence de traitement, on clique
   sur celui qu'on lit déjà. La courante prend l'encre pleine, l'autre reste
   dans le gris des liens de pied et se souligne au survol. */
.pied-id .langue [aria-current] { color: var(--encre); }
.pied-id .langue a { color: inherit; text-decoration: none; }
.pied-id .langue a:hover,
.pied-id .langue a:focus-visible { text-decoration: underline; }

.pied-titre {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--secondaire);
  margin-bottom: 0.35rem;
}
.pied-col ul { list-style: none; }
.pied-col a {
  display: inline-block;
  color: var(--encre);
  text-decoration: none;
  font-size: 0.9375rem;
  /* 0,62rem ne donnait que 42 px de haut, mesuré. Le minimum tactile est
     44 : le commentaire promettait ce qu'il ne tenait pas. */
  padding: 0.72rem 0.2rem;
  margin: 0 -0.2rem;
  border-radius: 6px;
}
.pied-col a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* ===== Mobile ===== */
@media (max-width: 700px) {
  .pied { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 480px) {
  .hero { padding-top: 3rem; }
  .cta-paire { flex-direction: column; align-items: stretch; }
  .cta-paire .bouton--principal,
  .cta-paire .bouton-second { text-align: center; }
  .demo { padding: 0 1rem; }
  .demo .cadre { border-radius: 10px; }
  .sections { padding-top: 3.5rem; }
  .section + .section { margin-top: 3rem; }
}

/* La boucle vidéo respectera prefers-reduced-motion (voir le bloc commenté
   dans <figure class="demo">) ; le cadre statique actuel n'anime rien. */

/* ===== LA NAVIGATION À DEUX ENTRÉES =====
   ⚠️ Le lien de page vit À GAUCHE du bouton, pas dedans : un lien de
   navigation et un appel à l'action ne se ressemblent jamais, sinon on clique
   l'un pour l'autre. */
.nav-liens { display: flex; align-items: center; gap: 1.5rem; }
.nav-lien {
  color: var(--secondaire);
  text-decoration: none;
  font-size: 1rem;
  padding: 0.6rem 0;
}
.nav-lien:hover { color: var(--encre); }
.nav-lien[aria-current="page"] { color: var(--encre); }

/* ===== LA PAGE CARRIÈRES =====
   Même anatomie que les blocs d'onglet : un panneau coloré à gauche, le
   contenu à droite, `padding: 6px`, angles droits. La liste des postes est une
   VRAIE liste de liens : un titre, un lieu, une flèche. */
.postes { max-width: 65.75rem; margin: 4rem auto 0; padding: 0 1.5rem; }
/* ⚠️ `height: 33rem` est posé sur `.bloc-carte` pour que les trois onglets
   soient identiques. Ici la carte n'a pas de voisin à égaler : elle épouse sa
   liste, sinon un poste unique flotte au-dessus de 400 px de blanc. */
.postes .bloc-carte {
  height: auto;
  min-height: 0;
  grid-template-columns: 304px minmax(0, 1fr);
}
.postes-liste { list-style: none; background: var(--carte); padding: 0.5rem 2rem 1rem; }
.postes-liste li + li { border-top: 1px solid var(--filet); }
.postes-liste a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.15rem 1rem;
  padding: 1.4rem 0;
  text-decoration: none;
  color: var(--encre);
}
.poste-nom {
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
}
.poste-lieu { grid-column: 1; color: var(--secondaire); font-size: 0.9375rem; }
.poste-fleche {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--secondaire);
  font-size: 1.25rem;
  transition: transform 140ms ease, color 140ms ease;
}
.postes-liste a:hover .poste-fleche { transform: translateX(4px); color: var(--encre); }

@media (max-width: 760px) {
  .postes .bloc-carte { grid-template-columns: 1fr; }
  .postes-liste { padding: 0.25rem 1.25rem 0.75rem; }
}

/* ===== MICRO-ANIMATIONS =====
   ⚠️ **Trois règles avant d'en écrire une seule.**
   ① Rien ne bouge sans raison : une animation dit qu'un élément ARRIVE ou
      qu'un état a CHANGÉ. Aucune ne décore.
   ② `prefers-reduced-motion` les coupe TOUTES, et la page reste complète —
      c'est pour ça que l'état de départ est posé par le SCRIPT et jamais en
      CSS : sans JavaScript, ou avec le réglage actif, rien n'est masqué.
   ③ On n'anime que `opacity` et `transform`. Animer une hauteur ou une marge
      fait recalculer la mise en page à chaque image. */

/* L'apparition d'une section quand elle entre dans l'écran. Le décalage est
   court (10 px) : au-delà, ça se remarque, et ce qui se remarque agace au
   deuxième passage. */
/* ⚠️⚠️ **ON N'ANIME PLUS L'OPACITÉ, ET C'EST UNE LEÇON PAYÉE.**
   La version précédente posait `opacity: 0` puis révélait à l'entrée dans
   l'écran. Résultat mesuré sur la capture pleine hauteur en 390 px : **un vide
   de 2000 pixels** au milieu de la page — tout ce que l'observateur n'avait pas
   encore vu était littéralement invisible. Le repli « sans JavaScript, rien
   n'est masqué » ne protégeait que le cas où le script ne tourne PAS ; il ne
   protégeait pas le cas où il tourne et où l'observateur ne se déclenche pas
   (capture, moteur de rendu d'aperçu, défilement programmatique, onglet en
   arrière-plan).
   ⚠️ **Une animation ne doit jamais décider si un contenu EXISTE.** On ne bouge
   donc plus que la position : le texte est lisible à toutes les étapes, et le
   mouvement n'est qu'un supplément. */
[data-anime] { transform: translateY(10px); }
[data-anime][data-vu] {
  transform: none;
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Le fondu d'un panneau d'onglet : sans lui, le contenu SAUTE d'un onglet à
   l'autre et on doute d'avoir cliqué au bon endroit. */
.section.bloc[data-entre] .bloc-carte {
  animation: entree-panneau 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* ⚠️ **MÊME RÈGLE QUE POUR LE DÉFILEMENT : pas d'opacité.** L'entrée partait de
   `opacity: 0` pendant 380 ms — assez pour qu'une capture, un aperçu de lien ou
   un rendu d'impression attrape le panneau VIDE. Une animation ne décide jamais
   si un contenu existe. */
@keyframes entree-panneau {
  from { transform: translateY(6px); }
  to   { transform: none; }
}

/* Le bouton se soulève d'un cheveu au survol : la seule promesse est
   « je suis cliquable ». */
.bouton { transition: background-color 140ms ease, transform 140ms ease; }
.bouton:hover { transform: translateY(-1px); }
.bouton:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  [data-anime], [data-anime][data-vu] { transform: none; transition: none; }
  .section.bloc[data-entre] .bloc-carte { animation: none; }
  .bouton { transition: none; }
  .bouton:hover, .bouton:active { transform: none; }
}

/* ===== LES PAGES DE TEXTE — mentions légales, confidentialité, CGU, 404 =====
   Une seule colonne de lecture, la même mesure que le reste de la page (66
   caractères), et rien d'autre. Ces pages ne vendent rien : elles doivent se
   lire vite et se citer facilement. */

/* ===== L'ENTÊTE ET LE BANDEAU — la forme des inspirations d'Aymane (26 août)
   Deux captures d'OpenNote : titre centré sur le fond clair, date dessous, puis
   un GRAND aplat de couleur qui porte une phrase en serif. Repris tel quel,
   **sans l'illustration** (demande explicite) — ce qui change tout l'équilibre :
   sans dessin, l'aplat ne doit pas faire un écran de haut, sinon il devient une
   surface vide qu'il faut franchir avant d'atteindre le texte. D'où la hauteur
   pilotée par le seul rembourrage, en `clamp`.
   ⚠️ **`main` cesse d'être la colonne** : l'aplat est pleine largeur, la
   colonne étroite descend d'un cran dans `.page-texte`. Une page de texte est
   donc entête + bandeau + colonne, dans cet ordre — c'est aussi ce que
   `verifier.mjs` parcourt.
   ⚠️ **Le 404 n'a ni entête ni bandeau** et garde `.page-texte` seule : la page
   d'erreur doit rendre la sortie immédiate, pas mettre en scène son titre. */
.page-entete {
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) 1.5rem clamp(2.5rem, 2rem + 3vw, 4.5rem);
  text-align: center;
}
.page-bandeau {
  /* ⚠️ **UNE SEULE COULEUR POUR LES QUATRE PAGES, et c'est délibéré.**
     OpenNote donne un aplat DIFFÉRENT à chaque page (vert, bleu-violet). Le
     faire ici demanderait d'inventer trois teintes de plus, alors que la
     direction artistique de Recall Note en tient exactement deux — le
     bleu-gris de marque et son pétrole. Inventer une palette pour quatre
     pages qu'on lit une fois dans sa vie coûterait la cohérence du reste.
     ⚠️ **Blanc sur `--accent-plein` vaut 13,5:1**, mesuré et déjà noté au
     jeton : aucun risque de contraste, y compris pour la phrase en serif. */
  background: var(--accent-plein);
  color: #fff;
  padding: clamp(3.5rem, 2rem + 7vw, 6.5rem) 1.5rem;
  text-align: center;
}
.page-bandeau p {
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 2.75rem);
  line-height: 1.15;
  /* ⚠️ **La mesure est en `ch`, et `ch` est la largeur du ZÉRO** — piège déjà
     payé sur la landing (56ch rendait 66 caractères). 24ch ici donne une
     phrase sur deux ou trois lignes, jamais une seule ligne à rallonge. */
  max-width: 24ch;
  margin: 0 auto;
  text-wrap: balance;
}
.page-texte {
  max-width: 56ch;
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}
.page-entete h1,
.page-texte h1 {
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.625rem);
  line-height: 1.1;
  margin-bottom: 0.75rem;
  text-wrap: balance;
}
/* Dans l'entête, la date est la dernière chose de la boîte : sa marge basse
   ferait un écart de plus avant l'aplat, qui a déjà le sien. */
.page-entete .page-date { margin-bottom: 0; }
.page-texte h2 {
  font-family: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 2.5rem 0 0.6rem;
}
.page-texte h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.4rem 0 0.3rem;
}
.page-texte p, .page-texte li { margin-bottom: 0.9rem; }
/* ===== L'INVENTAIRE DU STOCKAGE — le tableau de la page Cookies =====
   ⚠️ **Il DÉBORDE dans sa propre boîte, jamais sur la page.** Trois colonnes
   dans une colonne de 56ch tiennent mal à 390 px ; sans `overflow-x` sur un
   conteneur, c'est le `body` entier qui se met à défiler de côté — et une page
   qui glisse horizontalement au doigt donne l'impression d'être cassée. */
.page-tableau { overflow-x: auto; margin-bottom: 1.4rem; }
.page-tableau table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 0.9375rem;
}
.page-tableau th, .page-tableau td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.9rem 0.6rem 0;
  border-bottom: 1px solid var(--filet);
}
.page-tableau th { font-weight: 600; }
/* Le nom technique du rangement (« IndexedDB », « localStorage ») sous
   l'intitulé lisible : il sert à qui va vérifier dans son navigateur, il ne
   doit pas peser autant que la ligne qu'il annote. */
.page-tech { color: var(--secondaire); font-size: 0.8125rem; }
/* ⚠️ Un `<caption>` est OBLIGATOIRE pour qu'un lecteur d'écran annonce de quoi
   parle le tableau — mais l'intitulé est déjà dans le paragraphe au-dessus, et
   l'afficher le dirait deux fois. `display:none` le retirerait aussi de la
   restitution vocale : d'où le retrait par découpe, pas par masquage. */
.visuellement-cachee {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.page-tableau code { font-size: 0.875rem; word-break: break-word; }
/* ⚠️ Le nom d'une clé de stockage ne se coupe pas : `anki2:accent-pret` coupé
   après le tiret se lit comme deux clés. */
.page-tableau td:first-child { white-space: nowrap; padding-right: 1.2rem; }
.page-texte ul { padding-left: 1.1rem; margin-bottom: 0.9rem; }
.page-texte a { color: var(--encre); text-underline-offset: 3px; }
.page-date { color: var(--secondaire); font-size: 0.9375rem; margin-bottom: 2rem; }
.page-chapeau { font-size: 1.125rem; }
/* ⚠️ Les mentions à compléter se voient de loin, EXPRÈS : une trame publiée
   avec ses trous est pire qu'une page absente. */
.page-texte span:not([class]) {
  background: rgba(218, 87, 66, 0.16);
  padding: 0.05em 0.3em;
  border-radius: 3px;
}
.page-date span { background: none; padding: 0; }

/* ===== LA BARRE DE NAVIGATION SUR TÉLÉPHONE =====
   ⚠️ Mesuré à 390 px : « Recall Note » passait sur deux lignes et
   « Get started free » aussi, ce qui donnait une barre de 80 px de haut avant
   même le titre. Le nom ne se coupe plus, l'écart se resserre, et le bouton
   perd un mot — « Get started » suffit quand la place manque. */
@media (max-width: 480px) {
  .nav { padding: 0.9rem 1rem; }
  .marque { white-space: nowrap; font-size: 1.125rem; }
  .nav-liens { gap: 0.9rem; }
  .bouton--petit { padding: calc(0.7rem - 1px) 0.8rem; font-size: 0.875rem; }
  .bouton--petit .mot-long { display: none; }
  /* L'écran du produit prend toute la largeur : à 390 px, chaque pixel de marge
     est un pixel de moins pour lire l'interface qu'on montre. */
  .demo { padding: 0; }
  .demo .cadre { border-radius: 0; border-left: 0; border-right: 0; }
}