/* Seneve — feuille unique. UN SEUL REGISTRE depuis le 28 août 2026.
   Maquette de référence : docs/lancement/site/maquettes/
   « Site seneve.app - standalone.html », planches 3a…3h.

   ── L'arbitrage, et son demi-tour ────────────────────────────────────────
   Le site a porté DEUX registres pendant trois jours : vert sur les surfaces
   de conversion, papier sur le légal. À l'écran, ça ne se lisait pas comme un
   site à deux sections mais comme deux thèmes. Six pages ne portent pas deux
   identités.

   Tout est donc en vert. Ce que ça simplifie, et qui n'est pas rien :
   la branche mode sombre DISPARAÎT (le vert de la marque n'a pas de variante
   nocturne — c'était déjà la règle sur les surfaces de conversion), et le
   dédoublement or-décor / or-texte devient inutile.

   ⚠️ Ce qui reste du registre papier, c'est son seul vrai argument : on ne
   lit pas un texte long sur un aplat. Les pages légales gardent donc leur
   colonne, mais DANS UNE CARTE posée sur le vert profond (planche 3e).

   ── Contrastes MESURÉS, pas estimés ──────────────────────────────────────
   Sur #2E5540 : ivoire #F3EEDD 7,26:1 · #DCE4DA 6,49:1 · #BFC9BC 4,94:1 ·
   or #E8C54A 5,03:1. Sur #1E3A2C : ivoire 10,66:1 · or 7,38:1.
   Toute nouvelle couleur refait cette mesure. */

:root {
  --ink:        #F3EEDD;   /* 7,26:1 */
  --ink-soft:   #DCE4DA;   /* 6,49:1 */
  --ink-mute:   #BFC9BC;   /* 4,94:1 — le plancher, ne pas descendre plus bas */
  --paper:      #2E5540;
  --band:       #1E3A2C;
  --band-deep:  #14291F;
  --card:       #26493A;
  --rule:       #3B5B48;
  --gold:       #E8C54A;   /* 5,03:1 : passe en TEXTE, pas seulement en décor */
  --gold-text:  #E8C54A;   /* conservé : les pages le nomment encore */
  --on-gold:    #1E3A2C;
  --dot:        #7E9587;   /* les pastilles de séparation — décor, pas texte */

  /* ── Les FRAGMENTS d'interface ─────────────────────────────────────────
     Ils reproduisent des écrans de l'application, qui est claire. Ils ont
     donc leur propre palette, indépendante de celle du site : c'est ce qui
     les fait lire comme « une interface posée sur la page » et non comme un
     bloc de la page. */
  --frag:       #F3EEDD;
  --frag-card:  #ffffff;
  --frag-ink:   #1c1e1b;
  --frag-soft:  #5b6058;
  --frag-rule:  #e6e3da;
  --frag-gold:  #7a5a10;   /* 6,1:1 sur --frag */
  --frag-tint:  #f3e6c9;
  --frag-warm:  #fbe7cc;
  --frag-vert:  #3f7d4e;
  --frag-or:    #e5a93d;
}

* { box-sizing: border-box; }

/* ⚠️ `[hidden]` doit gagner. L'attribut ne pose que `display:none` dans la
   feuille du NAVIGATEUR : n'importe quelle règle d'auteur avec `display`
   la bat en cascade. Sans ce !important, la bascule du jour du listing
   affichait les DEUX états à la fois — constaté à l'écran, pas deviné. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── La mesure ─────────────────────────────────────────────────────────────
   Chaque section est une BANDE pleine largeur avec son propre fond, et son
   contenu est plafonné à 1120 px : les côtés sont occupés par la bande, pas
   par du vide.

   ⚠️ 1200 et non 1120 : la maquette pose 1120 px de CONTENU avec la gouttière
   de 40 px À L'EXTÉRIEUR. Écrire `max-width: 1120px` la mettait à l'intérieur,
   et toutes les pages du site étaient 80 px trop étroites — un écart qui ne se
   voit pas à l'œil et que seule la mesure attrape. */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

a { color: var(--gold); }

/* ── Le header, et sa NAVIGATION ────────────────────────────────────────────
   Le header ne portait AUCUN lien jusqu'au 28 août : marque, date, langue.
   Toute la navigation vivait en pied de page — ce n'est pas de la navigation,
   c'est un colophon, et on ne navigue pas en cliquant en bas.

   Ses entrées sont les SECTIONS DE L'ACCUEIL. C'est ce qui la rend évidente :
   elle ne renvoie pas ailleurs, elle situe dans la page. Les pages qui n'ont
   pas ces ancres (légales, 404) portent « ← Retour au site » à la place. */
.site-head {
  background: var(--band);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 20;
}
.site-head .wrap {
  display: flex; align-items: center; gap: 26px; min-height: 69px;
}
.brand {
  display: flex; align-items: center; gap: 10px; flex: none;
  font-size: 21px; font-weight: 800; letter-spacing: -.2px;
  color: var(--ink); text-decoration: none;
}
/* ⚠️ La MARQUE, pas un emoji. Le site affichait 🌱 dans une pastille dorée :
   ce n'était pas le logo de l'application — c'est une fleur de sénevé à
   quatre pétales — et le dessin de l'emoji change d'une plateforme à l'autre,
   donc la marque n'était même pas la même partout.
   `img/seneve.png` est le VRAI fichier, détouré de l'icône iOS 1024 et réduit
   à 160 px sur une palette de 48 teintes : 2,9 Ko. Pas de pastille derrière —
   le fond de l'icône est déjà le vert de la page. */
.brand .seed { width: 26px; height: 26px; flex: none; display: block; }
.site-nav { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; }
.site-nav a {
  display: flex; align-items: center; height: 44px; padding: 0 8px;
  font-size: 14.5px; font-weight: 700; color: var(--ink-soft);
  text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a.ici { color: var(--ink); border-bottom-color: var(--gold); }
.head-right {
  display: flex; align-items: center; gap: 12px; flex: none;
  margin-left: auto;
}
/* Le retour, sur les pages sans ancres. C'est LUI qui porte la marge
   automatique ; sinon les deux blocs en réclament une chacun et le lien
   atterrit au milieu du header. */
.head-back {
  margin-left: auto; font-size: 14.5px; font-weight: 800;
  color: var(--gold); text-decoration: none;
}
.head-back + .head-right { margin-left: 0; }

/* La pastille du header. AVANT le listing elle porte la date, APRÈS le
   libellé de téléchargement — même boîte de 44 px, rien ne bouge autour.
   Les deux mènent à /dl : avant, la page dit honnêtement que l'app arrive ;
   après, elle route vers le store. Jamais de clic sans destination. */
.cta-mini {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px;
  border-radius: 999px; background: var(--gold); color: var(--on-gold);
  font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.cta-mini:hover { filter: brightness(1.06); }

/* ── Le hero ────────────────────────────────────────────────────────────── */
.hero { background: var(--paper); }
.hero .wrap {
  display: flex; gap: 56px; align-items: flex-start;
  padding-top: 76px; padding-bottom: 82px;
}
.hero-main {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px;
}
.kicker {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 12px; font-weight: 800; letter-spacing: 2.2px; color: var(--gold);
}
.kicker::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); flex: none;
}
.hero h1 {
  font-size: 74px; line-height: .98; font-weight: 800; letter-spacing: -2.6px;
  margin: 0; color: var(--ink);
}
.hero h1 em { font-style: normal; color: var(--gold); }
.tagline {
  font-size: 21px; line-height: 1.5; color: var(--ink-soft);
  max-width: 504px; margin: 0;
}

