@charset "utf-8";
/* ==========================================================================
   CINQ MARCHES — feuille de style unique du site public
   Du rappel au raisonnement · éditions Cinq Marches, Angers
   --------------------------------------------------------------------------
   POIGNÉES RÉSEAUX À RÉSERVER (à retrouver ici, comme demandé) :
     @cinqmarches   partout (YouTube, Instagram, TikTok, Facebook, X)
     @cinq.marches  en repli si @cinqmarches est déjà pris
   --------------------------------------------------------------------------
   SOMMAIRE
     00  Polices            (bloc à remplacer à la mise en ligne)
     01  Jetons de thème
     02  Base et accessibilité
     03  Mise en page
     04  Boutons, étiquettes, jetons [[…]]
     05  En-tête et navigation
     06  Composant 1 — l'escalier (+ escalier réduit)
     07  Composant 2 — la carte « marche »
     08  Composant 3 — le bloc calibration
     09  Composant 4 — la carte personnage
     10  Composant 5 — la carte offre
     11  Composant 6 — l'accordéon FAQ
     12  Composant 7 — l'emplacement vidéo
     13  Composant 8 — le formulaire d'alerte (+ états paiement)
     14  Composant 9 — le bandeau de niveau
     15  Composant 10 — le pied de page
     16  Blocs éditoriaux (réponse directe, piliers, couverture, journal)
     17  Impression
   ========================================================================== */


/* 00 — POLICES =============================================================
   Auto-hébergées dans /polices/ : aucun appel réseau vers un tiers.
   -------------------------------------------------------------------------- */

/* Polices Cinq Marches — Cormorant Garamond (titres) et Lora (texte).
   Deux polices variables : un seul fichier par sous-ensemble couvre tous les graisses.
   Licence SIL Open Font License 1.1 — auto-hebergement autorise, aucun appel a Google. */
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('polices/cormorant-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('polices/cormorant-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lora';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url('polices/lora-italique-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Lora';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url('polices/lora-italique-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('polices/lora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('polices/lora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --titre:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --texte:'Lora', Georgia, 'Times New Roman', serif;
}


/* 01 — JETONS DE THÈME =====================================================
   Palette fixée par les personnages : ne pas modifier ces cinq valeurs.
   -------------------------------------------------------------------------- */
:root {
  --aubergine: #4A1942;
  --creme: #FBF6F0;
  --corail: #E8604C;
  --lilas: #B892C8;
  --or: #C9971C;

  /* Dérivés — uniquement des variations de lumière des cinq couleurs.
     --corail-encre et --or-encre servent au texte : le corail et l'or purs
     ne passent pas AA en petit corps sur crème. */
  --aubergine-nuit: #2E0E28;
  --aubergine-voile: #EDE4EC;
  --lilas-voile: #F1E8F5;
  --corail-encre: #B33520;
  --corail-voile: #FBE6E1;
  --or-encre: #8A6410;
  --or-voile: #F7EFDC;
  --papier: #FFFDFA;
  --trait: #D8CCCF;          /* filet fin */
  --trait-fort: var(--aubergine);
  --encre: #2A1226;
  --encre-douce: #5C4A57;

  /* Escalier — lilas en bas, aubergine en haut */
  --marche-1: #F3E9F7;
  --marche-2: #DCC4E4;
  --marche-3: #B892C8;
  --marche-4: #7B4A78;
  --marche-5: #4A1942;

  /* Bandeaux de niveau — même dégradé, sept crans */
  /* Rampe « Lumière vers profondeur » — la couleur de NIVEAU, un ton par volume.
     Choisie par les filles de Romain le 08/09/2026. Elle se termine sur l'aubergine
     du trait des personnages, et son corail médian est celui de leurs baskets.
     La framboise a été descendue de #C74B6B à #C44163 : au ton d'origine, aucun des
     deux textes ne passait 4,5:1 — 3,83 en encre, 4,21 en crème. */
  --niv-cm2: #E9C46A;   /* paille    · encre 10,36 */
  --niv-6e:  #E88C4D;   /* ambre     · encre  6,83 */
  --niv-5e:  #E8604C;   /* corail    · encre  5,12 */
  --niv-4e:  #C44163;   /* framboise · crème  4,56 */
  --niv-3e:  #8E4585;   /* violet    · crème  5,85 */
  --niv-2de: #5F2A5B;   /* prune     · crème  9,93 */
  --niv-1re: #4A1942;   /* aubergine · crème 12,95 */

  --police-titre: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --police-texte: "Lora", Georgia, "Times New Roman", serif;

  /* Espacements — échelle unique, généreuse */
  --e1: .35rem;
  --e2: .7rem;
  --e3: 1.1rem;
  --e4: 1.75rem;
  --e5: 2.75rem;
  --e6: 4.25rem;
  --e7: 6.5rem;

  --rayon: 4px;
  --mesure: 34rem;           /* largeur de lecture confortable */
  --enveloppe: 71rem;
  --ombre: 0 1px 2px rgba(74, 25, 66, .06), 0 8px 24px -18px rgba(74, 25, 66, .35);
}


/* 02 — BASE ET ACCESSIBILITÉ =============================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow-x: clip;            /* garde-fou 320 px : rien ne dépasse à droite */
  background: var(--creme);
  color: var(--encre);
  font: 400 18px/1.65 var(--police-texte);
  font-variant-numeric: normal;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  color: var(--aubergine);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 var(--e3);
  text-wrap: balance;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(2.1rem, 6.2vw, 3.6rem); font-weight: 400; }
h2 { font-size: clamp(1.55rem, 4vw, 2.15rem); margin-top: var(--e5); }
h3 { font-size: clamp(1.2rem, 2.6vw, 1.4rem); margin-top: var(--e4); }
h4 { font-size: 1.05rem; font-family: var(--police-texte); font-weight: 600; }
p, ul, ol, dl, figure, table { margin: 0 0 var(--e3); }
p { max-width: 40rem; }
strong { font-weight: 600; color: var(--aubergine); }
em { font-style: italic; }
small { font-size: .82em; color: var(--encre-douce); }

a { color: var(--aubergine); text-decoration: none; box-shadow: inset 0 -1px 0 var(--lilas); transition: box-shadow .12s, color .12s; }
a:hover { color: var(--corail-encre); box-shadow: inset 0 -2px 0 var(--corail); }
a:active { color: var(--aubergine-nuit); }

:focus-visible { outline: 2px solid var(--corail); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--or-voile); color: var(--aubergine-nuit); }

img, svg { max-width: 100%; }
img { height: auto; }
hr, .filet { border: 0; height: 1px; background: var(--trait); margin: var(--e5) 0; }

/* Chiffres tabulaires partout où un nombre est une figure, jamais dans la prose */
.tnum, .escalier, .table, .calibration, .prix, .marche-num, .contenu-num, td, th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.evite { position: absolute; left: -9999px; }
.saut-contenu {
  position: absolute; left: var(--e3); top: -4.5rem; z-index: 50;
  background: var(--aubergine); color: var(--creme);
  padding: var(--e2) var(--e3); border-radius: var(--rayon); box-shadow: none;
  transition: top .15s;
}
.saut-contenu:focus { top: var(--e2); }

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


/* Note : 1rem = 16 px (racine). Tout texte de lecture est à 1.125rem (18 px)
   ou plus ; en dessous, ce sont des libellés, légendes ou métadonnées. */

/* 03 — MISE EN PAGE ======================================================== */
.enveloppe { width: 100%; max-width: var(--enveloppe); margin-inline: auto; padding-inline: var(--e3); }
@media (min-width: 40em) { .enveloppe { padding-inline: var(--e4); } }

