/* ==================================================================
   Keiraku — pages éditoriales (offre, mentions légales, CGV)
   Charte « Encre » — encre #16161A · papier #FBFAF7 · sceau #BF3B2E
   filet #C9C2B4 · gris #6E6A65

   Les noms --violet, --jade, --noir et --creme survivent en alias vers les
   jetons ci-dessus (voir plus bas) : les renommer partout d'un coup aurait
   touché des centaines de lignes sans rien changer à l'écran.

   Feuille séparée de app.css : l'application est une interface plein
   écran sans défilement, ces pages sont des documents qui défilent.
   Mélanger les deux obligerait à défaire la moitié des règles.
   ================================================================== */

/* Fontes de la charte « Encre », servies depuis le projet.
   Hébergées ici et non chez Google : l'application doit fonctionner hors
   connexion, et un appel au CDN transmet l'adresse IP du visiteur à un tiers.
   Sous-ensemble « latin » seulement — le latin étendu n'apporte aucun des
   caractères réellement employés (vérifié : ᵉ, ✦, ⚠, 経絡 n'y sont pas
   davantage et retombent sur la fonte système). */
@font-face { font-family: 'Newsreader'; src: url('../assets/fonts/newsreader-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../assets/fonts/newsreader-500-latin.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../assets/fonts/newsreader-400i-latin.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter-300-latin.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter-500-latin.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  /* ── Rattachement au système ─────────────────────────────────────
     Les valeurs ne vivent plus ici : elles sont dans `systeme.css`,
     qui les nomme une fois pour les deux surfaces. Ce bloc ne fait
     plus que raccorder les anciens noms du fichier aux rôles du
     système, le temps que les règles ci-dessous basculent.

     Le registre ne change pas pour autant : du papier, de l'encre, et
     un seul rouge — celui du sceau, qui rattache le nom japonais du
     produit sans verser dans le décor japonisant. Une seule couleur
     saturée dans toute la charte, c'est ce qui laisse aux quatorze
     couleurs de méridiens le monopole de la couleur dans
     l'application. */
  --encre: var(--texte);
  --papier: var(--fond);
  --sceau: var(--marque-sceau);
  --sceau-txt: var(--marque-sceau-txt);
  --gris: var(--texte-doux);
  --filet: var(--bord-fort);
  --ambre: #C08A2E;           /* champs à compléter — hors charte, à dessein */
  --ambre-txt: #7A5411;       /* le même en texte — 5,3:1 */

  --bg: var(--fond);
  --panel: var(--surface-2);
  --panel-2: #EBE7DF;
  --line: var(--bord);
  --txt: var(--texte);
  --txt-fort: var(--texte);
  --txt-dim: var(--texte-doux);

  /* Anciens noms, conservés le temps que tout le CSS bascule. */
  --violet: var(--sceau);
  --violet-txt: var(--sceau-txt);
  --jade: var(--filet);
  --noir: var(--encre);
  --creme: var(--papier);

  --r: var(--r-1);   /* angles presque droits : un livre, pas une application */
  --max: 1080px;      /* inchangé : le refactor doit être neutre */

  --f-title: var(--f-titre);
  --f-body: var(--f-ui);
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--f-body);
  /* 400, et non 300. En Light, à 15-17 px sur un fond papier, le texte
     grisaille et fatigue — et c'est ce texte qui porte l'argumentaire. Le 300
     reste employé au-dessus de 24 px, où il est élégant. */
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Pas de halo. Les dégradés appartenaient à la charte précédente ; ici le
   papier est le fond, et un fond teinté n'est plus du papier. */
body > * { position: relative; z-index: 1; }

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

/* Gras réel, et non fabriqué.
   Les 29 <strong> et <b> de la page tombent par défaut sur la graisse 700,
   dont aucun fichier n'existe — Inter n'est livré ici qu'en 300, 400, 500 et
   600. Le navigateur épaissit alors le 400 par le calcul, d'une manière que
   personne n'a dessinée et qui diffère d'un moteur à l'autre. On les ramène
   sur le 600, qui est dessiné. */
strong, b { font-weight: 600; }

/* Prise de focus au clavier.
   Aucune règle n'existait : on héritait du contour d'un pixel du navigateur,
   trop discret pour le critère 2.4.11 des WCAG 2.2. Deux pixels, décalés, sur
   le sceau — la seule couleur saturée de la charte, donc la plus visible. */
:focus-visible {
  outline: 2px solid var(--sceau);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Lien d'évitement : hors champ tant qu'on ne l'atteint pas au clavier.
   Il n'est pas masqué par display:none, qui le retirerait aussi du parcours
   de tabulation — ce qui reviendrait à ne pas l'avoir mis. */
.evitement {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 18px;
  background: var(--sceau); color: #fff;
  font-family: var(--f-ui); font-size: 15px; text-decoration: none;
  border-radius: var(--r);
  transition: top .12s;
}
.evitement:focus { top: 12px; }
/* <picture> est en ligne par défaut : sans cela il ajoute sous l'image le
   jambage d'une ligne de texte, et le cadre paraît mal centré. */
picture { display: block; }
/* ...et `display` écrase l'attribut `hidden`, qui ne passe que par la
   feuille du navigateur. Sans cette ligne, la vidéo de tournette ne
   REMPLAÇAIT pas la capture fixe du haut de page : elle s'ajoutait
   dessous, et le visiteur voyait le même cheval deux fois, sur deux fois
   la hauteur. Le même correctif existait déjà pour la vidéo
   (`.capture-video[hidden]`), sans son pendant pour l'image. */
picture[hidden] { display: none; }
a { color: var(--violet-txt); }

/* ------------------------------------------------------------------ */
/* En-tête                                                             */
/* ------------------------------------------------------------------ */

.nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 20px;
  padding: 0 24px; height: 62px;
  background: rgba(245,240,234,.88); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 20px; width: 100%; max-width: var(--max); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-right: auto; }
.brand-mark { color: var(--gris); font-size: 15px; }
.brand-name {
  font-family: var(--f-ui); font-size: 24px; letter-spacing: 4px;
  text-transform: uppercase; color: var(--noir);
}
.brand-name em { font-style: normal; color: var(--violet-txt); }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a {
  font-family: var(--f-ui); font-size: 15px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--txt-dim); text-decoration: none;
}
.nav-links a:hover { color: var(--noir); }
@media (max-width: 780px) { .nav-links { display: none; } }

/* ------------------------------------------------------------------ */
/* Boutons                                                             */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* Hauteur MINIMALE et non fixe : « Demander le tarif étudiant » passe sur
     trois lignes dans une carte de tarif, et une hauteur figée laissait le
     texte sortir du cadre. */
  min-height: 44px; padding: 10px 26px; text-align: center; line-height: 1.25;
  border-radius: 9px; border: 1px solid transparent; cursor: pointer;
  font-family: var(--f-ui); font-size: 17px; letter-spacing: 3px;
  text-transform: uppercase; text-decoration: none;
  transition: background .16s, border-color .16s, color .16s;
}
.btn-plein { background: var(--violet); color: var(--papier); }
.btn-plein:hover { background: var(--sceau-txt); }
.btn-creux { background: transparent; border-color: var(--line); color: var(--txt); }
.btn-creux:hover { border-color: var(--violet); color: var(--violet-txt); }
.btn-sm { min-height: 36px; padding: 7px 18px; font-size: 15px; letter-spacing: 2.5px; }

/* ------------------------------------------------------------------ */
/* Trame générale                                                      */
/* ------------------------------------------------------------------ */

.bloc { max-width: var(--max); margin: 0 auto; padding: 76px 24px; }
.bloc-fin { padding-top: 42px; }
@media (max-width: 640px) { .bloc { padding: 52px 20px; } }

.sur-titre {
  font-family: var(--f-ui); font-size: 15px; letter-spacing: 4px;
  text-transform: uppercase; color: var(--violet-txt);
  margin: 0 0 12px;
}
h1, h2, h3 { font-family: var(--f-title); font-weight: 400; line-height: 1.15; }
h1 { font-size: clamp(38px, 6vw, 62px); margin: 0 0 18px; letter-spacing: .5px; }
h1 em { font-style: italic; color: var(--violet-txt); }
h2 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 16px; }
h3 { font-size: 24px; margin: 0 0 8px; }
.lead { font-size: 20px; line-height: 1.62; color: var(--txt); max-width: 62ch; }
.dim { color: var(--txt-dim); }
p { margin: 0 0 16px; }

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