/* La carte d'attente et les boutons de store occupent EXACTEMENT la même
   boîte : 84 px de haut, 480 de large. Le jour du listing, rien ne bouge. */
.soon-card {
  display: flex; align-items: center; gap: 18px;
  width: 480px; max-width: 100%; min-height: 84px; margin: 0; padding: 0 22px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 18px;
}
.soon-card .seed { width: 46px; height: 46px; flex: none; display: block; }
.soon-card .quoi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.soon-card b {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(--gold);
}
.soon-card span.quand { font-size: 21px; font-weight: 800; color: var(--ink); }

/* ── Les badges de store — ARTWORK OFFICIEL ────────────────────────────────
   Fournis par Apple (toolbox marketing) et Google (Partner Marketing Hub).
   Ils ne se recolorent pas, ne se redessinent pas, ne s'animent pas : les deux
   l'interdisent explicitement, et nos anciens boutons en étaient une imitation
   — glyphe Apple maison plus la formulation exacte du badge.

   48 px de haut : au-dessus des deux minimums (40 px Apple, 28 px Google).
   La gouttière fait 16 px, au-dessus du quart de hauteur que les deux exigent
   comme zone libre (12 px à cette taille). Les deux artworks remplissent leur
   boîte sans marge interne — mesuré — donc une hauteur commune les aligne. */
.cta-row {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  max-width: 100%;
}
.badge-store { display: inline-flex; text-decoration: none; }
.badge-store img { height: 48px; width: auto; display: block; }

/* Les quatre arguments, sous le bouton. Vrais, et rares dans cette
   catégorie : ils ne sont pas une note de bas de page. */
.gages {
  display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin: 0;
  font-size: 14px; font-weight: 700; color: var(--ink-mute);
}
.gages span + span::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 4px; height: 4px; border-radius: 50%; background: var(--dot);
  margin-right: 11px;
}

/* ── La SCÈNE : des fragments d'interface, pas des vignettes ────────────────
   Le pivot de la planche 3. Une capture réduite ne montre rien ; un fragment
   à sa taille est une interface qu'on pourrait toucher.

   ⚠️ Ce sont des REPRODUCTIONS, pas des captures. Elles ne se mettent pas à
   jour toutes seules — tout chiffre qu'elles portent doit être vérifiable et
   stable. Un « 8 sur 12 » s'y est déjà glissé alors que l'app compte 11
   badges. Règle : aucun nombre qui puisse dériver. */
.scene {
  flex: none; width: 500px; display: flex; flex-direction: column; gap: 16px;
}
.frag {
  background: var(--frag); color: var(--frag-ink); border-radius: 20px;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .34);
}
.frag.petit { padding: 16px 18px; gap: 11px; border-radius: 18px; }
.frag .lbl {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--frag-gold); margin: 0;
}
.frag .titre {
  font-size: 20px; font-weight: 800; letter-spacing: -.4px;
  color: var(--frag-ink); margin: 0;
}
.frag .tete { display: flex; align-items: center; gap: 12px; }
.frag .tete > div { flex: 1; min-width: 0; }
.frag .rond {
  width: 40px; height: 40px; border-radius: 13px; flex: none;
  background: var(--frag-tint); display: grid; place-items: center;
  font-size: 20px;
}
.frag .flamme {
  flex: none; background: var(--frag-warm); color: var(--frag-gold);
  font-size: 13px; font-weight: 800; padding: 6px 12px; border-radius: 999px;
}
.frag .jauge { display: flex; align-items: center; gap: 12px; }
.frag .jauge .piste {
  flex: 1; height: 6px; border-radius: 999px; background: #eeece7;
  overflow: hidden;
}
.frag .jauge .piste i { display: block; height: 100%; background: var(--frag-or); }
.frag .jauge .compte {
  flex: none; font-size: 13px; font-weight: 800; color: var(--frag-gold);
  font-variant-numeric: tabular-nums;
}
.frag .tuiles { display: flex; gap: 10px; }
.frag .tuile {
  flex: 1; border-radius: 14px; background: var(--frag-card);
  border: 1px solid var(--frag-rule); padding: 12px 13px;
  display: flex; flex-direction: column; gap: 7px;
}
.frag .tuile.ici { border-color: var(--frag-or); box-shadow: 0 0 0 1px var(--frag-or); }
.frag .tuile b { font-size: 14.5px; font-weight: 800; }
.frag .tuile small { font-size: 12.5px; color: var(--frag-soft); }
.frag .tuile small.fait { color: var(--frag-vert); font-weight: 700; }
.frag .tuile small.jouer { color: var(--frag-gold); font-weight: 700; }