.section { padding-block: var(--e5); }
.section + .section { border-top: 1px solid var(--trait); }
.section-creuse { background: var(--papier); }
.section-encre { background: var(--aubergine); color: var(--creme); }
.section-encre h2, .section-encre h3 { color: var(--creme); }
.section-encre a { color: var(--creme); box-shadow: inset 0 -1px 0 rgba(251, 246, 240, .5); }
.section-encre a:hover { color: #fff; box-shadow: inset 0 -2px 0 var(--or); }

.mesure { max-width: var(--mesure); }
.justifie p { text-align: justify; hyphens: auto; }
.grille { display: grid; gap: var(--e4); }
@media (min-width: 46em) { .grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 46em) and (max-width: 59.99em) { .grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52em) { .grille-texte-image { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); align-items: center; } }

.rang { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.rang-large { gap: var(--e3); }
.pile { display: flex; flex-direction: column; gap: var(--e3); }

.sur-titre {
  font-family: var(--police-texte); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--or-encre);
  margin: 0 0 var(--e2); font-variant-numeric: tabular-nums;
}
.sur-titre-clair { color: var(--or); }
.chapeau { font-size: 1.16rem; color: var(--encre-douce); max-width: 38rem; }


/* 04 — BOUTONS, ÉTIQUETTES, JETONS ========================================= */
.btn {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 48px; padding: .7rem 1.2rem;
  font: 600 1rem/1.2 var(--police-texte); text-align: center;
  border: 1px solid var(--aubergine); border-radius: var(--rayon);
  background: transparent; color: var(--aubergine);
  box-shadow: none; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s, transform .14s;
}
.btn:hover { background: var(--aubergine-voile); color: var(--aubergine-nuit); box-shadow: none; }
.btn:active { transform: translateY(1px); }
.btn-primaire { background: var(--aubergine); color: var(--creme); border-color: var(--aubergine); }
.btn-primaire:hover { background: var(--aubergine-nuit); color: #fff; border-color: var(--aubergine-nuit); }
.btn-primaire::after { content: "→"; font-weight: 400; }
.btn-fantome { border-color: var(--trait); }
.btn-clair { border-color: var(--creme); color: var(--creme); }
.btn-clair:hover { background: rgba(251, 246, 240, .12); color: #fff; }
.btn-bloc { width: 100%; justify-content: center; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; cursor: not-allowed; }

.etiq {
  display: inline-flex; align-items: center; gap: .4em;
  font: 600 .74rem/1 var(--police-texte); letter-spacing: .1em; text-transform: uppercase;
  padding: .45em .7em; border-radius: 2px; border: 1px solid currentColor;
  font-variant-numeric: tabular-nums;
}
.etiq-or { color: var(--or-encre); background: var(--or-voile); }
.etiq-corail { color: var(--corail-encre); background: var(--corail-voile); }
.etiq-lilas { color: var(--aubergine); background: var(--lilas-voile); }
.etiq-attente { color: var(--encre-douce); border-style: dashed; }

/* Jetons [[…]] : toute valeur d'exemple porte data-jeton="NOM" et se voit. */
[data-jeton] {
  background: linear-gradient(transparent 62%, rgba(201, 151, 28, .28) 62%);
  border-bottom: 1px dotted var(--or-encre);
  cursor: help;
}


/* 05 — EN-TÊTE ET NAVIGATION =============================================== */
.entete { border-bottom: 1px solid var(--trait); background: var(--creme); position: relative; z-index: 20; }
.entete-int { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: 76px; }

.marque { display: inline-flex; align-items: center; gap: .6rem; box-shadow: none; }
.marque:hover { box-shadow: none; }
.marque-nom { font-family: var(--police-titre); font-size: 1.32rem; color: var(--aubergine); line-height: 1; }
.marque-nom span { display: block; font-family: var(--police-texte); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or-encre); margin-top: .25rem; }
/* Logo : le cachet. Monochrome — l'or est seulement POSE sur la cinquieme
   marche, il peut donc partir sans en retirer une.
   Fichiers dans images/logo/ · regles d'usage dans images/logo/logo.md */
.marque-cachet { display: block; width: 36px; height: 36px; flex: none; }
@media (max-width: 30em) { .marque-cachet { width: 32px; height: 32px; } }

/* Le filet en cinq crans — motif des intertitres (emprunt a la direction 1b).
   Une marque, un motif : le cachet signe, le filet structure. Il sert aussi
   de tete de seance dans le cahier. */
main h2 {
  padding-bottom: 1.15rem;
  background: url("images/logo/filet.svg") left bottom / 132px 12px no-repeat;
}
.pied h2, .carte h2, .carte-offre h2, .alerte h2, .calibration h2 {
  padding-bottom: 0; background: none;
}
.section-encre h2 { background-image: url("images/logo/filet-reserve.svg"); }

.nav-bascule { display: none; }
.nav-liens { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); list-style: none; margin: 0; padding: 0; }
.nav-liens a { font-size: .95rem; box-shadow: none; padding: .35rem 0; }
.nav-liens a:hover { box-shadow: inset 0 -2px 0 var(--corail); }
.nav-liens a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--or); }
.nav-liens .nav-cta { margin-left: var(--e2); }

@media (max-width: 57.99em) {
  .js .nav-bascule {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px; padding: .5rem .8rem;
    font: 600 .9rem var(--police-texte); color: var(--aubergine);
    background: transparent; border: 1px solid var(--trait); border-radius: var(--rayon); cursor: pointer;
  }
  .js .nav-liens { display: none; }
  .js .nav-liens.ouvert { display: flex; }
  .nav-liens {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--creme); border-bottom: 1px solid var(--trait);
    padding: var(--e2) var(--e3) var(--e3); box-shadow: var(--ombre);
  }
  .nav-liens li { border-top: 1px solid var(--trait); }
  .nav-liens li:first-child { border-top: 0; }
  .nav-liens a { display: block; padding: .8rem 0; font-size: 1.02rem; }
  .nav-liens .nav-cta { margin: var(--e2) 0 0; }
}


/* 06 — COMPOSANT 1 · L’ESCALIER ============================================
   <ol class="escalier"> · une <li class="marche marche-N" style="--i:N">
   par marche, contenant DEUX parties :
     .marche-txt    numéro, nom, description — hauteur naturelle, sur le fond
     .marche-bloc   la contremarche colorée — hauteur DÉFINIE var(--h)
   La géométrie ne dépend donc jamais de la longueur du texte : les cinq
   contremarches montent toujours, à toutes les largeurs. C'est le motif de la
   marque : il doit se lire seul.
   Version horizontale ≥ 46em ; en dessous, la contremarche devient une barre
   dont la largeur croît avec le rang. La marche en cours porte class="courante"
   et aria-current="step" : elle passe en or.
   Aucune animation par défaut (cf. prefers-reduced-motion, § 02).
   -------------------------------------------------------------------------- */