/* 48 px et non 68 : chaque pixel gagné ici fait remonter le cheval en
   rotation, qui commençait à 692 px — donc sous la pliure d'un écran de
   1366 × 768, le plus répandu. */
.hero { padding-top: 48px; padding-bottom: 26px; text-align: center; }
.hero .lead { margin: 0 auto 26px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* Longueur de ligne.
   Au-delà d'environ 75 caractères, l'œil perd la ligne suivante au retour à la
   marge. Ces quatre blocs s'étalaient sur toute la largeur du conteneur —
   jusqu'à 143 caractères pour la note du bandeau. On les borne en ch, unité
   qui suit la police et non le pixel. */
/* Paragraphe posé sous le visuel : il explique ce que le cheval en rotation
   est en train de montrer. Même largeur de lecture que le reste. */
.apres-capture {
  max-width: 62ch; margin: 18px auto 0; padding: 0 24px;
  text-align: center; font-size: 15px; color: var(--gris);
}
.apres-capture .etymo { display: block; margin-top: 6px; color: var(--sceau-txt); }

.hero-note {
  margin: 18px auto 0; max-width: 62ch;
  font-size: 13.5px; color: var(--gris);
}

.capture {
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
}
.capture img {
  width: 100%; border-radius: var(--r); border: 1px solid var(--line);
  box-shadow: 0 18px 46px rgba(17,17,17,.16);
}
.capture figcaption {
  margin-top: 10px; font-size: 13.5px; color: var(--gris); text-align: center;
}

/* ------------------------------------------------------------------ */
/* Chiffres                                                            */
/* ------------------------------------------------------------------ */

.chiffres {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.chiffre { background: var(--panel); padding: 22px 16px; text-align: center; }
.chiffre b {
  display: block; font-family: var(--f-title); font-size: 38px;
  font-weight: 500; color: var(--txt-fort); line-height: 1.1;
}
.chiffre span {
  font-family: var(--f-ui); font-size: 13.5px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--txt-dim);
}
@media (max-width: 640px) { .chiffres { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------------ */
/* Les quatorze méridiens, nommés                                      */
/*                                                                     */
/* Écrire « les 14 méridiens » ne dit rien à qui hésite : le lecteur   */
/* veut retrouver SON vocabulaire et vérifier que rien ne manque. La   */
/* liste nommée fait ce travail, et les effectifs par méridien se      */
/* contrôlent contre la base (tools/verifier.py).                      */
/* ------------------------------------------------------------------ */

.meridiens-liste { margin-top: 30px; }
.mer-titre {
  font-family: var(--f-ui); font-size: 12px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--txt-dim);
  margin: 0 0 14px; max-width: 46ch;
}
.mer-grille {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 1px; border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;

  /* Fond du même ton que les cases, et non couleur de filet : quatorze
     méridiens ne remplissent jamais une grille dont le nombre de colonnes
     dépend de la largeur, et les cases restées vides apparaissaient en gris
     au bout de la dernière ligne. */
  background: var(--panel);
}
.mer-grille li {
  background: var(--panel); padding: 11px 14px;
  display: flex; align-items: baseline; gap: 9px;
  font-size: 15px; color: var(--txt); white-space: nowrap;
  box-shadow: 0 0 0 1px var(--line);
}
.mer-grille b {
  font-family: var(--f-ui); font-size: 12px; letter-spacing: 1.5px;
  color: var(--txt-fort); min-width: 26px;
}
.mer-nom { flex: 1; }
.mer-n {
  font-family: var(--f-ui); font-size: 12px; letter-spacing: 1px;
  color: var(--txt-dim);
}
.mer-pied {
  font-size: 13.5px; color: var(--txt-dim); margin: 12px 0 0;
}

/* ------------------------------------------------------------------ */
/* Alternance texte / image                                            */
/* ------------------------------------------------------------------ */

.duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center;
  margin-bottom: 72px;
}
.duo:last-child { margin-bottom: 0; }
.duo img { border-radius: var(--r); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(17,17,17,.14); }

/* Chaque capture porte sa légende. Une vue 3D dense ne se lit pas seule :
   sans une phrase qui dit où regarder, le visiteur voit un cheval couvert de
   pastilles et passe à la suite. */
.duo-fig { margin: 0; }
.duo-fig figcaption {
  margin-top: 11px; font-size: 13.5px; line-height: 1.55;
  color: var(--txt-dim);
}
.duo-fig figcaption em { font-style: italic; color: var(--txt); }
.duo-inverse .duo-txt { order: 2; }
@media (max-width: 820px) {
  .duo { grid-template-columns: 1fr; gap: 26px; margin-bottom: 54px; }
  .duo-inverse .duo-txt { order: 0; }
}
.duo-txt p:last-child { margin-bottom: 0; }

.puces { list-style: none; margin: 0 0 16px; padding: 0; }
.puces li { position: relative; padding-left: 20px; margin-bottom: 7px; }
.puces li::before {
  content: '✦'; position: absolute; left: 0; top: 0;
  /* Pas var(--jade) : cet alias pointe désormais sur le filet beige, à
     1,7:1 sur le papier — la puce disparaissait. */
  color: var(--sceau); font-size: 12px; line-height: 1.9;
}

/* ------------------------------------------------------------------ */
/* Cartes                                                              */
/* ------------------------------------------------------------------ */

.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .cartes { grid-template-columns: 1fr; } }
.carte {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px;
}
.carte h3 { margin-bottom: 10px; }
.carte p { font-size: 15px; color: var(--txt-dim); margin: 0; }
.carte-ico { color: var(--violet); font-size: 17px; margin-bottom: 10px; }

/* ------------------------------------------------------------------ */
/* Tarifs                                                              */
/* ------------------------------------------------------------------ */

.tarifs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; margin: 0 auto; }
@media (max-width: 720px) { .tarifs { grid-template-columns: 1fr; } }
.tarif {
  position: relative;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 30px 26px 26px;
  display: flex; flex-direction: column;
}
.tarif-mis { border-color: var(--sceau); background: var(--panel-2); }
.tarif-etiq {
  position: absolute; top: -11px; left: 26px;
  background: var(--violet); color: var(--papier);
  font-family: var(--f-ui); font-size: 12px; letter-spacing: 2.5px;
  text-transform: uppercase; padding: 2px 12px; border-radius: 20px;
}
.tarif-nom {
  font-family: var(--f-ui); font-size: 17px; letter-spacing: 3.5px;
  text-transform: uppercase; color: var(--txt-dim); margin: 0 0 10px;
}
.tarif-prix {
  font-family: var(--f-title); font-size: 52px; font-weight: 500;
  color: var(--txt-fort); line-height: 1; margin-bottom: 4px;
}
.tarif-prix small { font-family: var(--f-body); font-size: 17px; font-weight: 300; color: var(--txt-dim); }
.tarif-sous { font-size: 15px; color: var(--gris); margin-bottom: 20px; min-height: 22px; }
.tarif .puces { flex: 1; font-size: 15px; }
.tarif .btn {
  width: 100%;
  /* Poussé en pied de carte, et de hauteur commune : les trois listes
     d'arguments n'ont pas la même longueur, si bien que les boutons se
     posaient à trois hauteurs différentes — ce qui se voit immédiatement sur
     un tableau de prix. */
  margin-top: auto;
  min-height: 56px;
}

.tarif-note {
  max-width: 58ch; margin: 22px auto 0; text-align: center;
  font-size: 15px; color: var(--gris);
}

/* ------------------------------------------------------------------ */
/* Questions                                                           */
/* ------------------------------------------------------------------ */

.faq { max-width: 800px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--line); padding: 16px 0;
}
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--f-title); font-size: 20px; color: var(--txt-fort);
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--violet-txt); font-family: var(--f-body); font-size: 20px; }
.faq details[open] summary::after { content: '−'; }
/* max-width : les réponses occupaient toute la largeur de la page, à 100
   caractères par ligne. Déclaré ici, dans la règle qui gouverne déjà ce
   sélecteur — une seconde règle plus haut dans le fichier aurait été masquée
   par celle-ci, à spécificité égale. */
.faq details p {
  margin: 12px 0 0; color: var(--txt-dim); font-size: 15px; max-width: 61ch;
}
.faq details p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Encadré d'avertissement                                             */
/* ------------------------------------------------------------------ */