/* La grille de lettres — le geste signature du jeu. */
.grille { display: flex; gap: 7px; }
.grille span {
  width: 42px; height: 42px; border-radius: 8px; display: grid;
  place-items: center; font-size: 19px; font-weight: 800; color: #fff;
  background: var(--frag-vert);
}
.grille span.ailleurs { background: #b99331; }
.grille span.absent { background: #6f746d; }

/* Une ligne de classement, une ligne de membre : même squelette. */
.rangs { display: flex; flex-direction: column; }
.rangs .rang {
  display: flex; align-items: center; gap: 12px; padding: 9px 0;
  font-size: 15.5px; font-weight: 700;
}
.rangs .rang + .rang { border-top: 1px solid var(--frag-rule); }
.rangs .place {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--frag-tint); color: var(--frag-gold);
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.rangs .nom { flex: 1; min-width: 0; }
.rangs .val { flex: none; color: var(--frag-vert); font-weight: 800; }
.rangs .val.calme { color: var(--frag-soft); }

/* Les réponses d'un quiz, telles qu'elles apparaissent après validation. */
.reponses { display: flex; flex-direction: column; gap: 9px; }
.reponses .rep {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-radius: 13px; background: var(--frag-card);
  border: 1px solid var(--frag-rule); font-size: 15.5px; font-weight: 700;
}
.reponses .rep .clef {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: #eeece7; color: var(--frag-soft);
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.reponses .rep.bonne {
  border-color: var(--frag-vert); background: #eef6ee;
}
.reponses .rep.bonne .clef { background: var(--frag-vert); color: #fff; }
.reponses .rep.bonne .coche { margin-left: auto; color: var(--frag-vert); }
.frag .verset {
  margin: 0; padding: 13px 15px; border-radius: 12px; background: #f4f1fb;
  font-size: 16px; font-style: italic; color: #2a2740;   /* 12,9:1 */
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li {
  padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: #fbeaea; color: #8a3535;
}
.frag .note { margin: 0; font-size: 13px; color: var(--frag-soft); }
.frag .gros {
  font-size: 38px; font-weight: 800; letter-spacing: -1.4px; margin: 0;
  color: var(--frag-ink); font-variant-numeric: tabular-nums;
}
.frag .gros small {
  font-size: 15px; font-weight: 800; color: var(--frag-vert);
  letter-spacing: 0; margin-left: 10px;
}

/* La carte de lecture : une case par chapitre, coloriée à mesure. */
.carte-lecture { display: flex; flex-direction: column; gap: 7px; }
.carte-lecture .ligne { display: flex; align-items: center; gap: 7px; }
.carte-lecture .num {
  width: 22px; flex: none; font-size: 12px; font-weight: 800;
  color: var(--frag-soft); text-align: right;
}
/* Les cases RÉTRÉCISSENT au lieu de déborder : dix par rangée quelle que soit
   la largeur. À 320 px, dix cases fixes de 26 px sortaient de l'écran. */
.carte-lecture i {
  flex: 1 1 0; min-width: 0; max-width: 26px; aspect-ratio: 1;
  border-radius: 7px;
  background: var(--frag-card); border: 1px solid var(--frag-rule);
}
.carte-lecture i.lu { background: var(--frag-vert); border-color: var(--frag-vert); }
.carte-lecture i.encours { background: var(--frag-or); border-color: var(--frag-or); }

/* Les badges obtenus. Le compte total n'y figure PAS : il changerait. */
.badges { display: flex; gap: 9px; }
.badges span {
  width: 40px; height: 40px; border-radius: 12px; display: grid;
  place-items: center; font-size: 19px;
  background: var(--frag-tint);
}
.badges span.verrou {
  background: transparent; border: 1px dashed var(--frag-rule); opacity: .7;
}

/* ── Les bandes « feature » ────────────────────────────────────────────────
   Deux colonnes qui alternent : le texte à gauche, puis à droite, puis à
   gauche. C'est l'alternance qui donne le rythme d'une page longue. */
/* ⚠️ `scroll-margin-top` : le header est COLLANT. Sans cette marge, un clic
   dans la nav amène la section pile sous le header, qui en mange les deux
   premières lignes. */
.bande, .confiance { scroll-margin-top: 69px; }
.bande { background: var(--paper); }
.bande:nth-of-type(even) { background: var(--band); }
.bande .wrap {
  display: flex; align-items: center; gap: 56px;
  padding-top: 74px; padding-bottom: 74px;
}
.bande.inverse .wrap { flex-direction: row-reverse; }
.bande-dire {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 18px;
}
.bande h2 {
  font-size: 44px; line-height: 1.04; font-weight: 800; letter-spacing: -1.4px;
  margin: 0; color: var(--ink);
}
/* ⚠️ Scopé à `.bande-dire`, et pas à `.bande p`. Les FRAGMENTS vivent dans la
   même bande et sont CLAIRS : une règle sur `.bande p` leur imposait l'encre
   du site (ivoire sur ivoire), et le verset comme le score devenaient
   illisibles. Une règle qui matche bat toujours l'héritage — même quand le
   parent, lui, porte la bonne couleur. Constaté à l'écran. */
.bande .bande-dire p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.bande .bande-dire p b { color: var(--ink); font-weight: 800; }
.bande .scene { width: 500px; }

/* Les étapes numérotées d'une bande (« tu joues → ils ouvrent → ils voient »).
   ⚠️ La pastille est POSITIONNÉE, pas un élément de flex : en `display:flex`,
   chaque bout de texte du <li> devient un élément à part entière et le
   point-virgule se retrouve espacé de 13 px du mot qui le précède. */
.etapes { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 13px; counter-reset: pas; }
.etapes li {
  position: relative; padding-left: 38px; min-height: 26px;
  counter-increment: pas; font-size: 16.5px; color: var(--ink-soft);
}
.etapes li::before {
  content: counter(pas); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--rule); color: var(--gold);
  font-size: 12.5px; font-weight: 800; line-height: 24px; text-align: center;
}

/* Les noms de jeux et de traductions, en pastilles. */
.pastilles { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0;
  list-style: none; }
.pastilles li {
  padding: 8px 15px; border-radius: 999px; font-size: 14.5px; font-weight: 700;
  color: var(--ink); background: var(--card); border: 1px solid var(--rule);
}

/* ── LE CATALOGUE ──────────────────────────────────────────────────────────
   Planches 3i · 3j · 3o. Le trou le plus sérieux de la première vitrine : le
   site ne nommait pas UN SEUL jeu. La fiche store en nomme seize, la page en
   mettait quelques-uns en pastilles décoratives.

   Deux temps : un RAIL qui montre les mécaniques — on comprend le jeu sans
   l'avoir lancé — puis la LISTE, qui les nomme tous.

   ⚠️ AUCUN NOMBRE ÉCRIT. La maquette annonçait « neuf jeux » quatre fois ;
   le build V1 en contient seize. Le compteur du rail est calculé en JS
   depuis le DOM : il ne peut pas être faux, et il suit si l'on ajoute une
   carte. Les titres sont ceux des ARB, à la lettre. */
/* ⚠️ `.bande .wrap` est un flex à DEUX COLONNES (dire / montrer). Le
   catalogue, lui, empile : sans cette reprise, le rail et la grille
   devenaient deux colonnes écrasées côte à côte. */
.bande.jeux .wrap {
  display: block; padding-top: 70px; padding-bottom: 70px;
}
.jeux-tete {
  display: flex; align-items: flex-end; gap: 40px; flex-wrap: wrap;
  margin-bottom: 30px;
}
.jeux-tete .dire { flex: 1 1 24rem; min-width: 0; display: flex;
  flex-direction: column; gap: 16px; }
.jeux-tete h2 {
  font-size: 46px; line-height: 1.04; font-weight: 800; letter-spacing: -1.4px;
  margin: 0; color: var(--ink);
}
.jeux-tete p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.jeux-tete .flechettes { display: flex; gap: 10px; flex: none; }
.jeux-tete .flechettes button {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid var(--rule); color: var(--ink);
  font: inherit; font-size: 19px; line-height: 1;
}
.jeux-tete .flechettes button:hover { background: var(--card); }
.jeux-tete .flechettes button[disabled] { opacity: .35; cursor: default; }

/* Le rail. `scroll-snap` plutôt qu'un carrousel scripté : le geste natif
   marche au doigt, à la molette et au clavier, et il ne casse pas si le JS
   ne se charge pas. Les flèches ne font que défiler. */
.rail {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 4px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 316px; }
.jeu-carte {
  background: var(--frag); color: var(--frag-ink); border-radius: 20px;
  padding: 18px 20px; min-height: 267px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}
.jeu-carte .lbl {
  margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--frag-gold);
}
.jeu-carte h3 {
  margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.4px;
  color: var(--frag-ink);
}
.jeu-carte .sous { margin: 0; font-size: 12.5px; color: #3a3f3a; }
.jeu-carte .jeu { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }

/* Les mécaniques reconstruites, dans la carte. */
.emojis { display: flex; gap: 9px; }
.emojis span {
  width: 56px; height: 56px; border-radius: 14px; display: grid;
  place-items: center; font-size: 25px;
  background: var(--frag-card); border: 1px solid var(--frag-rule);
}
.mots { display: flex; flex-wrap: wrap; gap: 8px; }
.mots span {
  padding: 9px 13px; border-radius: 10px; font-size: 14px; font-weight: 700;
  background: var(--frag-card); border: 1px solid var(--frag-rule);
}
.mots span.trouve { background: var(--frag-vert); border-color: var(--frag-vert); color: #fff; }
.blocs { display: flex; flex-wrap: wrap; gap: 7px; }
.blocs span {
  padding: 9px 12px; border-radius: 9px; font-size: 14.5px; font-weight: 800;
  background: var(--frag-tint); color: var(--frag-gold);
}
.chaleur { display: flex; align-items: center; gap: 11px; }
.chaleur .mot { font-size: 15.5px; font-weight: 800; }
.chaleur .piste {
  flex: 1; height: 8px; border-radius: 999px; background: #eeece7; overflow: hidden;
}
.chaleur .piste i { display: block; height: 100%; background: var(--frag-or); }
.chaleur .pct { font-size: 13px; font-weight: 800; color: var(--frag-gold); }
.vf { display: flex; gap: 9px; }
.vf span {
  flex: 1; text-align: center; padding: 11px 0; border-radius: 12px;
  font-size: 15px; font-weight: 800;
  background: var(--frag-card); border: 1px solid var(--frag-rule);
}
.vf span.bonne { background: #eef6ee; border-color: var(--frag-vert); color: var(--frag-vert); }

/* Les points marquent ce qui est À L'ÉCRAN, pas une position — et il n'y a
   aucun « n / total » : sur écran large quatre cartes tiennent à la fois, le
   compteur s'arrêtait à « 4 / 6 » et paraissait bloqué. */
.rail-pied { display: flex; align-items: center; margin-top: 18px; }
.rail-points { display: flex; gap: 7px; }
.rail-points i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--dot);
  opacity: .45; transition: width .18s ease, opacity .18s ease;
}
.rail-points i.ici { width: 20px; border-radius: 999px; background: var(--gold); opacity: 1; }

/* La liste complète : on les NOMME, on ne les compte pas. */
.catalogue {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.catalogue li {
  display: flex; align-items: center; gap: 15px;
  background: var(--band); border: 1px solid var(--rule); border-radius: 18px;
  padding: 18px 20px;
}
.catalogue .rond {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  background: var(--card); display: grid; place-items: center; font-size: 22px;
}
.catalogue b {
  display: block; font-size: 17px; font-weight: 800; letter-spacing: -.2px;
  color: var(--ink);
}
.catalogue small { display: block; font-size: 14px; color: var(--ink-mute); margin-top: 3px; }
.jeux-plus {
  margin: 24px 0 0; padding: 16px 20px; border-radius: 16px;
  background: var(--band); border: 1px solid var(--rule);
  font-size: 15.5px; line-height: 1.55; color: var(--ink-soft);
}
.jeux-plus b { color: var(--ink); font-weight: 800; }

/* ── La bande de confiance : pas d'image, de la typographie ────────────── */
.confiance { background: var(--band); text-align: center; }
.confiance .wrap { padding-top: 78px; padding-bottom: 78px; }
.confiance .kicker { justify-content: center; }
.confiance h2 {
  font-size: 46px; line-height: 1.08; font-weight: 800; letter-spacing: -1.5px;
  margin: .9rem 0 0; color: var(--ink);
}
.confiance > .wrap > p {
  max-width: 700px; margin: 1.1rem auto 0; font-size: 18px; line-height: 1.6;
  color: var(--ink-soft);
}
.gages-cartes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: 2.6rem; text-align: left;
}
.gages-cartes div {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 16px;
  padding: 20px 22px;
}
.gages-cartes .glyphe { font-size: 22px; line-height: 1; }
.gages-cartes b { display: block; margin-top: 12px; font-size: 17px; font-weight: 800; }
.gages-cartes p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-mute); }
.confiance .soon-card,
.confiance .cta-row { margin: 2.6rem auto 0; }
.confiance .gages { justify-content: center; margin-top: 1.2rem; }

/* ── Le verset, en bande basse ─────────────────────────────────────────── */
.verset-bande { background: var(--band-deep); }
.verset-bande .wrap {
  display: flex; align-items: baseline; gap: 24px;
  padding-top: 26px; padding-bottom: 26px;
}
.verset-bande blockquote {
  flex: 1; margin: 0; padding-left: 20px; border-left: 3px solid var(--gold);
  font-size: 17px; font-style: italic; color: var(--ink-soft);
}
.verset-bande blockquote b { color: var(--gold); font-style: normal; font-weight: 700; }
.verset-bande cite {
  flex: none; font-style: normal; font-size: 14.5px; font-weight: 700;
  color: var(--ink-mute);
}

/* ── Le pied de page ────────────────────────────────────────────────────── */
.site-foot { background: var(--band-deep); }
.site-foot .wrap {
  display: flex; flex-wrap: wrap; gap: 2rem 3rem;
  padding-top: 40px; padding-bottom: 40px;
}
.site-foot .foot-brand { flex: 1 1 16rem; }
.site-foot .foot-brand p { margin: .5rem 0 0; color: var(--ink-mute);
  font-size: .95rem; }
.site-foot nav { flex: 0 1 12rem; }
.site-foot h2 {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700; margin: 0 0 .6rem;
}
/* ⚠️ `nav a` et non `a` : la règle générique écrasait le `display:flex` de
   .brand — la pousse et le mot se retrouvaient empilés dans le pied. */
.site-foot nav a { display: block; margin-bottom: .35rem; font-weight: 700; }
.site-foot .langs { color: var(--ink-mute); font-size: .9rem; margin: .35rem 0 0; }

/* ── `/j` et `/dl` : DIRE à gauche, MONTRER à droite ────────────────────────
   Planches 2a · 2b · 2c. Ces deux pages tiennent le même geste : on explique
   à quelqu'un qui ne connaît pas l'app, et on lui en montre un écran.

   ⚠️ Le style générique de `main` est scopé à `.lisible` : sans les règles
   ci-dessous, ces deux pages n'ont NI largeur NI centrage. Régression vécue,
   invisible aux tests, visible en ouvrant la page. */
main.etroit {
  max-width: 1200px; margin: 0 auto;   /* 1120 de contenu + 2 × 40 */
  display: flex; align-items: flex-start;
}
main.etroit .col-dire {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
}
main.etroit .col-voir {
  display: flex; flex-direction: column; align-items: center;
}
main.etroit .hero { background: none; }
main.etroit .links { margin: 0; font-size: 15.5px; font-weight: 700; }
main.etroit .links a { margin: 0 .35rem; }

/* ── `/j` — l'invitation, dans l'ordre où on la lit ────────────────────────
   L'ORDRE EST RENVERSÉ par rapport à l'ancienne page : le code ne domine
   plus. Il ne sert qu'APRÈS l'installation, alors qu'il occupait la moitié de
   l'écran ; et rien ne disait ce qu'est Seneve à quelqu'un qui arrive d'un
   lien inconnu.

     une invitation → CE QU'EST SENEVE → installer → confiance → le code
*/
main.invit { gap: 64px; padding: 64px 40px 60px; }
main.invit .col-dire { gap: 22px; }
main.invit .col-voir { flex: 0 0 400px; gap: 16px; }
.invit-dire { display: flex; flex-direction: column; gap: 22px; }
.invit-kicker {
  font-size: 12px; font-weight: 800; letter-spacing: 2px;
  color: var(--gold); margin: 0;
}
main.invit h1 {
  font-size: 52px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.02;
  margin: 0; color: var(--ink);
}
.invit-quoi {
  font-size: 27px; font-weight: 800; line-height: 1.24;
  margin: 0; color: var(--ink);
}
.invit-explique {
  font-size: 19px; line-height: 1.55; color: var(--ink-soft); margin: 0;
}
/* Le rappel qu'un lien peut dater : discret, il n'annule pas l'invitation. */
.invit-autre-jour {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-mute);
  padding-left: 13px; border-left: 2px solid var(--rule);
}
.invit-agir {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding-top: 4px;
}
/* ⚠️ Ce bouton portait sa géométrie dans une règle `.cta` générique, partagée
   avec les boutons de store. Ceux-ci sont devenus des badges officiels et la
   règle a disparu avec eux : il déclare donc tout lui-même, sans quoi il
   redevenait un lien souligné en flux. */
.invit-agir .cta {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  flex: none; min-height: 56px; padding: 0 30px; border-radius: 14px;
  background: var(--gold); color: var(--on-gold);
  font-size: 17px; font-weight: 800;
}
.invit-agir .cta:hover { filter: brightness(1.06); }
.invit-confiance {
  margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink-mute);
}
.invit-confiance span + span::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 4px; height: 4px; border-radius: 50%; background: var(--dot);
  margin: 0 10px;
}