.escalier { list-style: none; margin: 0 0 var(--e3); padding: 0; display: grid; gap: var(--e3); }
.marche { display: flex; flex-direction: column; gap: var(--e2); margin: 0; padding: 0; }
.marche-txt { display: flex; flex-direction: column; gap: .2rem; }
.marche-num { font-family: var(--police-titre); font-size: 1.6rem; line-height: 1; color: var(--or-encre); }
.marche-nom { font-family: var(--police-titre); font-size: 1.35rem; color: var(--aubergine); line-height: 1.1; }
.marche-quoi { font-size: 1.125rem; color: var(--encre-douce); margin: 0; max-width: 30rem; }
.marche-bloc {
  display: block; height: 12px; width: calc(var(--i) * 20%);
  background: var(--fond, var(--marche-1));
  border: 1px solid var(--trait); border-left: 4px solid var(--bord, var(--lilas));
  border-radius: 2px;
}
.marche-1 { --fond: var(--marche-1); --bord: var(--lilas); }
.marche-2 { --fond: var(--marche-2); --bord: #C9A6D6; }
.marche-3 { --fond: var(--marche-3); --bord: #9E73B0; }
.marche-4 { --fond: var(--marche-4); --bord: #5F3260; }
.marche-5 { --fond: var(--marche-5); --bord: var(--aubergine-nuit); }

@media (min-width: 46em) {
  .escalier { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 4px; }
  .marche { justify-content: flex-end; padding-inline: var(--e2); }
  .marche-bloc {
    width: auto; height: var(--h);
    border: 1px solid var(--trait); border-top: 5px solid var(--bord); border-bottom: 0;
    border-radius: var(--rayon) var(--rayon) 0 0;
  }
  .marche-1 { --h: 4rem; }
  .marche-2 { --h: 6.5rem; }
  .marche-3 { --h: 9rem; }
  .marche-4 { --h: 11.5rem; }
  .marche-5 { --h: 14rem; }
}
.marche.courante .marche-bloc { border-color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }
.marche.courante .marche-num { color: var(--or-encre); }
.marche.courante .marche-num::after { content: " ·"; color: var(--or); }
.escalier-legende { display: flex; justify-content: space-between; gap: var(--e3); font-size: .82rem; color: var(--encre-douce); border-top: 1px solid var(--trait); padding-top: var(--e2); }
.escalier-legende span:last-child { text-align: right; }

/* Escalier réduit — en tête des pages où une marche a un sens.
   Cinq barres qui montent + le nom de la marche en cours. */
.escalier-mini { display: inline-flex; align-items: center; gap: .7rem; }
.escalier-mini ol { display: flex; align-items: flex-end; gap: 3px; height: 30px; list-style: none; margin: 0; padding: 0; }
.escalier-mini li { width: 12px; border-radius: 1px 1px 0 0; background: var(--fond); border: 1px solid rgba(74, 25, 66, .18); }
.escalier-mini li:nth-child(1) { height: 34%; --fond: var(--marche-1); }
.escalier-mini li:nth-child(2) { height: 50%; --fond: var(--marche-2); }
.escalier-mini li:nth-child(3) { height: 66%; --fond: var(--marche-3); }
.escalier-mini li:nth-child(4) { height: 83%; --fond: var(--marche-4); }
.escalier-mini li:nth-child(5) { height: 100%; --fond: var(--marche-5); }
.escalier-mini li.courante { background: var(--or); border-color: var(--or-encre); }
.escalier-mini p { margin: 0; font-size: .82rem; color: var(--encre-douce); }
.escalier-mini strong { color: var(--aubergine); }


/* 07 — COMPOSANT 2 · LA CARTE « MARCHE » =================================== */
.carte {
  background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: var(--e4); display: flex; flex-direction: column; gap: var(--e2);
}
.carte-marche { border-top: 4px solid var(--bord, var(--lilas)); }
.carte-marche .carte-rang { display: flex; align-items: baseline; gap: .6rem; }
.carte-marche .num { font-family: var(--police-titre); font-size: 2.2rem; line-height: 1; color: var(--or-encre); font-variant-numeric: tabular-nums; }
.carte-marche h3 { margin: 0; }
.carte-exemple {
  margin: var(--e2) 0 0; padding: var(--e3);
  background: var(--creme); border-left: 3px solid var(--or);
  font-size: 1.0625rem; color: var(--encre-douce);
}
.carte-exemple b { display: block; font-family: var(--police-texte); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or-encre); margin-bottom: .3rem; }
.carte-titre { font-family: var(--police-titre); font-size: 1.35rem; color: var(--aubergine); margin: 0; }
.carte-meta { font-size: .85rem; color: var(--encre-douce); margin: 0; }


/* 08 — COMPOSANT 3 · LE BLOC CALIBRATION ===================================
   Une seule barre : « j'ai obtenu » remplit, « je pensais » est un repère.
   L'écart se lit d'un coup d'œil. Valeurs portées en ligne :
   style="--obtenu:60%; --pense:85%"
   -------------------------------------------------------------------------- */
.calibration { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--e4); }
.calibration h3 { margin-top: 0; }
.calib-piste {
  position: relative; height: 46px; margin: var(--e4) 0 var(--e2);
  background: var(--aubergine-voile); border: 1px solid var(--trait); border-radius: 2px;
}
.calib-obtenu {
  position: absolute; inset: 0 auto 0 0; width: var(--obtenu);
  background: var(--lilas); border-right: 1px solid var(--marche-4);
}
.calib-repere { position: absolute; top: -14px; bottom: -14px; left: var(--pense); width: 3px; background: var(--corail); }
.calib-repere::after {
  content: attr(data-libelle);
  position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%);
  white-space: nowrap; font: 600 .78rem var(--police-texte); color: var(--corail-encre);
  font-variant-numeric: tabular-nums;
}
.calib-valeur {
  position: absolute; top: 50%; transform: translateY(-50%); left: var(--e2);
  font: 600 .95rem var(--police-texte); color: var(--aubergine); font-variant-numeric: tabular-nums;
}
.calib-ecart {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: var(--e3) 0 0; padding-top: var(--e2); border-top: 1px solid var(--trait);
  font-size: .95rem; color: var(--encre-douce);
}
.calib-ecart b { font-family: var(--police-titre); font-size: 1.6rem; color: var(--or-encre); font-variant-numeric: tabular-nums; }
@media (max-width: 30em) {
  .calib-repere::after { font-size: .7rem; left: auto; right: 0; transform: none; }
  .calibration { padding: var(--e3); }
}


/* 09 — COMPOSANT 4 · LA CARTE PERSONNAGE ===================================
   ÉCHELLE DES PERSONNAGES. Un seul jeton --perso donne la hauteur de
   référence du contexte ; chaque niveau porte son facteur, pour qu'Émilie et
   Martin grandissent réellement d'un niveau à l'autre (les fichiers source ne
   sont pas à l'échelle entre eux : le facteur est ici). La hauteur reste
   DÉFINIE — condition pour que loading="lazy" se déclenche (cf. § 09 bis).
   Poses en pied uniquement : les cadrages buste passent par .portrait.
   Les fichiers source font tous ~1000 px de haut pour ~300 px de large : posés
   à la même hauteur, une CM2 aurait la corpulence d'un 3e. Jamais height ET
   width fixes ensemble sur ces images — width:auto, le dessin n'est pas écrasé.
   Tailles de référence : 142 · 148 · 155 · 162 · 168 · 172 · 174 cm.
   -------------------------------------------------------------------------- */
:root { --perso: 340px; }
@media (max-width: 40em) { :root { --perso: 220px; } }

/* Un seul jeu de ratios, deux hauteurs de référence possibles :
   --perso en pixels (pages) ou en pourcentage (dans un cadre 16:9). */