.avert {
  /* Le pavé se resserre avec son texte. Borner le seul paragraphe laissait un
     encadré pleine largeur à moitié vide, ce qui se voyait plus que la ligne
     trop longue qu'on cherchait à corriger. */
  max-width: 62ch;
  border: 1px solid var(--filet); border-radius: var(--r);
  background: var(--panel-2);
  padding: 24px 26px;
}
.avert h3 { color: var(--noir); font-size: 20px; }
.avert p { font-size: 15px; color: var(--txt-dim); margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Pied de page                                                        */
/* ------------------------------------------------------------------ */

.pied {
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.pied-in {
  max-width: var(--max); margin: 0 auto; padding: 34px 24px 44px;
  display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center;
}
.pied-liens { display: flex; flex-wrap: wrap; gap: 0 22px; margin-left: auto; }
.pied a {
  /* 44 px de haut, seuil des recommandations d'Apple : ces liens mesuraient
     24 px, et ce sont ceux qu'on cherche au moment d'hésiter à payer. On
     agrandit la zone, pas le texte. */
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--f-ui); font-size: 15px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--txt-dim); text-decoration: none;
}
.pied a:hover { color: var(--noir); }
.pied-copy { font-size: 13.5px; color: var(--gris); }

/* ------------------------------------------------------------------ */
/* Documents juridiques                                                */
/* ------------------------------------------------------------------ */

/* 640 px et non 760 : à 15 px, la colonne donnait 83 caractères par ligne,
   là où la lecture confortable s'arrête vers 75. Sur des pages qu'il faut
   vraiment lire — des conditions de vente, des mentions légales — c'est le
   réglage qui décide si elles sont lues ou parcourues. */
.doc { max-width: 640px; margin: 0 auto; padding: 54px 24px 20px; }
.doc h1 { font-size: clamp(32px, 5vw, 46px); margin-bottom: 8px; }
.doc .maj { font-family: var(--f-ui); font-size: 15px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gris); margin-bottom: 36px; }
.doc h2 {
  font-size: 24px; margin: 42px 0 12px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.doc h3 { font-size: 20px; margin: 24px 0 6px; color: var(--violet-txt); }
.doc p, .doc li { font-size: 15px; color: var(--txt-dim); }
.doc strong { color: var(--txt-fort); font-weight: 600; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 6px; }
.doc dl { margin: 0 0 16px; }
.doc dt { font-family: var(--f-ui); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--txt-dim); margin-top: 12px; }
.doc dd { margin: 2px 0 0; color: var(--txt-fort); font-size: 15px; }

/* Champs que Rémy Serre doit renseigner avant la mise en vente.
   Volontairement voyants : un placeholder discret finit en ligne. */
.acompleter {
  background: rgba(227,176,75,.22); border: 1px dashed rgba(227,176,75,.85);
  border-radius: 5px; padding: 1px 7px; color: var(--ambre-txt);
  font-family: var(--f-ui); font-size: 15px; letter-spacing: 1.5px;
  text-transform: uppercase; white-space: nowrap;
}
.bandeau-brouillon {
  background: rgba(227,176,75,.18); border: 1px solid rgba(227,176,75,.7);
  border-radius: var(--r); padding: 16px 20px; margin-bottom: 30px;
}
.bandeau-brouillon p { color: var(--ambre-txt); font-size: 15px; margin: 0; }
.bandeau-brouillon strong { color: var(--ambre-txt); font-weight: 600; }

/* Tableau des formules dans les documents juridiques. Il fallait pouvoir
   comparer quatre offres d'un coup d'œil ; une liste à puces obligeait à
   recomposer mentalement le tableau. */
.doc .tbl {
  width: 100%; border-collapse: collapse; margin: 18px 0 24px;
  font-size: 15px;
}
.doc .tbl th {
  text-align: left; padding: 9px 12px;
  font-family: var(--f-ui); font-size: 13.5px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--txt-dim); font-weight: 400;
  border-bottom: 1px solid rgba(17,17,17,.22);
}
.doc .tbl td {
  padding: 11px 12px; vertical-align: top; color: var(--txt-fort);
  border-bottom: 1px solid rgba(17,17,17,.09);
}
.doc .tbl tr:last-child td { border-bottom: none; }

/* Encadré : ce que l'abonné doit lire même s'il parcourt le document en
   diagonale — renonciation à rétractation, nature du service, médiateur. */
.doc .encadre {
  background: var(--panel-2);
  border-left: 2px solid var(--sceau);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 14px 18px; margin: 18px 0;
}

@media (max-width: 620px) {
  .doc .tbl, .doc .tbl tbody, .doc .tbl tr, .doc .tbl td { display: block; width: 100%; }
  .doc .tbl thead { display: none; }
  .doc .tbl tr {
    border: 1px solid rgba(17,17,17,.16); border-radius: var(--r);
    padding: 6px 4px; margin-bottom: 12px;
  }
  .doc .tbl td { border-bottom: none; padding: 5px 12px; }
}

/* Trois formules au lieu de deux : la grille doit tenir sur un écran de
   portable sans réduire les cartes à des vignettes illisibles. */
.tarifs-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .tarifs-trois { grid-template-columns: 1fr; } }
.tarif-etiq-jade { background: var(--jade); color: var(--encre); }

/* Bloc « écoles » : c'est une vente B2B au milieu d'une page grand public.
   Un fond légèrement distinct évite qu'un particulier s'y attarde et qu'une
   école le manque. */
.bloc-ecole {
  background: var(--panel-2);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}
.carte-ecole { background: var(--creme); }
.carte-titre {
  font-family: var(--f-ui); font-size: 15px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--violet-txt); margin: 0 0 10px;
}

/* Étymologie du nom. « Keiraku » ne dit rien à un francophone : donnée une
   fois, en évidence mais sans solennité, elle ancre le mot. Sans elle, le nom
   reste une suite de syllabes qu'on n'ose pas prononcer à voix haute. */
.etymo {
  display: block; margin-bottom: 6px;
  color: var(--violet-txt); font-family: var(--f-ui);
  font-size: 15px; letter-spacing: 2px;
}
.etymo b { font-size: 17px; font-weight: 400; letter-spacing: 4px; }
.etymo em { font-style: italic; letter-spacing: 1px; }

/* ══════════════════════════════════════════════════════════════════════
   Charte « Encre » — réglages typographiques
   ══════════════════════════════════════════════════════════════════════
   BenchNine était une capitale très étroite, qui demandait 3 à 5 px
   d'interlettrage pour respirer. Inter en capitales est bien plus large :
   au même interlettrage, les libellés se disloquent. Toutes les valeurs
   d'espacement sont donc reprises à la baisse.                        */

.sur-titre, .nav-links a, .pied a, .tarif-nom, .chiffre span, .btn,
.tarif-etiq, .doc dt, .doc .tbl th {
  letter-spacing: 1.4px;
  font-weight: 500;
}
.brand-name { letter-spacing: 2px; font-weight: 600; font-size: 20px; }
.btn { font-size: 15px; letter-spacing: 1.6px; font-weight: 500; }

/* Newsreader a un œil large et des pleins marqués : les grands titres
   demandent une approche resserrée pour ne pas se déliter. */
h1, h2 { letter-spacing: -.4px; }
h1 { font-weight: 400; }
h2 { font-weight: 400; }
.tarif-prix, .chiffre b { font-weight: 500; letter-spacing: -1px; }

.nav { background: rgba(251,250,247,.9); }

/* Le modèle en rotation, au haut de la page ------------------------- */
/* Mêmes bordure, rayon et ombre que la capture qu'il remplace : c'est le même
   objet, il ne doit pas changer d'aspect quand la vidéo prend la main. */
.capture-video {
  width: 100%; height: auto; display: block;
  border-radius: var(--r); border: 1px solid var(--line);
  box-shadow: 0 18px 46px rgba(17,17,17,.16);
  background: #131316;
}
.capture-video[hidden] { display: none; }

/* Le prix barré de la formule annuelle -------------------------------- */
/* Douze mensualités font 108 € ; l'annuel est à 69. Tant que la comparaison
   n'est pas écrite, le lecteur doit la calculer — et ne la calcule pas.
   Posé AU-DESSUS du prix, et non à côté : mis sur la même ligne, il chassait
   le « / an » à la ligne suivante et rompait l'alignement des trois cartes. */