/* La carte du code, en SECOND rang : encadrée, pas criée. */
.invit-code {
  margin: 0; padding: 17px 18px; max-width: 518px;
  background: var(--band); border: 1px solid var(--rule); border-radius: 16px;
  text-align: left; display: flex; flex-direction: column; gap: 12px;
}
.invit-code header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.invit-code .lbl {
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px; color: var(--gold);
}
.invit-code .quand { font-size: 12.5px; font-weight: 700; color: var(--ink-mute); }
.invit-code .rangee {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.invit-code .valeur {
  font-size: 34px; font-weight: 800; letter-spacing: 5.44px;
  color: var(--ink); word-break: break-all;
}
.invit-code button {
  font: inherit; font-size: 14px; font-weight: 800;
  color: var(--ink); background: transparent;
  border: 1.5px solid var(--ink); border-radius: 12px;
  height: 38px; padding: 0 15px; cursor: pointer; flex: none;
}
.invit-code button:hover { background: rgba(243, 238, 221, .1); }
/* ⚠️ La note n'est pas un détail : il n'existe PAS de lien profond différé
   (Firebase Dynamic Links arrêté en août 2025), donc l'app installée après
   coup ne peut pas retrouver le code. Le dire est la seule parade. */
.invit-code .note {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-mute);
}
.invit-section-lbl {
  font-size: 11px; font-weight: 800; letter-spacing: 1.6px;
  color: var(--ink-mute); margin: 0; align-self: stretch;
}