.perso { display: block; width: auto; height: calc(var(--perso) * var(--r, 1)); }
.perso--cm2 { --r: 0.816; }   /* 142 cm · 10-11 ans */
.perso--6e  { --r: 0.851; }   /* 148 cm · 11-12 ans */
.perso--5e  { --r: 0.891; }   /* 155 cm · 12-13 ans */
.perso--4e  { --r: 0.931; }   /* 162 cm · 13-14 ans */
.perso--3e  { --r: 0.966; }   /* 168 cm · 14-15 ans */
.perso--2de { --r: 0.989; }   /* 172 cm · 15-16 ans */
.perso--1re { --r: 1.000; }   /* 174 cm · 16-17 ans — référence */

/* Cadrages buste (fichiers « expression ») : hors échelle, ils ne montrent pas
   le corps entier. Hauteur propre, jamais un facteur --perso. */
.portrait { display: block; height: 240px; width: auto; }
@media (max-width: 40em) { .portrait { height: 180px; } }

.duo { display: flex; align-items: flex-end; justify-content: center; gap: 1.5rem; }
.duo figure { margin: 0; text-align: center; }
.duo figcaption { font-size: .8rem; color: var(--encre-douce); margin-top: var(--e2); }
@media (max-width: 40em) { .duo { gap: var(--e3); } }

.personnages { display: grid; gap: var(--e3); --perso: 240px; }
@media (min-width: 34em) { .personnages-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carte-perso {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2);
  background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: var(--e3);
}
.carte-perso .socle {
  align-self: stretch; display: flex; justify-content: center; align-items: flex-end;
  background: var(--lilas-voile); border-radius: 2px; padding-top: var(--e3);
}
.carte-perso .qui { font-family: var(--police-titre); font-size: 1.25rem; color: var(--aubergine); margin: 0; }
.carte-perso .dit { margin: 0; font-style: italic; color: var(--encre-douce); font-size: 1.125rem; }


/* 10 — COMPOSANT 5 · LA CARTE OFFRE ======================================== */
.offres { display: grid; gap: var(--e3); align-items: start; }
@media (min-width: 58em) { .offres-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 48em) { .offres-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carte-offre {
  background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: var(--e4); display: flex; flex-direction: column; gap: var(--e3); height: 100%;
}
.carte-offre.mise-en-avant { border-color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }
.carte-offre h3 { margin: 0; }
.prix { font-family: var(--police-titre); font-size: 2.5rem; line-height: 1; color: var(--aubergine); display: flex; align-items: baseline; gap: .4rem; }
.prix small { font-family: var(--police-texte); font-size: .82rem; color: var(--encre-douce); }
.inclus { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); font-size: 1.125rem; }
.inclus li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; }
.inclus li::before { content: "▚"; color: var(--lilas); font-size: .8rem; line-height: 1.9; }
.inclus li.non { color: var(--encre-douce); }
.inclus li.non::before { content: "·"; color: var(--trait); }
.carte-offre .btn { margin-top: auto; }
.mention-tva { font-size: .82rem; color: var(--encre-douce); }


/* 11 — COMPOSANT 6 · L'ACCORDÉON FAQ (sans JavaScript) ===================== */
.faq { border-top: 1px solid var(--trait); max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  display: flex; align-items: flex-start; gap: var(--e2); justify-content: space-between;
  padding: var(--e3) 0; cursor: pointer; list-style: none;
  font-family: var(--police-titre); font-size: 1.22rem; color: var(--aubergine);
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--police-texte); font-size: 1.3rem; color: var(--or-encre); line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--corail-encre); }
.faq .reponse { padding: 0 0 var(--e3); max-width: var(--mesure); }
.faq .reponse p:last-child { margin-bottom: 0; }


/* 12 — COMPOSANT 7 · L'EMPLACEMENT VIDÉO ===================================
   Vignette dessinée en CSS (aucune vidéo n'est tournée à ce jour), bouton
   lecture, mention « bientôt ». Le jour où la vidéo existe : remplacer
   .video-attente par <button class="video-lancer" data-video="ID"> et
   décommenter le VideoObject dans le <head>. Le clic seulement remplace
   la vignette par l'iframe youtube-nocookie — aucune requête avant.
   -------------------------------------------------------------------------- */
.video { margin: 0; }
.video-cadre {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--creme); border: 1px solid var(--trait); border-radius: var(--rayon);
  display: flex; align-items: flex-end; justify-content: center;
}
.video-attente { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 4%; padding: 0 6%; }
.video-attente .escalier-fond { position: absolute; inset: auto 0 0 0; height: 62%; display: flex; align-items: flex-end; gap: 2px; padding: 0 8%; }
.video-attente .escalier-fond i { flex: 1; border-radius: 2px 2px 0 0; opacity: .5; }
.video-attente .escalier-fond i:nth-child(1) { height: 20%; background: var(--marche-1); }
.video-attente .escalier-fond i:nth-child(2) { height: 36%; background: var(--marche-2); }
.video-attente .escalier-fond i:nth-child(3) { height: 52%; background: var(--marche-3); }
.video-attente .escalier-fond i:nth-child(4) { height: 68%; background: var(--marche-4); }
.video-attente .escalier-fond i:nth-child(5) { height: 84%; background: var(--marche-5); }
/* Dans un cadre 16:9, la référence n'est pas en pixels mais en pourcentage de
   la hauteur du cadre : les ratios de niveau s'appliquent quand même. */
.video-attente { --perso: 86%; }
.video-attente img { position: relative; align-self: flex-end; width: auto; }
.video-attente .portrait { height: 82%; }
.video-lecture {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--creme); border: 2px solid var(--corail);
  display: grid; place-items: center; box-shadow: var(--ombre);
}
.video-lecture::before { content: ""; width: 0; height: 0; margin-left: 4px; border: 11px solid transparent; border-left: 18px solid var(--corail-encre); }
.video-bientot { position: absolute; top: var(--e2); left: var(--e2); margin: 0; }
.video figcaption { padding-top: var(--e2); font-size: .92rem; color: var(--encre-douce); }
.video figcaption b { display: block; font-family: var(--police-titre); font-size: 1.28rem; color: var(--aubergine); font-weight: 600; }
.video-duree { font-variant-numeric: tabular-nums; }


/* 13 — COMPOSANT 8 · LE FORMULAIRE D'ALERTE ================================
   POST vers /api/alerte · page de confirmation /merci.html
   Consentement JAMAIS pré-coché. Aucun champ bancaire nulle part.
   -------------------------------------------------------------------------- */