.tarif-avant {
  margin: 0 0 2px;
  font-size: 15px;
  color: var(--gris);
  min-height: 20px;
}
.tarif-avant s {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--sceau);
  margin-right: 4px;
}
.tarif-sous b { color: var(--sceau-txt); font-weight: 500; }

/* Les cartes réagissent à la main qui les survole. Une élévation de trois
   pixels suffit à dire « ceci se choisit » ; au-delà, on fait du décor. */
.tarif {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tarif:hover, .tarif:focus-within {
  transform: translateY(-3px);
  border-color: var(--filet);
  box-shadow: 0 14px 34px rgba(17,17,17,.10);
}
.tarif-mis:hover, .tarif-mis:focus-within { border-color: var(--sceau); }

@media (prefers-reduced-motion: reduce) {
  .tarif { transition: none; }
  .tarif:hover, .tarif:focus-within { transform: none; }
}

/* La seconde phrase du titre commence sur sa propre ligne ----------- */
/* Elle porte l'opposition (apprendre / retrouver sur un cheval) : la
   détacher la rend lisible d'un coup d'œil. Elle reste libre de passer à la
   ligne : une phrase entière interdite de coupure débordait de l'écran
   d'un téléphone. */
.hero h1 em { display: block; }

/* Écrans étroits : le haut de page doit laisser voir le cheval ------- */
/* Sur un iPhone SE, l'en-tête occupait 634 px des 667 disponibles. On ne
   cherche pas à tout faire tenir — les deux boutons passent avant le visuel —
   mais à ce qu'un pouce suffise pour atteindre le cheval qui tourne. */
@media (max-width: 430px) {
  .hero { padding-top: 34px; padding-bottom: 20px; }
  .hero h1 { font-size: 40px; }
  .hero .lead { margin-bottom: 20px; }
  .hero-actions { gap: 10px; }
}

/* Rappel de prix sous le dernier appel à l'action -------------------- */
.final-prix {
  margin: 18px auto 0; max-width: 48ch;
  font-size: 15px; color: var(--gris);
}

/* Qui a fait ce travail --------------------------------------------- */
.auteur-photo { margin: 0; }
.auteur-photo img {
  width: 100%; border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(17,17,17,.14);
}
.auteur-photo figcaption {
  margin-top: 11px; font-size: 15px; line-height: 1.55; color: var(--txt-dim);
}

/* Les trois chiffres passent sous le duo, en une rangée : ce sont des
   repères de confiance, pas une colonne de mise en page. */
.auteur-chiffres {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 34px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.auteur-chiffres .chiffre {
  background: var(--panel);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 4px;
}
.auteur-chiffres .chiffre b {
  font-family: var(--f-title); font-size: 38px; line-height: 1;
  color: var(--txt-fort);
}
.auteur-chiffres .chiffre span { font-size: 15px; color: var(--gris); }
.auteur-lien { margin-top: 4px; font-size: 15px; color: var(--gris); }
.auteur-lien a { color: var(--sceau-txt); text-underline-offset: 3px; }
#auteur .duo-txt p + p { margin-top: 14px; }

/* Les ancres s'arrêtent SOUS la barre fixe -------------------------- */
/* La barre de navigation est en position sticky sur 62 px. Sans cette marge,
   un lien du menu amène le haut de la section derrière elle : on arrive sur
   un intitulé à moitié caché, et le lecteur croit avoir mal cliqué.
   Vaut aussi pour le lien d'évitement, qui vise <main>. */
:target,
section[id],
main[id] {
  scroll-margin-top: 78px;
}

/* Texte et photo calés en haut ------------------------------------- */
/* La grille .duo centre ses colonnes, ce qui convient à deux blocs de
   hauteur voisine. Ici la photo est bien plus haute que le texte : centré,
   celui-ci flottait sous un vide de 180 px. */
#auteur .duo { align-items: start; }

/* =====================================================================
   HERO À DEUX COLONNES — 20 septembre 2026
   =====================================================================
   Le haut de page était un empilement : la promesse, puis la preuve,
   séparées par un demi-écran. Un commentaire du fichier le notait déjà
   — « on lisait la promesse sans jamais voir ce qu'elle promet ». Les
   deux tiennent désormais côte à côte au-dessus de la pliure.

   Seuil à 1000 px, et pas moins : en deçà, la colonne de texte tombe
   sous 34 caractères et le cheval sous la largeur d'un pouce. Aucun
   des deux ne dit plus rien. On empile alors, comme avant.
   ===================================================================== */
/* Une seule colonne, centrée : le logo, son horizon de lumière, la promesse,
   puis le cheval en dessous, comme une scène qui s'ouvre. Le haut du cheval
   reste visible à la pliure, ce qui invite à descendre. */
@media (min-width: 1000px) {
  .hero-grille {
    max-width: var(--colonne-large);
    margin: 0 auto;
    padding: var(--e-6) var(--e-5) var(--e-5);
  }
  .hero-grille .hero { padding: 0; }
  .hero-grille .capture { max-width: 1040px; margin: 44px auto 0; padding: 0; }
}

/* ── Cadrage des captures ────────────────────────────────────────────
   Un rectangle à angle vif posé sur le papier, avec un filet d'un
   pixel, ne se lit pas comme un écran : il se lit comme une illustration
   mal détourée. Trois choses le posent — un rayon franc, une ombre à
   deux couches, et un liseré intérieur clair qui imite la tranche.
   C'est le même vocabulaire d'élévation que l'application, pour que les
   deux surfaces se ressemblent. */
.capture img,
.capture video {
  border-radius: var(--r-3);
  border: var(--trait) solid var(--bord);
  box-shadow: var(--ombre-3);
}
.capture { position: relative; }
.capture figcaption {
  margin-top: var(--e-3);
  font-size: var(--t-2);
  color: var(--texte-doux);
}

/* Le paragraphe qui explique le fonctionnement était centré sur toute la
   largeur, sous une grille alignée à gauche : il flottait, rattaché à
   rien. Il commente ce que le visuel montre, il prend donc la colonne du
   texte, au même bord. */
@media (min-width: 1000px) {
  .apres-capture {
    max-width: var(--colonne-large);
    margin: var(--e-5) auto 0;
    padding: 0 var(--e-5);
    text-align: left;
  }
  .apres-capture > * { max-width: 46ch; }
}

/* =====================================================================
   LES QUATORZE MÉRIDIENS — 20 septembre 2026
   =====================================================================
   C'était une grille grise de quatorze cases identiques, où le chiffre
   de chacune se lisait un par un sans qu'aucune comparaison n'apparaisse.
   Or les comptes sont très inégaux — soixante-sept pour la Vessie, sept
   pour le Cœur — et c'est une information sur le corpus.

   Chaque ligne porte donc une jauge proportionnelle, dans la couleur du
   méridien. Ces couleurs sont celles de l'application, assignées par les
   Cinq Éléments : elles ne sont pas décoratives, elles sont la légende.

   ⚠ Elles échouent à l'audit d'une palette de graphique — le Triple
   Réchauffeur et le Maître du Cœur sont à ΔE 8,6 l'un de l'autre. C'est
   VOULU : ils sont tous deux du Feu. La règle qui s'applique alors est
   que l'identité ne doit jamais tenir à la couleur seule. D'où le code,
   le nom, le chiffre ET l'élément, tous écrits sur chaque ligne ; la
   jauge n'ajoute qu'une lecture, elle n'en porte aucune à elle seule.
   ===================================================================== */
.mer-grille {
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: none;
  gap: var(--e-1) var(--e-5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.mer-grille li {
  background: none;
  box-shadow: none;
  border-radius: var(--r-2);
  padding: var(--e-2) var(--e-3);
  display: grid;
  grid-template-columns: 2.4em 1fr 1fr auto;
  align-items: center;
  gap: var(--e-3);
  white-space: nowrap;
  transition: background var(--vite) var(--sortie);
}
.mer-grille li:hover { background: var(--surface-2); }

/* La pastille de code : la couleur en fond très dilué, le texte à
   l'encre. Le guide est formel — le texte ne porte jamais la couleur de
   la série, sans quoi huit des quatorze tomberaient sous 3:1. */
.mer-grille b {
  font-size: var(--t-1);
  letter-spacing: var(--ls-caps);
  color: var(--texte);
  text-align: center;
  padding: var(--e-1) 0;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--mer-c) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mer-c) 90%, transparent);
  font-weight: 600;
}
.mer-nom { font-size: var(--t-2); color: var(--texte); }

/* La jauge. Bout arrondi côté valeur, calé à gauche sur la même
   origine pour toutes : c'est l'alignement qui rend la comparaison
   possible d'un coup d'œil. */
.mer-jauge {
  height: 8px;
  border-radius: var(--r-pilule);
  background: color-mix(in srgb, var(--mer-c) 14%, var(--surface-2));
  overflow: hidden;
}
.mer-jauge i {
  display: block;
  height: 100%;
  width: calc(var(--mer-part) * 100%);
  background: var(--mer-c);
  border-radius: var(--r-pilule);
}
.mer-n {
  font-size: var(--t-2);
  font-variant-numeric: tabular-nums;
  color: var(--texte);
  min-width: 2.2em;
  text-align: right;
}
/* L'élément, en dernier et en retrait : il explique pourquoi deux
   méridiens partagent une teinte, sans revendiquer l'attention. */
.mer-el {
  grid-column: 2 / -1;
  font-size: var(--t-0);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--texte-faible);
  margin-top: -2px;
}
@media (max-width: 560px) {
  .mer-grille li { grid-template-columns: 2.4em 1fr auto; }
  .mer-jauge { grid-column: 2 / -1; order: 3; }
  .mer-el { display: none; }
}