/* ── `/dl` — le lien de partage, quand il ne redirige pas ──────────────────
   Planche 2c. Sur téléphone la page part au store en une fraction de seconde :
   ce qui suit ne se voit que sur ordinateur, ou avant le listing. */
main.dl { gap: 56px; padding: 56px 40px; }
main.dl .col-dire { gap: 20px; }
main.dl .col-voir { flex: 0 0 200px; gap: 14px; }
main.dl h1 {
  font-size: 46px; font-weight: 800; letter-spacing: -1.3px; line-height: 1.02;
  margin: 0; color: var(--ink);
}
.dl-quoi {
  font-size: 25px; font-weight: 800; line-height: 1.26; margin: 0; color: var(--ink);
}
.dl-explique {
  font-size: 18px; line-height: 1.55; color: var(--ink-soft); margin: 0;
}
.dl-note {
  font-size: 13px; line-height: 1.55; color: var(--ink-mute); margin: 0;
  max-width: 30rem;
}
main.dl .soon-card { margin: 0; max-width: 520px; }
main.dl .cta-row { width: 520px; max-width: 100%; }
main.dl .retour { margin: 0; font-size: 16.5px; font-weight: 700; }
main.dl .col-voir figcaption {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-mute);
  text-align: center; margin-top: 0;
}
.dl-redir {
  flex: 1 1 100%; text-align: center; margin: 0;
  font-size: 18px; color: var(--ink-soft);
}