.alerte {
  background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: var(--e4); max-width: 40rem;
}
.section-encre .alerte { background: rgba(251, 246, 240, .06); border-color: rgba(251, 246, 240, .3); }
.alerte h2, .alerte h3 { margin-top: 0; }
.champ { display: flex; flex-direction: column; gap: var(--e1); margin-bottom: var(--e3); }
.champ label { font: 600 .92rem var(--police-texte); }
.section-encre .champ label { color: var(--creme); }
.saisie {
  font: 400 1rem var(--police-texte); color: var(--encre);
  min-height: 48px; padding: .6rem .8rem;
  background: var(--creme); border: 1px solid var(--aubergine); border-radius: var(--rayon);
}
.saisie::placeholder { color: #9A8B96; }
.saisie:hover { border-color: var(--corail); }
.aide { font-size: .84rem; color: var(--encre-douce); }
.section-encre .aide { color: #DCCBD8; }
.consent { display: grid; grid-template-columns: 1.3rem 1fr; gap: .7rem; align-items: start; font-size: .9rem; margin-bottom: var(--e3); }
.consent input { width: 1.3rem; height: 1.3rem; margin: .15rem 0 0; accent-color: var(--aubergine); }
.ligne-alerte { display: flex; flex-wrap: wrap; gap: var(--e2); }
.ligne-alerte .champ { flex: 1 1 16rem; margin-bottom: 0; }

/* États du formulaire et du futur bouton de paiement — dessinés, non branchés.
   Le branchement Stripe consistera à ajouter la classe correspondante sur
   .etat (ou à afficher le .msg voulu) : aucune refonte visuelle nécessaire. */
.msg { border-radius: var(--rayon); padding: var(--e3); margin: 0 0 var(--e3); font-size: .95rem; border: 1px solid; }
.msg-succes { border-color: var(--marche-4); background: var(--lilas-voile); color: var(--aubergine); }
.msg-erreur { border-color: var(--corail); background: var(--corail-voile); color: var(--corail-encre); }
.msg-attente { border-color: var(--or); background: var(--or-voile); color: var(--or-encre); }
.btn-chargement { position: relative; color: transparent; pointer-events: none; }
.btn-chargement::after { content: "…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--creme); font-size: 1.4rem; }


/* 14 — COMPOSANT 9 · LE BANDEAU DE NIVEAU ================================== */
.bandeau-niveau {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3);
  padding: var(--e2) 0; border-bottom: 1px solid var(--trait);
  background: var(--niv, var(--niv-cm2));
}
.bandeau-niveau .enveloppe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }
.bandeau-niveau .niveau {
  font: 600 .8rem var(--police-texte); letter-spacing: .14em; text-transform: uppercase;
  padding: .35em .7em; border: 1px solid var(--aubergine); border-radius: 2px; color: var(--aubergine);
  background: var(--creme);
}
.bandeau-niveau p { margin: 0; font-size: .9rem; color: var(--encre); }
.b-cm2 { --niv: var(--niv-cm2); }
.b-6e  { --niv: var(--niv-6e); }
.b-5e  { --niv: var(--niv-5e); }
.b-4e  { --niv: var(--niv-4e); }
.b-3e  { --niv: var(--niv-3e); }
.b-2de { --niv: var(--niv-2de); }
.b-1re { --niv: var(--niv-1re); }
.b-4e p, .b-3e p, .b-2de p, .b-1re p { color: var(--creme); }   /* les quatre crans sombres : au-delà du corail, l'encre ne passe plus */
.b-4e .niveau, .b-3e .niveau, .b-2de .niveau, .b-1re .niveau { border-color: var(--creme); color: var(--creme); background: transparent; }


/* 15 — COMPOSANT 10 · LE PIED DE PAGE ====================================== */
.pied { background: var(--aubergine); color: var(--creme); padding-block: var(--e5) var(--e4); margin-top: var(--e6); }
.pied a { color: var(--creme); box-shadow: none; }
.pied a:hover { color: #fff; box-shadow: inset 0 -2px 0 var(--or); }
.pied-grille { display: grid; gap: var(--e4); }
@media (min-width: 46em) { .pied-grille { grid-template-columns: 1.2fr 1fr 1fr; } }
.pied h2 { font-size: 1rem; font-family: var(--police-texte); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--or); margin: 0 0 var(--e2); }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e1); font-size: .95rem; }
.pied .mention { font-size: .85rem; color: #DCCBD8; max-width: 26rem; }
.pied-bas { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); justify-content: space-between; align-items: center; margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid rgba(251, 246, 240, .22); font-size: .85rem; color: #DCCBD8; }

.reseaux { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; margin: 0 0 var(--e3); padding: 0; }
.reseaux li { margin: 0; }
.reseau {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgba(251, 246, 240, .4); border-radius: var(--rayon);
  color: var(--creme); box-shadow: none;
}
.reseau:hover { border-color: var(--or); background: rgba(201, 151, 28, .16); box-shadow: none; }
.reseau svg { width: 20px; height: 20px; fill: currentColor; }
.reseau[aria-disabled="true"] { opacity: .38; cursor: default; }          /* compte pas encore créé */
.reseau[aria-disabled="true"]:hover { border-color: rgba(251, 246, 240, .4); background: none; }

.partage { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; font-size: .9rem; }
.partage a, .partage button {
  font: 400 .9rem var(--police-texte); color: var(--aubergine); background: transparent;
  border: 1px solid var(--trait); border-radius: var(--rayon); padding: .5rem .8rem; min-height: 44px;
  box-shadow: none; cursor: pointer;
}
.partage a:hover, .partage button:hover { border-color: var(--corail); color: var(--corail-encre); box-shadow: none; }


/* 16 — BLOCS ÉDITORIAUX ==================================================== */
/* Réponse directe : deux ou trois phrases en tête de chaque page. */
.reponse-directe {
  font-size: 1.2rem; line-height: 1.5; color: var(--aubergine);
  max-width: 42rem; margin: 0 0 var(--e4);
  padding-left: var(--e3); border-left: 3px solid var(--or);
}
.reponse-directe p { max-width: none; margin-bottom: var(--e2); }
.reponse-directe p:last-child { margin-bottom: 0; }

.heros { padding-block: var(--e5) var(--e5); }
@media (min-width: 62em) {
  .heros-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--e5); align-items: center; }
}
.heros h1 { margin-bottom: var(--e3); }
.heros .sous-titre { font-size: 1.22rem; color: var(--encre-douce); max-width: 34rem; }

.piliers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--trait); }
.piliers li { border-bottom: 1px solid var(--trait); padding: var(--e3) 0; display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--e2); }
.piliers .n { font-family: var(--police-titre); font-size: 1.5rem; color: var(--or-encre); line-height: 1; font-variant-numeric: tabular-nums; }
.piliers h3 { margin: 0 0 .2rem; font-size: 1.2rem; }
.piliers p { margin: 0; font-size: 1.125rem; color: var(--encre-douce); }
@media (min-width: 52em) { .piliers-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e5); } }

/* Couverture du cahier — reconstituée en HTML : aucun texte enfermé dans une image */
.couverture {
  position: relative; aspect-ratio: 21 / 27.9; max-width: 340px; width: 100%;
  background: var(--creme); border: 1px solid var(--trait); border-radius: 2px;
  box-shadow: var(--ombre); padding: var(--e3);
  display: flex; flex-direction: column; overflow: hidden;
}
.couverture .cv-marque { font: 600 .58rem var(--police-texte); letter-spacing: .18em; text-transform: uppercase; color: var(--or-encre); }
.couverture .cv-titre { font-family: var(--police-titre); font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase; color: var(--aubergine); margin: var(--e2) 0 0; }
.couverture .cv-niveau { font-family: var(--police-titre); font-size: 2.6rem; line-height: 1; color: var(--aubergine); margin: .2rem 0 0; font-variant-numeric: tabular-nums; }
.couverture .cv-accroche { font-size: .8rem; color: var(--encre-douce); margin: var(--e2) 0 0; max-width: none; }
.couverture .cv-escalier { margin-top: auto; display: flex; align-items: flex-end; gap: 3px; height: 46%; }
.couverture .cv-escalier i { flex: 1; border-radius: 2px 2px 0 0; }
.couverture .cv-escalier i:nth-child(1) { height: 20%; background: var(--marche-1); }
.couverture .cv-escalier i:nth-child(2) { height: 36%; background: var(--marche-2); }
.couverture .cv-escalier i:nth-child(3) { height: 52%; background: var(--marche-3); }
.couverture .cv-escalier i:nth-child(4) { height: 70%; background: var(--marche-4); }
.couverture .cv-escalier i:nth-child(5) { height: 88%; background: var(--marche-5); }
.couverture .cv-pied { font: 600 .58rem var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--or-encre); padding-top: var(--e2); }