/* =====================================================================
   LE BANDEAU DE CHIFFRES — 20 septembre 2026
   =====================================================================
   Quatre cases grises bordées d'un filet, façon tableau : le chiffre y
   était enfermé au lieu d'être annoncé. On enlève la boîte. Ce qui tient
   la ligne n'est plus une bordure mais le rythme — un trait court au
   sceau au-dessus de chaque nombre, et de l'air autour.

   Le sceau, et rien d'autre : la couleur appartient aux méridiens, et
   ils sont juste en dessous. Un bandeau bariolé leur volerait la
   lecture.
   ===================================================================== */
.chiffres {
  background: none;
  border: 0;
  border-radius: 0;
  gap: var(--e-5);
  border-top: var(--trait) solid var(--bord);
  padding-top: var(--e-6);
}
.chiffre {
  background: none;
  padding: 0;
  text-align: left;
}
/* Le trait d'attaque. Court, au sceau : il donne le départ de la
   colonne et pose la seule couleur du bandeau. */
.chiffre::before {
  content: "";
  display: block;
  width: 28px;
  height: var(--trait-fort);
  background: var(--marque-sceau);
  margin-bottom: var(--e-3);
}
.chiffre b {
  font-size: clamp(40px, 4.4vw, 58px);
  font-weight: 400;
  letter-spacing: var(--ls-titre);
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}
.chiffre span {
  font-size: var(--t-1);
  letter-spacing: var(--ls-caps-large);
  color: var(--texte-doux);
  display: block;
  margin-top: var(--e-1);
}
@media (max-width: 640px) {
  .chiffres { gap: var(--e-5) var(--e-4); }
  .chiffre b { font-size: 38px; }
}

/* ==================================================================
   COUCHE DE FINITION — septembre 2026

   La page disait déjà tout ce qu'elle avait à dire, mais sur dix
   sections identiques posées sur le même fond : un document, pas une
   vitrine. Ce qui suit ne change pas un mot, ne déplace pas un bloc.
   Elle travaille les quatre choses qui font qu'une page donne envie :
   le RYTHME (papier et encre alternés), l'ÉCHELLE (une typographie qui
   ose), la MATIÈRE (grain, ombres portées, cadres) et le MOUVEMENT
   (des apparitions au défilement, discrètes).

   La charte ne bouge pas : du papier, de l'encre, un seul rouge.
   ================================================================== */

/* ── Le grain ──────────────────────────────────────────────────────
   Du papier, pas un écran. Une turbulence SVG à très faible opacité,
   posée une fois sur tout le document, fixe au défilement : l'œil ne
   la voit pas, mais il sent la différence quand on l'enlève. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}
#contenu, .topbar, .pied { position: relative; z-index: 1; }

/* ── La règle de progression ───────────────────────────────────────
   Deux pixels de sceau sous la barre de navigation. Sur une page de
   dix mille pixels, savoir où l'on en est change le rapport au
   défilement : on ne s'y perd plus. */
.progression {
  position: fixed;
  top: var(--topbar-h, 61px);
  left: 0; right: 0;
  height: 2px;
  z-index: 40;
  pointer-events: none;
}
.progression i {
  display: block;
  height: 100%;
  width: var(--part, 0%);
  background: var(--sceau);
  transition: width 90ms linear;
}

/* ── L'échelle ─────────────────────────────────────────────────────
   Le titre de couverture osait 52 px. À cette taille il informe ; il
   n'impressionne pas. On passe à une échelle fluide qui monte à 86 px
   sur un grand écran, avec l'interlettrage resserré que demandent les
   grandes tailles en serif. */
.hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.022em;
}
.bloc > h2 {
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.016em;
}
.lead { font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.55; }

/* ── Les chapitres ─────────────────────────────────────────────────
   Un numéro et un filet devant le sur-titre. C'est le geste le plus
   économique qui existe pour transformer une suite de sections en un
   sommaire : on sait combien il en reste, donc on continue. */
.sur-titre[data-ch] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sur-titre[data-ch]::before {
  content: attr(data-ch);
  font-variant-numeric: tabular-nums;
  font-size: .82em;
  opacity: .55;
}
.sur-titre[data-ch]::after {
  content: '';
  flex: 1;
  height: 1px;
  max-width: 88px;
  background: currentColor;
  opacity: .28;
}

/* ── Les sections d'encre ──────────────────────────────────────────
   Le coup de force de cette refonte, et le moins coûteux.

   L'application est SOMBRE. Posées sur du papier, ses captures étaient
   des rectangles noirs, des trous dans la page ; on les subissait. Sur
   un fond d'encre, elles cessent d'être des images pour devenir le
   sujet, et l'alternance donne au défilement la respiration qui lui
   manquait. Deux sections seulement : celle qui montre l'application,
   et celle qui dit où elle s'emporte. Trois en feraient un thème, et
   la page basculerait dans un autre registre. */
.bloc-encre {
  position: relative;
  color: var(--papier);
  background: var(--encre);
  /* Pleine largeur.
     `.bloc` est centré par `margin: 0 auto` dans un conteneur qui occupe
     déjà tout l'écran. Il suffit donc de lever son `max-width` et de
     recréer la gouttière en rembourrage. Les marges négatives que j'avais
     d'abord posées annulaient le centrage automatique, et la bande partait
     se coller à gauche en gardant sa largeur de 1080 px. */
  max-width: none;
  padding-left: max(24px, calc(50vw - var(--max, 1080px) / 2));
  padding-right: max(24px, calc(50vw - var(--max, 1080px) / 2));
  padding-top: clamp(64px, 8vw, 116px);
  padding-bottom: clamp(64px, 8vw, 116px);
}
/* Une lueur très basse en haut de bande : la lumière d'une lampe sur
   une page, le même geste que la fiche de l'application. */