/* ── La preuve sur /j et /dl ────────────────────────────────────────────── */
.proof { margin: 0; max-width: 22rem; text-align: center; }
.proof img {
  width: 100%; max-width: 200px; height: auto;
  border-radius: 14px; border: 1px solid var(--rule);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
}
.proof figcaption { margin-top: .9rem; font-size: 14.5px; line-height: 1.5;
  color: var(--ink-mute); }

/* ── Pages LÉGALES — la lecture longue, DANS UNE CARTE ──────────────────────
   Planches 3e · 3f. C'est ce qui reste du registre papier : on ne lit pas
   onze sections sur un aplat. La carte pose la colonne sur le vert profond,
   et la sous-barre dit qu'on a changé de section. */
.legal-bar { background: var(--band); border-bottom: 1px solid var(--rule); }
.legal-bar .wrap {
  display: flex; align-items: center; gap: 11px;
  padding-top: 13px; padding-bottom: 13px;
}
/* ⚠️ UN SEUL retour à chaque largeur. Ces pages en offraient QUATRE : le
   header, cette sous-barre, une ligne de liens en bas, et le pied — qui
   pointent tous vers les trois mêmes destinations.
   Au-dessus de 40 rem, le retour vit dans le header (planche 3e) et la
   sous-barre ne porte que le repère de section. En dessous, le header n'a
   plus la place (brand + retour + langues réclament 397 px pour 350) : c'est
   la sous-barre qui le reprend. */
.legal-bar .retour { display: none; font-size: 14px; font-weight: 800;
  text-decoration: none; }
.legal-bar .filet { display: none; width: 1px; height: 18px;
  background: var(--rule); flex: none; }
.legal-bar .ou {
  font-size: 11px; font-weight: 800; letter-spacing: 1.6px;
  color: var(--ink-mute); text-transform: uppercase;
}

main.lisible { background: var(--band); padding-bottom: 8px; }
/* 1000 px de contenu et non 1120 : on ne lit pas un texte juridique sur la
   même largeur qu'une page qui vend. */
main.lisible .wrap {
  max-width: 1080px;
  display: flex; align-items: flex-start; gap: 56px;
  padding-top: 44px; padding-bottom: 40px;
}

.toc {
  flex: 0 0 244px; display: flex; flex-direction: column; gap: 9px;
  position: sticky; top: 89px; padding-top: 4px;
}
.toc .lbl {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--ink-mute); text-transform: uppercase; margin: 0;
}
.toc-liste { display: flex; flex-direction: column; gap: 9px; }
/* ⚠️ AVANT la requête média qui l'affiche — à spécificité égale la dernière
   gagne, et le bouton de menu du header a déjà été masqué à toutes les
   largeurs pour cette raison. */
.toc-bascule {
  display: none; font: inherit; background: transparent; border: 0;
  padding: 0; width: 100%; cursor: pointer; text-align: left;
  align-items: center; justify-content: space-between; gap: 12px;
}
.toc-bascule .chevron {
  color: var(--ink-mute); font-size: 17px; line-height: 1;
  transition: transform .18s ease;
}
.toc.replie .toc-bascule .chevron { transform: rotate(-90deg); }
.toc a {
  display: block; font-size: 14.5px; font-weight: 700; line-height: 1.35;
  color: var(--ink-mute); text-decoration: none;
  border-left: 2px solid var(--rule); padding: 2px 0 2px 11px;
}
.toc a:hover { color: var(--ink); }
.toc a.ici { font-weight: 800; color: var(--ink); border-left-color: var(--gold); }

.legal-corps {
  flex: 1 1 0; min-width: 0; max-width: 620px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 20px;
  padding: 34px 38px;
  display: flex; flex-direction: column; gap: 15px;
}
.legal-corps > * { margin: 0; }
.legal-corps h1 {
  font-size: 38px; font-weight: 800; line-height: 1.12; letter-spacing: -.9px;
}
.legal-corps .meta { font-size: 14px; color: var(--ink-mute); }
.legal-corps .lead { font-size: 17.5px; line-height: 1.62; }
.legal-corps h2 {
  font-size: 20px; font-weight: 800; color: var(--gold); scroll-margin-top: 100px;
}
.legal-corps h3 { font-size: 16px; font-weight: 800; margin-top: 6px; }
.legal-corps p, .legal-corps ul, .legal-corps ol {
  font-size: 17px; line-height: 1.62; color: var(--ink-soft);
}
.legal-corps ul, .legal-corps ol { padding-left: 1.2rem; }
.legal-corps li { margin: .2rem 0; }
.legal-corps hr {
  border: 0; height: 1px; background: var(--rule);
  margin: 12px 0 4px; align-self: stretch;
}
.legal-corps table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
.legal-corps th, .legal-corps td {
  text-align: left; padding: .45rem .6rem;
  border-bottom: 1px solid var(--rule); vertical-align: top;
  color: var(--ink-soft);
}
.legal-corps th { font-weight: 800; color: var(--ink); }
.legal-corps .note { font-size: 15px; line-height: 1.55; color: var(--ink-mute); }
.legal-corps .highlight {
  background: var(--band); border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0; padding: 11px 14px; font-size: 16px;
}
/* `.legal-corps .links` a été retiré avec la ligne de liens de bas de page :
   elle répétait les trois destinations du pied, deux écrans plus haut. */
main.lisible .links {
  text-align: center; margin: 0; padding: 0 40px 48px; font-size: .95rem;
}
main.lisible .links a { margin: 0 .6rem; }