.journal { display: grid; gap: var(--e3); }
@media (min-width: 46em) { .journal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.journal article { border-top: 2px solid var(--aubergine); padding-top: var(--e2); }
.journal h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.journal time { font-size: .8rem; color: var(--or-encre); font-variant-numeric: tabular-nums; }

.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { text-align: left; padding: var(--e2) var(--e2); border-bottom: 1px solid var(--trait); vertical-align: top; }
.table thead th { font: 600 .78rem var(--police-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--or-encre); border-bottom: 1px solid var(--aubergine); }
.table-enveloppe { overflow-x: auto; }
/* Sous 26em (iPhone SE, iPhone mini), la grille des tarifs depassait de quelques
   pixels sa boite : on resserre les cellules plutot que de laisser un glissement
   lateral de 9 px, invisible et donc jamais decouvert par le lecteur. */
@media (max-width: 26em) {
  .table th, .table td { padding: var(--e2) calc(var(--e2) * .55); }
  .table { font-size: .9rem; }
}

.fil { font-size: .85rem; color: var(--encre-douce); padding-block: var(--e2); }
.fil ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.fil li + li::before { content: "›"; margin-right: .4rem; color: var(--trait); }

.aller-plus-loin { display: grid; gap: var(--e2); border-top: 1px solid var(--trait); padding-top: var(--e3); margin-top: var(--e5); }
@media (min-width: 46em) { .aller-plus-loin { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e4); } }
.aller-plus-loin a { font-family: var(--police-titre); font-size: 1.15rem; }

.gabarit-note {
  border: 1px dashed var(--or); background: var(--or-voile); color: var(--or-encre);
  border-radius: var(--rayon); padding: var(--e3); font-size: .92rem; margin-bottom: var(--e4);
}
.gabarit-note b { color: var(--or-encre); }
.gabarit-note code, .aide code { overflow-wrap: anywhere; font-size: .95em; }
.a-remplir { color: var(--encre-douce); font-style: italic; }


/* 17 — IMPRESSION ========================================================== */
@media print {
  .entete, .pied, .partage, .video-lecture { display: none; }
  body { background: #fff; font-size: 11pt; }
  a { box-shadow: none; text-decoration: underline; }
}


/* Jetons de collection (maquette Claude Design, 23/09/2026) */
/* ==========================================================================
   CINQ MARCHES : AJOUTS À styles.css, refonte « maison d'édition » (23/09/2026)
   À coller dans la section « 01 — JETONS DE THÈME », APRÈS les jetons existants.
   Aucun jeton existant n'est modifié. Contrastes mesurés sur --papier (WCAG 2.1).
   ========================================================================== */
:root {
  /* Nouveau : lilas lisible (le lilas pur fait 2,6:1, il est interdit en texte) */
  --lilas-encre: #6B3F80;                         /* 7,8:1 papier · 6,7:1 lilas-voile */

  /* Collection Scolaire : reprend l'existant */
  --collection-scolaire:        var(--lilas);     /* filets et décor seulement */
  --collection-scolaire-encre:  var(--lilas-encre);
  --collection-scolaire-voile:  var(--lilas-voile);

  /* Collection Concours : émeraude profond (validé à la Porte 2) */
  --collection-concours:        #0F5E4E;          /* 7,6:1 papier · 7,2:1 crème */
  --collection-concours-encre:  #0B4A3D;          /* 10,0:1 papier · 8,8:1 voile */
  --collection-concours-voile:  #E7F1ED;
  --collection-concours-nuit:   #0A2F27;          /* crème dessus : 13,5:1 */
  /* Escalier Concours (même logique que --marche-1…5) */
  --concours-marche-1: #E7F1ED;
  --concours-marche-2: #B9D6CB;
  --concours-marche-3: #6FA593;
  --concours-marche-4: #0F5E4E;
  --concours-marche-5: #0A2F27;

  /* Accent courant : la maison par défaut */
  --accent:       var(--aubergine);
  --accent-encre: var(--aubergine);
  --accent-voile: var(--creme);
}
body[data-collection="scolaire"] {
  --accent:       var(--collection-scolaire);
  --accent-encre: var(--collection-scolaire-encre);
  --accent-voile: var(--collection-scolaire-voile);
}
body[data-collection="concours"] {
  --accent:       var(--collection-concours);
  --accent-encre: var(--collection-concours-encre);
  --accent-voile: var(--collection-concours-voile);
  --marche-1: var(--concours-marche-1);
  --marche-2: var(--concours-marche-2);
  --marche-3: var(--concours-marche-3);
  --marche-4: var(--concours-marche-4);
  --marche-5: var(--concours-marche-5);
}

/* Interdits en texte sur fond clair : --or (2,6), --lilas (2,6), --corail (3,3).
   Pour le texte, utiliser les versions -encre. */


/* 18 — MAISON D'ÉDITION · refonte du 23/09/2026 ==============================
   Transposition de la maquette de Claude Design validée par Romain (portes 0 à 4).
   Les pages nouvelles portent <main class="maison"> ; les pages déplacées gardent
   leurs composants d'origine et reçoivent seulement l'en-tête et le pied communs.
   Couleur de collection : <body data-collection="scolaire|concours"> (jetons § 01).
   -------------------------------------------------------------------------- */

/* Base : papier chaud, texte 17 px, conteneur de 75 rem */
:root { --enveloppe: 75rem; }
body { background: var(--papier); font-size: 1.0625rem; line-height: 1.7; }
.enveloppe { padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
@media (min-width: 40em) { .enveloppe { padding-inline: clamp(1.25rem, 4vw, 2.5rem); } }
.section-creuse { background: var(--creme); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

/* En-tête : cachet 40 px, nom, et la ligne de la maison ou de la collection */
.entete { background: var(--papier); }
.entete-int { min-height: 72px; padding-block: 1rem; }
.marque { gap: .75rem; color: var(--encre); }
.marque-cachet { width: 40px; height: 40px; }
@media (max-width: 30em) { .marque-cachet { width: 36px; height: 36px; } }
.marque-nom { font-size: 1.5rem; font-weight: 600; color: var(--encre); line-height: 1.1; }
.marque-nom span { font-size: .75rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--encre-douce); margin-top: .1rem; }
body[data-collection] .marque-nom span { color: var(--accent-encre); }
body[data-collection] .entete { border-bottom: 3px solid var(--accent); }
.nav-liens { gap: .25rem 1.5rem; }
.nav-liens a { color: var(--encre); font-size: .9375rem; padding: .5rem 0; }
.nav-liens a:hover { color: var(--aubergine); box-shadow: inset 0 -2px 0 var(--or); }
.nav-liens a[aria-current] { color: var(--accent-encre); box-shadow: inset 0 -2px 0 var(--or); }
.nav-liens .nav-cta a { padding: .5rem .9rem; border: 1px solid var(--accent-encre); color: var(--accent-encre); box-shadow: none; }
.nav-liens .nav-cta a:hover { background: var(--accent-voile); box-shadow: none; }

/* Pied : aubergine de nuit, filet d'or (émeraude côté Concours) */
.pied { background: var(--aubergine-nuit); border-top: 4px solid var(--or); margin-top: 0; padding-block: 3rem 2rem; }
body[data-collection="concours"] .pied { border-top-color: var(--collection-concours); }
.pied-grille, .pied-grille-maison { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 2rem; font-size: .9375rem; }
@media (min-width: 46em) { .pied-grille-maison { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } }
.pied-col { display: flex; flex-direction: column; gap: .375rem; }
.pied-marque { display: flex; align-items: center; gap: .625rem; font-family: var(--police-titre); font-size: 1.5rem; font-weight: 600; color: var(--creme); }
.pied-signature { font-family: var(--police-titre); font-style: italic; font-size: 1.125rem; color: var(--or); margin: 0; }
.pied-titre { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lilas); margin: 0 0 .15rem; }
body[data-collection="concours"] .pied-titre { color: var(--or); }
.pied-avertissement, .pied-mentions { grid-column: 1 / -1; margin: 0; max-width: none; }
.pied-avertissement { border: 1px solid rgba(251, 246, 240, .35); padding: .875rem 1.125rem; }
.pied-mentions { border-top: 1px solid rgba(251, 246, 240, .25); padding-top: 1rem; font-size: .8125rem; color: #DCCBD8; }

/* Pages nouvelles : typographie de la maquette, sans le filet en crans */
.maison a { color: var(--or-encre); box-shadow: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.maison a:hover { color: var(--aubergine); box-shadow: none; }
body[data-collection] .maison a { color: var(--accent-encre); }
body[data-collection] .maison a:hover { color: var(--encre); }
.maison h1, .maison h2, .maison h3 { margin: 0; }
.maison h2, .maison h3 { color: var(--encre); background: none; padding-bottom: 0; }
.maison h2 { font-weight: 500; font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); line-height: 1.15; }
.maison h3 { font-weight: 600; font-size: clamp(1.375rem, 1.3rem + .3vw, 1.5rem); line-height: 1.25; }
.maison p { margin: 0; }
.bande { border-bottom: 1px solid var(--trait); }
.bande > .enveloppe { padding-block: clamp(3rem, 6vw, 4.5rem); display: flex; flex-direction: column; gap: 2rem; }
.bande-creme { background: var(--creme); }
.grille-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 2rem 4rem; }
.grille-auto-18 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 2.5rem 3.5rem; }
.colonne { display: flex; flex-direction: column; gap: .75rem; }
.entre { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.discret { font-size: .9375rem; color: var(--encre-douce); max-width: 38rem; }
.petit { font-size: .875rem; }
.etiquette { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-encre); }
.chapeau-maison { font-size: clamp(1.1875rem, 1.15rem + .2vw, 1.3125rem); line-height: 1.6; max-width: 36rem; text-wrap: pretty; }
.texte { max-width: 38rem; display: flex; flex-direction: column; gap: 1rem; }