.bloc-encre::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 220px;
  background: linear-gradient(rgba(255,255,255,.045), transparent);
  pointer-events: none;
}
.bloc-encre h2,
.bloc-encre h3 { color: var(--papier); }
.bloc-encre .lead,
.bloc-encre p,
.bloc-encre li { color: rgba(251,250,247,.74); }
.bloc-encre .sur-titre { color: #E8907F; }
.bloc-encre strong,
.bloc-encre b { color: var(--papier); }
.bloc-encre figcaption { color: rgba(251,250,247,.56); }
.bloc-encre .carte {
  background: rgba(255,255,255,.045);
  border-color: rgba(251,250,247,.16);
}
.bloc-encre .puces li::before { color: #E8907F; }

/* ── Les captures, traitées comme des objets ───────────────────────
   Elles flottaient, sans cadre ni ombre, comme une image collée dans
   un traitement de texte. Un filet, un arrondi et une ombre portée à
   deux niveaux suffisent à leur donner un poids : on croit voir un
   écran, pas un fichier. */
.duo-fig picture,
.capture picture { display: block; }
/* ...et `display` écrase l'attribut `hidden`, qui ne passe que par la
   feuille par défaut du navigateur. Sans cette ligne, l'image fixe du haut
   de page reste affichée SOUS la vidéo qui la remplace : on voit deux
   chevaux. Corrigé une première fois en septembre, réintroduit ici par la
   règle ci-dessus, et rattrapé à la capture. */
.duo-fig picture[hidden],
.capture picture[hidden] { display: none; }
.duo-fig img,
.capture img,
.capture video {
  border-radius: 12px;
  border: 1px solid rgba(22,22,26,.14);
  box-shadow:
    0 1px 2px rgba(22,22,26,.10),
    0 18px 38px -14px rgba(22,22,26,.34);
}
.bloc-encre .duo-fig img,
.bloc-encre .capture img {
  border-color: rgba(251,250,247,.14);
  box-shadow:
    0 1px 2px rgba(0,0,0,.5),
    0 26px 54px -18px rgba(0,0,0,.75);
}

/* ── Les apparitions ───────────────────────────────────────────────
   Seize pixels de montée et un fondu, décalés d'un bloc à l'autre.
   Assez pour que la page paraisse vivante, assez peu pour qu'on ne
   puisse pas dire ce qui a bougé. Coupé net si le visiteur a demandé
   de limiter les animations : ce n'est pas une préférence décorative,
   c'est une question de confort, parfois de santé. */
@media (prefers-reduced-motion: no-preference) {
  .revele {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s var(--sortie, cubic-bezier(.22,.61,.36,1)),
                transform .6s var(--sortie, cubic-bezier(.22,.61,.36,1));
  }
  .revele.vu { opacity: 1; transform: none; }
}

/* ── Les boutons des cartes de tarif ───────────────────────────────
   « Choisir l'offre annuelle » se cassait sur trois lignes, « Commencer
   avec Keiraku » sur deux. Un bouton d'achat qui bégaie donne le
   sentiment d'un formulaire mal fini, au seul endroit de la page où il
   faut inspirer confiance. On resserre l'approche et on descend d'un
   cran en taille DANS LES CARTES SEULEMENT : les boutons du haut de
   page, eux, ont la place. */
.tarif .btn {
  font-size: 13.5px;
  letter-spacing: 1.2px;
  padding: 12px 14px;
  width: 100%;
  text-wrap: balance;
}

/* ── La section de l'auteur ────────────────────────────────────────
   Le texte tenait sur une colonne étroite et la photo à côté, laissant
   un tiers de page vide sous l'un comme sous l'autre. On rééquilibre :
   le texte prend sa mesure de lecture, la photo occupe vraiment sa
   colonne, et l'avertissement passe en pleine largeur — c'est une
   mention qui s'adresse à tous, pas une note de bas de page. */
#auteur .duo { align-items: start; }
#auteur .auteur-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: 12px;
}
.avert {
  max-width: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sceau);
  border-radius: 12px;
  padding: 24px 28px;
}
.avert h3 { margin-top: 0; }

/* ── La barre de navigation, au défilement ─────────────────────────
   Elle se pose : un filet et une ombre très courte apparaissent dès
   qu'on quitte le haut de page. Sans cela elle flotte au-dessus du
   contenu sans qu'on sache si elle est fixe ou non. */
.topbar, .nav {
  transition: box-shadow .2s var(--sortie, ease), background .2s ease;
}
.topbar.posee, .nav.posee {
  box-shadow: 0 1px 0 var(--line), 0 10px 24px -18px rgba(22,22,26,.4);
}

/* ── Les questions ─────────────────────────────────────────────────
   Un accordéon en <details>, et non un script : il fonctionne sans
   JavaScript, se déplie tout seul quand on imprime la page, et reste
   accessible au clavier sans qu'on ait à le prévoir. */
.faq { max-width: 74ch; display: grid; gap: 2px; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 40px 18px 0;
  position: relative;
  font-family: var(--f-titre, Georgia, serif);
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  line-height: 1.35;
  transition: color var(--vite, .12s);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--sceau-txt, var(--sceau)); }
/* Une croix qui pivote : plus sobre qu'un chevron, et elle dit aussi
   bien « ouvert » que « fermé » sans flèche directionnelle. */
.faq summary::after {
  content: '';
  position: absolute;
  right: 6px; top: 50%;
  width: 13px; height: 13px;
  margin-top: -6px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  opacity: .5;
  transition: transform .22s var(--sortie, ease), opacity var(--vite, .12s);
}
.faq details[open] summary::after { transform: rotate(135deg); opacity: .85; }
.faq details[open] summary { color: var(--sceau-txt, var(--sceau)); }
.faq details p {
  margin: 0 0 20px;
  padding-right: 40px;
  color: var(--txt-dim);
  line-height: 1.6;
  max-width: 66ch;
}

/* =====================================================================
   Haut de page sombre : l'ouverture des films Instagram
   ---------------------------------------------------------------------
   Le logo apparaît lettre à lettre, dans un flou qui se resserre, puis un
   trait de lumière le traverse ; de la poussière flotte dans la lumière
   (dessinée par le script juste sous le haut de page). La bande est sombre
   parce que ces effets n'existent que sur du noir : un trait de lumière
   sur du papier ne se voit pas. Le reste de la page garde son papier.
   ===================================================================== */