/* ── `/compte/` — une PROCÉDURE, donc des étapes ────────────────────────── */
.compte-tete { display: flex; flex-direction: column; gap: 8px; }
.compte-tete h1 {
  font-size: 38px; font-weight: 800; line-height: 1.12; letter-spacing: -.9px;
  margin: 0;
}
.compte-tete .tagline {
  font-size: 18px; line-height: 1.5; color: var(--ink-soft); margin: 0;
  max-width: none;
}
main.lisible.compte .wrap { flex-direction: column; gap: 30px; }
.cartes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;
  width: 100%;
}
.carte {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 16px;
  padding: 22px 24px; display: flex; flex-direction: column; gap: 15px;
}
.carte.sobre { background: var(--band-deep); padding: 20px 24px; gap: 10px; }
.carte.plate { padding: 20px 24px; gap: 10px; }
.carte > * { margin: 0; }
.carte header { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.carte h2 { font-size: 21px; font-weight: 800; margin: 0; color: var(--ink); }
.carte.sobre h2, .carte.plate h2 { font-size: 18px; }
.carte p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.carte.sobre p { color: var(--ink-mute); }
/* La pastille du délai : c'est l'information qu'on cherche en arrivant.
   Sur le vert, l'or PASSE en texte (5,03:1) — pas besoin d'une encre à part
   comme il en fallait une sur le papier clair. */
.pastille {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--gold);
  background: rgba(232, 197, 74, .14); border: 1px solid rgba(232, 197, 74, .4);
  border-radius: 999px; padding: 5px 10px; white-space: nowrap;
}
.pas { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 13px; counter-reset: pas; }
.pas li {
  position: relative; padding-left: 41px; min-height: 28px;
  font-size: 17px; line-height: 1.5; counter-increment: pas; color: var(--ink-soft);
}
.pas li::before {
  content: counter(pas); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(232, 197, 74, .14); color: var(--gold);
  font-size: 14px; font-weight: 800; line-height: 28px; text-align: center;
}
.carte .apropos {
  border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0;
  padding: 11px 14px; font-size: 15px; line-height: 1.55;
  color: var(--ink-mute); background: var(--band);
}
.carte .delai { font-size: 17px; line-height: 1.6; }
/* L'adresse devient une CIBLE, pas un lien noyé dans un paragraphe. Elle n'y
   figure plus qu'une fois : le mockup gardait les deux, c'était le doublon
   qu'on venait de retirer des pages légales. */
.cta-carte {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 20px; border-radius: 13px;
  background: var(--gold); color: var(--on-gold);
  font-size: 15px; font-weight: 800; text-decoration: none;
}
.cta-carte:hover { filter: brightness(1.06); }

/* ── La 404 ─────────────────────────────────────────────────────────────────
   Jamais dessinée jusqu'à la planche 3g : elle avait été recollée à la main
   sur la colonne de l'ancien site.

   ⚠️ Elle n'a pas de `.wrap` : elle porte donc sa propre largeur. Sans ça
   elle partait pleine largeur quand `main.lisible` a cédé sa géométrie à la
   mise en page à deux colonnes — même piège que `/j` et `/dl` la veille, et
   invisible aux tests les deux fois. */
main.lisible.perdu {
  background: var(--paper); max-width: 60rem; margin: 0 auto;
}
.perdu { text-align: center; padding: 96px 20px 110px; }
.perdu .seed-gros { width: 92px; height: 92px; margin: 0 auto; display: block; }
.perdu .kicker { justify-content: center; margin-top: 2rem; }
.perdu h1 {
  font-size: 46px; line-height: 1.08; font-weight: 800; letter-spacing: -1.5px;
  margin: .8rem auto 0; max-width: 16em; color: var(--ink);
}
.perdu p {
  max-width: 34rem; margin: 1.1rem auto 0; font-size: 17.5px; line-height: 1.6;
  color: var(--ink-soft);
}
.perdu .actions {
  display: flex; justify-content: center; gap: 14px; margin-top: 2.2rem;
  flex-wrap: wrap;
}
.perdu .actions a {
  min-height: 50px; padding: 0 26px; border-radius: 999px;
  display: inline-flex; align-items: center;
  font-size: 15.5px; font-weight: 800; text-decoration: none;
}
.perdu .actions .plein { background: var(--gold); color: var(--on-gold); }
.perdu .actions .creux { border: 1.5px solid var(--ink); color: var(--ink); }

/* ── Accessibilité ─────────────────────────────────────────────────────────
   `:focus-visible` et non `:focus` : l'anneau n'apparaît que pour une
   navigation clavier, jamais après un clic à la souris. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Le sélecteur de langue (construit par i18n.js) ─────────────────────────
   Il se loge dans le header quand la page en a un (`.lang-host`), sinon il
   retombe en pastille flottante. */
/* ⚠️ UN contrôle segmenté, pas trois pastilles. Le sélecteur était fait de
   trois cercles bordés de 46 px : trois objets là où il n'y a qu'un choix, et
   un poids visuel qui rivalisait avec la nav juste à côté. Un seul cadre, le
   choix courant rempli — c'est aussi 100 px de gagnés dans le header. */
.lang-switch {
  display: flex; gap: 2px; padding: 3px; flex: none;
  border: 1px solid var(--rule); border-radius: 999px;
  background: rgba(243, 238, 221, .05);
}
.lang-switch:not(.in-head) {
  position: fixed; right: .9rem; bottom: .9rem; z-index: 10;
  background: var(--band);
}
.lang-switch button {
  font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .4px;
  height: 30px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  border: 0; background: transparent; color: var(--ink-mute);   /* 7,25:1 */
}
.lang-switch button:hover { color: var(--ink); }
/* La langue ACTIVE : plus `disabled` — un bouton désactivé sort de l'ordre de
   tabulation, et quelqu'un au clavier ne peut plus savoir laquelle est en
   cours. Elle porte `aria-current`, reste focusable, et son clic ne fait
   rien (i18n.js). */
.lang-switch button.active {
  cursor: default; font-weight: 800;
  background: var(--ink); color: var(--band);   /* 10,66:1 */
}

/* ── Les animations ────────────────────────────────────────────────────────
   Planche 3h. Deux règles non négociables : chaque animation joue UNE SEULE
   FOIS — rien ne bouge en permanence pendant qu'on lit — et tout s'arrête si
   le système demande moins de mouvement. */