/* Portail : manifeste et escalier en barres */
.manifeste > .enveloppe { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.manifeste-texte { display: flex; flex-direction: column; gap: 1.25rem; }
.affiche { font-family: var(--police-titre); font-weight: 400; font-size: clamp(2.75rem, 1.6rem + 4.4vw, 5rem); line-height: 1.02; color: var(--aubergine) !important; letter-spacing: -.01em; }
.titre-page { font-family: var(--police-titre); font-weight: 400; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height: 1.05; }
.barres { display: flex; align-items: flex-end; gap: 6px; height: clamp(11rem, 26vw, 18rem); }
.barres span { flex: 1; }
.barres-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(4px, 1vw, 1rem); align-items: end; height: clamp(5rem, 12vw, 8rem); }
.barres span:nth-child(1), .barres-5 span:nth-child(1) { height: 20%; background: var(--marche-1); border: 1px solid var(--marche-3); }
.barres span:nth-child(2), .barres-5 span:nth-child(2) { height: 40%; background: var(--marche-2); }
.barres span:nth-child(3), .barres-5 span:nth-child(3) { height: 60%; background: var(--marche-3); }
.barres span:nth-child(4), .barres-5 span:nth-child(4) { height: 80%; background: var(--marche-4); }
.barres span:nth-child(5), .barres-5 span:nth-child(5) { height: 100%; background: var(--marche-5); border-top: 5px solid var(--or); }

/* Cartes de collection */
.cartes-collections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1.5rem; }
.carte-collection { --c: var(--aubergine); --c-encre: var(--aubergine); border: 1px solid var(--trait); border-top: 5px solid var(--c); background: var(--papier); padding: clamp(1.25rem, 3vw, 2rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; transition: border-color .2s ease-out; }
.carte-collection:hover { border-color: var(--c-encre); border-top-color: var(--c); }
.carte-collection.scolaire { --c: var(--collection-scolaire); --c-encre: var(--collection-scolaire-encre); }
.carte-collection.concours { --c: var(--collection-concours); --c-encre: var(--collection-concours-encre); }
.carte-collection .colonne { gap: .875rem; }
.carte-collection .etiquette { color: var(--c-encre); }
.carte-collection h3 { font-weight: 500; font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem); line-height: 1.05; }
.carte-collection .compteur { font-size: .875rem; border-top: 1px solid var(--trait); padding-top: .75rem; font-variant-numeric: tabular-nums; }
.carte-collection .liens { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9375rem; }
.maison .carte-collection a { color: var(--c-encre); }
.tandem { display: flex; align-items: flex-end; gap: 2px; }
.tandem img { height: clamp(10rem, 20vw, 13.5rem); width: auto; }
@media (max-width: 34em) {
  .carte-collection { grid-template-columns: 1fr; }
  .tandem img { height: 8.5rem; }
}