.hero-sombre {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, #202026 0%, #141417 55%, #0D0D0F 100%);
  color: #EDEAE4;
  padding-bottom: 56px;
}
.hero-sombre .hero h1 { color: #EDEAE4; }
.hero-sombre .hero h1 em { color: var(--sceau); }
.hero-sombre .lead { color: rgba(237, 234, 228, .86); }
.hero-sombre .hero-note,
.hero-sombre .apres-capture,
.hero-sombre .capture figcaption { color: #A29C93; }
.hero-sombre .apres-capture .etymo { color: var(--sceau); }
.hero-sombre .btn-creux { border-color: rgba(237, 234, 228, .3); color: #EDEAE4; }
.hero-sombre .btn-creux:hover { border-color: var(--sceau); color: #EDEAE4; }
.hero-sombre .capture img,
.hero-sombre .capture video {
  border-color: rgba(237, 234, 228, .14);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(237, 234, 228, .04);
}

/* Le logo */
.hero-marque {
  position: relative;
  display: inline-block;
  margin: 0 0 26px;
  font: 500 clamp(30px, 4.4vw, 50px)/1 var(--f-ui);
  letter-spacing: .3em;
  margin-right: -.3em;           /* l'interlettrage ne doit pas décentrer le mot */
  color: #EDEAE4;
}
.hero-marque b { color: var(--sceau); font-weight: 500; }
.hero-marque i {
  display: inline-block;
  font-style: normal;
  animation: marque-lettre 1.2s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--n) * 75ms + 150ms);
}
/* Le trait de lumière, et la lueur qui l'accompagne. */
.hero-marque::after,
.hero-marque::before {
  content: '';
  position: absolute;
  top: 50%;
  pointer-events: none;
}
.hero-marque::after {
  left: -35%; right: -35%;
  height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, rgba(255, 238, 220, 0) 0%, rgba(255, 242, 228, .95) 50%, rgba(255, 238, 220, 0) 100%);
  animation: marque-trait 1.9s ease-in-out .55s both;
}
.hero-marque::before {
  left: 0; width: 220px; height: 220px; margin: -110px 0 0 -110px;
  background: radial-gradient(circle, rgba(255, 236, 214, .42) 0%, rgba(255, 236, 214, 0) 62%);
  animation: marque-lueur 1.9s ease-in-out .55s both;
}
@keyframes marque-lettre {
  from { opacity: 0; filter: blur(10px); transform: translateY(6px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes marque-trait {
  0% { opacity: 0; transform: translateX(-50%) scaleX(.5); }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(50%) scaleX(.5); }
}
@keyframes marque-lueur {
  0% { opacity: 0; left: -10%; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; left: 110%; }
}
/* Mouvement réduit : le logo est là d'emblée, sans trait ni lueur. */
@media (prefers-reduced-motion: reduce) {
  .hero-marque i { animation: none; }
  .hero-marque::after, .hero-marque::before { display: none; }
}

/* Liste des nouveautés, en bas de page */
.bloc-nouveautes { max-width: 620px; margin: 0 auto; text-align: center; padding-top: 10px; }
.bloc-nouveautes h3 { font-family: var(--f-title); font-size: 1.5rem; margin: 0 0 8px; }
.bloc-nouveautes > p { color: var(--gris); margin: 0 0 18px; }
.nv-ligne { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.nv-ligne input[type=email] {
  flex: 1 1 240px; min-height: 44px; padding: 0 14px; font: inherit; font-size: 16px;
  border: 1px solid var(--filet); border-radius: var(--r-2, 6px); background: #fff; color: var(--txt);
}
.nv-accord { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin-top: 14px;
  font-size: 14px; line-height: 1.5; color: var(--gris); cursor: pointer; }
.nv-accord input { margin-top: 4px; flex: none; width: 18px; height: 18px; accent-color: var(--sceau); }
.nv-msg { min-height: 1.4em; margin: 12px 0 0; font-size: 15px; color: var(--txt); }
.nv-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* =====================================================================
   Pages publiques des points (points/*.html, tools/pages_points.py)
   ===================================================================== */
.pt { max-width: 760px; }
.pt-fil { font-size: 14px; color: var(--gris); margin: 0 0 18px; }
.pt-fil a { color: var(--gris); }
.pt h1 { margin-bottom: 4px; }
.pt-trad { font: italic 400 1.35rem/1.3 var(--f-title); color: var(--sceau-txt); margin: 0 0 14px; }
.pt-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.pt-badge { font-size: 12.5px; letter-spacing: .4px; padding: 4px 11px; border: 1px solid var(--filet); border-radius: 999px; color: var(--txt); }
.pt-image { margin: 0 0 30px; }
.pt-image img { width: 100%; height: auto; display: block; border-radius: var(--r-3, 10px); border: 1px solid var(--bord, #DDD8CE); box-shadow: var(--ombre-3, 0 18px 46px rgba(17,17,17,.16)); background: #131316; }
.pt-image figcaption { margin-top: 10px; font-size: 14px; color: var(--gris); }
.pt-repere { font: 400 1.2rem/1.5 var(--f-title); }
.pt-appel { margin: 34px 0; padding: 24px; border-radius: var(--r-3, 10px); background: #141417; color: #EDEAE4; text-align: center; }
.pt-appel p { margin: 0 0 14px; font-size: 1.05rem; }
.pt-appel .pt-note { margin: 12px 0 0; font-size: 13.5px; color: #A29C93; }
.pt-avert { font-size: 14px; color: var(--gris); border-left: 2px solid var(--filet); padding-left: 14px; margin: 28px 0; }
.pt-autres { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-autres a { padding: 7px 12px; border: 1px solid var(--filet); border-radius: var(--r-2, 6px); text-decoration: none; color: var(--txt); font-weight: 500; }
.pt-autres a span { font-weight: 400; color: var(--gris); margin-left: 4px; }
.pt-autres a:hover { border-color: var(--sceau); }
.pt-index { max-width: 1000px; }
.pt-signature { font-size: 14px; color: var(--gris); margin: -10px 0 26px; }
.pt-signature a { color: var(--txt); }
.pt-bref { font-size: 1.08rem; line-height: 1.65; margin: 0 0 28px; max-width: 68ch; }
.pt-faits { font-size: 14px; letter-spacing: .3px; color: var(--sceau-txt); margin: 0 0 8px; }
.pt-cats { margin: 0 0 10px; }
.pt-cats dt { font-weight: 600; margin-top: 14px; }
.pt-cats dd { margin: 4px 0 0; color: var(--txt); }
.pt-mers { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin: 22px 0; }
.pt-mer { border: 1px solid var(--filet); border-left: 4px solid var(--mer-c, var(--sceau)); border-radius: var(--r-3, 10px); padding: 16px 18px; background: var(--panel); scroll-margin-top: 90px; }
.pt-mer h3 { margin: 0 0 6px; font-size: 1.1rem; }
.pt-mer h3 span { font-family: var(--f-title); font-style: italic; font-weight: 400; color: var(--gris); }
.pt-mer p { margin: 0 0 6px; font-size: 15px; }
.pt-grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 26px 0; }
.pt-carte { display: flex; flex-direction: column; text-decoration: none; color: var(--txt); border: 1px solid var(--filet); border-radius: var(--r-3, 10px); overflow: hidden; background: var(--panel); }
.pt-carte img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #131316; }
.pt-carte span { padding: 0 14px; }
.pt-c-code { margin-top: 12px; font-weight: 600; font-size: 1.1rem; }
.pt-c-nom { font-family: var(--f-title); font-style: italic; }
.pt-c-mer { margin: 2px 0 14px; font-size: 13px; color: var(--gris); }
.pt-carte:hover { border-color: var(--sceau); }

/* =====================================================================
   Barre du haut de la page d'accueil, assortie à l'ouverture sombre.
   Seule la page qui a l'ouverture sombre est concernée : les pages
   légales et celles des points gardent leur barre claire.
   ===================================================================== */
.nav-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
body:has(.hero-sombre) .nav {
  background: rgba(20, 20, 23, .92);
  border-bottom-color: rgba(237, 234, 228, .1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body:has(.hero-sombre) .nav .brand-name,
body:has(.hero-sombre) .nav .brand-mark { color: #EDEAE4; }
body:has(.hero-sombre) .nav .brand-name em { color: var(--sceau); }
body:has(.hero-sombre) .nav-links a { color: #C9C3B9; }
body:has(.hero-sombre) .nav-links a:hover { color: #FFFFFF; }
body:has(.hero-sombre) .nav .btn-creux { color: #EDEAE4; border-color: rgba(237, 234, 228, .3); }
body:has(.hero-sombre) .nav .btn-creux:hover { border-color: var(--sceau); }
@media (max-width: 420px) {
  .nav-actions .btn-sm { padding-left: 12px; padding-right: 12px; letter-spacing: 1.5px; }
}
.pt-appel p:not(.pt-note) { color: #EDEAE4; }
.pt-avert { max-width: 68ch; }

/* Offre de lancement (texte rempli par js/vitrine.js depuis /api/tarifs). */
.hero-lancement {
  display: inline-block; margin: 14px 0 0; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(191, 59, 46, .6); color: #EDEAE4; font-size: 14px; line-height: 1.45;
  background: rgba(191, 59, 46, .14);
}
.hero-lancement[hidden], .tarif-lancement[hidden] { display: none; }
.tarif-lancement {
  margin: 12px 0 4px; padding: 10px 12px; border-radius: var(--r-2, 6px);
  background: rgba(191, 59, 46, .08); border: 1px solid rgba(191, 59, 46, .35);
  color: var(--txt); font-size: 14px; line-height: 1.45;
}

/* Les cartes réagissent au survol (ordinateur seulement) : un léger
   soulèvement, et le filet prend la couleur du sceau. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .carte, .chiffre, .pt-carte {
    /* L'opacité garde la durée de l'apparition au défilement (.revele). */
    transition: opacity .6s var(--sortie, ease), transform .3s var(--sortie, ease),
                box-shadow .25s var(--sortie, ease), border-color .25s;
  }
  .carte:hover, .pt-carte:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(17, 17, 17, .10);
  }
  .chiffre:hover { transform: translateY(-2px); }
}

/* Les vidéos des figures prennent exactement la place et l'habit des
   captures qu'elles remplacent. */
.duo-fig video { width: 100%; height: auto; display: block; }
.duo-fig video[hidden] { display: none; }
.duo-fig video {
  border-radius: 12px;
  border: 1px solid rgba(22,22,26,.14);
  box-shadow: 0 1px 2px rgba(22,22,26,.10), 0 18px 38px -14px rgba(22,22,26,.34);
  background: #131316;
}
.bloc-encre .duo-fig video {
  border-color: rgba(251,250,247,.14);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 26px 54px -18px rgba(0,0,0,.75);
}

/* =====================================================================
   La grande bande sombre (après « Les sources »)
   ===================================================================== */
.bande-film {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(78vh, 760px); background: #0D0D0F; color: #EDEAE4;
  display: flex; align-items: flex-end; justify-content: center;
}
.bande-film picture, .bande-film img, .bande-film video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  display: block; border: 0; border-radius: 0; box-shadow: none;
}
.bande-film picture[hidden], .bande-film video[hidden] { display: none; }
/* Un voile en bas, pour que la phrase se lise sur les membres du cheval. */
.bande-film::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,13,15,0) 45%, rgba(13,13,15,.82) 88%);
}
.bande-texte { max-width: 760px; padding: 0 24px 56px; text-align: center; }
.bande-texte p {
  margin: 0; font: 400 clamp(1.6rem, 3.6vw, 2.7rem)/1.18 var(--f-title);
  text-shadow: 0 2px 22px rgba(0,0,0,.7);
}
.bande-texte em { display: block; margin-top: 6px; font-style: italic; color: #E2D6C8; }
@media (max-width: 640px) {
  .bande-film { min-height: 82vh; }
  .bande-texte { padding-bottom: 42px; }
}

/* « Mon compte » reste visible partout : un abonné doit retrouver son
   compte sans passer par « S'abonner ». */
@media (max-width: 1060px) { .nav-links { display: none; } }
@media (max-width: 420px) {
  .nav { padding: 0 14px; }
  .nav-in { gap: 10px; }
  .nav .brand-name { font-size: 20px; letter-spacing: 3px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-sm { padding-left: 10px; padding-right: 10px; letter-spacing: 1px; }
}
.nav-links a { white-space: nowrap; }

/* Section Écoles, une seule colonne depuis le retrait de l'encadré. */
.ecole-offre { max-width: 62ch; }
.ecole-cgv { margin: 14px 0 0; font-size: 14px; }
.ecole-cgv a { color: var(--gris); }

/* Lien vers la page pilier, dans « Ce que contient l'atlas ». */
.mer-libre { margin: 22px 0 0; text-align: center; }
.mer-libre a { font-weight: 500; color: inherit; text-underline-offset: 4px; }
.mer-libre a::after { content: " →"; }

/* Page « Accéder à Keiraku » (aide.html). */
.aide-sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 8px; }
.aide-sommaire a { padding: 6px 12px; border: 1px solid var(--filet); border-radius: 999px; text-decoration: none; color: var(--txt); font-size: 14px; }
.aide-sommaire a:hover { border-color: var(--sceau); }
.aide h2 { scroll-margin-top: 90px; }
.aide-etapes { padding-left: 1.3em; }
.aide-etapes li { margin-bottom: 30px; }
.aide-etapes li::marker { font-weight: 600; color: var(--sceau-txt); }
.aide-etapes img { display: block; width: 100%; height: auto; margin-top: 12px; border-radius: var(--r-3, 10px); border: 1px solid var(--bord, #DDD8CE); box-shadow: var(--ombre-3, 0 18px 46px rgba(17,17,17,.16)); background: #131316; }
.aide-etapes img.aide-etroite { max-width: 480px; }
.aide-mobile img { max-width: 280px; }
.aide-cartes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 18px 0; }
.aide-cartes section { border: 1px solid var(--filet); border-radius: var(--r-3, 10px); padding: 14px 18px; background: var(--panel); }
.aide-cartes h3 { margin: 0 0 8px; font-size: 1.05rem; }
.aide-cartes ol { margin: 0; padding-left: 1.2em; font-size: 15px; }
.aide-cartes li { margin-bottom: 6px; }
.aide-faq dt { font-weight: 600; margin-top: 16px; }
.aide-faq dd { margin: 4px 0 0; }

/* Pages de méridien (points/meridien-*.html). */
.pt-defile { overflow-x: auto; margin: 18px 0 8px; }
.pt-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pt-table th, .pt-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--filet); }
.pt-table th { font-weight: 500; color: var(--gris); font-size: 13px; letter-spacing: .5px; text-transform: uppercase; }
.pt-table td:first-child { font-weight: 600; white-space: nowrap; }
.pt-table td:nth-child(2) { font-family: var(--f-title); font-style: italic; font-variant-ligatures: none; font-feature-settings: "liga" 0, "dlig" 0; }
.pt-libre { font-size: 11.5px; font-weight: 500; color: var(--sceau-txt); border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; margin-left: 6px; white-space: nowrap; }
.pt-suite { display: flex; justify-content: space-between; gap: 12px; margin: 28px 0 8px; flex-wrap: wrap; }
.pt-suite a { color: var(--txt); }
.pt-autres a[aria-current="page"] { border-color: var(--sceau); }

/* Avis des abonnés (accueil) et page de dépôt d'un avis (avis.html). */
.avis-grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 26px; }
.avis-carte { margin: 0; padding: 20px 22px; border: 1px solid var(--filet); border-radius: var(--r-3, 10px); background: var(--panel); }
.avis-etoiles { margin: 0 0 10px; color: var(--sceau); letter-spacing: 2px; }
.avis-carte blockquote { margin: 0 0 14px; font: 400 1.08rem/1.55 var(--f-title); white-space: pre-line; }
.avis-carte figcaption { font-size: 14px; color: var(--gris); }
.avis-form { margin-top: 18px; }
.avis-notes { border: none; padding: 0; margin: 0 0 18px; display: flex; gap: 6px; flex-wrap: wrap; }
.avis-notes legend { font-weight: 500; margin-bottom: 8px; }
.avis-notes label { cursor: pointer; font-size: 30px; color: var(--filet); line-height: 1; }
.avis-notes input { position: absolute; opacity: 0; }
.avis-notes label:has(input:checked), .avis-notes label:has(~ label input:checked) { color: var(--sceau); }
.avis-notes input:focus-visible + span { outline: 2px solid var(--sceau); outline-offset: 2px; }
.avis-notes .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.avis-champ { display: block; margin-bottom: 16px; }
.avis-champ span { display: block; font-weight: 500; margin-bottom: 6px; }
.avis-champ textarea, .avis-champ input, .avis-champ select { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--bord, #DDD8CE); border-radius: 8px; font: inherit; background: #fff; }
.avis-case { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 18px; font-size: 15px; }
.avis-case input { margin-top: 4px; }
.avis-msg { color: #B3261E; min-height: 1.2em; }
.avis-ok { font-size: 1.15rem; }

.avis-procedure { font-size: 14px; color: var(--gris); max-width: 70ch; margin: 8px 0 0; }

/* Comprendre la MTC : trois vues des modules, côte à côte. */
.mtc-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 28px;
}
.mtc-grille figcaption { text-align: center; }
@media (max-width: 760px) {
  .mtc-grille { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 380px) {
  .nav .brand-mark { display: none; }
  .nav .brand-name { font-size: 18px; letter-spacing: 2px; }
}
@media (max-width: 340px) {
  .nav-actions .btn-sm { padding-left: 8px; padding-right: 8px; letter-spacing: .5px; font-size: 11px; }
}

/* =====================================================================
   L'horizon sous le logo (octobre 2026)
   Une ligne de lumière au sceau, un cœur crème plus court et plus vif, et
   les étincelles du canevas juste dessous, effacées par un masque radial :
   denses contre la ligne, elles se dissolvent vers le titre.
   ===================================================================== */
.hero-sombre .hero-marque { font-size: clamp(40px, 6.6vw, 86px); margin-bottom: 14px; }
.hero-sombre .hero h1 { font-size: clamp(30px, 3.4vw, 48px); max-width: 22ch; margin-left: auto; margin-right: auto; text-wrap: balance; position: relative; }
.hero-horizon {
  position: relative;
  width: min(680px, 94vw);
  height: 150px;
  margin: 0 auto -78px;
  pointer-events: none;
}
.hero-horizon::before,
.hero-horizon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  animation: horizon-ouvre 1.4s cubic-bezier(.2, .7, .2, 1) 1.1s forwards;
}
.hero-horizon::before {
  width: 78%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sceau) 50%, transparent);
  box-shadow: 0 0 10px 1px rgba(191, 59, 46, .6);
}
.hero-horizon::after {
  width: 30%; height: 2px; top: -.5px;
  background: linear-gradient(90deg, transparent, #FFF3E4 50%, transparent);
  box-shadow: 0 0 14px 2px rgba(255, 236, 214, .45);
}
.hero-etincelles {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(50% 100% at 50% 0%, #000 0%, rgba(0,0,0,.65) 42%, transparent 86%);
          mask-image: radial-gradient(50% 100% at 50% 0%, #000 0%, rgba(0,0,0,.65) 42%, transparent 86%);
}
@keyframes horizon-ouvre { to { transform: translateX(-50%) scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-horizon::before, .hero-horizon::after { animation: none; transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .hero-horizon { height: 110px; margin-bottom: -56px; }
}

/* Petit logo de la barre : masqué tant que le grand est à l'écran. */
.nav .brand { transition: opacity .35s ease, transform .35s ease; }
body.logo-haut .nav .brand { opacity: 0; transform: translateY(-4px); pointer-events: none; }