@keyframes senMonte {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes senFlip {
  0%   { transform: rotateX(-90deg); opacity: 0; }
  60%  { transform: rotateX(0deg); opacity: 1; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
.scene > * {
  animation: senMonte .24s ease-out both;
}
.scene > *:nth-child(2) { animation-delay: .08s; }
.scene > *:nth-child(3) { animation-delay: .16s; }
.grille span { animation: senFlip .3s ease-out both; }
.grille span:nth-child(2) { animation-delay: .18s; }
.grille span:nth-child(3) { animation-delay: .36s; }
.grille span:nth-child(4) { animation-delay: .54s; }
.grille span:nth-child(5) { animation-delay: .72s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Écrans étroits ────────────────────────────────────────────────────────
   ⚠️ Cette règle est AVANT la requête média, et doit y rester. Elle vivait
   après : à spécificité égale, la dernière gagne — le bouton de menu était
   donc masqué à TOUTES les largeurs, et la navigation devenait inatteignable
   sur téléphone. Rien ne le signalait : le bouton existe dans le DOM, il
   n'était simplement jamais peint. */
.nav-toggle { display: none; }

@media (max-width: 68rem) {
  /* La nav du header ne tient plus : elle passe en menu. Le bouton reste. */
  .site-nav { display: none; }
  .site-nav.ouvert {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--band); border-bottom: 1px solid var(--rule);
    padding: 8px 40px 16px;
  }
  .site-nav.ouvert a { height: 46px; border-bottom: 0; }
  .site-head .wrap { position: relative; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none; order: 9;
    background: transparent; border: 0; color: var(--ink);
    font-size: 20px; cursor: pointer;
  }
  .hero h1 { font-size: 56px; letter-spacing: -1.8px; }
  .bande h2, .confiance h2 { font-size: 36px; letter-spacing: -1.1px; }
  .gages-cartes { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 62rem) {
  .hero .wrap, .bande .wrap { flex-direction: column; gap: 2.6rem; }
  .bande.inverse .wrap { flex-direction: column; }
  .scene, .bande .scene { width: 100%; max-width: 500px; }

  /* ── `/j` et `/dl` empilées (planche 2a) ─────────────────────────────────
     La colonne de droite devient une BANDE pleine largeur : c'est elle qui
     sépare la promesse de la preuve, une fois qu'elles ne sont plus côte à
     côte. D'où le `padding: 0` sur `main` — la bande doit toucher les bords. */
  main.etroit { display: block; max-width: none; padding: 0; }
  main.etroit .col-dire {
    max-width: 34rem; margin: 0 auto; padding: 30px 18px 26px;
  }
  main.etroit .col-voir { background: var(--band); padding: 26px 18px; gap: 16px; }
  main.etroit .col-voir > * { max-width: 34rem; width: 100%; }
  main.etroit .invit-section-lbl { text-align: center; }
  main.etroit .links { text-align: center; }

  main.invit .col-dire { gap: 20px; }
  .invit-dire { gap: 11px; }
  .invit-kicker { font-size: 11px; letter-spacing: 1.8px; }
  main.invit h1 { font-size: 34px; letter-spacing: -1px; line-height: 1.06; }
  .invit-quoi { font-size: 21px; line-height: 1.3; }
  .invit-explique { font-size: 16px; line-height: 1.5; }
  .invit-agir { gap: 9px; align-items: stretch; }
  .invit-agir .cta { width: 100%; min-height: 54px; font-size: 16.5px; }
  .invit-confiance { font-size: 13px; text-align: center; }
  .invit-code { padding: 15px 16px; gap: 11px; }
  .invit-code .quand { font-size: 12px; }
  .invit-code .valeur { font-size: 30px; letter-spacing: 4.8px; }
  .invit-code button { font-size: 13.5px; height: 36px; padding: 0 13px; }
  .invit-code .note { font-size: 12.5px; }

  main.dl h1 { font-size: 34px; letter-spacing: -1px; }
  .dl-quoi { font-size: 21px; }
  .dl-explique { font-size: 16px; }

  /* Le sommaire passe AU-DESSUS du texte : collant, il mangerait l'écran. Et
     il devient REPLIABLE — neuf liens avant le premier paragraphe repoussent
     le texte sous le pli (planche 3n). */
  main.lisible .wrap { flex-direction: column; gap: 28px; }
  .toc {
    position: static; flex: none; width: 100%; gap: 10px;
    background: var(--band); border: 1px solid var(--rule); border-radius: 16px;
    padding: 15px 16px;
  }
  .toc-bascule { display: flex; }
  .toc.replie .toc-liste { display: none; }
  .legal-corps { max-width: none; }
  .cartes { grid-template-columns: 1fr; }
  .gages-cartes { grid-template-columns: 1fr 1fr; }
  .catalogue { grid-template-columns: 1fr 1fr; }
  .jeux-tete h2 { font-size: 36px; letter-spacing: -1.1px; }
}

@media (max-width: 48rem) {
  .catalogue { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .wrap { padding: 0 20px; }
  .site-nav.ouvert { padding: 8px 20px 16px; }

  /* ── Le header sur téléphone ─────────────────────────────────────────────
     350 px utiles, et trois blocs qui en réclamaient 459 : marque, sélecteur
     de langue et pastille débordaient de 70 px. Mesuré, pas supposé.

     Ce qui part : la PASTILLE (la date est juste en dessous dans le hero, et
     après le listing les boutons de store sont à 200 px sous le pouce), et le
     lien de RETOUR (la marque, à gauche, mène déjà à l'accueil). Ce qui
     reste : la marque, les langues, le menu. */
  .site-head .cta-mini,
  .head-back { display: none; }
  /* À 320 px il reste 280 px utiles : marque, langues et menu en réclamaient
     315 avec les gouttières de 26. On resserre plutôt que de sacrifier un
     élément — les trois sont nécessaires. */
  .site-head .wrap { gap: 10px; }
  .brand { font-size: 19px; gap: 8px; }
  .lang-switch button { height: 28px; padding: 0 8px; font-size: 12px; }
  /* Le retour que le header vient de perdre, repris par la sous-barre. */
  .legal-bar .retour { display: inline; }
  .legal-bar .filet { display: block; }
  .hero .wrap { padding-top: 44px; padding-bottom: 48px; }
  .hero h1 { font-size: 40px; letter-spacing: -1.3px; }
  .tagline { font-size: 18px; }
  .bande .wrap { padding-top: 52px; padding-bottom: 52px; }
  .bande h2, .confiance h2 { font-size: 30px; letter-spacing: -.9px; }
  .bande p, .confiance > .wrap > p { font-size: 16.5px; }
  .soon-card, .cta-row, main.dl .cta-row { width: 100%; }
  .cta-row { flex-direction: column; }
  .gages-cartes { grid-template-columns: 1fr; }
  /* Le rail garde son geste : c'est le motif natif sur téléphone. Les
     flèches, elles, ne servent plus à rien quand on fait glisser au doigt. */
  .jeux-tete .flechettes { display: none; }
  .jeux-tete h2 { font-size: 30px; letter-spacing: -.9px; }
  .rail > * { flex-basis: 84%; }
  .verset-bande .wrap { flex-direction: column; gap: 10px; }
  /* ⚠️ `flex: none` sur les colonnes du pied. En passant le conteneur en
     `column`, la base de flex change d'axe : les `16rem` et `12rem` prévus
     comme LARGEURS deviennent des HAUTEURS. Chaque bloc réclamait 256 puis
     192 px, d'où les trous béants entre la marque, les liens et le contact. */
  .site-foot .wrap { flex-direction: column; gap: 1.6rem; }
  .site-foot .foot-brand, .site-foot nav { flex: none; }
  .legal-corps { padding: 24px 20px; }
  .frag { padding: 16px 17px; }
  .grille span { width: 38px; height: 38px; font-size: 17px; }
}