/* La méthode : cinq colonnes fixes, mécanismes et chiffre daté */
.noms-5 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(4px, 1vw, 1rem); align-items: start; }
.noms-5 li { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.noms-5 .nom { font-family: var(--police-titre); font-size: clamp(1rem, .8rem + 1vw, 1.5rem); font-weight: 600; line-height: 1.1; overflow-wrap: anywhere; color: var(--encre); }
.noms-5 .num { color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.noms-5 li:last-child .num { color: var(--or-encre); }
.noms-5 .quoi { font-size: clamp(.75rem, .7rem + .2vw, .875rem); line-height: 1.5; color: var(--encre-douce); }
.mecanismes { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1.25rem; font-size: .9375rem; border-top: 1px solid var(--aubergine); }
.mecanismes dt, .mecanismes dd { padding: .625rem 0; border-bottom: 1px solid var(--trait); }
.mecanismes dd { margin: 0; font-style: italic; color: var(--encre-douce); }
@media (max-width: 34em) {
  .mecanismes { grid-template-columns: 1fr; }
  .mecanismes dt { border-bottom: 0; padding-bottom: 0; font-weight: 600; }
}
.chiffre { border: 1px solid var(--trait); background: var(--papier); padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: .25rem; }
.chiffre-valeur { font-family: var(--police-titre); font-size: clamp(2.75rem, 2rem + 2vw, 3.5rem); line-height: 1; color: var(--or-encre); font-variant-numeric: tabular-nums; }
.chiffre-source { font-size: .8125rem; color: var(--encre-douce); }

/* Engagements */
.engagements { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 2rem; }
.engagements li { border-top: 1px solid var(--aubergine); padding: .875rem 0; display: flex; flex-direction: column; gap: .25rem; }
.engagements b { font-family: var(--police-titre); font-size: 1.375rem; font-weight: 600; color: var(--encre); }
.engagements span { font-size: .875rem; color: var(--encre-douce); }
.liste-filets { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.liste-filets li { border-top: 1px solid var(--trait); padding: .625rem 0; }
.liste-filets li:last-child { border-bottom: 1px solid var(--trait); }
.liste-numerotee { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 1rem; max-width: 40rem; }

/* Fiches d'ouvrage : état, en-tête, encadré « Être prévenu » */
.fil-maison { font-size: .875rem; color: var(--encre-douce); display: flex; gap: .5rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 1rem 0 0; }
.fil-maison li { display: flex; gap: .5rem; }
.fil-maison li + li::before { content: "›"; color: var(--encre-douce); }
.fiche-tete > .enveloppe { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.fiche-tete .colonne { gap: 1.125rem; }
.etat { align-self: flex-start; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-encre); border: 1px solid var(--accent-encre); padding: .1875rem .625rem; border-radius: 4px; }
.etat-a-paraitre { border-style: solid; background: var(--accent-voile); }
.fiche-ligne { font-size: .9375rem; color: var(--encre-douce); }
.encadre-alerte { border: 1px solid var(--accent-encre); background: var(--accent-voile); padding: clamp(1.25rem, 3vw, 1.75rem); display: flex; flex-direction: column; gap: .875rem; }
.encadre-alerte h2 { font-size: 1.625rem !important; font-weight: 500; line-height: 1.15; color: var(--accent-encre) !important; }
.alerte-f { display: flex; flex-direction: column; gap: .625rem; }
.alerte-f label { font-size: .875rem; }
.alerte-f input[type="email"], .alerte-f select { font: 400 1rem var(--police-texte); padding: .75rem .875rem; border: 1px solid var(--encre-douce); border-radius: 4px; background: var(--papier); color: var(--encre); min-height: 44px; width: 100%; }
.alerte-f input[aria-invalid="true"] { border: 2px solid var(--corail-encre); }
.alerte-f button { font: 400 .9375rem var(--police-texte); padding: .75rem 1rem; border: 1px solid var(--accent-encre); border-radius: 4px; background: transparent; color: var(--accent-encre); cursor: pointer; min-height: 44px; }
.alerte-f button:hover { background: var(--papier); }
.alerte-f button:disabled { opacity: .6; cursor: progress; }
.alerte-erreur { font-size: .875rem; color: var(--corail-encre); }
.alerte-aide { font-size: .8125rem; color: var(--encre-douce); }
.alerte-merci { display: flex; flex-direction: column; gap: .5rem; }
.alerte-merci .merci-titre { font-family: var(--police-titre); font-size: 1.5rem; color: var(--accent-encre); }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.escalier-fiche { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; align-items: end; }
.escalier-fiche li { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.escalier-fiche span.b { display: block; }
.escalier-fiche li:nth-child(1) span.b { height: 1.5rem; background: var(--marche-1); border: 1px solid var(--marche-3); }
.escalier-fiche li:nth-child(2) span.b { height: 3rem; background: var(--marche-2); }
.escalier-fiche li:nth-child(3) span.b { height: 4.5rem; background: var(--marche-3); }
.escalier-fiche li:nth-child(4) span.b { height: 6rem; background: var(--marche-4); }
.escalier-fiche li:nth-child(5) span.b { height: 7.5rem; background: var(--marche-5); border-top: 4px solid var(--or); }
.escalier-fiche small { font-size: .75rem; line-height: 1.3; color: var(--encre); overflow-wrap: anywhere; }
.avertissement { border: 1px solid var(--collection-concours-encre); padding: 1.125rem 1.375rem; display: flex; flex-direction: column; gap: .375rem; max-width: 48rem; }
.avertissement .etiquette { color: var(--collection-concours-encre); }
.voir-aussi { display: flex; gap: .75rem 2rem; flex-wrap: wrap; align-items: baseline; }
.voir-aussi h2 { font-size: 1.5rem !important; }
.epreuves { margin: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .9375rem; }
.epreuves dt { font-weight: 600; }
.epreuves dd { margin: 0 0 .5rem; color: var(--encre); }
.source { font-size: .8125rem; color: var(--encre-douce); border-left: 2px solid var(--or); padding-left: .75rem; }
.sortant::after { content: " ↗"; }

/* Listes d'ouvrages : niveaux, concours */
.liste-ouvrages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.liste-ouvrages li { border: 1px solid var(--trait); border-top: 3px solid var(--accent); background: var(--papier); padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: .35rem; transition: border-color .2s ease-out; }
.liste-ouvrages li:hover { border-color: var(--accent-encre); border-top-color: var(--accent); }
.liste-ouvrages .o-titre { font-family: var(--police-titre); font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.liste-ouvrages .o-meta { font-size: .8125rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.domaine { display: flex; flex-direction: column; gap: 1rem; }
.domaine h3 { font-size: 1.375rem !important; }

/* Mouvement : survol des cartes seulement, coupé si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .carte-collection, .liste-ouvrages li { transition: none; }
}

/* « hidden » doit gagner sur toute classe qui pose un display (.alerte-merci est en flex) */
[hidden] { display: none !important; }

/* Menu mobile sur papier, comme l'en-tête */
@media (max-width: 57.99em) {
  .nav-liens { background: var(--papier); }
  .nav-liens .nav-cta a { display: inline-block; margin-top: .25rem; }
}
.maison h1 { color: var(--aubergine); }

/* Chiffres : Cormorant compose en chiffres elzéviriens par défaut ; une figure se lit en chiffres alignés */
.chiffre-valeur, .liste-filets b, .compteur b { font-variant-numeric: lining-nums tabular-nums; }
.engagements { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
.noms-5 .nom { overflow-wrap: normal; hyphens: auto; }
/* Téléphone : les barres restent en cinq colonnes, les libellés passent en liste */
@media (max-width: 34em) {
  .noms-5 { grid-template-columns: 1fr; gap: 0; }
  .noms-5 li { display: grid; grid-template-columns: 1.5rem 7.5rem minmax(0, 1fr); align-items: baseline; gap: .5rem; padding: .5rem 0; border-top: 1px solid var(--trait); }
  .noms-5 .nom { font-size: 1.25rem; }
  .noms-5 .quoi { font-size: .875rem; }
}
.alerte-merci:focus { outline: none; }
.bande > .enveloppe.voir-aussi { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .75rem 2rem; }

/* Fiche d'identité de la maison */
.identite { margin: 0; display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0 1.25rem; font-size: .9375rem; border-top: 1px solid var(--aubergine); }
.identite dt, .identite dd { margin: 0; padding: .625rem 0; border-bottom: 1px solid var(--trait); }
.identite dt { color: var(--encre-douce); }
@media (max-width: 34em) { .identite { grid-template-columns: 1fr; } .identite dt { border-bottom: 0; padding-bottom: 0; } }

/* Bandeau de mesure d'audience (Google Analytics, 23/09/2026) : les deux
   boutons ont le même poids, refuser est aussi simple qu'accepter (CNIL). */
.bandeau-mesure {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--papier); color: var(--encre);
  border-top: 4px solid var(--or); box-shadow: 0 -8px 24px -12px rgba(74, 25, 66, .35);
  padding: 1rem 16px calc(1rem + env(safe-area-inset-bottom));
}
.bandeau-mesure-int { max-width: var(--enveloppe); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.bandeau-mesure p { margin: 0; flex: 1 1 22rem; font-size: .9375rem; line-height: 1.5; }
.bandeau-mesure a { color: var(--aubergine); text-decoration: underline; text-underline-offset: 3px; }
.bandeau-mesure-choix { display: flex; gap: .75rem; flex: 0 0 auto; }
.bandeau-mesure-choix .btn { min-width: 7.5rem; justify-content: center; }
@media (max-width: 30em) {
  .bandeau-mesure-choix { flex: 1 1 100%; }
  .bandeau-mesure-choix .btn { flex: 1 1 0; min-width: 0; }
}
.pied-lien-bouton, .lien-bouton {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.pied-lien-bouton:hover { color: #fff; }
.lien-bouton { color: var(--aubergine); }
@media print { .bandeau-mesure { display: none; } }