/* French with Jérôme : feuille de style commune.
   L'univers : une collection blanche d'éditeur. Fond blanc, encre noire, une seule grotesque,
   des filets fins. La couleur (un vert) ne sert qu'à signaler un état : la phrase écoutée,
   la progression, un mot enregistré. */

:root {
  --papier: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f6;
  --encre: #17181c;
  --gris: #5f636c;
  --gris-doux: #6f737b;
  --filet: #e7e8eb;
  --filet-fort: #cfd1d6;
  --accent: #1d6b52;
  --accent-pale: #e7f1ec;
  --rouge: #b93a2b;
  --voile: rgba(255, 255, 255, 0.9);

  /* Anciens noms, gardés pour les scripts et la page d'écoute */
  --action: var(--encre);
  --action-fonce: #000;
  --sur-action: #fff;
  --bleu: var(--accent);
  --bleu-pale: var(--accent-pale);
  --surlignage: var(--accent-pale);
  --survol: var(--surface-2);

  --sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: var(--sans);
  --lecture-serif: "EB Garamond", Garamond, Georgia, serif;

  /* Formes : les livres sont droits, les commandes à peine arrondies, la lecture est ronde. */
  --r-livre: 1px;
  --r-petit: 6px;
  --r-surface: 10px;

  --ombre-livre: 0 1px 1px rgba(23, 24, 28, 0.04), 0 10px 30px -12px rgba(23, 24, 28, 0.16);
  --ombre-flottante: 0 2px 6px rgba(23, 24, 28, 0.06), 0 24px 60px -20px rgba(23, 24, 28, 0.28);

  --largeur: 1200px;
  --gouttiere: clamp(22px, 5.6vw, 48px); /* 22 px au moins : sur téléphone, le texte ne colle pas aux bords */
  --haut-entete: 60px;
  --sortie: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --papier: #121314;
  --surface: #18191b;
  --surface-2: #1f2023;
  --encre: #ededee;
  --gris: #a2a5ab;
  --gris-doux: #85888f;
  --filet: #2a2b2f;
  --filet-fort: #3a3c41;
  --accent: #6cc39e;
  --accent-pale: #1b2c25;
  --rouge: #ec7a69;
  --voile: rgba(18, 19, 20, 0.9);
  --action-fonce: #fff;
  --sur-action: #121314;
  --ombre-livre: 0 1px 1px rgba(0, 0, 0, 0.3), 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --ombre-flottante: 0 2px 6px rgba(0, 0, 0, 0.3), 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

/* ——— Base ——— */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga";
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
h1, h2, h3, .marque { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
[hidden] { display: none !important; }
::selection { background: var(--accent-pale); color: var(--encre); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
* { scrollbar-color: var(--filet-fort) transparent; scrollbar-width: thin; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chiffre { font-variant-numeric: tabular-nums; }

.evitement {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-petit);
  background: var(--encre); color: var(--papier);
  font-size: 14px; font-weight: 600;
  transform: translateY(-160%); transition: transform 0.2s ease;
}
.evitement:focus { transform: none; }

/* ——— Boutons et liens ——— */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 22px;
  border: 0; border-radius: var(--r-petit);
  background: var(--encre); color: var(--papier);
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em;
  white-space: nowrap; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
}
.bouton:hover { background: var(--action-fonce); }
.bouton:active { transform: translateY(1px); }
.bouton:disabled { opacity: 0.5; cursor: wait; }
.bouton svg { width: 14px; height: 14px; }
.bouton.discret, .bouton-clair {
  background: transparent; color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--filet-fort);
}
.bouton.discret:hover, .bouton-clair:hover { background: var(--surface-2); }
.bouton-plein { width: 100%; }
.bouton-danger { background: var(--rouge); color: var(--papier); }
.bouton-danger:hover { background: var(--rouge); filter: brightness(0.92); }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600; font-size: 15px; color: var(--encre);
  text-decoration: underline; text-decoration-color: var(--filet-fort);
  text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s ease;
}
.lien-fleche:hover { text-decoration-color: var(--encre); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.pastille { font-size: 13px; font-weight: 600; color: var(--encre); }

kbd {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  display: inline-block; min-width: 22px; text-align: center;
  padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--filet-fort); border-bottom-width: 2px;
  background: var(--surface); color: var(--encre);
}

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

.entete {
  position: sticky; top: 0; z-index: 30;
  background: var(--voile);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--filet);
  transition: transform 0.35s var(--sortie);
}
.entete .conteneur { height: var(--haut-entete); display: flex; align-items: center; gap: 24px; }
.marque { font-size: 18px; font-weight: 700; letter-spacing: -0.025em; white-space: nowrap; }
.marque .avec { color: var(--gris); font-weight: 500; }
.marque .accent { color: inherit; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav > a {
  padding: 8px 12px; font-size: 15px; font-weight: 500; color: var(--gris); white-space: nowrap;
  transition: color 0.15s ease;
}
.nav > a:hover { color: var(--encre); }
.nav > a[aria-current="page"] { color: var(--encre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
/* « Learn ▾ » : Stories, Dictations et Courses dans un panneau (au survol avec une souris, ou au clic) */
.nav-groupe { position: relative; }
.nav-apprendre { display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px 8px 12px; border: 0; background: none; color: var(--gris); font: inherit; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color .15s ease; }
.nav-apprendre svg { width: 14px; height: 14px; transition: transform .2s var(--sortie); }
.nav-apprendre:hover, .nav-groupe.ouvert .nav-apprendre { color: var(--encre); }
.nav-apprendre.courant { color: var(--encre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.nav-groupe.ouvert .nav-apprendre svg { transform: rotate(180deg); }
.menu-apprendre {
  display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; width: 300px; padding: 6px;
  border-radius: var(--r-surface); background: var(--surface); box-shadow: var(--ombre-flottante), 0 0 0 1px var(--filet);
  flex-direction: column; animation: deplier .18s var(--sortie);
}
/* (un pont invisible entre le mot et le panneau : la souris peut y descendre sans qu'il se ferme) */
.menu-apprendre::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-groupe.ouvert .menu-apprendre { display: flex; }
@media (hover: hover) and (pointer: fine) {
  .nav-groupe:hover .menu-apprendre { display: flex; }
  .nav-groupe:hover .nav-apprendre { color: var(--encre); }
  .nav-groupe:hover .nav-apprendre svg { transform: rotate(180deg); }
}
.menu-apprendre a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-petit); color: var(--encre); text-decoration: none; }
.menu-apprendre a:hover, .menu-apprendre a:focus-visible { background: var(--surface-2); outline: none; }
.menu-apprendre a b { font-size: 15px; font-weight: 650; }
.menu-apprendre a span { font-size: 13.5px; color: var(--gris); line-height: 1.35; }
.menu-apprendre a[aria-current="page"] b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.nav-compte { position: relative; display: inline-flex; white-space: nowrap; align-items: center; margin-left: 12px; padding-left: 16px; border-left: 1px solid var(--filet); min-height: 28px; }
.nav-compte:empty { min-width: 70px; }
.bouton-compte {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; max-width: 200px; padding: 0 4px;
  border: 0; background: none; color: var(--encre);
  font-size: 15px; font-weight: 600; cursor: pointer;
}
a.bouton-compte:hover, .bouton-compte:hover span { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.bouton-compte span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bouton-compte svg { width: 15px; height: 15px; flex: none; color: var(--gris); transition: transform 0.25s ease; }
.bouton-compte[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-perso {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 40;
  min-width: 230px; padding: 6px;
  border-radius: var(--r-surface); background: var(--surface);
  box-shadow: var(--ombre-flottante), 0 0 0 1px var(--filet);
  display: flex; flex-direction: column;
  animation: deplier 0.18s var(--sortie);
}
@keyframes deplier { from { opacity: 0; transform: translateY(-4px); } }
.menu-perso-nom { margin: 0 0 6px; padding: 10px 10px 12px; border-bottom: 1px solid var(--filet); font-weight: 700; font-size: 15px; display: flex; flex-direction: column; }
.menu-perso-nom small { color: var(--gris); font-weight: 400; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.menu-perso a, .menu-perso button { display: block; text-align: left; padding: 9px 10px; border-radius: var(--r-petit); border: 0; background: none; font-size: 15px; color: var(--encre); cursor: pointer; }
.menu-perso a:hover, .menu-perso button:hover { background: var(--surface-2); }
.menu-perso button { color: var(--gris); margin-top: 4px; border-top: 1px solid var(--filet); border-radius: 0 0 var(--r-petit) var(--r-petit); }

.burger { display: none; flex: none; margin-left: auto; width: 40px; height: 40px; margin-right: -8px; border: 0; background: none; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--encre); transition: transform 0.3s var(--sortie), top 0.3s var(--sortie); }
.burger span:first-of-type { top: 16px; }
.burger span:last-of-type { top: 23px; }
.menu-ouvert .burger span:first-of-type { top: 19.5px; transform: rotate(45deg); }
.menu-ouvert .burger span:last-of-type { top: 19.5px; transform: rotate(-45deg); }

.menu-mobile {
  position: fixed; inset: var(--haut-entete) 0 0; z-index: 29;
  background: var(--papier);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.menu-ouvert .menu-mobile { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.menu-ouvert, .menu-ouvert body { overflow: hidden; }
.menu-interieur { padding-top: 12px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 32px; }
.menu-liens { display: flex; flex-direction: column; }
.menu-liens a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--filet);
  font-size: 30px; font-weight: 700; letter-spacing: -0.03em;
}
.menu-liens a[aria-current="page"] span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.menu-liens svg { width: 20px; height: 20px; color: var(--gris-doux); }
.menu-titre { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--gris); }
/* Le groupe « Learn » du menu du téléphone : trois entrées, chacune avec sa ligne */
.menu-titre-apprendre { margin: 18px 0 4px; }
.menu-apprendre-mobile { display: grid; gap: 2px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--filet); }
.menu-apprendre-mobile a { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0; border: 0; font-size: inherit; letter-spacing: normal; color: var(--encre); text-decoration: none; }
.menu-liens .menu-apprendre-mobile a[aria-current="page"] span { text-decoration: none; }
.menu-apprendre-mobile a b { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.menu-apprendre-mobile a span { font-size: 14.5px; font-weight: 400; letter-spacing: 0; color: var(--gris); }
.menu-apprendre-mobile a[aria-current="page"] b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.menu-niveaux { display: flex; flex-direction: column; }
.menu-niveaux a { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--filet); font-size: 17px; }
.menu-niveaux b { font-weight: 700; }
.menu-niveaux span { color: var(--gris); font-size: 15px; }
.menu-compte { display: flex; flex-direction: column; gap: 10px; }
.menu-compte-nom { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.menu-compte-liens { display: flex; flex-direction: column; }
.menu-compte-liens a, .menu-compte-liens button { text-align: left; padding: 11px 0; border: 0; border-bottom: 1px solid var(--filet); background: none; font-size: 17px; color: var(--encre); cursor: pointer; }
.menu-compte-liens button { color: var(--gris); }
@media (prefers-reduced-motion: no-preference) {
  .menu-ouvert .menu-interieur > * { animation: monter 0.5s var(--sortie) both; animation-delay: calc(var(--i, 0) * 50ms); }
}
@keyframes monter { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 920px) and (min-width: 761px) {
  .nav > a { padding: 8px 8px; }
  .nav-compte { margin-left: 6px; padding-left: 10px; }
  .entete .nav-compte .bouton-nav { padding: 0 12px; margin-left: 6px; }
}
@media (max-width: 860px) and (min-width: 761px) {
  .nav > a { padding: 8px 6px; font-size: 14.5px; }
  .entete .nav-compte .bouton-nav { font-size: 14px; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .burger { display: block; }
  .entete-cachee .entete { transform: translateY(-100%); }
}

/* ——— Le livre : la couverture d'un épisode ———
   Une couverture blanche 2:3, l'auteur en haut, le titre en grand, la marque de la collection au pied.
   Toutes les tailles s'appuient sur la largeur de la couverture (unités cqw). */

.pochette {
  position: relative;
  container-type: inline-size;
  display: flex; flex-direction: column;
  aspect-ratio: 2 / 3;
  background: var(--surface);
  border-radius: var(--r-livre);
  box-shadow: var(--ombre-livre), inset 0 0 0 1px var(--filet);
  color: var(--encre);
  overflow: hidden;
  isolation: isolate;
}
.pochette .auteur { position: absolute; left: 11%; top: 8%; font-size: max(7px, 5.4cqw); font-weight: 600; letter-spacing: -0.01em; }
/* Une seule taille de titre pour toute la collection : les couvertures restent comparables côte à côte. */
.pochette .titre {
  position: absolute; left: 11%; right: 9%; top: 34%;
  font-size: 10cqw; font-weight: 800; line-height: 0.98; letter-spacing: -0.045em;
  hyphens: manual; overflow-wrap: break-word;
}
.pochette .serie, .pochette .maison {
  position: absolute; left: 11%; right: 9%; bottom: 8%;
  font-size: max(7px, 4.6cqw); color: var(--gris); font-weight: 500;
  display: flex; justify-content: space-between; gap: 8px;
}
.pochette .maison b { color: var(--encre); font-weight: 600; }
.pochette .etiquette { position: absolute; right: 9%; top: 8%; font-size: max(7px, 4.4cqw); font-weight: 600; color: var(--gris); }
.progression-carte { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--filet); }
.progression-carte span { display: block; height: 100%; background: var(--accent); }

/* Histoire en plusieurs parties : le numéro en petit, en haut à droite du titre */
.pochette .titre .sans-coupure { white-space: nowrap; }
.pochette .titre .partie { display: inline-block; margin-left: 0.12em; font-size: 0.5em; font-weight: 700; letter-spacing: 0; vertical-align: top; line-height: 1; transform: translateY(0.12em); opacity: 0.85; }

/* Couverture illustrée : la photo remplit le livre, le texte passe en blanc, le titre en bas */
.pochette.illustree { background: #17181c; color: #fff; }
.pochette-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
/* Tant que la photo charge (listes) : une couverture grise unie, puis la photo et son texte apparaissent ensemble. */
.pochette.fondu { background: var(--surface-2); }
.pochette.fondu > *, .pochette.fondu::after { opacity: 0; transition: opacity 0.45s var(--sortie); }
.pochette.fondu.chargee > *, .pochette.fondu.chargee::after { opacity: 1; }
/* Les photos prêtes à l'arrivée de la liste : pas de fondu (voir poserCouvertures dans shared.js). */
.pochette.fondu.sans-fondu > *, .pochette.fondu.sans-fondu::after { transition: none; }
.couvertures-en-attente { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .pochette.fondu > *, .pochette.fondu::after { transition: none; } }
.pochette.illustree::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 10, 12, 0.55) 0%, rgba(10, 10, 12, 0) 22%, rgba(10, 10, 12, 0) 48%, rgba(10, 10, 12, 0.82) 100%);
}
.pochette.illustree .titre { top: auto; bottom: 16%; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.pochette.illustree .serie, .pochette.illustree .maison, .pochette.illustree .maison b { color: rgba(255, 255, 255, 0.85); }
.pochette.illustree .auteur { color: #fff; }
.pochette.mini.illustree::after { display: none; }

/* Petites couvertures (menus, tableau de bord) : seulement le titre */
.pochette.mini { width: 40px; flex: none; box-shadow: inset 0 0 0 1px var(--filet); }
.pochette.mini .serie, .pochette.mini .auteur { display: none; }
.pochette.mini .titre { top: auto; bottom: 4%; left: 12%; right: auto; font-size: 56cqw; font-weight: 800; letter-spacing: -0.06em; white-space: nowrap; line-height: 1; }
.pochette.moyenne { width: 96px; flex: none; }
.pochette.moyenne .serie { display: none; }
.pochette.moyenne .titre { font-size: 17cqw; top: 40%; }

/* Le livre dans une liste : la couverture et sa légende */
.livre { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.livre .pochette { transition: transform 0.45s var(--sortie), box-shadow 0.45s var(--sortie); }
a.livre:hover .pochette { transform: translateY(-4px); box-shadow: var(--ombre-flottante), inset 0 0 0 1px var(--filet); }
a.livre:active .pochette { transform: translateY(-1px); }
.livre-legende { display: flex; flex-direction: column; gap: 3px; }
.livre-legende strong { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.livre-legende .reprendre { color: var(--accent); font-size: 14px; font-weight: 600; }
/* La reprise est réservée aux membres : un visiteur voit toujours le résumé, et pas de barre sur la couverture. */
.livre-legende .reprendre, .ligne-livre .en-cours, .progression-carte { display: none; }
.membre .livre-legende .reprendre, .membre .ligne-livre .en-cours, .membre .progression-carte { display: block; }
.membre .ligne-livre .si-visiteur { display: none; }
/* La reprise s'ajoute au résumé (raccourci d'une ligne) : les cartes gardent la même hauteur. */
/* Écouté jusqu'au bout (membres) : une coche verte sur la couverture, et la mention dans la légende. */
.coche-ep, .etat-ep { display: none; }
.membre .coche-ep {
  position: absolute; z-index: 2; top: -9px; right: -9px;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--papier); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16), 0 0 0 3px var(--papier);
  transition: transform 0.45s var(--sortie);
}
.membre .coche-ep svg { width: 15px; height: 15px; }
a.livre:hover .coche-ep { transform: translateY(-4px); }
.membre .etat-ep { display: block; color: var(--accent); font-size: 14px; font-weight: 600; }
.livre.exemple { cursor: default; }
.livre.exemple .pochette .titre { color: var(--gris); }

/* ——— Accueil ——— */

.une { padding-top: clamp(28px, 4.5vw, 56px); padding-bottom: clamp(56px, 8vw, 104px); }
.une-intro {
  margin: 0 0 clamp(24px, 3.4vw, 44px);
  font-size: clamp(19px, 1.9vw, 26px); line-height: 1.3; font-weight: 500; letter-spacing: -0.02em;
  color: var(--gris);
}
.une-intro strong { color: var(--encre); font-weight: 700; }
.une-grille {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

/* La couverture du dernier épisode, très grande */
.une-livre { position: relative; display: block; max-width: 440px; }
.une-livre .pochette { width: 100%; max-height: calc(100dvh - 250px); min-height: 420px; margin-inline: auto; aspect-ratio: 2 / 3; height: auto; }
.une-livre .pochette .titre { top: 28%; }
.une-livre .pochette .resume { position: absolute; left: 11%; right: 14%; top: 60%; font-size: 4.6cqw; line-height: 1.4; color: var(--gris); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) { .une-livre .pochette .resume { display: none; } }
.une-ecouter {
  position: absolute; left: 11%; bottom: 7%;
  display: inline-flex; align-items: center; gap: 12px;
  font-size: max(13px, 4.6cqw); font-weight: 600;
}
.une-ecouter i {
  width: 13cqw; height: 13cqw; min-width: 44px; min-height: 44px; border-radius: 50%;
  background: var(--encre); color: var(--papier);
  display: grid; place-items: center;
  transition: transform 0.35s var(--sortie);
}
.une-ecouter i svg { width: 34%; height: 34%; margin-left: 6%; }
.une-livre:hover .une-ecouter i { transform: scale(1.06); }
.une-livre .pochette .maison { display: none; }
.une-livre-dessous { margin-top: 16px; display: flex; justify-content: space-between; gap: 12px; color: var(--gris); font-size: 14.5px; }
.une-livre-dessous b { color: var(--encre); font-weight: 600; }

/* La collection : la liste numérotée, filtrable par niveau */
.collection-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--encre); }
.collection-tete h2 { font-size: clamp(28px, 2.8vw, 38px); letter-spacing: -0.035em; }
.onglets { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.onglets button {
  border: 0; background: none; padding: 4px 0; cursor: pointer;
  font-size: 15px; font-weight: 500; color: var(--gris);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 7px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.onglets button:hover { color: var(--encre); }
.onglets button[aria-pressed="true"] { color: var(--encre); font-weight: 600; text-decoration-color: var(--encre); }

.collection { list-style: none; margin: 0; padding: 0; }
.collection li { border-bottom: 1px solid var(--filet); }
.ligne-livre {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 64px 20px;
  align-items: baseline; gap: 16px;
  padding: 18px 0;
  transition: padding 0.3s var(--sortie);
}
.ligne-livre .rang { font-size: 14px; font-weight: 500; color: var(--gris-doux); font-variant-numeric: tabular-nums; }
.ligne-livre .titre-ligne { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ligne-livre strong { font-size: clamp(20px, 1.9vw, 25px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.ligne-livre small { color: var(--gris); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-livre .niveau-ligne { font-size: 14px; font-weight: 600; }
.ligne-livre .duree-ligne { font-size: 14px; color: var(--gris); text-align: right; font-variant-numeric: tabular-nums; }
.ligne-livre .fleche { color: var(--gris-doux); transition: transform 0.3s var(--sortie), color 0.2s; }
.ligne-livre .fleche svg { width: 16px; height: 16px; display: block; transform: translateY(2px); }
a.ligne-livre:hover .fleche { color: var(--encre); transform: translateX(4px); }
a.ligne-livre:hover strong { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.ligne-livre.exemple strong { color: var(--gris); }
.ligne-livre .en-cours { color: var(--accent); font-weight: 600; }
.collection-pied { margin-top: 20px; }
.collection-vide { padding: 28px 0; color: var(--gris); }

/* La lecture, montrée sur une vraie page */
.demonstration { padding: clamp(64px, 9vw, 128px) 0; border-top: 1px solid var(--filet); }
/* Le titre et son intro centrés, la page en vedette, puis les gestes possibles, alignés sous la page. */
.demonstration h2, .section-titre { font-size: clamp(34px, 4vw, 54px); letter-spacing: -0.04em; line-height: 1.02; }
.demonstration-tete { text-align: center; max-width: 40rem; margin: 0 auto clamp(40px, 5vw, 64px); }
.demonstration-tete p { color: var(--gris); font-size: clamp(17px, 1.4vw, 19px); margin: 20px auto 0; max-width: 52ch; }
.demonstration .page-demo, .fonctions { max-width: 960px; margin-left: auto; margin-right: auto; }
.fonctions {
  list-style: none; padding: 0; margin-top: clamp(32px, 4vw, 48px); margin-bottom: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px);
}
.fonctions li { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--filet-fort); font-size: 15.5px; line-height: 1.45; }
.fonctions b { font-weight: 600; }
.fonctions span { color: var(--gris); }
.demonstration-suite { text-align: center; margin: clamp(48px, 6vw, 80px) 0 clamp(8px, 1.5vw, 16px); }
.demonstration-suite .lien-fleche { font-size: 18px; padding-bottom: 2px; }

.page-demo {
  margin: 0;
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: clamp(28px, 4vw, 56px);
  padding: clamp(24px, 3.4vw, 44px);
  background: var(--surface);
  box-shadow: var(--ombre-livre), inset 0 0 0 1px var(--filet);
  border-radius: var(--r-livre);
}
.page-demo-texte { font-size: clamp(19px, 2vw, 26px); line-height: 1.6; font-weight: 500; letter-spacing: -0.012em; margin: 0; color: var(--gris-doux); }
.page-demo-texte .demo-phrase { transition: color 0.6s ease; }
.page-demo-texte .demo-phrase.active { color: var(--encre); }
.page-demo-texte .demo-mot { position: relative; }
.page-demo-texte .demo-mot::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.12em; height: 2px; background: var(--accent); opacity: 0; transition: opacity 1s ease-out; }
.page-demo-texte .demo-mot.dit::after { opacity: 1; transition-duration: 0.18s; }
.page-demo-texte u { text-decoration-style: dotted; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: currentColor; }
.marge-note { align-self: start; padding-left: 16px; border-left: 1px solid var(--filet); font-size: 14px; line-height: 1.45; transition: opacity 0.5s ease, transform 0.5s var(--sortie); }
.marge-note .entree { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.marge-note .nature { display: block; color: var(--gris); font-style: italic; margin-bottom: 6px; }
.marge-note .en { display: block; color: var(--gris); margin-top: 6px; }
.page-demo:not(.montre-mot) .marge-note { opacity: 0.25; }
.page-demo-pied { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--filet); font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; }
.page-demo-pied i { width: 34px; height: 34px; border-radius: 50%; background: var(--encre); color: var(--papier); display: grid; place-items: center; flex: none; }
.page-demo-pied i svg { width: 12px; height: 12px; }
.page-demo-pied .demo-barre { flex: 1; height: 2px; background: var(--filet); position: relative; }
.page-demo-pied .demo-barre span { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: var(--accent); }

/* Les niveaux, comme une table des matières. Les niveaux sans épisode sont annoncés, sans lien. */
.niveaux { padding: clamp(64px, 9vw, 128px) 0; border-top: 1px solid var(--filet); }
.niveaux-tete { margin-bottom: clamp(28px, 3.5vw, 44px); }
.niveaux-tete p { margin: 16px 0 0; color: var(--gris); max-width: 46ch; font-size: clamp(17px, 1.4vw, 19px); }
.table-niveaux { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); }
.ligne-niveau {
  display: grid; grid-template-columns: clamp(130px, 14vw, 190px) minmax(0, 1fr) auto;
  gap: clamp(16px, 2.4vw, 32px); align-items: center;
  padding: clamp(20px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--filet);
}
.table-niveaux .code { font-size: clamp(34px, 4vw, 56px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; transition: color 0.2s; }
.table-niveaux .description { display: flex; flex-direction: column; gap: 2px; }
.table-niveaux .description strong { font-size: 19px; letter-spacing: -0.015em; }
.table-niveaux .description span { color: var(--gris); }
.table-niveaux .etat { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); justify-self: end; }
.table-niveaux .nombre { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.table-niveaux .nombre svg { width: 16px; height: 16px; transition: transform 0.3s var(--sortie); }
a.ligne-niveau:hover .code { color: var(--accent); }
a.ligne-niveau:hover .nombre svg { transform: translateX(4px); }

/* À venir : en retrait, sans lien */
.bientot .code, .bientot .description strong { color: var(--gris-doux); }
.bientot .etat { font-size: 14px; font-weight: 500; color: var(--gris); white-space: nowrap; }

/* L'auteur, comme sur le rabat d'un livre */
.auteur-section { padding: clamp(80px, 11vw, 160px) 0; border-top: 1px solid var(--filet); }
.auteur-grille { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 8vw, 128px); align-items: center; }
.auteur-photo { max-width: 400px; margin: 0; }
.auteur-cadre { overflow: hidden; border-radius: var(--r-livre); }
.auteur-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.auteur-texte h2 { font-size: clamp(34px, 4vw, 54px); letter-spacing: -0.04em; margin-bottom: 28px; }
.auteur-texte p { font-size: 18.5px; line-height: 1.65; color: var(--gris); max-width: 34em; margin: 0 0 18px; }
.auteur-texte p:first-of-type { color: var(--encre); }
.auteur-texte .actions { margin-top: 40px; }
/* Tout est centré : la photo, le bonjour de Jérôme, puis le texte, les chiffres et les boutons, l'un sous l'autre. */
.auteur-grille { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: clamp(40px, 5vw, 64px); }
.auteur-photo { width: min(100%, 360px); display: flex; flex-direction: column; align-items: center; }
.auteur-photo .auteur-cadre { width: 100%; }
.auteur-photo .voix { text-align: left; max-width: 400px; }
.auteur-texte { display: flex; flex-direction: column; align-items: center; max-width: 44rem; }
.auteur-texte p { margin-left: auto; margin-right: auto; text-wrap: pretty; }
.auteur-chiffres { width: 100%; margin-left: auto; margin-right: auto; }
.auteur-chiffres div { align-items: center; }
.auteur-texte .actions { justify-content: center; }

/* Bonjour de Jérôme : un bouton lecture et la phrase, soulignée mot à mot */
.voix { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 28px; }
.voix-bouton {
  width: 44px; height: 44px; border-radius: 50%; border: 0; flex: none;
  background: var(--encre); color: var(--papier); display: grid; place-items: center; cursor: pointer;
  transition: transform 0.2s var(--sortie);
}
.voix-bouton:hover { transform: scale(1.06); }
.voix-bouton:active { transform: scale(0.96); }
.voix-bouton svg { width: 15px; height: 15px; grid-area: 1 / 1; }
.voix-bouton .voix-lecture { margin-left: 2px; }
.voix-bouton .voix-pause, .voix-bouton.joue .voix-lecture { display: none; }
.voix-bouton.joue .voix-pause { display: block; }
.voix-texte { font-size: 15.5px; line-height: 1.5; color: var(--gris); font-weight: 500; padding-top: 1px; }
.voix-mot { position: relative; transition: color 0.3s ease; }
.voix-texte.en-cours .voix-mot { color: var(--gris-doux); }
.voix-texte.en-cours .voix-mot.passe { color: var(--encre); }
.voix-mot::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.1em; height: 2px; background: var(--accent); opacity: 0; transition: opacity 1s ease-out; }
.voix-mot.dit::after { opacity: 1; transition-duration: 0.18s; }

/* Quelques chiffres, sobres */
.auteur-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 36px 0 0; padding: 28px 0 0; border-top: 1px solid var(--filet); max-width: 36em; }
.auteur-chiffres div { display: flex; flex-direction: column; gap: 4px; }
.auteur-chiffres dt { font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.auteur-chiffres dd { margin: 0; font-size: 14.5px; color: var(--gris); line-height: 1.4; }

/* L'inscription : une bande vert forêt, la même dans les deux thèmes */
.inscription {
  --vert-foret: #1f5d47;
  background: var(--vert-foret); color: #f3f8f5;
  padding: clamp(72px, 10vw, 136px) 0;
}
.inscription-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.inscription h2 { font-size: clamp(38px, 4.8vw, 68px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.98; max-width: 11em; }
.inscription-texte p { margin: 22px 0 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: rgba(243, 248, 245, 0.78); max-width: 32ch; }
.inscription .actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.inscription .bouton { background: #f3f8f5; color: #12392b; }
.inscription .bouton:hover { background: #fff; }
.lien-inscription { font-size: 15px; font-weight: 600; color: #f3f8f5; text-decoration: underline; text-decoration-color: rgba(243, 248, 245, 0.4); text-underline-offset: 5px; text-decoration-thickness: 1px; transition: text-decoration-color 0.2s; }
.lien-inscription:hover { text-decoration-color: #f3f8f5; }
.inscription :focus-visible { outline-color: #f3f8f5; }
.inscription-avantages { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(243, 248, 245, 0.28); }
.inscription-avantages li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid rgba(243, 248, 245, 0.18); font-size: 16px; line-height: 1.5; }
.inscription-avantages b { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.inscription-avantages span { color: rgba(243, 248, 245, 0.78); }
/* La bande verte sert de séparation : pas de filet au-dessus du pied de page */
body:has(main > .inscription:last-child) .pied-site { border-top: 0; }
/* En sombre, l'inverse du clair : une bande vert menthe, plus claire que la page, et un texte foncé */
:root[data-theme="dark"] .inscription { --vert-foret: #8fae9f; color: #0e241b; }
:root[data-theme="dark"] .inscription-texte p,
:root[data-theme="dark"] .inscription-avantages span { color: rgba(14, 36, 27, 0.8); }
:root[data-theme="dark"] .inscription .bouton { background: #0e241b; color: #e6f4ed; }
:root[data-theme="dark"] .inscription .bouton:hover { background: #000; }
:root[data-theme="dark"] .lien-inscription { color: #0e241b; text-decoration-color: rgba(14, 36, 27, 0.4); }
:root[data-theme="dark"] .lien-inscription:hover { text-decoration-color: #0e241b; }
:root[data-theme="dark"] .inscription :focus-visible { outline-color: #0e241b; }
:root[data-theme="dark"] .inscription-avantages { border-top-color: rgba(14, 36, 27, 0.3); }
:root[data-theme="dark"] .inscription-avantages li { border-bottom-color: rgba(14, 36, 27, 0.16); }
@media (max-width: 900px) {
  .inscription-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .inscription-avantages li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .une-intro, .une-livre, .une-collection { animation: arrivee 0.9s var(--sortie) both; }
  .une-livre { animation-name: poser; animation-delay: 0.08s; animation-duration: 1.1s; }
  .une-collection { animation-delay: 0.2s; }
}
@keyframes arrivee { from { opacity: 0; transform: translateY(12px); } }
@keyframes poser { from { opacity: 0; transform: translateY(24px) rotate(-1.2deg); } }

@media (max-width: 900px) {
  .une-grille, .auteur-grille { grid-template-columns: minmax(0, 1fr); }
  .une-livre { max-width: 360px; }
  .une-livre .pochette { max-height: none; min-height: 0; }
  .fonctions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auteur-photo { max-width: 320px; }
}
@media (max-width: 700px) {
  .page-demo { grid-template-columns: minmax(0, 1fr); }
  .marge-note { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--filet); }
}
@media (max-width: 600px) {
  .une-tete { display: grid; grid-template-columns: 54% minmax(0, 1fr); gap: 18px; align-items: end; }
  .une-livre { max-width: none; width: 100%; margin: 0; }
  .une-livre-dessous { flex-direction: column; gap: 2px; margin: 0 0 6px; }
  .une-grille { gap: 36px; }
  .une { padding-top: 22px; }
  .ligne-livre { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 12px; }
  .ligne-livre .duree-ligne { grid-column: 3; grid-row: 1; }
  .ligne-livre .niveau-ligne { grid-column: 2; grid-row: 2; font-size: 13px; }
  .ligne-livre .fleche { display: none; }
  .ligne-livre small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .demonstration-tete { text-align: left; }
  .auteur-chiffres { gap: 12px; }
  .auteur-chiffres dt { font-size: 19px; white-space: nowrap; }
  .auteur-chiffres dd { font-size: 13.5px; }
  .fonctions { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fonctions li { gap: 2px; padding: 14px 0; }
  .ligne-niveau { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .ligne-niveau .code { grid-column: 1; }
  .ligne-niveau .description { grid-column: 1 / -1; grid-row: 2; }
  .table-niveaux .etat { grid-column: 2; grid-row: 1; gap: 14px; }

}

/* ——— Page « Episodes » : la collection en rayonnage ——— */

.catalogue-tete { padding-top: clamp(36px, 6vw, 72px); padding-bottom: 28px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.catalogue-tete h1 { font-size: clamp(48px, 7vw, 96px); letter-spacing: -0.055em; line-height: 0.92; }
.catalogue-tete p { margin: 0; color: var(--gris); font-size: 16px; max-width: 40ch; }
/* En tête de la collection : le niveau en puces (un toucher filtre), puis la durée (et, quand il y a lieu, la saison et
   la progression) et le tri. */
.st-trouver { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 16px 0; border-top: 1px solid var(--encre); border-bottom: 1px solid var(--filet); }
.st-niveaux small { font-size: 12.5px; opacity: 0.75; }
.st-trouver-plus { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-left: auto; }
/* Les filtres : des listes déroulantes discrètes, le libellé en gris, le choix en gras */
.choix { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--gris); }
.choix[hidden] { display: none; }
.tri { margin-left: auto; }
.choix select {
  border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--encre);
  padding: 4px 18px 4px 0; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 5px top 55%, right 0 top 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.choix select { field-sizing: content; }
.choix select:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.compte-resultats { margin: 22px 0 0; color: var(--gris); font-size: 14.5px; }
/* Sous les filtres : le nombre d'épisodes, et pour un membre le lien vers son historique */
.resultats-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 20px; flex-wrap: wrap; }
.lien-historique { margin-top: 22px; font-size: 14.5px; font-weight: 600; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lien-historique:hover { color: var(--accent); }
.lien-souligne { font-weight: 600; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
.lien-souligne:hover { color: var(--accent); }
.anonyme .mot-acces + .resultats-ligne .compte-resultats { margin-top: 6px; }
/* Et ce qui n'est qu'aux membres dans les filtres (la progression, le lien vers l'historique) : là dès l'affichage. */
.membre #choix-ecoute[hidden] { display: flex !important; }
.membre #lien-historique[hidden] { display: inline !important; }
/* Pour les visiteurs : une seule phrase dit ce qui est ouvert et ce que débloque un compte. */
.mot-acces { display: none; }
.anonyme .mot-acces { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: start; margin: 22px 0 0; line-height: 24px; font-size: 14.5px; color: var(--gris); }
.mot-acces .cadenas-mini { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #f5c12e; color: #2b2208; margin-top: 1px; }
.mot-acces .cadenas-mini svg { width: 12px; height: 12px; }
.mot-acces button { margin-left: 2px; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.vide { padding: 48px 0 96px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.vide h2 { font-size: 32px; letter-spacing: -0.03em; }
.vide p { margin: 0 0 10px; color: var(--gris); }
@media (max-width: 600px) {
  .livre-legende strong { font-size: 15.5px; }
  .tri { margin-left: 0; }
  /* Sur téléphone : les puces, puis les menus deux par ligne (le libellé au-dessus du choix). */
  .st-trouver { flex-direction: column; align-items: stretch; gap: 14px; }
  .st-trouver-plus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px 14px; margin-left: 0; }
  .choix { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 12.5px; min-width: 0; }
  .choix select { max-width: 100%; font-size: 14.5px; text-overflow: ellipsis; }
  /* Le lien vers ses histoires écoutées : une vraie ligne à toucher, bien détachée de la liste qui suit. */
  .resultats-ligne { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 26px; }
  .membre .lien-historique { display: flex !important; }
  .lien-historique { align-items: center; justify-content: space-between; gap: 12px; margin-top: 0; padding: 14px 16px; border: 1px solid var(--filet-fort); border-radius: 12px; text-decoration: none; font-size: 15px; }
  .lien-historique::after { content: ""; flex: none; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); margin-right: 4px; }
  .lien-historique:active { background: var(--surface-2); }
}

/* ——— « How it works » : un guide, comme un petit manuel ——— */

.guide-tete { padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(40px, 6vw, 72px); }
.guide-tete h1 { font-size: clamp(44px, 6.4vw, 88px); letter-spacing: -0.05em; line-height: 0.96; max-width: 14ch; }
.guide-tete p { margin: 24px 0 0; color: var(--gris); font-size: clamp(18px, 1.6vw, 21px); max-width: 44ch; }
.guide { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-bottom: clamp(64px, 9vw, 120px); }
.sommaire { position: sticky; top: calc(var(--haut-entete) + 28px); display: flex; flex-direction: column; border-top: 1px solid var(--encre); }
.sommaire a { padding: 10px 0; border-bottom: 1px solid var(--filet); font-size: 15px; color: var(--gris); display: flex; gap: 12px; transition: color 0.15s; }
.sommaire a span { color: var(--gris-doux); font-variant-numeric: tabular-nums; min-width: 18px; }
.sommaire a:hover, .sommaire a.courant { color: var(--encre); }
.sommaire a.courant { font-weight: 600; }
.chapitre { padding: 0 0 clamp(56px, 7vw, 88px); scroll-margin-top: calc(var(--haut-entete) + 24px); }
.chapitre + .chapitre { padding-top: clamp(56px, 7vw, 88px); border-top: 1px solid var(--filet); }
.chapitre h2 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.035em; margin-bottom: 18px; max-width: 20ch; }
.chapitre > p, .chapitre-texte > p { font-size: 18px; line-height: 1.65; color: var(--gris); max-width: 38em; margin: 0 0 14px; }
.chapitre > p b, .chapitre-texte > p b { color: var(--encre); font-weight: 600; }
.chapitre a:not(.bouton) { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.definitions { margin: 24px 0 0; border-top: 1px solid var(--filet); max-width: 44em; }
.definitions div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--filet); }
.definitions dt { font-weight: 600; }
.definitions dd { margin: 0; color: var(--gris); }
.definitions kbd { margin-right: 4px; }
.exemple-page {
  margin: 28px 0 0; max-width: 44em;
  padding: 24px 28px; background: var(--surface);
  box-shadow: var(--ombre-livre), inset 0 0 0 1px var(--filet);
  border-radius: var(--r-livre);
  font-size: 20px; line-height: 1.6; font-weight: 500; letter-spacing: -0.01em; color: var(--gris-doux);
}
.exemple-page .active { color: var(--encre); }
.exemple-page .dit { box-shadow: inset 0 -2px 0 var(--accent); }
.exemple-page .trainee { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 40%, transparent); }
.exemple-page .lex { color: var(--encre); text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.exemple-page .sauve { background: var(--accent-pale); color: var(--encre); padding: 0 3px; border-radius: 3px; }
.exemple-page small { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filet); font-size: 15px; font-weight: 400; color: var(--gris); letter-spacing: 0; }
.methode { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: methode; max-width: 44em; border-top: 1px solid var(--filet); }
.methode li { counter-increment: methode; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--filet); }
.methode li::before { content: counter(methode); font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.methode h3 { font-size: 19px; margin-bottom: 4px; letter-spacing: -0.015em; }
.methode p { margin: 0; color: var(--gris); }
.faq { margin-top: 8px; border-top: 1px solid var(--filet); max-width: 48em; }
.faq-item { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--filet); }
.faq-item h3 { font-size: 17.5px; letter-spacing: -0.01em; line-height: 1.35; }
.faq-item p { margin: 0 0 10px; color: var(--gris); line-height: 1.6; }
.faq-item p:last-child { margin-bottom: 0; }
.faq-item a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.guide-fin { padding: clamp(48px, 7vw, 88px) 0 0; border-top: 1px solid var(--encre); }
.guide-fin h2 { font-size: clamp(48px, 7vw, 96px); letter-spacing: -0.055em; line-height: 0.95; margin-bottom: 14px; }
.guide-fin p { color: var(--gris); font-size: 18px; margin: 0 0 28px; }
@media (max-width: 900px) {
  .guide { grid-template-columns: minmax(0, 1fr); }
  .sommaire { position: static; flex-direction: row; flex-wrap: wrap; gap: 0 18px; border-top: 0; }
  .sommaire a { border: 0; padding: 4px 0; }
  .sommaire a span { display: none; }
}
@media (max-width: 600px) {
  .definitions div, .faq-item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .exemple-page { padding: 18px; font-size: 18px; }
}

/* ——— Page 404 et texte légal ——— */

.introuvable { padding-top: clamp(64px, 12vw, 160px); padding-bottom: clamp(80px, 12vw, 160px); }
.introuvable .code-erreur { display: block; font-size: clamp(96px, 16vw, 200px); font-weight: 800; letter-spacing: -0.07em; line-height: 0.85; color: var(--filet-fort); margin-bottom: 24px; }
.introuvable h1 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.045em; max-width: 16ch; margin-bottom: 14px; }
.introuvable p { color: var(--gris); font-size: 18px; margin: 0 0 32px; }

.texte-legal { max-width: 760px; padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(64px, 9vw, 120px); }
.texte-legal h1 { font-size: clamp(48px, 7vw, 88px); letter-spacing: -0.055em; line-height: 0.95; margin: 0 0 24px; }
.texte-legal .chapo { font-size: 21px; line-height: 1.5; margin: 0 0 48px; padding-bottom: 32px; border-bottom: 1px solid var(--encre); }
.texte-legal h2 { font-size: 24px; letter-spacing: -0.02em; margin: 40px 0 10px; }
.texte-legal p, .texte-legal li { font-size: 17px; line-height: 1.7; color: var(--gris); }
/* Le formulaire type de rétractation (annexe des CGV) : un cadre, comme une feuille à remplir */
.texte-legal .legal-formulaire { margin: 12px 0 28px; padding: 18px 22px; border: 1px solid var(--filet); border-radius: 12px; background: var(--surface, transparent); }
.texte-legal .legal-formulaire p { margin: 0 0 10px; }
.texte-legal .legal-formulaire p:last-child { margin-bottom: 0; }
.texte-legal ul { padding-left: 20px; }
.texte-legal a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.legal-maj { font-size: 14px !important; margin-top: 56px; }

/* ——— Pied de page ——— */

.pied-site { border-top: 1px solid var(--encre); padding: clamp(48px, 6vw, 72px) 0 32px; background: var(--papier); }
.pied-haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); }
.pied-marque { font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.pied-marque .avec { color: var(--gris); font-weight: 500; }
.pied-presentation p { color: var(--gris); margin: 14px 0 24px; max-width: 34ch; }
.pied-colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pied-colonnes h2 { font-size: 14px; font-weight: 600; color: var(--gris); letter-spacing: 0; margin-bottom: 12px; }
.pied-colonnes a { display: block; padding: 5px 0; font-size: 15.5px; }
.pied-colonnes a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pied-bas { margin-top: clamp(40px, 6vw, 64px); padding-top: 20px; border-top: 1px solid var(--filet); display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; font-size: 14px; color: var(--gris); }
.pied-bas a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pied-bas a:hover { color: var(--encre); }
.theme { display: inline-flex; gap: 16px; }
.theme button { border: 0; background: none; padding: 2px 0; font-size: 14px; color: var(--gris); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; }
.theme button:hover { color: var(--encre); }
.theme button[aria-checked="true"] { color: var(--encre); font-weight: 600; text-decoration-color: var(--encre); }
.haut-de-page { border: 0; background: none; font-size: 14px; color: var(--gris); cursor: pointer; padding: 2px 0; }
.haut-de-page:hover { color: var(--encre); }
@media (max-width: 900px) {
  .pied-haut { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .pied-colonnes { grid-template-columns: 1fr 1fr; }
}

/* ——— Fenêtres (invitation à créer un compte, raccourcis…) ——— */

.fenetre {
  width: min(440px, calc(100vw - 32px));
  border: 0; border-radius: var(--r-surface);
  padding: 32px 28px 24px;
  background: var(--surface); color: var(--encre);
  box-shadow: var(--ombre-flottante), 0 0 0 1px var(--filet);
}
.fenetre::backdrop { background: rgba(23, 24, 28, 0.28); }
.fenetre[open] { animation: fenetre-entree 0.35s var(--sortie); }
@keyframes fenetre-entree { from { opacity: 0; transform: translateY(10px); } }
.fenetre h2 { font-size: 28px; letter-spacing: -0.03em; margin: 0 0 10px; padding-right: 36px; }
.fin-fermer { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: var(--gris); display: grid; place-items: center; cursor: pointer; }
.fin-fermer:hover { background: var(--surface-2); color: var(--encre); }
.fin-fermer svg { width: 16px; height: 16px; }
.invitation-raison { color: var(--gris); margin: 0 0 18px; }
.invitation-liste { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--filet); }
.invitation-liste li { padding: 10px 0; border-bottom: 1px solid var(--filet); font-size: 15.5px; }
.invitation-actions { display: flex; flex-direction: column; gap: 8px; }
/* Fenêtre « Keep what you listened to? » : les histoires écoutées en visiteur, avant la connexion */
.reprise-liste { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--filet); }
.reprise-liste li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--filet); font-size: 15.5px; }
.reprise-liste span { color: var(--gris); font-size: 14px; white-space: nowrap; }

/* ——— Formulaires de compte ——— */

.acces {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(32px, 7vw, 120px); align-items: start;
  padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(56px, 8vw, 112px);
}
.acces-avantages h1 { font-size: clamp(40px, 5.4vw, 72px); letter-spacing: -0.05em; line-height: 0.98; margin: 0 0 20px; }
.acces-avantages > p { color: var(--gris); font-size: 18px; line-height: 1.55; margin: 0 0 32px; max-width: 32em; }
.acces-avantages ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); max-width: 32em; }
.acces-avantages li { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.acces-avantages li strong { font-size: 15.5px; }
.acces-avantages li span { color: var(--gris); font-size: 15px; }
.acces-carte { padding-top: 4px; }
.acces-forme { display: flex; flex-direction: column; gap: 18px; }
.acces-forme h2, .acces-message h2 { font-size: 30px; letter-spacing: -0.035em; margin: 0 0 2px; }
.acces-intro { margin: -8px 0 0; color: var(--gris); }
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ label { font-size: 14px; font-weight: 600; }
.champ-tete { display: flex; justify-content: space-between; align-items: baseline; }
.champ-tete a { font-size: 13.5px; color: var(--gris); text-decoration: underline; text-underline-offset: 3px; }
.champ input {
  height: 48px; width: 100%; padding: 0 14px;
  border-radius: var(--r-petit); border: 1px solid var(--filet-fort);
  background: var(--surface); color: var(--encre);
  font: inherit; font-size: 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.champ input:hover { border-color: var(--gris-doux); }
.champ input:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px var(--surface-2); }
.champ input[aria-invalid="true"] { border-color: var(--rouge); }
.mdp { position: relative; }
.mdp input { padding-right: 72px; }
.voir-mdp { position: absolute; right: 6px; top: 7px; height: 34px; padding: 0 10px; border: 0; border-radius: 4px; background: none; color: var(--gris); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.voir-mdp:hover { color: var(--encre); }
.aide { margin: 0; font-size: 13.5px; color: var(--gris); }
.aide a, .aide-centre a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.aide-centre { text-align: center; }
.erreur { margin: 0; color: var(--rouge); font-size: 14.5px; font-weight: 500; }
.succes { margin: 0; color: var(--accent); font-size: 14.5px; font-weight: 600; }
.acces-bas { margin: 4px 0 0; padding-top: 18px; border-top: 1px solid var(--filet); font-size: 14.5px; color: var(--gris); }
.acces-bas a { color: var(--encre); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.acces-message { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.acces-message h2:focus { outline: none; }
.acces-icone { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--filet-fort); color: var(--accent); display: grid; place-items: center; }
.acces-icone svg { width: 22px; height: 22px; }
.acces-message-texte { color: var(--gris); margin: 0 0 8px; max-width: 30em; }
.acces-message-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
@media (max-width: 900px) {
  .acces { grid-template-columns: minmax(0, 1fr); }
  .acces-carte { order: -1; }
  .acces-avantages h1 { font-size: 34px; }
}

/* ——— Espace personnel ——— */

.espace-cadre { display: block; }
.espace:not(html) { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(64px, 9vw, 112px); min-height: 60vh; }
.espace-chargement { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
/* Les lignes d'attente n'apparaissent que si le chargement dure (plus de 0,3 s) : sinon, elles clignoteraient un
   instant juste avant le contenu. */
.espace-chargement i { display: block; height: 20px; border-radius: 3px; background: var(--surface-2); animation: attente-tardive 0.25s ease 0.3s both, respire 1.4s ease-in-out 0.55s infinite; }
.espace-chargement i:first-child { height: 52px; width: 55%; }
@keyframes respire { 50% { opacity: 0.45; } }
@keyframes attente-tardive { from { opacity: 0; } }

/* Les onglets de l'espace membre, sous la barre du site : toujours un chemin vers l'accueil */
.onglets-membre {
  position: sticky; top: var(--haut-entete); z-index: 29;
  background: var(--voile);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--filet);
  transition: transform 0.35s var(--sortie);
}
/* Sur petit écran, la barre du site s'efface en descendant : les onglets remontent tout en haut. */
.entete-cachee .onglets-membre { transform: translateY(calc(-1 * var(--haut-entete))); }
.onglets-membre .conteneur { display: flex; gap: clamp(20px, 3vw, 32px); overflow-x: auto; scrollbar-width: none; }
.onglets-membre .conteneur::-webkit-scrollbar { display: none; }
.onglets-membre a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 14px 0; font-size: 15px; font-weight: 500; color: var(--gris); transition: color 0.15s; }
.onglets-membre a:hover { color: var(--encre); }
.onglets-membre a[aria-current="page"] { color: var(--encre); font-weight: 600; box-shadow: inset 0 -2px 0 var(--encre); }
.onglets-membre svg { display: none; }
.onglets-membre.hors-espace { display: none; }
/* Téléphone : une barre d'onglets fixe en bas de l'écran, comme dans une application */
@media (max-width: 760px) {
  .onglets-membre, .onglets-membre.hors-espace {
    display: block; position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 40;
    transform: none !important; border-bottom: 0; border-top: 1px solid var(--filet);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .onglets-membre .conteneur { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0; overflow: visible; }
  .onglets-membre a { position: relative; flex-direction: column; justify-content: center; gap: 3px; padding: 9px 2px 8px; font-size: 11.5px; text-align: center; }
  .onglets-membre a[aria-current="page"] { box-shadow: none; color: var(--accent); }
  .onglets-membre svg { display: block; width: 23px; height: 23px; }
  .onglets-membre .pastille-compte { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; }
  .avec-onglets { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .menu-ouvert .onglets-membre { display: none; }
  .avec-onglets .annonce { bottom: calc(78px + env(safe-area-inset-bottom)); }
}
.pastille-compte { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--papier); font-size: 12px; font-weight: 700; font-style: normal; display: inline-grid; place-items: center; }

.espace-invitation { max-width: 640px; }
.espace-invitation h1, .espace-tete h1 { font-size: clamp(36px, 4.6vw, 64px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin: 0 0 14px; }
.espace-invitation p { font-size: 19px; color: var(--gris); line-height: 1.55; margin: 0 0 28px; }
.espace-tete { margin-bottom: clamp(40px, 5vw, 64px); }
.espace-tete p { margin: 0; color: var(--gris); font-size: 17px; }
.espace-tete-ligne { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.espace-tete-ligne h1 { margin-bottom: 8px; }
.espace-note { margin: 0; color: var(--gris); }

.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--encre); border-bottom: 1px solid var(--filet); margin-bottom: 40px; }
.chiffres div { padding: 22px 0; display: flex; flex-direction: column; gap: 4px; }
.chiffres div + div { padding-left: 24px; border-left: 1px solid var(--filet); }
.chiffres strong { font-size: clamp(40px, 4.6vw, 60px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.chiffres span { color: var(--gris); font-size: 14.5px; }

.tableau { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 clamp(28px, 4vw, 56px); }
.tuile { display: flex; flex-direction: column; gap: 12px; padding: 24px 0 28px; border-top: 1px solid var(--filet); }
.tuile p { margin: 0; color: var(--gris); }
.tuile-titre { font-size: 14px; font-weight: 600; color: var(--gris); }
.tuile-reprise { grid-row: span 2; }
.tuile-scores { grid-column: 1 / -1; }
.tuile-reprise .bouton, .tuile .bouton { align-self: flex-start; }
.tuile-reprise-corps { display: flex; align-items: center; gap: 22px; }
.tuile-reprise-corps > span:last-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tuile-reprise-corps strong { font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.04em; line-height: 1.02; }
.tuile-reprise-corps small { color: var(--gris); font-size: 14.5px; }
.tuile-suggestion strong { font-size: 22px !important; letter-spacing: -0.025em; }
.tuile-nombre { font-size: 64px; font-weight: 800; letter-spacing: -0.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.tuile-mots:not(.calme) .tuile-nombre { color: var(--accent); }
.tuile-mots > span:not(.tuile-titre):not(.lien-fleche) { color: var(--gris); margin-top: -4px; }
.tuile-scores ul { list-style: none; margin: 0; padding: 0; }
.tuile-scores li { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--filet); }
.tuile-scores li small { color: var(--gris); font-size: 13.5px; }
.tuile-scores li strong { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.barre-fine { height: 2px; background: var(--filet); overflow: hidden; margin-top: 8px; }
.barre-fine span { display: block; height: 100%; background: var(--accent); }
.barre-fine.courte { width: 120px; margin-top: 0; flex: none; }

.espace-bloc { margin-bottom: clamp(56px, 7vw, 88px); }
.espace-bloc h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.035em; margin: 0 0 4px; padding-bottom: 16px; border-bottom: 1px solid var(--encre); }
.reprises { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 32px; }
.reprise-carte { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.reprise-carte-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reprise-carte-texte strong { font-size: 17px; }
.reprise-carte-texte small { color: var(--gris); font-size: 13.5px; }
.reprise-carte-action { font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.termines { list-style: none; margin: 0; padding: 0; }
.termines li { border-bottom: 1px solid var(--filet); }
.termine { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding: 20px 0; }
.termine-texte a:hover strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.termine-actions { grid-column: 1 / -1; display: flex; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.termine-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.termine-texte strong { font-size: 19px; letter-spacing: -0.02em; }
.termine-texte small { color: var(--gris); font-size: 15px; margin-top: 2px; }
.termine-score { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

.vide-doux { padding: 24px 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vide-doux p { margin: 0; color: var(--gris); }
.vide-doux.grand { flex-direction: column; align-items: flex-start; padding: clamp(32px, 6vw, 56px) 0; border: 0; max-width: 560px; }
.vide-doux.grand h2 { font-size: 34px; letter-spacing: -0.035em; margin: 0; }

/* Mes mots : vue « réviser » ou « liste » */
.segments { display: inline-flex; gap: 18px; }
.segments button { border: 0; background: none; padding: 4px 0; font-size: 16.5px; font-weight: 500; color: var(--gris); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
.segments button:hover { color: var(--encre); }
.segments button[aria-pressed="true"], .segments button[aria-selected="true"] { color: var(--encre); font-weight: 600; text-decoration-color: var(--encre); }

.revision { max-width: 640px; }
.revision-tete { display: flex; justify-content: space-between; align-items: center; color: var(--gris); font-size: 14px; font-weight: 600; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
/* La progression : une seule barre fine, et le compte à droite */
.revision-tete { gap: 16px; }
.revision-barre { flex: 1; height: 3px; border-radius: 3px; background: var(--filet); overflow: hidden; }
.revision-barre i { display: block; height: 100%; background: var(--accent); transition: width .4s var(--sortie); }
.carte-mot {
  padding: clamp(28px, 5vw, 52px); text-align: left;
  background: var(--surface); border-radius: var(--r-livre);
  box-shadow: var(--ombre-livre), inset 0 0 0 1px var(--filet);
  animation: carte-entree 0.45s var(--sortie);
}
@keyframes carte-entree { from { opacity: 0; transform: translateY(10px); } }
.carte-mot:focus { outline: none; }
.carte-recto small { font-style: italic; color: var(--gris); }
.carte-recto h2 { font-size: clamp(40px, 6vw, 64px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin: 6px 0 22px; }
.carte-extrait { font-size: 19px; line-height: 1.6; color: var(--gris); margin: 0; max-width: 34em; }
.carte-extrait mark { background: var(--accent-pale); color: var(--encre); padding: 0 3px; border-radius: 3px; }
.carte-source { display: block; margin-top: 14px; font-size: 13.5px; color: var(--gris); }
/* Écouter le mot ou la phrase, dits par Jérôme */
.carte-ecoute { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bouton-ecoute {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px;
  border: 0; border-radius: 19px; background: var(--surface-2); color: var(--encre);
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.bouton-ecoute svg { width: 18px; height: 18px; }
.bouton-ecoute:hover { background: var(--filet); }
.bouton-ecoute.joue { background: var(--accent); color: var(--papier); }
.carte-verso { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--filet); animation: arrivee 0.35s var(--sortie); }
.carte-def { font-size: 20px; line-height: 1.5; margin: 0 0 8px; }
.carte-en { color: var(--gris); margin: 0; }
.carte-en b { font-size: 12px; font-weight: 700; margin-right: 8px; color: var(--encre); }
.carte-dico { display: inline-block; margin-top: 14px; font-size: 14.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.revision-actions { display: flex; gap: 12px; margin-top: 22px; }
.revision-actions .bouton { min-width: 150px; }
.revision-aide { color: var(--gris); font-size: 13px; margin-top: 18px; }
/* Sur écran tactile : pas d'aide clavier, et des boutons à la taille du pouce */
@media (hover: none) and (pointer: coarse) { .revision-aide { display: none; } }
@media (max-width: 600px) {
  .revision-actions .bouton { flex: 1; min-width: 0; height: 56px; font-size: 17px; }
}
.revision-tout { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--filet); }
button.lien-fleche { border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }
.compte-onglet { color: var(--gris); font-weight: 400; }

.mots-groupe { margin-bottom: 40px; }
.mots-groupe h2 { display: flex; align-items: baseline; gap: 12px; font-size: 26px; letter-spacing: -0.03em; margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--encre); }
.mots-groupe h2 span { font-size: 14px; font-weight: 500; color: var(--gris); letter-spacing: 0; }
.mots-groupe ul { list-style: none; margin: 0; padding: 0; }
.mots-groupe li { border-bottom: 1px solid var(--filet); }
.mot-rangee { display: flex; align-items: center; gap: 10px; }
.mot-ligne { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 13px 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.mot-ligne:hover strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mot-detail { padding: 2px 0 18px; animation: arrivee 0.3s var(--sortie); }
.mot-detail .carte-extrait { font-size: 16.5px; }
.mot-detail .carte-ecoute { align-items: center; margin-top: 14px; }
.mot-def { margin: 8px 0 0; font-size: 15.5px; }
.mots-groupe li.ouvert .mot-texte strong { color: var(--accent); }
.mots-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-bottom: 14px; }
.recherche { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--surface); }
.recherche:focus-within { border-color: var(--encre); box-shadow: 0 0 0 3px var(--surface-2); }
.recherche svg { width: 18px; height: 18px; color: var(--gris); flex: none; }
.recherche input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--encre); outline: none; }
.tri-mots { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--gris); }
.tri-mots select { font: inherit; font-weight: 600; color: var(--encre); border: 0; background: none; cursor: pointer; padding: 6px 0; }
/* Quand le mot revient en révision ; en vert s'il est à réviser maintenant */
.mot-quand { flex: none; margin-left: auto; font-size: 13.5px; color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mot-quand.du { color: var(--accent); font-weight: 600; }
.mots-legende { display: flex; align-items: center; gap: 10px; margin: 0 0 32px; color: var(--gris); font-size: 13.5px; }
.mots-aucun { padding: 24px 0; }
.mot-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mot-texte strong { font-size: 17px; }
.mot-texte small { color: var(--gris); font-size: 14px; }
.force { display: flex; gap: 2px; }
.force i { width: 4px; height: 12px; background: var(--filet); }
.force i.plein { background: var(--accent); }
.retirer { border: 0; background: none; color: var(--gris); font-size: 13.5px; cursor: pointer; padding: 6px 4px; }
.retirer:hover { color: var(--rouge); }

.compte-page { max-width: 680px; }
.compte-bloc { display: flex; flex-direction: column; gap: 16px; padding: 28px 0; border-top: 1px solid var(--filet); }
.compte-bloc:first-of-type { border-top-color: var(--encre); }
.compte-bloc h2 { font-size: 22px; letter-spacing: -0.025em; margin: 0; }
.compte-bloc .bouton { align-self: flex-start; }
.compte-texte { margin: 0; color: var(--gris); }
.compte-bloc.danger h2 { color: var(--rouge); }
.compte-texte b { color: var(--encre); font-weight: 600; }

/* Réglages : choix en segments et interrupteurs */
.reglage { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.reglage legend { padding: 0; margin-bottom: 9px; font-size: 14px; font-weight: 600; }
.choix-segments { display: inline-flex; align-self: flex-start; padding: 3px; gap: 2px; border-radius: var(--r-petit); background: var(--surface-2); }
.choix-segments label { position: relative; cursor: pointer; }
.choix-segments input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choix-segments span { display: block; padding: 7px 16px; border-radius: 4px; font-size: 14.5px; font-weight: 500; color: var(--gris); transition: background 0.2s, color 0.2s; }
.choix-segments input:checked + span { background: var(--surface); color: var(--encre); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.choix-segments input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.interrupteur { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.interrupteur input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 2px 0 0; width: 42px; height: 24px; border-radius: 12px;
  background: var(--filet-fort); position: relative; cursor: pointer; transition: background 0.2s;
}
.interrupteur input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.25s var(--sortie); }
.interrupteur input:checked { background: var(--accent); }
.interrupteur input:checked::after { transform: translateX(18px); }
.interrupteur b { display: block; font-weight: 600; font-size: 16px; }
.interrupteur small { display: block; margin-top: 2px; color: var(--gris); font-size: 14.5px; line-height: 1.45; }

@media (max-width: 900px) {
  .tableau { grid-template-columns: minmax(0, 1fr); }
  .tuile-reprise { grid-row: auto; }
}
@media (max-width: 600px) {
  .chiffres div { padding: 16px 0; }
  .chiffres div + div { padding-left: 12px; }
  .chiffres strong { font-size: 34px; }
  .chiffres span { font-size: 12.5px; }
  .reprises { grid-template-columns: minmax(0, 1fr); }
  .revision-actions .bouton { min-width: 0; flex: 1; }
  .pochette.moyenne { width: 72px; }
  .barre-fine.courte { width: 64px; }
}
.gris { color: var(--gris); font-weight: 400; }

/* ——— Accueil : l'ouverture.
   Ordinateur : le texte à gauche ; à droite, la vidéo du lecteur, pivotée en perspective, qui s'efface vers le milieu.
   Tablette et téléphone : la vidéo (ou son image fixe) remplit toute la section, le texte est centré par-dessus. ——— */

.ouverture {
  --h-ouverture: min(calc(100dvh - var(--haut-entete)), 780px);
  --marge-texte: calc(max(0px, (100vw - var(--largeur)) / 2) + var(--gouttiere));
  /* Le titre tient en deux lignes (« Learn the French » / « people really speak. ») : la colonne de texte suit sa taille
     (la seconde ligne fait un peu plus de 9 fois la taille de la police), et la vidéo commence après elle. */
  --titre-accueil: clamp(48px, 5.6vw, 84px);
  /* La colonne du texte suit la largeur du titre : la vidéo commence juste après (et prend tout le reste) */
  --colonne-texte: max(30rem, calc(var(--titre-accueil) * 9.1));
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: var(--h-ouverture);
  display: flex; align-items: center;
  border-bottom: 1px solid var(--filet);
}
.ouverture-grille { position: relative; z-index: 2; }
.ouverture-texte { max-width: var(--colonne-texte); padding: clamp(40px, 5vw, 72px) 0; }
/* En français et en espagnol, sur ordinateur : « vraiment. », « de verdad. » seul sur une troisième ligne ; le titre,
   plus étroit, laisse plus de place à la vidéo */
@media (min-width: 901px) {
  html:is([data-langue="fr"], [data-langue="es"]) .ouverture { --colonne-texte: max(30rem, calc(var(--titre-accueil) * 8.6)); }
  html[data-langue="fr"] .ouverture-texte h1 > span:last-child { white-space: normal; max-width: 8.4em; }
  html[data-langue="es"] .ouverture-texte h1 > span:last-child { white-space: normal; max-width: 8.8em; }
}
.ouverture-texte h1 { font-size: var(--titre-accueil); font-weight: 800; letter-spacing: -0.055em; line-height: 0.96; margin-bottom: 24px; }
.ouverture-texte h1 > span { display: block; white-space: nowrap; }
.ouverture-texte p { font-size: clamp(17px, 1.4vw, 20px); color: var(--gris); line-height: 1.55; margin: 0 0 32px; max-width: 34ch; }

.ouverture-scene {
  position: absolute; z-index: 1;
  /* La vidéo commence après la colonne de texte, et elle est toujours assez large (1600 × 950)
     pour couvrir toute la hauteur de l'ouverture : quand la fenêtre se resserre, elle déborde à droite. */
  top: 50%; left: max(40%, calc(var(--marge-texte) + var(--colonne-texte) + 24px));
  /* Assez large pour aller jusqu'au bord droit, et à peu près la hauteur de l'ouverture (la vidéo fait 1600 × 950). */
  width: max(calc(var(--h-ouverture) * 1.65), calc(100vw - var(--marge-texte) - var(--colonne-texte) - 24px));
  transform: translateY(-50%);
  perspective: 1600px; perspective-origin: 30% 50%;
  pointer-events: none;
  /* Le fondu : la vidéo naît du fond de la page, sur une distance fixe par rapport à l'écran */
  -webkit-mask-image: linear-gradient(to right, transparent 2vw, #000 14vw, #000 100%);
          mask-image: linear-gradient(to right, transparent 2vw, #000 14vw, #000 100%);
}
.ouverture-ecran {
  transform-origin: 0% 50%;
  transform: rotateY(-20deg) rotateX(6deg) rotateZ(-1.5deg);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--filet-fort), 0 50px 120px -30px rgba(0, 0, 0, 0.55), 0 20px 50px -20px rgba(0, 0, 0, 0.35);
}
.ouverture-video { display: block; width: 100%; height: auto; }
.ouverture-image { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ouverture-ecran { animation: pivoter 1.6s var(--sortie) both; }
  .ouverture-texte > * { animation: arrivee 0.9s var(--sortie) both; }
  .ouverture-texte > :nth-child(2) { animation-delay: 0.08s; }
  .ouverture-texte > :nth-child(3) { animation-delay: 0.16s; }
}
@keyframes pivoter { from { opacity: 0; transform: rotateY(-38deg) rotateX(10deg) rotateZ(-3deg) translateX(60px); } }
@keyframes voile-video { from { opacity: 0; transform: translate(-50%, -50%) rotateY(-28deg) rotateX(10deg) rotateZ(-3deg); } }
.ouverture-texte { will-change: transform; }

/* Tablette et téléphone : la vidéo à plat, de bord à bord ; un voile clair au centre, le texte centré. */
@media (max-width: 900px) {
  .ouverture-grille { display: flex; justify-content: center; }
  .ouverture-texte { max-width: 36rem; padding: 56px 0 64px; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .ouverture { --titre-accueil: clamp(44px, 8vw, 64px); }
  .ouverture-texte p { max-width: 36ch; text-wrap: pretty; }
  .ouverture-texte .actions { justify-content: center; }
  /* L'écran garde sa perspective, mais il est plus haut que la section (124 %) : il la couvre de haut en bas. */
  .ouverture-scene {
    inset: 0; top: 0; left: 0; width: auto; transform: none;
    perspective: 1400px; perspective-origin: 50% 50%;
    -webkit-mask-image: none; mask-image: none;
  }
  .ouverture-ecran {
    position: absolute; left: 50%; top: 50%; height: 124%; aspect-ratio: 1600 / 950; width: auto;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%) rotateY(-14deg) rotateX(6deg) rotateZ(-2deg);
    box-shadow: 0 0 0 1px var(--filet-fort);
  }
  .ouverture-video, .ouverture-image { width: 100%; height: 100%; object-fit: cover; }
  .ouverture-scene::after {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 62% 46% at 50% 50%, color-mix(in srgb, var(--papier) 95%, transparent) 0%, color-mix(in srgb, var(--papier) 88%, transparent) 60%, color-mix(in srgb, var(--papier) 30%, transparent) 100%),
      color-mix(in srgb, var(--papier) 45%, transparent);
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .ouverture-ecran { animation: voile-video 1.4s var(--sortie) both; }
}

/* Téléphone : pas de vidéo, son image fixe ; très agrandie, elle est atténuée et un peu floutée pour que le titre reste net. */
@media (max-width: 600px) {
  .ouverture { min-height: min(calc(100dvh - var(--haut-entete)), 640px); }
  .ouverture-texte { padding: 48px 0 56px; }
  /* Sur téléphone aussi, deux lignes : la taille suit la largeur de l'écran (la seconde ligne y tient juste). */
  /* Sur téléphone, de l'air : un titre qui respire (interlettrage et interlignage plus ouverts, il passe à la ligne
     librement), le texte plus espacé, les boutons pleine largeur, et un fond blanc net, sans l'image du lecteur. */
  /* L'ouverture remplit l'écran sous la barre (svh : la hauteur visible avec les barres de Safari), le texte au milieu. */
  .ouverture { --titre-accueil: min(40px, calc((100vw - 2 * var(--gouttiere)) / 8.6)); min-height: calc(100svh - var(--haut-entete)); }
  .ouverture-scene { display: none; }
  .ouverture-texte { padding: 44px 0 52px; }
  .ouverture-texte h1 { letter-spacing: -0.035em; line-height: 1.06; margin-bottom: 22px; text-wrap: balance; }
  .ouverture-texte h1 > span { display: inline; white-space: normal; }
  .ouverture-texte .ouverture-sur { margin-bottom: 24px; }
  .ouverture-texte p { font-size: 17.5px; line-height: 1.6; margin-bottom: 36px; }
  .ouverture-texte .actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; gap: 12px; }
  .ouverture-texte .actions .bouton { justify-content: center; text-align: center; }
}

/* ——— Accueil : le récit en trois temps. La section reste à l'écran pendant qu'on fait défiler,
   et ses trois volets glissent de droite à gauche. Sans animation (ou sans script), ils s'empilent. ——— */

.recit { border-bottom: 1px solid var(--filet); }
.recit-volet { padding: clamp(64px, 10vw, 128px) 0; font-size: clamp(38px, 6vw, 92px); }
.recit-volet + .recit-volet { border-top: 1px solid var(--filet); }
.recit-volet h2 { font-size: 1em; font-weight: 800; letter-spacing: -0.05em; line-height: 0.98; max-width: 15em; }
.recit-volet p { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; color: var(--gris); max-width: 38ch; margin: clamp(20px, 2.4vw, 32px) 0 0; }
/* Le soulignement du mot dit, comme dans le lecteur */
.recit-volet u { text-decoration: none; position: relative; white-space: nowrap; }
.recit-volet u::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.02em; height: 0.07em; min-height: 3px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(var(--trait, 1)); transform-origin: var(--origine, left);
}
.recit-pied { display: none; }

.recit.anime { height: 370svh; border-bottom: 0; }
.recit.anime .recit-scene { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.recit.anime .recit-piste { display: flex; height: 100%; will-change: transform; }
.recit.anime .recit-volet { flex: 0 0 100%; display: flex; align-items: center; padding: 0; border: 0; }
.recit.anime .recit-pied {
  display: flex; align-items: center; justify-content: space-between;
  position: absolute; left: 0; right: 0; bottom: clamp(24px, 5vh, 48px);
}
.recit-reperes { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.recit-reperes li { width: 40px; height: 2px; background: var(--filet-fort); border-radius: 2px; overflow: hidden; }
.recit-reperes span { display: block; height: 100%; background: var(--encre); transform-origin: left; transform: scaleX(var(--plein, 0)); }
.recit-indice { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--gris); transition: opacity 0.4s; }
.recit-indice::before { content: ""; width: 1px; height: 28px; background: currentColor; animation: descendre 2s var(--sortie) infinite; }
@keyframes descendre { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.recit.loin .recit-indice { opacity: 0; }

@media (max-width: 600px) {
  .recit.anime { height: 325svh; }
  .recit-reperes li { width: 28px; }
}

/* ——— Accueil : les apparitions au défilement. Chaque élément monte doucement quand il entre à l'écran,
   les éléments d'un même groupe l'un après l'autre (--i). Seulement avec le script et sans préférence
   pour moins d'animations (classe .apparitions sur <html>). ——— */

.apparitions .rev {
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s ease, transform 1.1s var(--sortie);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.apparitions .rev.vu { opacity: 1; transform: none; }

/* La page de démonstration se pose, un peu plus loin et un peu plus petite */
.apparitions .page-demo.rev { transform: translate3d(0, 56px, 0) scale(0.97); transition-duration: 1s, 1.3s; }
.apparitions .page-demo.rev.vu { transform: none; }

/* Les niveaux : le filet du haut se trace de gauche à droite, puis les lignes arrivent une à une */
.apparitions .table-niveaux { border-top-color: transparent; position: relative; }
.apparitions .table-niveaux::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--encre);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--sortie);
}
.apparitions .table-niveaux.vu::before { transform: scaleX(1); }
.apparitions .table-niveaux > li { opacity: 0; transform: translate3d(-24px, 0, 0); transition: opacity 0.8s ease, transform 1s var(--sortie); }
.apparitions .table-niveaux.vu > li { opacity: 1; transform: none; }
.apparitions .table-niveaux.vu > li:nth-child(1) { transition-delay: 0.25s; }
.apparitions .table-niveaux.vu > li:nth-child(2) { transition-delay: 0.37s; }
.apparitions .table-niveaux.vu > li:nth-child(3) { transition-delay: 0.49s; }

/* La photo se découvre de bas en haut, l'image se pose en même temps */
.apparitions .auteur-photo.rev { opacity: 1; transform: none; }
/* Le cadre se découvre ; l'image, agrandie à l'intérieur sans déborder, se pose en même temps.
   La phrase et son bouton arrivent ensuite. */
.apparitions .auteur-photo.rev .auteur-cadre { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--sortie); }
.apparitions .auteur-photo.rev img { transform: scale(1.12); transition: transform 1.6s var(--sortie); }
.apparitions .auteur-photo.rev .voix { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 0.8s ease 0.6s, transform 1s var(--sortie) 0.6s; }
.apparitions .auteur-photo.rev.vu .auteur-cadre { clip-path: inset(0); }
.apparitions .auteur-photo.rev.vu img, .apparitions .auteur-photo.rev.vu .voix { transform: none; opacity: 1; }


/* ——— Accueil membre (« / » quand on est connecté) : une seule chose en grand, reprendre l'histoire ;
   puis ce qui est à faire aujourd'hui, les histoires pas encore écoutées et le bilan en une phrase. ——— */

.accueil .nouvelles { margin-top: clamp(72px, 9vw, 120px); }
.accueil h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.035em; }

/* Reprendre */
.accueil .bonjour { padding-top: clamp(40px, 5vw, 72px); margin: 0 0 clamp(28px, 4vw, 48px); font-size: clamp(17px, 1.5vw, 20px); color: var(--gris); }
.accueil .bonjour b { color: var(--encre); font-weight: 600; }
.accueil .reprise { display: grid; grid-template-columns: clamp(150px, 20vw, 230px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.accueil .reprise .pochette { width: 100%; box-shadow: var(--ombre-flottante), inset 0 0 0 1px var(--filet); transition: transform 0.45s var(--sortie); }
.accueil .reprise a.livre-reprise:hover .pochette { transform: translateY(-4px); }
.accueil .reprise .etiquette-reprise { font-size: 15px; color: var(--gris); margin: 0 0 10px; }
.accueil .reprise h1 { font-size: clamp(36px, 4.6vw, 64px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.accueil .reprise .meta { color: var(--gris); font-size: 16px; margin: 14px 0 0; }
.accueil .progression { margin-top: 24px; max-width: 26rem; height: 3px; background: var(--filet); border-radius: 3px; overflow: hidden; }
.accueil .progression span { display: block; height: 100%; background: var(--accent); }
.accueil .reprise .actions { margin-top: 28px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.accueil .reprise .bouton { height: 50px; padding: 0 26px; font-size: 16px; }
.accueil .reprise .bouton svg { width: 13px; height: 13px; }

/* La bande verte de la landing page (forêt en clair, sauge en sombre) : en tête de l'accueil, la semaine.
   Les onglets du dessus prennent la même couleur tant qu'ils sont posés sur la bande (classe .sur-bande). */
.accueil .bande, .onglets-membre.sur-bande {
  --bande-fond: #1f5d47; --bande-encre: #f3f8f5; --bande-doux: rgba(243, 248, 245, 0.78);
  --bande-filet: rgba(243, 248, 245, 0.18); --bande-filet-fort: rgba(243, 248, 245, 0.34);
  background: var(--bande-fond); color: var(--bande-encre);
  padding: clamp(36px, 5vw, 64px) 0 clamp(44px, 6vw, 72px);
}
:root[data-theme="dark"] .accueil .bande, :root[data-theme="dark"] .onglets-membre.sur-bande {
  --bande-fond: #8fae9f; --bande-encre: #0e241b; --bande-doux: rgba(14, 36, 27, 0.8);
  --bande-filet: rgba(14, 36, 27, 0.16); --bande-filet-fort: rgba(14, 36, 27, 0.32);
}
.accueil .accueil-reprise { margin-top: clamp(56px, 7vw, 88px); }
.onglets-membre.sur-bande { padding: 0; border-bottom-color: var(--bande-fond); }
/* Le passage du vert au blanc (et retour) se fait en fondu, pas d'un coup */
@media (prefers-reduced-motion: no-preference) {
  .onglets-membre { transition: transform 0.35s var(--sortie), background-color 0.6s var(--sortie), border-color 0.6s var(--sortie); }
  .onglets-membre a { transition: color 0.4s var(--sortie), box-shadow 0.4s var(--sortie); }
  .onglets-membre .pastille-compte { transition: background-color 0.5s var(--sortie), color 0.5s var(--sortie); }
}
.onglets-membre.sur-bande a { color: var(--bande-doux); }
.onglets-membre.sur-bande a:hover, .onglets-membre.sur-bande a[aria-current="page"] { color: var(--bande-encre); }
.onglets-membre.sur-bande a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--bande-encre); }
.onglets-membre.sur-bande .pastille-compte { background: var(--bande-encre); color: var(--bande-fond); }

/* Pour aujourd'hui : sur la page, avec les couleurs ordinaires */
.accueil .a-faire {
  --bande-encre: var(--encre); --bande-doux: var(--gris); --bande-filet: var(--filet); --bande-filet-fort: var(--encre);
  margin-top: clamp(72px, 9vw, 120px);
}
.accueil .a-faire-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.lien-bande { font-size: 15px; font-weight: 600; color: var(--bande-encre); text-decoration: underline; text-decoration-color: var(--bande-filet-fort); text-underline-offset: 5px; text-decoration-thickness: 1px; transition: text-decoration-color 0.2s; }
.lien-bande:hover { text-decoration-color: var(--bande-encre); }
.accueil .a-faire ul { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--bande-filet-fort); }
.accueil .a-faire a:not(.lien-bande) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--bande-filet); }
.accueil .a-faire strong { display: block; font-size: 19px; letter-spacing: -0.02em; }
.accueil .a-faire small { display: block; margin-top: 4px; color: var(--bande-doux); font-size: 15.5px; }
.accueil .a-faire small i { font-style: normal; color: var(--bande-encre); }
.accueil .a-faire .fleche { width: 20px; height: 20px; color: var(--bande-doux); transition: transform 0.3s var(--sortie), color 0.2s; }
.accueil .a-faire a:hover .fleche { color: var(--bande-encre); transform: translateX(4px); }
.accueil .a-faire :focus-visible { outline-color: var(--bande-encre); }

/* Pas encore écoutées */
.accueil .nouvelles-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }

/* Le bilan, en une phrase */

@media (max-width: 600px) {
  .accueil .reprise { grid-template-columns: 110px minmax(0, 1fr); gap: 20px; align-items: start; }
  .accueil .reprise .actions { grid-column: 1 / -1; }
  .accueil .reprise .actions .bouton { flex: 1; }
  .accueil .reprise .progression { max-width: none; }
}
/* Pendant le chargement : la silhouette de la page */
.squelette i { display: block; background: var(--surface-2); border-radius: 4px; animation: attente-tardive 0.25s ease 0.3s both, respire 1.4s ease-in-out 0.55s infinite; }
.squelette .sq-ligne { height: 18px; width: 60%; margin: 10px 0; }
/* L'espace du haut en marge intérieure, comme le « Bonjour » qui le remplace : la page ne bouge pas à l'arrivée. */
.accueil .squelette { padding-top: clamp(40px, 5vw, 72px); }
.squelette .sq-ligne.courte { width: 220px; margin: 0 0 clamp(28px, 4vw, 48px); }
.squelette .sq-reprise { display: grid; grid-template-columns: clamp(110px, 20vw, 230px) minmax(0, 1fr); gap: clamp(20px, 5vw, 64px); align-items: center; }
.squelette .sq-livre { aspect-ratio: 2 / 3; border-radius: var(--r-livre); }
.squelette .sq-titre { height: clamp(36px, 4.6vw, 64px); width: 80%; margin: 12px 0; }
.squelette .sq-bouton { height: 50px; width: 150px; margin-top: 24px; border-radius: var(--r-petit); }
.accueil-erreur { padding: clamp(48px, 7vw, 96px) var(--gouttiere) clamp(64px, 9vw, 112px); }
.accueil-erreur h1 { font-size: clamp(32px, 4vw, 52px); font-weight: 800; letter-spacing: -0.045em; }
.accueil-erreur p { color: var(--gris); font-size: 17px; margin: 14px 0 26px; }
.accueil .a-faire .calme { padding: 24px 0; border-bottom: 1px solid var(--bande-filet); color: var(--bande-doux); margin: 0; }
.accueil .reprise-fin { padding-top: 8px; }
.accueil .reprise-fin h1 { font-size: clamp(36px, 4.6vw, 64px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.accueil .reprise-fin .meta { color: var(--gris); font-size: 17px; margin: 16px 0 0; max-width: 40ch; }
.accueil .reprise-fin .actions { margin-top: 28px; }
.accueil .reprise .progression-carte { display: none; }

/* Annonce passagère (« “se diriger” removed. Undo ») */
.annonce {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: 18px; max-width: calc(100vw - 32px);
  padding: 13px 14px 13px 20px; border-radius: var(--r-surface);
  background: var(--encre); color: var(--papier); font-size: 15px; box-shadow: var(--ombre-flottante);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.35s var(--sortie);
}
.annonce.visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.annonce button { border: 0; background: none; color: inherit; font: inherit; font-weight: 700; padding: 4px 8px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; border-radius: 4px; }
.annonce button:focus-visible { outline-color: var(--papier); }

/* Accueil membre : premiers pas */
.accueil .premiers-pas { margin-top: clamp(56px, 7vw, 88px); }
.premiers-pas-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.premiers-pas ol { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 32px); }
.premiers-pas li { display: flex; gap: 14px; align-items: flex-start; padding-top: 18px; border-top: 1px solid var(--encre); }
.premiers-pas .puce { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--filet-fort); }
.premiers-pas .puce svg { width: 16px; height: 16px; }
.premiers-pas li.fait .puce { background: var(--accent); color: var(--papier); box-shadow: none; }
.premiers-pas li.fait strong { color: var(--gris); text-decoration: line-through; text-decoration-thickness: 1px; }
.premiers-pas strong { display: block; font-size: 17px; letter-spacing: -0.015em; }
.premiers-pas small { display: block; margin-top: 3px; color: var(--gris); font-size: 14.5px; line-height: 1.45; }

/* Accueil membre : la semaine d'écoute, dans la bande verte */
.accueil .bande .bonjour { padding-top: 0; margin: 0 0 clamp(24px, 3vw, 36px); color: var(--bande-doux); }
.accueil .bande .bonjour b { color: var(--bande-encre); }
.accueil .semaine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: end; }
.semaine-total { margin: 14px 0 0; font-size: 18px; color: var(--bande-doux); }
.semaine-total b { font-size: clamp(56px, 7vw, 88px); font-weight: 800; letter-spacing: -0.05em; color: var(--bande-encre); line-height: 1; margin-right: 6px; }
.semaine-sous { margin: 6px 0 0; color: var(--bande-doux); font-size: 15.5px; }
.semaine-objectif { margin: 4px 0 0; color: var(--bande-doux); font-size: 14.5px; }
.semaine-bilan { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--bande-filet-fort); color: var(--bande-doux); font-size: 15px; }
.semaine-bilan b { color: var(--bande-encre); font-weight: 600; }
.semaine-jours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px); height: 180px; align-items: end; }
.semaine-jours li { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.semaine-jours .barre { position: relative; width: 100%; max-width: 44px; height: calc(var(--h) * 140px); min-height: 4px; background: var(--bande-encre); border-radius: 4px 4px 1px 1px; }
.semaine-jours .zero .barre { background: var(--bande-filet-fort); }
.semaine-jours .barre i { position: absolute; left: 0; right: 0; top: -20px; text-align: center; font-style: normal; font-size: 12px; font-weight: 600; color: var(--bande-doux); }
.semaine-jours .jour { font-size: 13px; color: var(--bande-doux); font-weight: 500; }
.semaine-jours .aujourdhui .jour { color: var(--bande-encre); font-weight: 700; }
.accueil-fin { height: clamp(64px, 9vw, 112px); }
@media (max-width: 760px) {
  .premiers-pas ol { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .premiers-pas li { padding: 16px 0; border-top-color: var(--filet); }
  .premiers-pas li:first-child { border-top-color: var(--encre); }
  .accueil .semaine { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .semaine-jours { height: 150px; }
  .semaine-jours .barre { height: calc(var(--h) * 110px); }
}

/* Page hors connexion (application installée) */
.hors-ligne { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; max-width: 640px; }
.hors-ligne .marque { margin: 0 0 24px; font-size: 18px; }
.hors-ligne h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 800; letter-spacing: -0.05em; }
.hors-ligne p { margin: 0 0 12px; color: var(--gris); font-size: 18px; }

/* Accès aux épisodes, montré aux visiteurs sans compte seulement */
.acces-ep { display: none; }
.anonyme .acces-ep { display: inline-flex; white-space: nowrap; align-items: center; gap: 4px; margin-left: 10px; font-size: 12.5px; font-weight: 600; vertical-align: 1px; }
.anonyme .acces-ep.libre { color: var(--accent); }
.anonyme .acces-ep.reserve { color: var(--gris); }
.acces-ep svg { width: 13px; height: 13px; }

/* Le cadenas jaune, en haut à droite de la couverture des épisodes réservés (visiteurs seulement) */
.livre { position: relative; }
.cadenas-ep { display: none; }
.anonyme .cadenas-ep {
  position: absolute; z-index: 2; top: -9px; right: -9px;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #f5c12e; color: #2b2208; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 0 0 3px var(--papier);
}
.anonyme .cadenas-ep svg { width: 17px; height: 17px; stroke-width: 2.2; }
a.livre:hover .cadenas-ep { transform: translateY(-4px); }
.cadenas-ep { transition: transform 0.45s var(--sortie); }
/* Réservés aux membres, vus par un visiteur : grisés, même au survol (le cadenas, lui, garde sa couleur). Carte ouverte
   (voir plus bas) : la photo reste grise, la fiche se lit en entier. */
.anonyme a.livre:has(.cadenas-ep) .pochette { filter: grayscale(1); opacity: 0.55; transition: transform 0.45s var(--sortie), box-shadow 0.45s var(--sortie), filter 0.35s ease, opacity 0.35s ease; }
.anonyme a.livre:has(.cadenas-ep) .livre-legende { opacity: 0.6; }
.anonyme a.livre.ouvert:has(.cadenas-ep) .pochette { filter: none; opacity: 1; }
.anonyme a.livre:has(.cadenas-ep) .pochette-image { filter: grayscale(1); }
.anonyme a.livre.ouvert:has(.cadenas-ep) .pochette-image { opacity: 0.6; }

/* ——— Stories (/stories) : l'histoire à la une, les rayons, toute la collection ———
   Classes st-. Les rayons (public/catalogue.js) sont des rangées de couvertures :
   - avec une souris, sur un grand écran (1100 px et plus) : cinq cartes par rayon ; la carte laissée un instant sous le
     curseur s'ouvre (classe « ouvert », posée par public/episodes-page.js) : elle s'élargit, ses voisines se resserrent
     pour lui faire de la place, et sa fiche (niveau, résumé, vocabulaire, quiz) remplace le titre de la couverture ;
   - au doigt, ou sur un écran plus petit : chaque rayon défile sur le côté, toutes ses histoires dedans ; un toucher sur
     une couverture ouvre son aperçu (en bas de l'écran sur téléphone), lisible en entier, avec « Listen ».
   La hauteur des couvertures ne bouge jamais. */
@property --carte { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --ouverte { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* La tête : le titre, et ce que contient la collection */
.st-faits { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0 0 6px; list-style: none; }
.st-faits li { display: flex; flex-direction: column; font-size: 13.5px; color: var(--gris); }
.st-faits b { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--encre); font-variant-numeric: tabular-nums; }

/* L'histoire à la une : la photo floue en fond, la couverture nette à droite, comme un livre posé sur la table. */
.st-une:empty { display: none; }
.st-affiche { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; min-height: 420px; padding: clamp(28px, 4vw, 48px) clamp(24px, 4.5vw, 56px); border-radius: var(--r-surface); background: #121314; color: #fff; }
.st-affiche-fond { position: absolute; inset: -60px; z-index: -2; width: calc(100% + 120px); height: calc(100% + 120px); object-fit: cover; filter: blur(42px) saturate(1.15); opacity: 0.7; }
.st-affiche::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 12, 0.88) 0%, rgba(10, 10, 12, 0.62) 55%, rgba(10, 10, 12, 0.3) 100%); }
.st-affiche-texte { max-width: 560px; min-width: 0; }
.st-affiche-sur { margin: 0 0 14px; font-size: 14px; color: rgba(255, 255, 255, 0.78); }
.st-affiche-sur b { color: #7ed3ad; font-weight: 700; }
.st-affiche h2 { margin: 0 0 16px; font-size: clamp(38px, 5vw, 68px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; color: #fff; text-wrap: balance; overflow-wrap: break-word; }
.st-affiche h2 .partie { display: inline-block; margin-left: 0.12em; font-size: 0.45em; vertical-align: top; letter-spacing: 0; opacity: 0.85; }
.st-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 16px; font-size: 14.5px; color: rgba(255, 255, 255, 0.85); }
.st-niv { font-size: 12.5px; font-weight: 700; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 4px; padding: 1px 6px; }
.st-ok { color: #7ed3ad; font-weight: 600; }
.st-reserve { display: inline-flex; align-items: center; gap: 5px; color: #f5c12e; font-weight: 600; }
.st-reserve svg { width: 13px; height: 13px; }
.st-progres { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 14px; }
.st-progres span { width: 180px; max-width: 45%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.st-progres i { display: block; height: 100%; background: #7ed3ad; }
.st-affiche-resume { margin: 0 0 16px; max-width: 30em; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.st-affiche-mots { margin: 0 0 26px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); }
.st-affiche-mots :is(b, i) { color: #fff; font-style: normal; font-weight: 600; }
.st-affiche-mots i { font-weight: 500; }
.st-affiche-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.st-b-blanc { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px 12px 18px; border-radius: var(--r-petit); background: #fff; color: #17181c; font-size: 16px; font-weight: 700; text-decoration: none; transition: transform 0.15s; }
.st-b-blanc:active { transform: scale(0.98); }
.st-b-blanc svg { width: 15px; height: 15px; }
.st-b-ligne { color: #fff; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.4); }
.st-b-ligne:hover { text-decoration-color: #fff; }
.st-affiche :focus-visible { outline-color: #fff; }
.st-affiche-livre { display: block; width: 236px; transform: rotate(2deg); }
.st-affiche-livre .pochette { box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.3); }

/* Les rayons */
.st-etageres { container: etageres / inline-size; --ecart: 14px; }
.st-etagere { --carte: 140px; margin-top: clamp(44px, 6vw, 64px); min-width: 0; }
.st-etagere-tete { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 24px; padding-bottom: 14px; border-bottom: 1px solid var(--encre); }
.st-etagere-tete h2 { margin: 0; font-size: clamp(24px, 2.3vw, 30px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.st-etagere-tete p { margin: 4px 0 0; font-size: 15px; color: var(--gris); }
.st-compte { display: flex; align-items: baseline; gap: 16px; margin: 0; font-size: 14px; color: var(--gris); white-space: nowrap; }
.st-compte b { color: var(--accent); font-weight: 600; }
.st-tout { font-weight: 600; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.st-tout:hover { color: var(--accent); }
/* Une rangée qui défile sur le côté (au doigt, ou sur un petit écran) : elle va jusqu'aux bords de l'écran. */
.st-rang { display: flex; gap: var(--ecart); margin-inline: calc(-1 * var(--gouttiere)); padding: 16px var(--gouttiere) 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere); scrollbar-width: none; }
.st-rang::-webkit-scrollbar { display: none; }
.st-rang::after { content: ""; flex: 0 0 1px; }
.st-rang > .livre { flex: 0 0 var(--carte); min-width: 0; gap: 10px; scroll-snap-align: start; }
.st-rang .pochette { aspect-ratio: auto; height: calc(var(--carte) * 1.5); }
.st-rang .livre-legende strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-rang .livre-legende :is(.pastille, .reprendre, .etat-ep) { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.membre .st-rang .livre-legende:has(.reprendre, .etat-ep) .pastille { display: none; }
/* Couvertures étroites (au doigt, petit écran) : « Open to all » passe sous le niveau et la durée. */
@media not ((hover: hover) and (pointer: fine) and (min-width: 1100px)) {
  .anonyme .st-rang .acces-ep { display: flex; margin: 1px 0 0; }
}
/* Une suite d'histoires : le numéro de chacune, sur sa couverture */
.numero-suite { position: absolute; z-index: 3; left: -8px; top: -12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--encre); color: var(--papier); font-size: 13px; font-weight: 800; box-shadow: 0 0 0 3px var(--papier); transition: transform 0.45s var(--sortie); }
@media (min-width: 600px) {
  .st-etageres { --ecart: 20px; }
  .st-etagere { --carte: 168px; }
}

/* La fiche d'une carte : seulement avec une souris, sur un grand écran. */
.fiche, .voile { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  .st-etageres { --ecart: 28px; }
  .st-etagere { --carte: calc((100cqw - 4 * var(--ecart)) / 5); --ouverte: calc(var(--carte) * 1.85); }
  .st-rang { margin-inline: 0; padding: 16px 0 0; overflow: visible; scroll-snap-type: none; }
  .st-rang::after { display: none; }
  /* Cinq cartes ; la carte ouverte prend sa largeur, ses voisines se resserrent. Un rayon plus long a « See all ». */
  .st-rang > .livre { flex: 0 1 var(--carte); transition: flex-basis 0.6s var(--sortie); }
  .st-rang > .livre:nth-child(n + 6) { display: none; }
  .st-rang > .livre.ouvert { flex: 0 0 var(--ouverte); }
  /* Deux petits rayons côte à côte : le compte passe sous le texte, les deux filets restent alignés. */
  .st-paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ecart); }
  .st-paire .st-etagere-tete { display: block; }
  .st-paire .st-compte { margin-top: 2px; }

  .st-rang .pochette-image { transition: transform 0.9s var(--sortie), opacity 0.35s ease; }
  .st-rang .pochette > :is(.auteur, .titre, .maison, .etiquette) { transition: opacity 0.2s ease 0.25s; }
  .st-rang .livre-legende { transition: opacity 0.3s ease; }
  .voile {
    display: block; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.35s ease;
    background:
      linear-gradient(to right, rgba(10, 10, 12, 0.8) 0%, rgba(10, 10, 12, 0.4) 60%, rgba(10, 10, 12, 0.05) 90%),
      linear-gradient(to top, rgba(10, 10, 12, 0.85) 0%, rgba(10, 10, 12, 0) 60%);
  }
  /* La fiche a d'emblée la largeur de la carte ouverte : son texte ne se recompose pas pendant l'ouverture. */
  .fiche {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: var(--ouverte);
    display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
    padding: 14px 16px 16px; color: #fff; text-align: left; pointer-events: none;
    opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .fiche-haut { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.82); }
  .fiche-bas { display: flex; flex-direction: column; gap: 7px; }
  .fiche-titre { font-size: 21px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; overflow-wrap: break-word; }
  .fiche-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: rgba(255, 255, 255, 0.85); }
  .fiche-niveau { font-weight: 700; font-size: 11.5px; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 4px; padding: 0 5px; }
  .fiche-libre, .fiche-fait { color: #7ed3ad; font-weight: 600; }
  .fiche-reserve { align-items: center; gap: 4px; color: #f5c12e; font-weight: 600; }
  .fiche-reserve svg { width: 12px; height: 12px; }
  .fiche-resume { font-size: 13.5px; line-height: 1.42; color: rgba(255, 255, 255, 0.92); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .fiche-mots { font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.78); }
  .fiche-mots b { color: #fff; font-weight: 600; }
  .fiche-actions { margin-top: 2px; font-size: 12.5px; color: rgba(255, 255, 255, 0.75); }
  .fiche-actions > span { align-items: center; gap: 12px; }
  .fiche-bouton { display: inline-flex; align-items: center; gap: 7px; background: #fff; color: #17181c; /* toujours sur la photo : encre fixe, même en mode sombre */ font-weight: 700; font-size: 13.5px; padding: 6px 13px 6px 10px; border-radius: 6px; }
  .fiche-bouton svg { width: 12px; height: 12px; }
  /* Ce qui ne vaut que pour les visiteurs, ou que pour les membres */
  .fiche .si-visiteur, .fiche .si-membre { display: none; }
  .anonyme .fiche .si-visiteur, .membre .fiche .si-membre { display: inline-flex; }

  /* Ouverte */
  .st-rang .livre.ouvert .pochette { box-shadow: var(--ombre-flottante); transform: translateY(-4px); }
  .st-rang .livre.ouvert .pochette-image { transform: scale(1.04); }
  .st-rang .livre.ouvert .pochette > :is(.auteur, .titre, .maison, .etiquette) { opacity: 0; transition: opacity 0.12s ease; }
  .st-rang .livre.ouvert .voile { opacity: 1; }
  .st-rang .livre.ouvert .fiche { opacity: 1; transform: none; transition: opacity 0.35s ease 0.3s, transform 0.5s var(--sortie) 0.3s; }
  .st-rang .livre.ouvert .livre-legende, .anonyme .st-rang a.livre.ouvert:has(.cadenas-ep) .livre-legende { opacity: 0; }
  .st-rang .livre.ouvert :is(.cadenas-ep, .coche-ep, .numero-suite) { transform: translateY(-4px); }
}

/* L'aperçu d'une histoire, au doigt : en bas de l'écran sur téléphone, au milieu sur tablette. Lisible en entier. */
html.apercu-ouvert { overflow: hidden; }
.st-apercu { box-sizing: border-box; width: min(560px, calc(100vw - 32px)); max-height: min(86dvh, 720px); margin: auto; padding: 0 22px 22px; border: 0; border-radius: 16px; background: var(--papier); color: var(--encre); box-shadow: var(--ombre-flottante); overflow-y: auto; overscroll-behavior: contain; }
.st-apercu::backdrop { background: rgba(10, 10, 12, 0.45); }
.st-apercu[open] { animation: st-monte 0.32s var(--sortie); }
@keyframes st-monte { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.st-apercu-poignee { width: 40px; height: 4px; border-radius: 2px; background: var(--filet-fort); margin: 10px auto 16px; }
.st-apercu-tete { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
.st-apercu-couv .pochette { width: 96px; }
/* Le titre est juste à côté : la couverture illustrée ne garde que sa photo (son texte serait trop petit). */
.st-apercu-couv .pochette.illustree > :not(.pochette-image) { display: none; }
.st-apercu-sur { margin: 0 0 4px; font-size: 13px; color: var(--gris); }
.st-apercu h2 { margin: 0 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; overflow-wrap: break-word; outline: none; }
.st-apercu-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; font-size: 14px; color: var(--gris); }
.st-apercu .st-niv { color: var(--encre); border-color: var(--filet-fort); }
.st-apercu-etat { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 14px; font-weight: 600; color: var(--gris); }
.st-apercu-etat.ok { color: var(--accent); }
.st-apercu-etat svg { width: 14px; height: 14px; }
.st-apercu .st-progres { margin: 6px 0 0; font-size: 13.5px; color: var(--gris); }
.st-apercu .st-progres span { background: var(--filet); }
.st-apercu .st-progres i { background: var(--accent); }
.st-apercu-resume { margin: 18px 0 10px; font-size: 16px; line-height: 1.55; overflow-wrap: break-word; }
.st-apercu-mots { margin: 0 0 20px; font-size: 14.5px; line-height: 1.5; color: var(--gris); overflow-wrap: break-word; }
.st-apercu-mots :is(b, i) { color: var(--encre); font-style: normal; font-weight: 600; }
.st-apercu-mots i { font-weight: 500; }
.st-apercu-actions { display: flex; gap: 10px; }
.st-apercu-actions .bouton { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.st-apercu-actions .bouton svg { width: 14px; height: 14px; }
.st-apercu-note { margin: 12px 0 0; font-size: 13.5px; color: var(--gris); text-align: center; }
@media (max-width: 599px) {
  .st-apercu { width: 100%; max-width: 100%; max-height: 88dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .st-apercu[open] { animation-name: st-glisse; }
  @keyframes st-glisse { from { transform: translateY(100%); } to { transform: none; } }
}
@media (max-width: 360px) {
  .st-apercu { padding-inline: 16px; }
  .st-apercu-tete { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; }
  .st-apercu-couv .pochette { width: 80px; }
  .st-apercu h2 { font-size: 21px; }
}

/* Toute la collection, juste sous l'histoire à la une : ses filtres et son tri en tête, 5 histoires par page. Les rayons
   viennent après ; un filtre choisi les efface (« Clear filters » les ramène). */
.st-toutes { margin-top: clamp(44px, 6vw, 64px); scroll-margin-top: calc(var(--haut-entete) + 16px); }
.st > div.conteneur { padding-bottom: clamp(64px, 9vw, 120px); }
.st-toutes-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin-bottom: 18px; }
.st-toutes-tete h2 { flex-basis: 100%; margin: 0; font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.st-toutes-tete p { margin: 0; font-size: 15.5px; color: var(--gris); }
.st-retour { margin-left: auto; }
.st[data-filtre] .st-etageres { display: none; }
.st-lignes { list-style: none; margin: 0; padding: 0; }
.st-lignes li { border-bottom: 1px solid var(--filet); }
.st-ligne { display: grid; grid-template-columns: 30px 36px minmax(0, 1fr) 56px 60px 150px 16px; align-items: center; gap: 18px; padding: 14px 0; color: var(--encre); text-decoration: none; }
.st-ligne .pochette.mini { width: 36px; }
.st-n { font-size: 14px; color: var(--gris-doux); font-variant-numeric: tabular-nums; }
.st-ligne-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st-ligne strong { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; overflow-wrap: break-word; }
.st-ligne small { font-size: 14px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-niv-l { font-size: 14px; font-weight: 600; }
.st-duree-l { font-size: 14px; color: var(--gris); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-etat { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--gris); white-space: nowrap; }
.st-etat.ok { color: var(--accent); }
.st-etat svg { width: 13px; height: 13px; }
.st-fleche { color: var(--gris-doux); transition: transform 0.3s var(--sortie), color 0.2s; }
.st-fleche svg { display: block; width: 16px; height: 16px; }
a.st-ligne:hover strong { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
a.st-ligne:hover .st-fleche { color: var(--encre); transform: translateX(4px); }
.anonyme .st-ligne.reservee .pochette-image { filter: grayscale(1); opacity: 0.6; }
/* Sous la collection : « 1–5 of 14 », les pages, le nombre par page */
#titre-toutes:focus { outline: none; }
.st-pages { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 20px; }
.st-pages[hidden] { display: none; }
.st-pages-texte { margin: 0; min-width: 7em; font-size: 14px; color: var(--gris); font-variant-numeric: tabular-nums; }
.st-pages-nav { display: flex; align-items: center; gap: 4px; }
.st-pages-nav:empty { display: none; }
.st-pages-nav ol { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.st-pages-nav ol a { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: var(--r-petit); font-size: 15px; font-weight: 600; color: var(--encre); text-decoration: none; font-variant-numeric: tabular-nums; transition: background 0.15s; }
.st-pages-nav ol a:hover { background: var(--surface-2); }
.st-pages-nav ol a[aria-current] { background: var(--encre); color: var(--papier); }
.st-pages-trou { display: grid; place-items: center; min-width: 22px; color: var(--gris); }
.st-pages-pre, .st-pages-sui { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; border-radius: var(--r-petit); font-size: 15px; font-weight: 600; color: var(--encre); text-decoration: none; transition: background 0.15s; }
a:is(.st-pages-pre, .st-pages-sui):hover { background: var(--surface-2); }
:is(.st-pages-pre, .st-pages-sui)[aria-disabled] { color: var(--filet-fort); }
.st-pages-pre::before, .st-pages-sui::after { content: ""; width: 7px; height: 7px; border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; }
.st-pages-pre::before { transform: rotate(45deg); }
.st-pages-sui::after { transform: rotate(-135deg); }
.st-par-page { justify-content: flex-end; min-width: 7em; }
@media (max-width: 600px) {
  .st-pages { gap: 14px; }
  .st-pages-nav { order: 3; width: 100%; justify-content: center; }
  .st-par-page { flex-direction: row; align-items: baseline; gap: 8px; }
}
@media (max-width: 760px) {
  .st-ligne { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 3px 12px; padding: 12px 0; align-items: start; }
  .st-ligne .pochette.mini { grid-row: 1 / span 2; width: 34px; }
  .st-n, .st-niv-l, .st-fleche { display: none; }
  .st-ligne-texte { grid-column: 2; grid-row: 1; }
  .st-duree-l { grid-column: 3; grid-row: 1; padding-top: 2px; }
  .st-etat { grid-column: 2 / span 2; grid-row: 2; }
  .st-etat:empty { display: none; }
  .st-ligne strong { font-size: 16.5px; }
  .st-ligne small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .st-affiche { grid-template-columns: minmax(0, 1fr); margin-inline: calc(-1 * var(--gouttiere)); padding: 28px var(--gouttiere) 30px; border-radius: 0; min-height: 0; }
  .st-affiche-resume { font-size: 16px; }
}
@media (max-width: 900px) { .st-affiche-livre { display: none; } .st-affiche { grid-template-columns: minmax(0, 1fr); min-height: 0; } }
/* Les apparitions, comme sur l'accueil et les pages des cours : chaque morceau monte doucement en arrivant à l'écran
   (.vu, posée par public/episodes-page.js) ; les cartes d'un rayon l'une après l'autre ; la couverture de l'histoire à
   la une se pose en dernier. Seulement avec .apparitions sur <html> (le script est là, et pas de préférence pour moins
   d'animations). */
.apparitions :is(.st-tete > *, .st-affiche, .st-etagere-tete, .st-toutes-tete, .st-trouver, #grille > li) {
  transition: opacity 0.9s ease var(--retard-st, 0s), transform 1.1s var(--sortie) var(--retard-st, 0s);
}
.apparitions .st-rang > .livre {
  --retard-st: calc(var(--i, 0) * 80ms + 100ms);
  transition: opacity 0.9s ease var(--retard-st), transform 1.1s var(--sortie) var(--retard-st), flex-basis 0.6s var(--sortie);
}
.apparitions .st-affiche-livre { transition: opacity 0.9s ease 0.45s, transform 1.4s var(--sortie) 0.45s; }
.apparitions :is(.st-tete:not(.vu) > *, .st-une:not(.vu) .st-affiche, .st-etagere:not(.vu) .st-etagere-tete, .st-etagere:not(.vu) .st-rang > .livre, .st-toutes-tete:not(.vu), .st-trouver:not(.vu), #grille > li:not(.vu)) {
  opacity: 0; transform: translate3d(0, 28px, 0);
}
.apparitions .st-une:not(.vu) .st-affiche-livre { opacity: 0; transform: translate3d(0, 48px, 0) rotate(7deg); }
.apparitions .st-tete > :nth-child(2) { --retard-st: 0.12s; }
.apparitions .st-affiche { --retard-st: 0.15s; }
.apparitions .st-trouver { --retard-st: 0.1s; }
.st-rang > .livre:nth-child(2) { --i: 1; }
.st-rang > .livre:nth-child(3) { --i: 2; }
.st-rang > .livre:nth-child(4) { --i: 3; }
.st-rang > .livre:nth-child(5) { --i: 4; }
.st-rang > .livre:nth-child(n + 6) { --i: 5; }
/* ——— Soutenir le podcast sur Patreon : entre les rayons et la collection (écrite par src/patreon.mjs ; « Not now » dans
   public/episodes-page.js). Un panneau clair, Jérôme détouré à droite. En arrivant à l'écran : le panneau monte, les
   textes arrivent l'un après l'autre, les coches se tracent, Jérôme surgit du bas avec un petit rebond ; le bouton
   survolé, il se penche vers lui. « Not now » : le panneau se replie. ——— */
.st-soutien-zone:empty, .st[data-filtre] .st-soutien-zone { display: none; }
.st-soutien { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: end; gap: 24px; margin-top: clamp(64px, 8vw, 96px); padding: clamp(28px, 4vw, 48px) 0 0 clamp(24px, 4.5vw, 56px); border-radius: var(--r-surface); background: var(--surface-2); overflow: hidden; }
.st-soutien-texte { align-self: center; max-width: 34em; padding-bottom: clamp(28px, 4vw, 48px); }
.st-soutien h2 { --r: 0.15s; margin: 0 0 12px; font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.st-soutien p { --r: 0.25s; margin: 0 0 18px; font-size: 17px; line-height: 1.55; color: var(--gris); }
.st-soutien-avantages { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 24px; padding: 0; list-style: none; font-size: 15px; font-weight: 600; }
.st-soutien-avantages li { --r: calc(0.4s + var(--i, 0) * 0.12s); display: inline-flex; align-items: center; gap: 7px; }
.st-soutien-avantages svg { flex: none; width: 16px; height: 16px; color: var(--accent); }
.st-soutien-actions { --r: 0.8s; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; }
.st-soutien-bouton { transition: transform 0.2s var(--sortie), background 0.2s; }
.st-soutien-bouton:hover { transform: translateY(-2px); }
.st-soutien-bouton:active { transform: translateY(0) scale(0.98); }
.st-soutien-plus-tard { border: 0; background: none; padding: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--gris); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.st-soutien-plus-tard:hover { color: var(--encre); }
.st-soutien-jerome { align-self: end; transform-origin: 50% 100%; }
.st-soutien-jerome img { display: block; width: 300px; height: auto; margin-top: -12px; transform-origin: 50% 100%; filter: drop-shadow(0 18px 30px rgba(23, 24, 28, 0.18)); transition: transform 0.5s var(--sortie); }
/* (il descend un peu en se penchant : le bas de la photo reste sous le bord du panneau) */
.st-soutien:has(.st-soutien-bouton:is(:hover, :focus-visible)) .st-soutien-jerome img { transform: translate3d(-8px, 16px, 0) rotate(-2.5deg) scale(1.02); }
/* « Not now » : le panneau se replie (sa hauteur posée par le script, puis zéro). */
.st-soutien-zone .st-soutien.st-soutien-part { height: 0 !important; margin-top: 0; padding-top: 0; opacity: 0; transform: scale(0.98); transition: height 0.5s var(--sortie), margin 0.5s var(--sortie), padding 0.5s var(--sortie), opacity 0.3s ease, transform 0.5s var(--sortie); }
/* L'arrivée à l'écran (.vu, comme le reste de la page) */
.apparitions .st-soutien { transition: opacity 0.9s ease, transform 1.1s var(--sortie); }
.apparitions .st-soutien:not(.vu) { opacity: 0; transform: translate3d(0, 32px, 0); }
.apparitions .st-soutien :is(h2, p, .st-soutien-avantages li, .st-soutien-actions) { transition: opacity 0.7s ease var(--r), transform 0.9s var(--sortie) var(--r); }
.apparitions .st-soutien:not(.vu) :is(h2, p, .st-soutien-avantages li, .st-soutien-actions) { opacity: 0; transform: translate3d(0, 16px, 0); }
.apparitions .st-soutien-avantages path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s ease calc(var(--r) + 0.25s); }
.apparitions .st-soutien:not(.vu) .st-soutien-avantages path { stroke-dashoffset: 1; }
.apparitions .st-soutien-jerome { transition: transform 1.3s cubic-bezier(0.22, 1.25, 0.36, 1) 0.3s, opacity 0.5s ease 0.3s; }
.apparitions .st-soutien:not(.vu) .st-soutien-jerome { opacity: 0; transform: translate3d(0, 70%, 0) rotate(5deg); }
@media (max-width: 760px) {
  .st-soutien { grid-template-columns: minmax(0, 1fr); gap: 4px; margin-inline: calc(-1 * var(--gouttiere)); padding: 28px var(--gouttiere) 0; border-radius: 0; }
  .st-soutien-texte { padding-bottom: 0; }
  .st-soutien p { font-size: 16px; }
  .st-soutien-avantages { flex-direction: column; gap: 6px; }
  .st-soutien-bouton { width: 100%; justify-content: center; text-align: center; }
  .st-soutien-jerome { justify-self: center; }
  .st-soutien-jerome img { width: 190px; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-rang > .livre, .st-rang .pochette-image, .st-rang .pochette > *, .st-rang .livre-legende, .voile, .fiche, .numero-suite { transition: none !important; }
  .st-soutien, .st-soutien *, .st-soutien-jerome img { transition: none !important; }
  .st-rang .livre.ouvert .pochette-image { transform: none; }
  .st-apercu[open] { animation: none; }
}

/* ——— Blog ———
   En haut, de bord à bord sous la barre du site : les trois articles à la une, en grand, photo plein cadre.
   Le changement d'article est un fondu ; la photo avance très lentement ; le texte arrive ligne par ligne.
   Dessous, tous les articles en cartes, qui apparaissent au défilement. */

.blog-une {
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(520px, calc(100dvh - var(--haut-entete) - 48px), 780px);
  background: #101114; color: #fff;
}
.diapo { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity 1s var(--sortie), visibility 0s linear 1s; }
.diapo.active { visibility: visible; opacity: 1; transition: opacity 1s var(--sortie), visibility 0s; z-index: 1; }
.diapo-fond { position: absolute; inset: 0; z-index: -1; }
.diapo-fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.08); transition: transform 9s linear; }
.diapo.active .diapo-fond img { transform: scale(1); }
/* Le voile : sombre en bas à gauche, là où se pose le texte ; la photo respire en haut à droite. */
.diapo-fond::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10, 11, 14, 0.9) 0%, rgba(10, 11, 14, 0.55) 40%, rgba(10, 11, 14, 0.1) 75%),
    linear-gradient(to right, rgba(10, 11, 14, 0.78) 0%, rgba(10, 11, 14, 0.45) 45%, rgba(10, 11, 14, 0) 75%);
}
.diapo-texte {
  position: absolute; left: 0; right: 0; bottom: clamp(88px, 12vh, 120px);
  display: flex; flex-direction: column; align-items: flex-start;
}
/* Parallaxe (public/blog.js) : le texte et les commandes glissent plus lentement que la page et s'effacent. */
.diapo-texte, .blog-commandes { transform: translate3d(0, var(--parallaxe-y, 0px), 0); opacity: var(--parallaxe-o, 1); }
.diapo-rubrique { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.85); margin: 0 0 18px; }
.diapo-rubrique::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7fd1ab; }
.diapo h2 { font-size: clamp(38px, 6vw, 88px); font-weight: 800; letter-spacing: -0.055em; line-height: 0.95; margin: 0 0 20px; max-width: 12em; text-wrap: balance; }
.diapo h2 a { color: inherit; }
.diapo-chapeau { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, 0.82); margin: 0 0 28px; max-width: 34em; text-wrap: pretty; }
.diapo-pied { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.blog-bouton { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: var(--r-petit); background: #fff; color: #17181c; font-weight: 600; font-size: 15.5px; transition: transform 0.2s var(--sortie), background 0.2s; }
.blog-bouton svg { width: 16px; height: 16px; transition: transform 0.3s var(--sortie); }
.blog-bouton:hover svg { transform: translateX(3px); }
.blog-bouton:active { transform: scale(0.98); }
.diapo-infos { font-size: 14px; color: rgba(255, 255, 255, 0.7); }

/* L'arrivée du texte : chaque ligne monte et apparaît, l'une après l'autre. */
.diapo-texte > * { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--sortie), transform 0.9s var(--sortie); }
.diapo.active .diapo-texte > * { opacity: 1; transform: none; }
.diapo.active .diapo-texte > :nth-child(1) { transition-delay: 0.25s; }
.diapo.active .diapo-texte > :nth-child(2) { transition-delay: 0.33s; }
.diapo.active .diapo-texte > :nth-child(3) { transition-delay: 0.41s; }
.diapo.active .diapo-texte > :nth-child(4) { transition-delay: 0.49s; }

/* Les commandes, en bas : un trait par article, qui se remplit ; le titre du suivant ; deux flèches. */
/* (sans les barres des articles : seules les deux flèches restent, à droite, à la hauteur du bouton « Read the article ») */
.blog-commandes { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(88px, 12vh, 120px); pointer-events: none; }
/* La barre passe par-dessus le texte de la diapo : seules les flèches captent les clics (sinon « Read the article » ne répond plus). */
.blog-commandes button, .blog-commandes a { pointer-events: auto; }
.blog-commandes .pistes { display: none; }
/* La barre du bas, très fine : le temps avant l'article suivant. */
.blog-minuteur { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.12); }
.blog-minuteur i { display: block; height: 100%; width: 0; background: rgba(255, 255, 255, 0.6); }
.blog-minuteur i.court { animation: remplir var(--duree, 8s) linear forwards; }
.blog-une.en-pause .blog-minuteur i { animation-play-state: paused; }
.blog-une.immobile .blog-minuteur { display: none; }
.blog-commandes .conteneur { display: flex; align-items: flex-end; gap: 24px; }
.pistes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; flex: 1; max-width: 760px; }
.piste { border: 0; background: none; padding: 14px 0 0; color: rgba(255, 255, 255, 0.55); text-align: left; font: inherit; cursor: pointer; position: relative; transition: color 0.3s; }
.piste::before, .piste i { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: rgba(255, 255, 255, 0.28); }
.piste i { width: 0; background: #fff; }
.piste.passee i { width: 100%; }
.piste.active { color: #fff; }
.piste.active i { animation: remplir var(--duree, 8s) linear forwards; }
.blog-une.en-pause .piste.active i { animation-play-state: paused; }
.blog-une.immobile .piste.active i { animation: none; width: 100%; }
.piste span { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piste small { display: block; font-size: 12px; opacity: 0.8; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.piste:hover { color: #fff; }
@keyframes remplir { to { width: 100%; } }
.blog-fleches { display: flex; gap: 10px; margin-left: auto; }
.blog-fleche { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.06); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); transition: background 0.2s, border-color 0.2s, transform 0.2s var(--sortie); }
.blog-fleche:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.blog-fleche:active { transform: scale(0.95); }
.blog-fleche svg { width: 18px; height: 18px; }
.blog-une :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ——— Tous les articles ——— */
.articles-section { padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(80px, 11vw, 140px); }
.articles-section:has(.blog-attente) { padding-bottom: clamp(48px, 6vw, 72px); }
.articles-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 40px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px); }
.articles-tete h1 { font-size: clamp(44px, 6vw, 84px); letter-spacing: -0.055em; line-height: 0.95; margin: 0; }
.articles-tete p { margin: 14px 0 0; color: var(--gris); font-size: 17px; max-width: 40ch; }
/* Les rubriques : une rangée d'onglets sur toute la largeur, sous le titre ; l'onglet choisi est souligné. Trop de
   rubriques pour la largeur : la rangée défile, avec un fondu sur le bord (public/blog.js). */
.rubriques { display: flex; gap: clamp(20px, 2.6vw, 34px); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--filet); margin: 0 0 clamp(32px, 4vw, 48px); }
.rubriques::-webkit-scrollbar { display: none; }
.rubriques.deborde-droite { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.rubriques.deborde-gauche { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.rubriques.deborde-gauche.deborde-droite { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.rubriques button { flex: none; display: inline-flex; align-items: baseline; gap: 6px; padding: 12px 0 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 15.5px; font-weight: 500; color: var(--gris); cursor: pointer; white-space: nowrap; transition: color 0.2s, border-color 0.2s; }
.rubriques button small { font-size: 12.5px; font-weight: 500; color: var(--gris-doux); font-variant-numeric: tabular-nums; }
.rubriques button:hover { color: var(--encre); }
.rubriques button[aria-pressed="true"] { color: var(--encre); font-weight: 600; border-bottom-color: var(--encre); }
.billets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(20px, 2.6vw, 36px); list-style: none; margin: 0; padding: 0; }
/* Pas encore d'article : un mot, et les histoires en attendant. */
.blog-attente { grid-column: 1 / -1; padding-top: 28px; border-top: 1px solid var(--filet); }
.blog-attente p { margin: 0 0 22px; max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--gris); }
.blog-attente b { color: var(--encre); }
.billet a { display: flex; flex-direction: column; color: var(--encre); }
.billet-image { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-surface); background: var(--surface-2); margin-bottom: 18px; }
.billet-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--sortie); }
.billet a:hover .billet-image img { transform: scale(1.04); }
.billet-rubrique { display: block; font-size: 13.5px; font-weight: 600; color: var(--accent); margin-bottom: 8px; }
.billet h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin: 0 0 10px; text-wrap: balance; }
.billet a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.billet p { margin: 0 0 14px; color: var(--gris); font-size: 15.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.billet-infos { font-size: 13.5px; color: var(--gris); }
/* Un article lu par Jérôme : le casque et la durée de la lecture, après le temps de lecture. */
/* (en ligne avec le texte : la durée est sur la même ligne de base que la date ; le casque est centré sur les lettres) */
.blog-ecoute { margin-left: 10px; padding-left: 10px; border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent); white-space: nowrap; }
.blog-ecoute svg { display: inline-block; width: 1.05em; height: 1.05em; margin-right: 4px; vertical-align: -0.17em; }
/* Le dernier article prend toute la ligne : l'image à gauche, le texte à droite. */
.billet.large { grid-column: 1 / -1; }
.billet.large a { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.billet.large .billet-image { margin: 0; aspect-ratio: 16 / 10; }
.billet.large h3 { font-size: clamp(28px, 3vw, 42px); letter-spacing: -0.04em; line-height: 1.05; margin-bottom: 14px; }
.billet.large p { font-size: 17px; -webkit-line-clamp: 4; }

/* Apparition au défilement : les cartes montent et apparaissent, en léger décalé. */
.reveler { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--sortie), transform 1s var(--sortie); transition-delay: var(--retard, 0s); }
.reveler.apparu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveler, .diapo-texte > * { opacity: 1; transform: none; transition: none; }
  .diapo-fond img { transform: none; transition: none; }
}

@media (max-width: 900px) {
  .billets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pistes { max-width: none; }
  .piste span { display: none; }
}
@media (max-width: 600px) {
  .blog-une { height: min(calc(100dvh - var(--haut-entete) - 24px), 640px); }
  .diapo-texte { bottom: 96px; }
  .diapo h2 { font-size: 38px; }
  .diapo-chapeau { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 22px; }
  .diapo-infos { display: none; }
  .blog-commandes { bottom: 96px; padding-bottom: 0; }
  .blog-fleche { width: 40px; height: 40px; }
  .billets { grid-template-columns: minmax(0, 1fr); }
  .billet.large { grid-column: auto; }
  .billet.large a { display: flex; }
  .billet.large .billet-image { margin-bottom: 18px; }
  .articles-tete { display: block; }
  .rubriques { margin-left: calc(var(--gouttiere) * -1); margin-right: calc(var(--gouttiere) * -1); padding: 0 var(--gouttiere); }
}

/* ——— Article du blog ———
   Une colonne de lecture (70 caractères), le titre en grand, l'image en large, puis trois articles à lire ensuite.
   Un trait vert sous la barre du site avance avec la lecture. */

.lecture-progression { position: fixed; z-index: 31; left: 0; top: var(--haut-entete); height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--accent); pointer-events: none; }
/* Une fois dans la barre du site (public/blog.js) : juste sous son bord (et sa bordure), il la suit ; quand elle se cache sur téléphone, il reste visible en haut de l’écran. */
.entete > .lecture-progression { position: absolute; top: auto; bottom: -3px; }
.article-tete { max-width: 860px; margin: 0 auto; padding-top: clamp(40px, 7vw, 96px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.article-retour { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--gris); margin-bottom: clamp(28px, 4vw, 44px); }
.article-retour svg { width: 16px; height: 16px; transition: transform 0.3s var(--sortie); }
.article-retour:hover { color: var(--encre); }
.article-retour:hover svg { transform: translateX(-3px); }
.article-tete .billet-rubrique { font-size: 14.5px; margin-bottom: 16px; }
.article-rubrique { display: inline-flex; align-items: baseline; margin-bottom: 16px; }
.article-tete .article-rubrique .billet-rubrique { margin: 0; }
.article-tete h1 { font-size: clamp(40px, 6vw, 80px); font-weight: 800; letter-spacing: -0.055em; line-height: 0.98; margin: 0 0 24px; text-wrap: balance; }
.article-chapeau { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; color: var(--gris); margin: 0 0 32px; max-width: 34em; text-wrap: pretty; }
.article-auteur { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--gris); text-align: left; }
.article-auteur img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.article-auteur strong { display: block; color: var(--encre); font-weight: 600; }
.article-image { margin: clamp(40px, 6vw, 72px) auto 0; max-width: 1100px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-surface); background: var(--surface-2); }
.article-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (prefers-reduced-motion: no-preference) {
  .article-image img { animation: zoom-lent 2.4s var(--sortie) both; }
}
@keyframes zoom-lent { from { transform: scale(1.06); opacity: 0.4; } }

.article-corps { max-width: 680px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); font-size: 19px; line-height: 1.72; color: var(--encre); }
.article-corps > :first-child { margin-top: 0; }
.article-corps > p:first-child::first-letter { float: left; font-size: 4.1em; line-height: 0.82; font-weight: 800; margin: 0.08em 0.1em 0 0; letter-spacing: -0.04em; }
.article-corps p { margin: 0 0 1.15em; }
/* Les mots longs se coupent en fin de ligne, avec un tiret, selon la langue de l'article (lang="fr" ou "en") ;
   seulement les mots d'au moins 7 lettres, et jamais moins de 3 lettres de part et d'autre. */
.article-corps :is(p, li, blockquote, figcaption, td) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; overflow-wrap: break-word; }
.article-corps h2 { font-size: clamp(26px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; margin: 1.9em 0 0.6em; }
.article-corps h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 1.6em 0 0.5em; }
.article-corps ul, .article-corps ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.article-corps li { margin-bottom: 0.45em; padding-left: 0.2em; }
.article-corps li::marker { color: var(--gris); }
.article-corps ol li::marker { font-weight: 700; color: var(--encre); }
.article-corps a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.article-corps a:hover { color: var(--accent); }
.article-corps em { font-style: italic; }
.article-corps blockquote { margin: 1.8em 0; padding: 0 0 0 26px; border-left: 3px solid var(--accent); font-size: clamp(22px, 2.2vw, 27px); line-height: 1.35; font-weight: 700; letter-spacing: -0.025em; }
.article-corps blockquote p { margin: 0; }
.article-corps hr { border: 0; height: 1px; background: var(--filet); margin: 2.4em 0; }
.article-corps img { max-width: 100%; border-radius: var(--r-surface); }
/* Une image dans le texte d'un article (et sa légende facultative). */
.article-corps figure { margin: 1.8em 0; }
.article-corps figure img { display: block; width: 100%; height: auto; background: var(--surface-2); }
/* Un filet très fin (dessiné par-dessus l'image, il reste visible sur une capture blanche) et l'ombre « livre » des
   couvertures : l'image se détache du fond blanc, comme une feuille posée sur la page. */
.article-corps figure img { outline: 1px solid rgba(23, 24, 28, 0.09); outline-offset: -1px; box-shadow: var(--ombre-livre); }
:root[data-theme="dark"] .article-corps figure img { outline-color: rgba(255, 255, 255, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 10px 30px -12px rgba(0, 0, 0, 0.6); }
/* Une image en paysage déborde de la colonne de texte (680 px) : 920 px sur ordinateur, tout l'écran sur téléphone. */
.article-corps figure.large { --large: min(920px, 100vw - 2 * var(--gouttiere)); width: var(--large); margin-left: calc((100% - var(--large)) / 2); }
@media (max-width: 600px) {
  .article-corps figure.large { --large: 100vw; }
  .article-corps figure.large img { border-radius: 0; outline: 0; box-shadow: 0 -1px 0 var(--filet), 0 1px 0 var(--filet); }
  .article-corps figure.large figcaption { padding: 0 var(--gouttiere); }
}
/* (l'aperçu de l'éditeur reste dans sa colonne ; le vrai rendu est sur la page, bouton « Aperçu ») */
.ae-apercu.article-corps figure.large { width: auto; margin-left: 0; }
.article-corps figcaption { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--gris); text-align: center; }

/* ——— La lecture de l'article par Jérôme (articles en français, pour les membres) ——— */
.ecoute-place { max-width: 680px; margin: clamp(32px, 5vw, 56px) auto 0; }
.ecoute-place + .article-corps { padding-top: clamp(32px, 4.4vw, 52px); }
.ecoute {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "jouer texte membres"; align-items: center; column-gap: 16px;
  padding: 14px 18px 14px 14px; background: var(--surface); border-radius: var(--r-surface);
  box-shadow: 0 0 0 1px var(--filet), var(--ombre-livre);
}
/* (en écoute, deux colonnes seulement : la colonne « Members », vide, ne doit pas prendre la place des commandes) */
.ecoute.active { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "jouer texte" "jouer commandes"; row-gap: 6px; }
.ecoute-jouer {
  grid-area: jouer; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center;
  background: var(--action); color: var(--sur-action); cursor: pointer; transition: transform 0.2s var(--sortie), background 0.2s ease;
}
.ecoute-jouer svg { width: 20px; height: 20px; }
.ecoute-jouer:not(:has(rect)) svg { margin-left: 2px; }
.ecoute-jouer:hover { background: var(--action-fonce); }
.ecoute-jouer:active { transform: scale(0.95); }
.ecoute-jouer.attente { animation: respire 1.2s ease-in-out infinite; }
.ecoute-texte { grid-area: texte; display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ecoute-texte strong { font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; }
.ecoute-infos { font-size: 14px; color: var(--gris); }
.ecoute.active .ecoute-infos { display: none; }
.ecoute-membres { grid-area: membres; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gris); }
.ecoute-membres svg { width: 14px; height: 14px; }
.ecoute.active .ecoute-membres { display: none; }
.ecoute-commandes { grid-area: commandes; display: flex; align-items: center; gap: 12px; min-width: 0; }
.ecoute-commandes[hidden] { display: none; }
.ecoute-barre { flex: 1; min-width: 60px; accent-color: var(--accent); height: 20px; margin: 0; cursor: pointer; }
.ecoute-temps { font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ecoute-vitesse {
  font: inherit; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 46px; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--filet-fort); background: transparent; color: var(--encre); cursor: pointer;
}
.ecoute-vitesse:hover { border-color: var(--encre); }
/* Quand le lecteur sort de l'écran par le haut : un petit lecteur rond en bas à droite (blog.js), avant l'écoute aussi
   (« Listen » et la durée). Il monte en douceur, ancré à son coin, et redescend plus vite quand le lecteur revient en
   vue ; le bouton d'avis s'efface. */
.ecoute-mini {
  position: fixed; z-index: 45; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; padding: 5px 8px 5px 5px; border-radius: 999px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--filet), var(--ombre-flottante);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.92); transform-origin: 100% 100%;
  transition: opacity 0.18s ease-in, transform 0.22s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.22s;
}
.ecoute-mini.montre { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s ease-out, transform 0.55s var(--sortie), visibility 0s; }
.ecoute-mini-jouer {
  position: relative; width: 48px; height: 48px; border: 0; padding: 0; border-radius: 50%; background: none; color: var(--sur-action);
  display: grid; place-items: center; cursor: pointer;
}
.ecoute-mini-jouer > span {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--action);
  transition: transform 0.2s var(--sortie), background 0.2s ease;
}
.ecoute-mini-jouer:hover > span { background: var(--action-fonce); }
.ecoute-mini-jouer:active > span { transform: scale(0.94); }
.ecoute-mini-jouer svg:not(.ecoute-anneau) { width: 16px; height: 16px; }
.ecoute-mini-jouer > span:not(:has(rect)) svg { margin-left: 2px; }
.ecoute-anneau { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 2.5; }
.ecoute-anneau circle { stroke: var(--filet); }
.ecoute-anneau .avance { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.ecoute-mini.lance .ecoute-temps { min-width: 78px; }
.ecoute-mini:not(.lance) { padding-right: 18px; gap: 10px; }
.ecoute-mini-ecouter { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.ecoute-mini-ecouter[hidden], .ecoute-mini .ecoute-vitesse[hidden] { display: none; }
.ecoute-mini-jouer.attente > span { animation: respire 1.2s ease-in-out infinite; }
.ecoute-mini-la .feedback-flottant { opacity: 0; transform: translateY(8px); pointer-events: none; }
@media (max-width: 600px) { .ecoute-mini { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); } }
/* (au-dessus des onglets du bas de l'espace membre, comme le bouton d'avis) */
@media (max-width: 820px) { html.espace .ecoute-mini { bottom: calc(76px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .ecoute-mini, .ecoute-mini.montre { transform: none; } }
@media print { .ecoute-mini { display: none; } }
@media (max-width: 600px) {
  .ecoute { padding: 12px 14px 12px 12px; column-gap: 12px; }
  .ecoute-membres { font-size: 0; gap: 0; }
  .ecoute-membres svg { width: 16px; height: 16px; }
}
/* Le texte suit la voix : la phrase dite sur un fond vert très pâle (qui couvre aussi les espaces entre les mots et suit
   les retours à la ligne, arrondi au début et à la fin de la phrase). Le reste du texte ne change pas. */
.article-corps.ecoute-suivie .lm { cursor: pointer; transition: color 0.45s ease, background-color 0.3s ease, box-shadow 0.3s ease; }
/* (le fond ne déborde que vers la droite, sur l'espace qui suit : déborder à gauche repeindrait la dernière lettre du
   mot d'avant quand une ponctuation y est collée, « séance. » ; seul le début de la phrase déborde aussi à gauche) */
.article-corps .lm.ld { background: var(--accent-pale); box-shadow: 0.15em 0 0 0.15em var(--accent-pale); }
.article-corps .lm.ld.ld-debut { box-shadow: 0.15em 0 0 0.15em var(--accent-pale), -0.15em 0 0 0.15em var(--accent-pale); }
.article-corps .lm.ld-debut { border-radius: 0.3em 0 0 0.3em; }
.article-corps .lm.ld-fin { border-radius: 0 0.3em 0.3em 0; }
.article-corps .lm.ld-debut.ld-fin { border-radius: 0.3em; }
/* Pendant l'écoute (pas en pause), le reste du texte s'efface un peu : l'œil reste sur la phrase dite. En pause, tout le
   texte redevient normal ; la phrase où l'on s'est arrêté garde son fond. */
.article-corps.ecoute-phrase.ecoute-joue .lm { color: color-mix(in srgb, var(--encre) 38%, var(--papier)); }
.article-corps.ecoute-phrase.ecoute-joue .lm.ld { color: var(--encre); }
@media (prefers-reduced-motion: reduce) { .article-corps.ecoute-suivie .lm { transition: none; } }

/* Les images d'un article apparaissent quand on en voit à peu près la moitié (public/blog.js) : elles montent un peu en
   se dévoilant, l'image se pose (léger zoom arrière, flou qui se dissipe), puis la légende suit. Lent et doux. */
.article-corps figure.fig-reveler { --doux: cubic-bezier(.22, .61, .36, 1); opacity: 0; transform: translateY(24px); transition: opacity 1.4s var(--doux), transform 1.8s var(--doux); }
.article-corps figure.fig-reveler img { transform: scale(1.035); filter: blur(6px); transition: transform 2.2s var(--doux), filter 1.4s var(--doux); }
.article-corps figure.fig-reveler figcaption { opacity: 0; transition: opacity 1s ease 0.7s; }
.article-corps figure.fig-reveler.apparu { opacity: 1; transform: none; }
.article-corps figure.fig-reveler.apparu img { transform: none; filter: none; }
.article-corps figure.fig-reveler.apparu figcaption { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .article-corps figure.fig-reveler, .article-corps figure.fig-reveler img, .article-corps figure.fig-reveler figcaption { opacity: 1; transform: none; filter: none; transition: none; }
}

.article-fin { max-width: 680px; margin: 0 auto; padding-bottom: clamp(56px, 8vw, 96px); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--filet); padding-top: 28px; }
.article-fin p { margin: 0; font-size: 16px; color: var(--gris); max-width: 28em; }
.article-fin strong { color: var(--encre); }
.a-lire { border-top: 1px solid var(--encre); padding-top: 22px; padding-bottom: clamp(80px, 11vw, 140px); }
.a-lire h2 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.04em; margin: 0 0 clamp(28px, 4vw, 44px); }

@media (max-width: 600px) {
  .article-tete { text-align: left; align-items: flex-start; }
  .article-tete h1 { font-size: 40px; }
  .article-image { margin-left: calc(var(--gouttiere) * -1); margin-right: calc(var(--gouttiere) * -1); border-radius: 0; aspect-ratio: 4 / 3; }
  .article-corps { font-size: 18px; }
  .lecture-progression { top: var(--haut-entete); }
}

/* ——— Commentaires sous un article ———
   Dans la colonne de lecture : le champ d'écriture (ou l'invitation pour un visiteur), puis la conversation,
   dans l'ordre où elle a eu lieu. Chaque personne a son initiale dans un rond de couleur. */

.commentaires { padding-bottom: clamp(56px, 8vw, 96px); }
.commentaires-colonne { max-width: 680px; margin: 0 auto; }
.commentaires h2 { font-size: clamp(26px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.035em; margin: 0 0 24px; }
.commentaires-nombre { color: var(--gris); font-weight: 600; }
.commentaire-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; }

.commentaire-formulaire { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 28px; border-bottom: 1px solid var(--filet); }
.commentaire-saisie { flex: 1; min-width: 0; border: 1px solid var(--filet-fort); border-radius: var(--r-surface); background: var(--surface); transition: border-color 0.2s, box-shadow 0.2s; }
.commentaire-saisie:focus-within { border-color: var(--encre); box-shadow: 0 0 0 3px var(--accent-pale); }
.commentaire-saisie textarea { display: block; width: 100%; min-height: 48px; max-height: 360px; resize: none; border: 0; background: none; padding: 13px 16px; font: inherit; font-size: 16px; line-height: 1.5; color: var(--encre); outline: none; }
.commentaire-actions { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px 10px 16px; }
.commentaire-formulaire.ouvert .commentaire-actions { display: flex; }
.commentaire-aide { font-size: 13px; color: var(--gris); }
.commentaire-aide.erreur { color: var(--rouge); font-weight: 600; }
.commentaire-actions .bouton { height: 38px; padding: 0 18px; font-size: 14.5px; }
.commentaire-actions .bouton:disabled { opacity: 0.35; cursor: default; }

.commentaires-invitation { padding: 22px 24px; border-radius: var(--r-surface); background: var(--surface-2); margin-bottom: 8px; }
.commentaires-invitation p { margin: 0 0 16px; color: var(--gris); }
.commentaires-invitation strong { color: var(--encre); }
.commentaires-invitation .actions { gap: 18px; }

.commentaires-liste { list-style: none; margin: 0; padding: 0; }
.commentaire { display: flex; gap: 14px; padding: 24px 0; border-bottom: 1px solid var(--filet); }
.commentaire.nouveau { animation: commentaire-arrive 1.6s var(--sortie); }
@keyframes commentaire-arrive { from { background: var(--accent-pale); } }
.commentaire-corps { flex: 1; min-width: 0; }
.commentaire-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; font-size: 15px; }
.commentaire-tete time { color: var(--gris); font-size: 13.5px; }
.commentaire-moi { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-pale); padding: 1px 8px; border-radius: 10px; }
.commentaire-texte { font-size: 16.5px; line-height: 1.6; overflow-wrap: anywhere; }
.commentaire-texte p { margin: 0 0 0.7em; }
.commentaire-texte p:last-child { margin-bottom: 0; }
.commentaire-outils { display: flex; gap: 18px; }
.commentaire-attente { font-size: 12px; font-weight: 600; color: var(--gris); background: var(--surface-2); padding: 1px 8px; border-radius: 10px; }
.commentaire.en-attente .commentaire-texte { color: var(--gris); }
.commentaire-signaler { margin-top: 8px; border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; color: var(--gris); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.commentaire-signaler:hover { color: var(--encre); }
.signalement-extrait { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-petit); background: var(--surface-2); font-size: 15px; line-height: 1.5; color: var(--gris); overflow-wrap: anywhere; }
.signalement-extrait strong { color: var(--encre); margin-right: 4px; }
.commentaire-signaler:disabled { text-decoration: none; cursor: default; }
.commentaire-supprimer { margin-top: 8px; border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; color: var(--gris); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.commentaire-supprimer:hover { color: var(--rouge); }
.commentaires-aucun { padding: 28px 0; color: var(--gris); border-bottom: 1px solid var(--filet); }
@media (max-width: 600px) {
  .commentaire-formulaire .commentaire-avatar { display: none; }
  .commentaire-avatar { width: 34px; height: 34px; font-size: 14px; }
}

/* ——— Onboarding (/start) ———
   Une colonne au centre, une question par écran. En haut, trois traits pour les trois étapes et « Skip ».
   Les réponses sont de grandes cartes : on clique n'importe où dessus, la coche passe à droite. */

.onboarding { min-height: calc(100dvh - var(--haut-entete)); }
.onb-cadre { max-width: 640px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gouttiere) clamp(64px, 9vw, 112px); }
.onb-haut { display: flex; align-items: center; gap: 24px; margin-bottom: clamp(36px, 6vw, 64px); }
.onb-etapes { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.onb-etapes li { height: 3px; border-radius: 2px; background: var(--filet); transition: background 0.5s var(--sortie); }
.onb-etapes li.active { background: var(--encre); }
.onb-passer { border: 0; background: none; padding: 6px 0; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--gris); cursor: pointer; }
.onb-passer:hover { color: var(--encre); }
.onb-zone.entre > * { animation: arrivee 0.6s var(--sortie) both; }
.onb-zone.entre > :nth-child(2) { animation-delay: 0.05s; }
.onb-zone.entre > :nth-child(3) { animation-delay: 0.1s; }
.onb-zone.entre > :nth-child(4) { animation-delay: 0.15s; }
.onb-zone.entre > :nth-child(5) { animation-delay: 0.2s; }
.onb-zone h1 { font-size: clamp(32px, 4.4vw, 46px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.04; margin: 0 0 14px; text-wrap: balance; outline: none; }
.onb-sur { font-size: 14px; font-weight: 600; color: var(--accent); margin: 0 0 12px; }
.onb-intro { color: var(--gris); font-size: 17px; line-height: 1.55; margin: 0 0 28px; max-width: 36em; }
.onb-code { font-weight: 600; color: var(--gris); font-size: 0.82em; letter-spacing: 0; }
.onb-zone h1 .onb-code { font-size: 0.6em; }

.onb-choix { border: 0; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.onb-choix-ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.onb-question { font-size: 18px; font-weight: 700; margin: 0 0 12px; padding: 0; }
.onb-carte { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-surface); border: 1px solid var(--filet-fort); background: var(--surface); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.2s var(--sortie); }
.onb-carte:hover { background: var(--surface-2); }
.onb-carte:active { transform: scale(0.99); }
.onb-carte input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.onb-carte-texte { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.onb-carte strong { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.onb-carte strong em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-pale); padding: 2px 8px; border-radius: 10px; margin-left: 6px; vertical-align: 2px; }
.onb-carte small { color: var(--gris); font-size: 14.5px; line-height: 1.45; }
.onb-carte small:empty { display: none; }
.onb-coche { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--filet-fort); transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.onb-carte:has(input:checked) { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.onb-carte:has(input:checked) .onb-coche { border-color: var(--encre); background: var(--encre); box-shadow: inset 0 0 0 4px var(--surface); }
.onb-carte:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.onb-choix-ligne .onb-carte { padding: 14px 16px; }
.onb-choix-ligne .onb-carte strong { font-size: 15.5px; }

.onb-actions { display: flex; align-items: center; justify-content: flex-end; gap: 22px; flex-wrap: wrap; }
.onb-actions .bouton { min-width: 160px; }
.onb-actions .bouton:disabled { opacity: 0.35; cursor: default; }
.onb-actions .lien-souligne { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; margin-right: auto; }

.onb-extrait { display: flex; align-items: center; gap: 18px; padding: 20px; border-radius: var(--r-surface); background: var(--surface-2); margin: 24px 0 16px; }
.onb-lecture { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--encre); color: var(--papier); display: grid; place-items: center; cursor: pointer; transition: transform 0.2s var(--sortie); }
.onb-lecture:hover { transform: scale(1.05); }
.onb-lecture:active { transform: scale(0.96); }
.onb-lecture svg { width: 20px; height: 20px; grid-area: 1 / 1; }
.onb-lecture .i-lecture { margin-left: 3px; }
.onb-lecture .i-pause, .onb-lecture.joue .i-lecture { display: none; }
.onb-lecture.joue .i-pause { display: block; }
.onb-extrait-texte { display: flex; flex-direction: column; gap: 2px; }
.onb-extrait-texte small { color: var(--gris); }
.onb-transcription { font-size: 17px; line-height: 1.6; padding: 0 4px 0 18px; border-left: 2px solid var(--filet-fort); margin: 0 0 24px; }

.onb-depart { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: center; margin: 28px 0; }
.onb-pochette .pochette { width: 100%; box-shadow: var(--ombre-livre); }
.onb-depart-meta { font-size: 14px; color: var(--gris); margin: 0 0 6px; }
.onb-depart h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 10px; }
.onb-depart-texte p:last-child { color: var(--gris); margin: 0; line-height: 1.55; }
.onb-note { padding: 18px 20px; border-radius: var(--r-surface); background: var(--accent-pale); margin: 0 0 28px; }
.onb-note p { margin: 0 0 12px; line-height: 1.55; }
.onb-case { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
.onb-case input { width: 18px; height: 18px; accent-color: var(--accent); }
.onb-attente { display: grid; gap: 12px; }
.onb-attente i { display: block; height: 72px; border-radius: var(--r-surface); background: var(--surface-2); animation: pulsation 1.4s ease-in-out infinite; }
@keyframes pulsation { 50% { opacity: 0.5; } }

@media (max-width: 600px) {
  .onb-choix-ligne { grid-template-columns: minmax(0, 1fr); }
  .onb-depart { grid-template-columns: 110px minmax(0, 1fr); gap: 18px; }
  .onb-depart h2 { font-size: 22px; }
  .onb-actions { flex-direction: column-reverse; align-items: stretch; }
  .onb-actions .lien-souligne { margin: 0 auto; }
}
.compte-texte .lien-souligne { white-space: normal; }

/* Retour vers la page parente, au-dessus du titre (historique d'écoute → Episodes) */
.fil-retour { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--gris); margin-bottom: 14px; }
.fil-retour svg { width: 16px; height: 16px; transition: transform 0.3s var(--sortie); }
.fil-retour:hover { color: var(--encre); }
.fil-retour:hover svg { transform: translateX(-3px); }

/* ——— Fils de commentaires : un commentaire, ses réponses en retrait, et les réponses de l'auteur (Jérôme) ———
   L'auteur se reconnaît à sa photo, au badge « Author » et à un fond vert très léger. */
.commentaires-liste > .fil { border-bottom: 1px solid var(--filet); }
.fil > .commentaire { border-bottom: 0; }
.reponses { list-style: none; margin: -10px 0 14px 54px; padding: 0; border-left: 2px solid var(--filet); }
.reponses .commentaire { padding: 12px 0 12px 16px; border-bottom: 0; }
.reponses .commentaire-avatar { width: 32px; height: 32px; font-size: 13px; }
.zone-reponse:empty { display: none; }
.zone-reponse { margin: 0 0 18px 54px; }
.commentaire-formulaire.compact { padding-bottom: 0; border-bottom: 0; }
.commentaire-formulaire.compact .commentaire-avatar { width: 32px; height: 32px; font-size: 13px; }
.commentaire-boutons { display: inline-flex; align-items: center; gap: 14px; }
.commentaire-annuler { border: 0; background: none; padding: 0; font: inherit; font-size: 14px; cursor: pointer; }
.commentaire-avatar-photo { object-fit: cover; background: var(--surface-2); }
.commentaire-avatar-vide { background: var(--filet); }
.commentaire-supprime { margin: 6px 0 0; color: var(--gris); font-style: italic; font-size: 15px; }
.commentaire.supprime { padding-bottom: 14px; }
.commentaire.auteur { position: relative; }
.commentaire.auteur::before { content: ""; position: absolute; z-index: -1; inset: 6px -14px; border-radius: var(--r-surface); background: var(--accent-pale); }
.reponses .commentaire.auteur::before { inset: 4px -12px 4px 4px; }
.fil { position: relative; isolation: isolate; }
.commentaire-badge-auteur { font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--papier); background: var(--accent); padding: 2px 8px; border-radius: 10px; }
.commentaire-repondre { margin-top: 8px; border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--encre); cursor: pointer; }
.commentaire-repondre:hover { color: var(--accent); }
.commentaires-mode-auteur { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-petit); background: var(--accent-pale); font-size: 14px; color: var(--encre); }
.commentaire.nouveau::after { content: ""; position: absolute; z-index: -1; inset: 0 -14px; border-radius: var(--r-surface); background: var(--accent-pale); animation: halo 2.2s var(--sortie) forwards; }
@keyframes halo { to { opacity: 0; } }
.commentaire.nouveau { position: relative; animation: none; }
@media (max-width: 600px) {
  .reponses { margin-left: 18px; }
  .zone-reponse { margin-left: 18px; }
  .commentaire.auteur::before { inset: 4px -8px; }
}

/* Modifier un commentaire (auteur), et la mention « Edited » qui ouvre l'historique */
.commentaire-modifie { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--gris); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.commentaire-modifie:hover { color: var(--encre); }
.commentaire-modifier { margin-top: 8px; border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--encre); cursor: pointer; }
.commentaire-modifier:hover { color: var(--accent); }
.commentaire-edition { margin-top: 6px; display: grid; gap: 10px; }
.commentaire-edition textarea { width: 100%; min-height: 80px; resize: none; font: inherit; font-size: 16px; line-height: 1.55; padding: 10px 12px; border-radius: var(--r-petit); border: 1px solid var(--encre); background: var(--surface); color: var(--encre); box-shadow: 0 0 0 3px var(--accent-pale); outline: none; }
.commentaire-prevenir { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.commentaire-prevenir input { width: 17px; height: 17px; accent-color: var(--accent); }
.commentaire-edition .bouton { height: 38px; padding: 0 18px; font-size: 14.5px; }
.fenetre-versions { width: min(100% - 32px, 560px); }
.versions { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; max-height: 60vh; overflow: auto; }
.versions li { padding: 14px 16px; border-radius: var(--r-petit); background: var(--surface-2); }
.versions li.actuelle { background: var(--accent-pale); }
.version-date { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--gris); }
.version-texte p { margin: 0 0 0.6em; font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.version-texte p:last-child { margin: 0; }

/* ——— Notifications : la cloche de la barre du site et son panneau ——— */
.cloche { position: relative; margin-left: -10px; }
.cloche-bouton { position: relative; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--encre); display: grid; place-items: center; cursor: pointer; transition: background 0.2s; }
.cloche-bouton:hover, .cloche-bouton[aria-expanded="true"] { background: var(--surface-2); }
.cloche-bouton svg { width: 21px; height: 21px; transform-origin: 50% 15%; }
.cloche-bouton.sonne svg { animation: sonner 0.9s var(--sortie); }
@keyframes sonner { 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .cloche-bouton.sonne svg { animation: none; } }
.cloche-pastille { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rouge); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--papier); }
.cloche-pastille[hidden] { display: none; }
.cloche-panneau { position: absolute; z-index: 40; top: calc(100% + 10px); right: -8px; width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow: auto; background: var(--papier); border-radius: var(--r-surface); box-shadow: var(--ombre-flottante), 0 0 0 1px var(--filet); }
.cloche-panneau[hidden] { display: none; }
.cloche-tete { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px 10px; background: var(--papier); border-bottom: 1px solid var(--filet); }
.cloche-tete h2 { font-size: 16px; font-weight: 800; margin: 0; }
.cloche-tout-lu { border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--accent); cursor: pointer; }
.cloche-tout-lu[hidden] { display: none; }
.cloche-liste { list-style: none; margin: 0; padding: 6px; }
.cloche-notif { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: var(--r-petit); color: var(--encre); text-decoration: none; position: relative; }
.cloche-notif:hover { background: var(--surface-2); }
.cloche-notif.non-lue { background: var(--accent-pale); }
.cloche-notif.non-lue::after { content: ""; position: absolute; top: 50%; right: 12px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--accent); }
.cloche-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--surface-2); color: var(--gris); font-weight: 700; font-size: 14px; }
.cloche-texte { font-size: 14.5px; line-height: 1.45; padding-right: 16px; }
.cloche-texte i { font-style: normal; font-weight: 600; }
.cloche-texte small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--gris); }
.cloche-vide, .cloche-attente { padding: 18px 12px; color: var(--gris); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 760px) {
  .cloche { margin-left: auto; }
  .chat-lien { margin-left: auto; }
  .chat-lien + .cloche { margin-left: 0; }
  .cloche + .burger { margin-left: 0; }
  .cloche-panneau { position: fixed; top: calc(var(--haut-entete) + 6px); right: 16px; left: 16px; width: auto; }
}

/* Dans la barre du site, quand ce navigateur est connecté à l'administration */
.pastille-admin em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--papier); background: var(--encre); padding: 2px 7px; border-radius: 9px; margin-left: 6px; vertical-align: 1px; }

/* Fenêtre « Delete …? » */
.fenetre-confirmer { width: min(100% - 32px, 420px); }
.fenetre-confirmer h2 { margin: 0 0 10px; }
.confirmer-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.bouton.danger { background: var(--rouge); color: #fff; }
.bouton.danger:hover { background: #9c2f22; }
.cloche-tout { position: sticky; bottom: 0; display: block; padding: 12px 16px; border-top: 1px solid var(--filet); background: var(--papier); text-align: center; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.cloche-tout:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ——— Page Notifications ——— */
.notifs-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.notifs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.notif { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 18px 28px 18px 0; border-bottom: 1px solid var(--filet); }
.notif .cloche-avatar { width: 40px; height: 40px; font-size: 15px; }
.notif-corps p { margin: 0 0 4px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.notif-corps i { font-style: normal; font-weight: 600; }
.notif-corps time { font-size: 13.5px; color: var(--gris); }
.notif .lien-fleche { align-self: center; white-space: nowrap; font-size: 14.5px; }
.notif-point { position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--accent); }
.notif.non-lue .notif-corps p { font-weight: 500; }
.notifs-pages { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; font-size: 15px; color: var(--gris); }
.notifs-note { margin-top: 28px; }
@media (max-width: 600px) {
  .notif { grid-template-columns: 40px minmax(0, 1fr); padding-right: 22px; }
  .notif .lien-fleche { grid-column: 2; justify-self: start; }
}
.commentaires-suspendus .commentaire-repondre { display: none; }
.commentaires-suspension p { margin: 0 0 8px; }
.commentaires-suspension p:last-child { margin: 0; color: var(--gris); }

/* Onboarding : plusieurs choix (cases carrées) et le plan */
.onb-multi .onb-coche { border-radius: 6px; display: grid; place-items: center; }
.onb-multi:has(input:checked) .onb-coche { box-shadow: none; }
.onb-multi:has(input:checked) .onb-coche::after { content: ""; width: 6px; height: 11px; border-right: 2px solid var(--papier); border-bottom: 2px solid var(--papier); transform: rotate(45deg) translate(-1px, -1px); }
.onb-plan { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--filet); }
.onb-plan-ligne { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--filet); }
.onb-plan-ligne > :first-child:not(.onb-plan-texte) { width: 96px; }
.onb-plan-ligne:not(:has(> span)) { grid-template-columns: minmax(0, 1fr); }
.onb-plan-pochette .pochette { width: 100%; box-shadow: var(--ombre-livre); }
.onb-plan-livre .k-livre { width: 96px; }
.onb-plan-portrait img, .onb-plan-image img { width: 96px; height: 96px; object-fit: cover; display: block; }
.onb-plan-portrait img { border-radius: 50%; }
.onb-plan-image img { border-radius: var(--r-petit); }
.onb-plan-quoi { font-size: 13.5px; font-weight: 600; color: var(--gris); margin: 0 0 4px; }
.premier .onb-plan-quoi { color: var(--accent); }
.onb-plan-texte h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; margin: 0 0 6px; }
.onb-plan-texte h2 a { color: inherit; text-decoration: none; }
.onb-plan-texte h2 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.onb-plan-texte > p:not(.onb-plan-quoi) { color: var(--gris); font-size: 15.5px; line-height: 1.5; margin: 0 0 12px; }
.onb-plan-texte .onb-case { margin-bottom: 4px; }
.premier .onb-plan-texte h2 { font-size: 25px; }
@media (max-width: 520px) {
  .onb-plan-ligne { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
  .onb-plan-ligne > :first-child:not(.onb-plan-texte), .onb-plan-livre .k-livre { width: 72px; }
  .onb-plan-portrait img, .onb-plan-image img { width: 72px; height: 72px; }
}
.choix-cases { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-cases label { position: relative; cursor: pointer; }
.choix-cases input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choix-cases span { display: block; padding: 7px 14px; border-radius: 99px; font-size: 14.5px; color: var(--gris); box-shadow: inset 0 0 0 1px var(--filet-fort); transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.choix-cases input:checked + span { background: var(--encre); color: var(--papier); box-shadow: none; }
.choix-cases input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.onb-plan-livre .k-livre-haut, .onb-plan-livre .k-livre-bas { display: none; }
.onb-plan-livre .k-livre { justify-content: flex-end; padding: 10px; }
.onb-plan-livre .k-livre-titre { font-size: 15cqw; }

/* ——— Live lessons (/live) ——— */
.live-page { padding-bottom: clamp(64px, 9vw, 120px); }
.live-tete { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(48px, 7vw, 96px) 0; }
.live-sur { font-size: 15px; font-weight: 600; color: var(--accent); margin: 0 0 16px; }
.live-tete h1 { font-size: clamp(44px, 6.4vw, 88px); font-weight: 800; letter-spacing: -0.055em; line-height: 0.95; margin: 0 0 22px; text-wrap: balance; }
.live-intro { font-size: 20px; line-height: 1.5; color: var(--gris); margin: 0 0 28px; max-width: 30em; }
.live-note { font-size: 14.5px; color: var(--gris); margin: 14px 0 0; }
.live-ok { font-weight: 700; color: var(--accent); font-size: 17px; }
.live-photo { margin: 0; }
.live-photo img { width: 100%; height: auto; border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 760px) {
  /* Sur téléphone, tout l'en-tête est centré : la photo, puis le texte et les boutons. */
  .live-tete { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .live-photo { max-width: 260px; grid-row: 1; margin-inline: auto; }
  .live-intro { margin-inline: auto; text-wrap: pretty; }
  .live-tete .actions { justify-content: center; }
  .live-tete .avis-resume { justify-content: center; }
}

/* ——— Landing : « Four ways to learn with me » et « New on the site » ——— */
.ouverture-texte .ouverture-sur { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--gris); margin: 0 0 18px; }
.ouverture-texte .ouverture-sur img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.quatre { padding: clamp(72px, 10vw, 140px) 0 clamp(56px, 8vw, 110px); }
.quatre-tete { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 36px; }
.quatre-tete h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; margin: 0; max-width: 14em; }
.quatre-tete p { color: var(--gris); margin: 0; max-width: 26em; font-size: 16px; }
.quatre-lignes { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--encre); }
.quatre-ligne { border-bottom: 1px solid var(--filet); }
.quatre-ligne a { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr) 150px; gap: 32px; align-items: center; padding: clamp(22px, 3vw, 34px) 0; color: inherit; text-decoration: none; }
.quatre-mot { font-size: clamp(48px, 7.6vw, 112px); font-weight: 800; letter-spacing: -0.065em; line-height: 0.86; transition: transform 0.5s var(--sortie); }
/* En français, « Formations » est plus long que « Courses » : les quatre mots un peu plus petits, pour tenir dans leur colonne */
html[data-langue="fr"] .quatre-mot { font-size: clamp(42px, 6vw, 88px); }
/* … et la petite colonne de droite, plus longue en français, passe à la ligne au lieu de déborder sur le texte */
@media (min-width: 761px) {
  html[data-langue="fr"] .quatre-ligne a { grid-template-columns: minmax(0, 44%) minmax(0, 1fr) 180px; }
  html[data-langue="fr"] .quatre-fin { white-space: normal; text-align: right; }
}
.quatre-mot sup { font-size: 0.2em; font-weight: 600; letter-spacing: 0; color: var(--gris); vertical-align: top; margin-left: 10px; position: relative; top: 0.5em; }
.quatre-texte { font-size: 17px; line-height: 1.5; color: var(--gris); max-width: 26em; }
.quatre-texte b { display: block; color: var(--encre); font-size: 17px; margin-bottom: 4px; }
.quatre-fin { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 14px; color: var(--gris); white-space: nowrap; }
.quatre-fin .lien-fleche { font-size: 15px; }
.quatre-ligne a:hover .quatre-mot, .quatre-ligne a:focus-visible .quatre-mot { transform: translateX(12px); }
.quatre-ligne a:hover .lien-fleche { text-decoration-color: var(--encre); }
.quatre-ligne.bientot .quatre-mot { color: var(--filet-fort); }
.quatre-ligne.bientot .quatre-mot sup { color: var(--accent); }
.quatre-ligne.bientot a:hover .quatre-mot { color: var(--gris-doux); }
@media (prefers-reduced-motion: reduce) { .quatre-mot { transition: none; } }

.nouveautes { padding: clamp(64px, 9vw, 120px) 0; }
.nouveautes h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -0.04em; margin: 0 0 32px; }
.nouveautes-grille { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 40px; align-items: start; }
.nouveau-objet { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.nouveau-visuel { aspect-ratio: 4 / 3; border-radius: var(--r-surface); overflow: hidden; background: var(--surface-2); display: grid; place-items: center; margin-bottom: 16px; }
.nouveau-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--sortie); }
.nouveau-objet:hover .nouveau-visuel img { transform: scale(1.03); }
.nouveau-livre .k-livre { width: 44%; }
.nouveau-livre .k-livre .k-livre-haut, .nouveau-livre .k-livre .k-livre-bas { display: none; }
.nouveau-livre .k-livre-titre { font-size: 14cqw; }
.nouveau-quoi { font-size: 13.5px; font-weight: 600; color: var(--gris); margin-bottom: 6px; }
.nouveau-titre { font-size: 21px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 6px; }
.nouveau-texte { color: var(--gris); font-size: 15px; line-height: 1.5; }
/* Une seule nouveauté (la dernière histoire, tant qu'il n'y a ni formation ni article) : en large, l'image à gauche. */
.nouveautes-grille:has(> .nouveau-objet:only-child) { grid-template-columns: minmax(0, 1fr); }
.nouveau-objet:only-child { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(28px, 4vw, 56px); }
.nouveau-objet:only-child .nouveau-visuel { grid-row: 1 / -1; margin-bottom: 0; }
.nouveau-objet:only-child > :not(.nouveau-visuel) { grid-column: 2; }
.nouveau-objet:only-child .nouveau-quoi { grid-row: 2; }
.nouveau-objet:only-child .nouveau-titre { grid-row: 3; font-size: clamp(26px, 2.8vw, 36px); }
.nouveau-objet:only-child .nouveau-texte { grid-row: 4; font-size: 17px; max-width: 30em; }
@media (max-width: 700px) {
  .nouveau-objet:only-child { display: flex; }
  .nouveau-objet:only-child .nouveau-visuel { margin-bottom: 16px; }
}
@media (max-width: 1000px) {
  .nouveautes-grille { grid-template-columns: 1fr 1fr; }
  .nouveautes-grille > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .quatre-tete { flex-direction: column; align-items: start; }
  .quatre-ligne a { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .quatre-fin { flex-direction: row; align-items: center; justify-content: space-between; }
  .nouveautes-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) { .ouverture-texte .ouverture-sur { justify-content: center; } }
/* Sur ordinateur, la ligne de présentation tient sur une seule ligne, aussi en français (plus longue qu'en anglais). */
@media (min-width: 901px) { .ouverture-texte .ouverture-sur { white-space: nowrap; } }

.bouton-texte { border: 0; background: none; padding: 0; font: inherit; font-size: 14.5px; cursor: pointer; color: var(--encre); }
/* Visiteur : « Sign in » et « Create a free account » dans la barre ; sur téléphone, « Sign in » à côté du menu */
.nav-compte .bouton-nav { height: 36px; padding: 0 16px; font-size: 14.5px; margin-left: 10px; }
.compte-mobile { display: none; margin-left: auto; font-size: 15px; font-weight: 600; color: var(--encre); padding: 8px 10px; white-space: nowrap; }
/* Très petit téléphone (320 px) : la marque, « Sign in » et le menu tiennent sur la ligne. */
@media (max-width: 340px) { .entete .conteneur { gap: 12px; } .compte-mobile { padding-inline: 6px; } }
@media (max-width: 760px) {
  .compte-mobile { display: inline-block; }
  .compte-mobile + .burger { margin-left: 0; }
}
@media (max-width: 960px) and (min-width: 761px) { .nav > a { padding: 8px 8px; } .nav-compte .bouton-nav { padding: 0 12px; } }

/* Menu au prénom (remplace les onglets de l'espace membre) */
.bouton-compte .initiale, .menu-compte-nom .initiale { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--encre); color: var(--papier); display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700; }
.menu-perso { min-width: 250px; }
.menu-perso a { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.menu-perso a[aria-current="page"] { font-weight: 700; }
.pastille-perso { font-size: 11.5px; font-weight: 700; color: var(--papier); background: var(--accent); border-radius: 9px; padding: 1px 7px; white-space: nowrap; }
.pastille-perso[hidden] { display: none; }
.menu-compte-nom { display: flex; align-items: center; gap: 10px; }
.menu-compte-liens a { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Les minutes des sept derniers jours, en barres (Home). */
.acc-semaine { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 54px; }
.acc-semaine li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.acc-semaine i { display: block; width: 100%; height: calc(var(--h) * 34px); min-height: 3px; border-radius: 3px; background: var(--filet-fort); }
.acc-semaine li.atteint i { background: var(--accent); }
.acc-semaine li.auj i { outline: 1.5px solid var(--encre); outline-offset: 1px; }
.acc-semaine span[aria-hidden] { font-size: 11px; color: var(--gris); }
.acc-semaine li.auj span[aria-hidden] { color: var(--encre); font-weight: 700; }

/* La date d'un cours en tuile (« Sat 10 Oct ») : Home, My lessons. */
.pr-date { display: flex; flex-direction: column; align-items: center; padding: 5px 0 6px; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--filet); line-height: 1.1; }
.pr-date small { font-size: 11px; font-weight: 600; color: var(--gris); }
.pr-date b { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }

/* Les cartes cadeaux reçues (Purchases & gifts) : la carte elle-même, et ce qu'il en reste. */
.pu-cadeaux { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 26px; }
.pu-cadeau-carte { display: block; color: inherit; text-decoration: none; padding: 6px; border-radius: 16px; }
.pu-cadeau-carte .carte-cadeau { width: 100%; transform: rotate(-1.5deg); box-shadow: var(--ombre-livre); }
.pu-cadeau-carte:hover .carte-cadeau, .pu-cadeau-carte:focus-visible .carte-cadeau { transform: rotate(0deg) translateY(-2px); box-shadow: var(--ombre-flottante); }
.pu-cadeau-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 12px; }
.pu-cadeau-info b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.pu-cadeau-info span { color: var(--gris); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.pu-cadeau-info .bouton { margin-top: 8px; height: 38px; padding: 0 16px; font-size: 14px; }
.pu-cadeau-info .lien-souligne { margin-top: 4px; font-size: 14px; }
.pu-cadeaux li.attend .pu-cadeau-info b { color: var(--accent); }
.pu-cadeaux li.fini .carte-cadeau { opacity: 0.6; filter: grayscale(0.7); }

@media (max-width: 900px) {
  .pu-cadeaux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pu-cadeaux { grid-template-columns: minmax(0, 1fr); max-width: 360px; }
}

/* ——— Cohérence des titres (audit du 07/10) ———
   Une seule échelle pour tout le site :
   --titre-page    le titre de chaque page (Stories, Courses, Blog, Live, Profile, Account…)
   --titre-section les grands titres de section des pages longues (accueil, cours, guide)
   --titre-sous    les titres de rubrique (À lire, Commentaires, chapitres du guide…)
   --titre-bloc    les titres de bloc dans l'espace membre (réglages, profil)
   --chapo         la phrase d'introduction sous le titre de page
   --haut-page     l'espace entre la barre du site et le début de la page */
:root {
  --titre-page: clamp(44px, 6.4vw, 84px);
  --titre-section: clamp(34px, 4.4vw, 60px);
  --titre-sous: clamp(26px, 2.8vw, 36px);
  --titre-bloc: clamp(22px, 2.2vw, 28px);
  --chapo: clamp(17px, 1.5vw, 20px);
  --haut-page: clamp(40px, 6vw, 80px);
}
.catalogue-tete h1, .guide-tete h1, .texte-legal h1, .articles-tete h1, .live-tete h1, .espace-tete h1, .espace-invitation h1,
.acces-avantages h1, .article-tete h1, .hors-ligne h1 {
  font-size: var(--titre-page); font-weight: 800; letter-spacing: -0.055em; line-height: 0.95;
}
.demonstration h2, .section-titre, .auteur-texte h2, .inscription h2, .guide-fin h2, .quatre-tete h2, .introuvable h1 {
  font-size: var(--titre-section); font-weight: 800; letter-spacing: -0.05em; line-height: 1;
}
.recit-volet { font-size: var(--titre-page); }
.collection-tete h2, .a-lire h2, .nouveautes h2, .commentaires h2, .chapitre h2 {
  font-size: var(--titre-sous); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05;
}
.espace-bloc h2, .accueil h2, .texte-legal h2, .compte-bloc h2 { font-size: var(--titre-bloc); font-weight: 800; letter-spacing: -0.035em; }
.catalogue-tete p, .guide-tete p, .texte-legal .chapo, .espace-tete p, .articles-tete p, .live-intro { font-size: var(--chapo); line-height: 1.5; }
.catalogue-tete, .guide-tete, .texte-legal, .espace:not(html) { padding-top: var(--haut-page); }
.live-tete { padding-top: var(--haut-page); }
/* (le titre du carrousel : grand mais pas envahissant, deux lignes en général ; il ne doit pas lutter avec la photo) */
.diapo h2 { font-size: clamp(34px, 4.2vw, 60px); letter-spacing: -0.045em; line-height: 1; max-width: 14em; }
.diapo-chapeau { font-size: clamp(16px, 1.25vw, 18px); max-width: 40em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.diapo-infos { display: none; }
.catalogue-tete { align-items: flex-start; }
.catalogue-tete > :not(h1) { align-self: flex-end; }

/* Ce qui ne concerne qu'un visiteur, ou qu'un membre (classe posée par site.js une fois la session connue) */
html.membre [data-visiteur] { display: none !important; }
html:not(.membre) [data-membre] { display: none !important; }
/* Arrivée sur un commentaire précis : il ne se cache pas sous la barre du site */
.commentaire { scroll-margin-top: calc(var(--haut-entete) + 32px); }

/* Stories : un niveau demandé qui n'a pas encore d'histoires */
.niveau-absent { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin: 22px 0 0; padding: 20px 22px; border-radius: var(--r-surface); background: var(--surface-2); }
.niveau-absent[hidden] { display: none; }
.niveau-absent p { margin: 0; max-width: 46em; font-size: 15.5px; line-height: 1.5; color: var(--gris); }
.niveau-absent b { color: var(--encre); font-weight: 600; }

/* Pages de compte : le titre du formulaire est le titre de la page ; la colonne « Your free account » vient en second */
.acces-forme h1, .acces-message h1 { font-size: clamp(30px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; margin: 0 0 2px; }
.acces-avantages h2 { font-size: var(--titre-sous); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; margin: 0 0 16px; }

/* ——— Téléphone (audit du 07/10) : des zones à toucher d'au moins 44 px, sans changer l'apparence ———
   Une zone invisible (::after) agrandit la cible autour du lien ou du bouton. */
@media (max-width: 760px), (pointer: coarse) {
  .commentaire-outils button, .mot-acces button { position: relative; }
  .mot-acces button::after { content: ""; position: absolute; inset: -10px -6px; }
  /* Sous un commentaire : Reply, Report, Delete… plus hauts et mieux séparés */
  .commentaire-outils { gap: 6px; flex-wrap: wrap; }
  .commentaire-outils button { min-height: 44px; padding: 0 10px; margin-left: -10px; }
  .commentaire-outils button + button { margin-left: 0; }
}
/* Les menus de tri des histoires : 16 px, sinon l'iPhone zoome quand on les touche */
@media (max-width: 760px) {
  .choix select { font-size: 16px; min-height: 44px; }
}

/* Pages juridiques (CGV, mentions légales) */
.legal-sommaire { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 40px; font-size: 15px; font-weight: 600; }
.legal-sommaire a { color: var(--encre); text-underline-offset: 4px; }
.texte-legal .legal-version { font-size: var(--titre-sous); font-weight: 800; letter-spacing: -0.04em; margin: 56px 0 6px; padding-top: 28px; border-top: 1px solid var(--encre); }
.texte-legal .legal-version span { font-weight: 500; color: var(--gris); font-size: 0.6em; letter-spacing: 0; }
.texte-legal h3 { font-size: 19px; font-weight: 750; letter-spacing: -0.015em; margin: 32px 0 8px; }
.texte-legal section ul { margin: 0 0 16px; }
.a-completer { background: #fff4d6; color: #5a4300; padding: 1px 5px; border-radius: 4px; font-weight: 600; }
:root[data-theme="dark"] .a-completer { background: #3a2f0c; color: #ffe6a1; }
.texte-legal section .legal-maj { margin: 0 0 8px; }

/* « Lance-toi ! » : l'invitation à commencer, sur un vert d'eau doux (la bande vert forêt de l'inscription suit) */
.lance-toi {
  --lance-fond: #e3efe8; --lance-encre: #12392b; --lance-texte: #3d5c4f; --lance-trait: #1f5d47;
  background: var(--lance-fond); color: var(--lance-encre);
  padding: clamp(96px, 13vw, 176px) 0 clamp(104px, 14vw, 188px);
  text-align: center;
}
.lance-toi-contenu { display: flex; flex-direction: column; align-items: center; }
.lance-toi h2 { margin: 0; font-size: clamp(56px, 9vw, 120px); font-weight: 800; letter-spacing: -0.06em; line-height: 0.92; color: var(--lance-encre); }
/* Le trait vert sous le titre, comme sous le « é » de l'icône du site */
.lance-toi h2::after { content: ""; display: block; width: 0.9em; height: 0.075em; min-height: 5px; margin: 0.32em auto 0; border-radius: 99px; background: var(--lance-trait); }
.lance-toi p { margin: clamp(28px, 3vw, 40px) 0 0; max-width: 30em; font-size: var(--chapo); line-height: 1.55; color: var(--lance-texte); text-wrap: balance; }
.lance-toi .actions { justify-content: center; gap: 14px; margin-top: clamp(36px, 4vw, 52px); }
.lance-toi .bouton { height: 52px; padding: 0 28px; font-size: 16.5px; background: var(--lance-encre); color: #f3f8f5; }
.lance-toi .bouton:hover { background: #0b241b; }
.lance-toi .bouton.discret { background: transparent; color: var(--lance-encre); box-shadow: inset 0 0 0 1.5px rgba(18, 57, 43, 0.35); }
.lance-toi .bouton.discret:hover { background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1.5px rgba(18, 57, 43, 0.6); }
.lance-toi :focus-visible { outline-color: var(--lance-trait); }
/* La section verte remplace le filet entre le portrait et la suite */
.lance-toi + .inscription { border-top: 0; }
:root[data-theme="dark"] .lance-toi { --lance-fond: #17261f; --lance-encre: #e6f4ed; --lance-texte: rgba(230, 244, 237, 0.72); --lance-trait: #6cc39e; }
:root[data-theme="dark"] .lance-toi .bouton { background: #e6f4ed; color: #0e241b; }
:root[data-theme="dark"] .lance-toi .bouton:hover { background: #fff; }
:root[data-theme="dark"] .lance-toi .bouton.discret { background: transparent; color: #e6f4ed; box-shadow: inset 0 0 0 1.5px rgba(230, 244, 237, 0.35); }
@media (max-width: 520px) { .lance-toi .actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; } }

/* « Lance-toi ! » s'anime en arrivant à l'écran (site.js ajoute .visible) : les lettres montent une à une,
   le point d'exclamation rebondit, le trait se dessine depuis le centre, puis la phrase et les boutons. */
.lt-lettres { display: inline-block; white-space: nowrap; }
.lt-lettres > span { display: inline-block; }
.reveal-pret .lance-toi .lt-lettres > span { opacity: 0; transform: translateY(0.55em) rotate(4deg); }
.reveal-pret .lance-toi h2::after { transform: scaleX(0); }
.reveal-pret .lance-toi p, .reveal-pret .lance-toi .actions { opacity: 0; transform: translateY(18px); }
.reveal-pret .lance-toi.visible .lt-lettres > span { animation: lt-lettre .7s cubic-bezier(.2, .9, .25, 1.15) both; animation-delay: calc(var(--i) * 45ms); }
.reveal-pret .lance-toi.visible .lt-excl { animation: lt-excl .9s cubic-bezier(.3, 1.6, .4, 1) both .5s; transform-origin: 70% 90%; }
.reveal-pret .lance-toi.visible h2::after { animation: lt-trait .7s var(--sortie) both .75s; }
.reveal-pret .lance-toi.visible p { animation: lt-monte .8s var(--sortie) both .95s; }
.reveal-pret .lance-toi.visible .actions { animation: lt-monte .8s var(--sortie) both 1.1s; }
@keyframes lt-lettre { from { opacity: 0; transform: translateY(0.55em) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes lt-excl { 0% { opacity: 0; transform: translateY(0.6em) scale(.6) rotate(-14deg); } 60% { opacity: 1; transform: translateY(-0.08em) scale(1.12) rotate(8deg); } 100% { opacity: 1; transform: none; } }
@keyframes lt-trait { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lt-monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lance-toi .lt-lettres > span, .lance-toi h2::after, .lance-toi p, .lance-toi .actions { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Cours en visio : le questionnaire d'intérêt */
.live-questions { padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--filet); }
.live-questions-tete h2 { font-size: var(--titre-sous); font-weight: 800; letter-spacing: -0.04em; margin: 0; }
.live-questions-tete p { margin: 10px 0 0; color: var(--gris); font-size: var(--chapo); max-width: 36em; }
.live-form { display: flex; flex-direction: column; gap: 28px; margin-top: clamp(28px, 3vw, 40px); max-width: 760px; }
.live-form legend small, .live-message small { font-weight: 400; color: var(--gris); margin-left: 6px; }
.live-form .choix-cases span { padding: 9px 16px; }
.live-form .choix-cases input:checked + span { background: var(--accent-pale); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); font-weight: 600; }
.live-form .choix-cases input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.live-fuseau { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 14px; color: var(--gris); }
.live-fuseau select { max-width: 100%; height: 40px; padding: 0 10px; font: inherit; font-size: 15px; color: var(--encre); background: var(--surface); border: 1px solid var(--filet-fort); border-radius: var(--r-petit); }
.live-message { display: flex; flex-direction: column; gap: 9px; font-size: 14px; font-weight: 600; }
.live-message textarea { font: inherit; font-size: 16px; font-weight: 400; padding: 12px 14px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--surface); color: var(--encre); resize: vertical; }
.live-form-pied { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; }
.live-form-pied .bouton { height: 50px; padding: 0 26px; font-size: 16px; }
.live-form-note { font-size: 14px; color: var(--gris); }
@media (max-width: 620px) { .live-fuseau select { width: 100%; } .live-form-pied .bouton { width: 100%; } }

/* ——— Cours en visio : tarifs et réservation (page Live, classes rv-*) ——— */

    .rv-large { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
    /* En-tête */
    .rv-tete { padding-top: var(--haut-page); padding-bottom: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
    .rv-sur { font-size: 15px; font-weight: 600; color: var(--accent); margin: 0 0 14px; }
    .rv-tete h1 { font-size: var(--titre-page); font-weight: 800; letter-spacing: -0.055em; line-height: 0.95; margin: 0; text-wrap: balance; }
    .rv-tete p { font-size: var(--chapo); line-height: 1.5; color: var(--gris); margin: 22px 0 0; max-width: 32em; }
    .rv-tete .live-photo-img { width: 100%; max-width: 360px; justify-self: end; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
    .rv-preuves { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--gris); }
    .rv-preuves li::before { content: "✓ "; color: var(--accent); font-weight: 700; }

    /* Tarifs */
    .rv-section { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); border-top: 1px solid var(--filet); }
    .rv-section h2 { font-size: var(--titre-section); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin: 0; }
    .rv-section-tete { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; margin-bottom: clamp(28px, 3vw, 40px); }
    .rv-section-tete p { margin: 0; color: var(--gris); max-width: 28em; }
    .rv-essai { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding: 18px 22px; margin-bottom: 18px; border-radius: var(--r-surface); background: var(--accent-pale); color: var(--encre); }
    .rv-essai b { font-size: 17px; }
    .rv-essai span { font-size: 15px; }
    .rv-tarifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
    .rv-tarif { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 28px 26px 24px; border-radius: 14px; background: var(--surface-2); text-align: left; border: 0; font: inherit; color: inherit; cursor: pointer; transition: transform .25s var(--sortie), box-shadow .25s; }
    .rv-tarif:hover { transform: translateY(-3px); box-shadow: var(--ombre-flottante); }
    .rv-tarif .duree { font-size: 15px; font-weight: 600; color: var(--gris); }
    .rv-tarif .prix { font-size: clamp(40px, 4.4vw, 56px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin-top: 4px; }
    .rv-tarif .usage { font-size: 15px; color: var(--gris); line-height: 1.45; margin-top: 8px; }
    .rv-tarif .equiv { margin-top: auto; padding-top: 16px; font-size: 13.5px; color: var(--gris); }
    .rv-tarif.vedette { background: var(--encre); color: var(--papier); box-shadow: var(--ombre-flottante); }
    /* La carte mise en avant est à l'envers (fond d'encre, texte de papier) : ses petites lignes suivent, quel que soit
       le thème (clair, sombre, Halloween), au lieu d'un blanc ou d'un noir fixés. */
    .rv-tarif.vedette .duree, .rv-tarif.vedette .usage, .rv-tarif.vedette .equiv { color: color-mix(in srgb, var(--papier) 72%, transparent); }
    .rv-pastille { position: absolute; top: 18px; right: 18px; padding: 4px 10px; border-radius: 99px; background: #6cc39e; color: #0e241b; font-size: 12.5px; font-weight: 700; }
    .rv-regles { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--gris); }
    .rv-regles b { color: var(--encre); font-weight: 600; }

    /* Réservation */
    .rv-resa { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 4vw, 48px); align-items: start; }
    .rv-etape { margin-bottom: 28px; }
    .rv-etape h2 { font-size: 15px; font-weight: 700; margin: 0 0 12px; display: flex; gap: 10px; align-items: center; }
    .rv-etape h2 span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--encre); color: var(--papier); font-size: 13px; }
    .rv-fuseau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--gris); margin: -4px 0 14px; }
    .rv-fuseau select { height: 36px; padding: 0 8px; font: inherit; font-size: 14.5px; color: var(--encre); background: var(--surface); border: 1px solid var(--filet-fort); border-radius: var(--r-petit); max-width: 100%; }
    .rv-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
    .rv-jour { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: var(--r-petit); border: 0; background: var(--surface-2); font: inherit; color: inherit; cursor: pointer; min-height: 72px; justify-content: center; }
    .rv-jour small { font-size: 12px; color: var(--gris); text-transform: none; }
    .rv-jour b { font-size: 20px; letter-spacing: -0.03em; }
    .rv-jour i { font-style: normal; font-size: 11.5px; color: var(--accent); font-weight: 700; }
    .rv-jour:disabled { opacity: .35; cursor: default; }
    .rv-jour[aria-pressed="true"] { background: var(--encre); color: var(--papier); }
    .rv-jour[aria-pressed="true"] small, .rv-jour[aria-pressed="true"] i { color: inherit; opacity: .8; }
    .rv-semaine { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14.5px; font-weight: 600; }
    .rv-semaine button { border: 0; background: none; font: inherit; color: var(--encre); cursor: pointer; padding: 8px 4px; text-decoration: underline; text-underline-offset: 4px; }
    .rv-semaine button:disabled { color: var(--filet-fort); text-decoration: none; cursor: default; }
    .rv-heures { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
    .rv-heure { height: 46px; border-radius: var(--r-petit); border: 0; box-shadow: inset 0 0 0 1px var(--filet-fort); background: var(--surface); font: inherit; font-size: 15.5px; font-weight: 600; color: var(--encre); cursor: pointer; font-variant-numeric: tabular-nums; }
    .rv-heure:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
    .rv-heure[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: none; }
    .rv-vide { color: var(--gris); font-size: 15px; margin: 0; }
    .rv-recap { position: sticky; top: calc(var(--haut-entete) + 20px); padding: 24px; border-radius: 14px; background: var(--surface-2); }
    .rv-recap h2 { margin: 0 0 14px; font-size: 18px; font-weight: 750; }
    .rv-recap dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 15px; }
    .rv-recap dt { color: var(--gris); }
    .rv-recap dd { margin: 0; font-weight: 600; text-align: right; }
    .rv-recap .total { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--filet-fort); display: flex; justify-content: space-between; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
    .rv-case { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 14px; font-size: 13.5px; line-height: 1.45; cursor: pointer; }
    .rv-case input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
    .rv-case a { color: var(--encre); }
    /* Élève particulier, et membre interdit de cours. */
    .rv-particulier { margin: -4px 0 12px; padding: 10px 12px; border-radius: var(--r-petit); background: var(--accent-pale); color: var(--encre); font-size: 13.5px; line-height: 1.45; }
    .rv-bloque { padding: 28px; border-radius: 16px; background: var(--surface-2); font-size: 16px; line-height: 1.5; max-width: 560px; }
    .rv-bloque p { margin: 0; }
    .rv-bloque p + p { margin-top: 6px; color: var(--gris); }
    /* Le coupon, dans le récapitulatif de la réservation. */
    .rv-coupon { margin-top: 12px; font-size: 14px; }
    .rv-coupon-form { display: flex; gap: 8px; margin-top: 8px; }
    .rv-coupon-form input, .cmd-coupon-ligne input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--papier); color: var(--encre); font: inherit; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
    .rv-coupon-form input:focus, .cmd-coupon-ligne input:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px var(--surface-2); }
    .rv-coupon-form input::placeholder, .cmd-coupon-ligne input::placeholder { text-transform: none; letter-spacing: 0; }
    .rv-coupon-ok { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 4px; color: var(--accent); font-weight: 600; }
    .rv-coupon .erreur { margin: 8px 0 0; }
    .rv-recap .total s, .cmd-recap s { color: var(--gris); font-weight: 500; margin-right: 4px; }
    /* Annuler un cours : la raison. */
    .lb-annuler fieldset { border: 0; padding: 0; margin: 14px 0 0; }
    .lb-annuler legend { font-weight: 700; font-size: 15px; padding: 0; }
    .lb-annuler .rv-case { margin-top: 10px; font-size: 15px; }
    .lb-annuler-mots { display: block; margin-top: 14px; font-size: 14px; }
    .lb-annuler-mots span { display: block; margin-bottom: 6px; font-weight: 600; }
    .lb-annuler-mots small { font-weight: 400; color: var(--gris); }
    .lb-annuler-mots textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--papier); color: var(--encre); font: inherit; resize: vertical; }
    .lb-annuler .erreur { margin: 12px 0 0; }
    .rv-recap .bouton { width: 100%; height: 50px; margin-top: 18px; font-size: 16px; }
    .rv-recap .bouton:disabled { opacity: .4; cursor: not-allowed; }
    .rv-recap .note { margin: 12px 0 0; font-size: 13px; color: var(--gris); line-height: 1.45; }
    .rv-segments { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-petit); background: var(--surface-2); flex-wrap: wrap; }
    .rv-segments button { border: 0; background: none; font: inherit; padding: 9px 16px; border-radius: 4px; font-size: 15px; color: var(--gris); cursor: pointer; }
    .rv-segments button[aria-pressed="true"] { background: var(--surface); color: var(--encre); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

    /* Confirmation */

    @media (max-width: 900px) {
      .rv-tete { grid-template-columns: minmax(0, 1fr); }
      .rv-tete .live-photo-img { display: none; }
      .rv-tarifs { grid-template-columns: minmax(0, 1fr); }
      .rv-resa { grid-template-columns: minmax(0, 1fr); }
      .rv-recap { position: static; }
    }
    @media (max-width: 520px) {
      .rv-jours { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
  

/* ——— Cours en visio, réservations fermées (classes lb-*) ——— */
.live-preuve { font-size: 14.5px; color: var(--gris); margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--filet); max-width: 30em; }
.live-preuve:empty, .live-note:empty { display: none; }
.lb-etapes-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: etape; }
.lb-etapes-liste li { counter-increment: etape; display: flex; flex-direction: column; gap: 8px; padding-top: 21.5px; background: linear-gradient(var(--encre), var(--encre)) left top / 100% 1.5px no-repeat; }
.lb-etapes-liste li::before { content: counter(etape); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 50%; background: var(--accent-pale); color: var(--accent); font-weight: 800; font-size: 16px; }
.lb-etapes-liste b { font-size: clamp(19px, 1.7vw, 22px); letter-spacing: -0.025em; }
.lb-etapes-liste span { color: var(--gris); font-size: 16px; line-height: 1.55; max-width: 24em; }
.rv-tarif.fixe { cursor: default; }
.rv-tarif.fixe:hover { transform: none; box-shadow: none; }
.rv-tarif.vedette.fixe:hover { box-shadow: var(--ombre-flottante); }
.lb-horaires-liste { list-style: none; margin: 0; padding: 0; max-width: 820px; border-top: 1px solid var(--filet); }
.lb-horaires-liste li { display: grid; grid-template-columns: minmax(0, 13em) auto minmax(0, 1fr); align-items: baseline; gap: 8px 24px; padding: clamp(18px, 2.2vw, 26px) 0; border-bottom: 1px solid var(--filet); }
.lb-horaires-liste b { font-size: clamp(18px, 1.6vw, 21px); letter-spacing: -0.02em; }
.lb-h { font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; }
.lb-paris { justify-self: end; font-size: 14.5px; color: var(--gris); text-align: right; }
.lb-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 22px 40px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-surface); background: var(--surface-2); }
.lb-q-tete h2 { font-size: var(--titre-bloc, 24px); font-weight: 800; letter-spacing: -0.035em; margin: 0; }
.lb-q-tete p { margin: 8px 0 0; color: var(--gris); max-width: 34em; }
.lb-q-resume { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 28px; margin: 0; padding-top: 20px; border-top: 1px solid var(--filet); font-size: 16px; }
.lb-q-resume dt { color: var(--gris); font-size: 14.5px; padding-top: 1px; }
.lb-q-resume dd { margin: 0; }
.lb-q > .bouton { grid-column: 2; grid-row: 1; white-space: nowrap; }
.live-questions:has(.lb-q) { padding-bottom: 0; border-top: 0; }
.lb-appel { margin-top: clamp(56px, 7vw, 96px); padding: clamp(36px, 6vw, 80px) clamp(24px, 6vw, 80px); border-radius: 14px; background: var(--accent-pale); }
.lb-appel h2 { font-size: var(--titre-section); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin: 0; }
.lb-appel p { margin: 16px 0 28px; font-size: var(--chapo); line-height: 1.5; color: var(--gris); max-width: 30em; }
@media (max-width: 760px) {
  .lb-etapes-liste { grid-template-columns: minmax(0, 1fr); }
  .lb-horaires-liste li { grid-template-columns: minmax(0, 1fr) auto; }
  .lb-paris { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .lb-q { grid-template-columns: minmax(0, 1fr); }
  .lb-q > .bouton { grid-column: 1; grid-row: auto; justify-self: start; }
  .lb-q-resume { grid-row: auto; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lb-q-resume dd + dt { margin-top: 10px; }
}

/* Apparitions de la page Live (live.js ajoute .vu), dans l'esprit de l'accueil : l'en-tête se compose,
   le filet des étapes se trace, les cartes et les lignes arrivent une à une. « translate » plutôt que
   « transform », pour laisser intact le survol des cartes de prix. */
.apparitions .live-photo.rev { transform: none; opacity: 1; }
/* La photo arrive en douceur : elle apparaît, monte un peu et se redresse, comme un bonjour (sans rideau ni découpe). */
.apparitions .live-photo.rev img { opacity: 0; transform: translateY(16px) rotate(-3deg) scale(0.96); filter: blur(6px); transition: opacity 0.9s ease 0.15s, transform 1.5s var(--sortie) 0.15s, filter 1s ease 0.15s; }
.apparitions .live-photo.rev.vu img { opacity: 1; transform: none; filter: none; }
.apparitions .lb-etapes-liste.rev, .apparitions .rv-tarifs.rev, .apparitions .lb-horaires-liste.rev { opacity: 1; transform: none; }
.apparitions .lb-etapes-liste.rev li { background-size: 0% 1.5px; transition: background-size 1.1s var(--sortie); }
.apparitions .lb-etapes-liste.rev li > *, .apparitions .lb-etapes-liste.rev li::before { opacity: 0; translate: 0 18px; transition: opacity .8s ease, translate 1s var(--sortie); }
.apparitions .lb-etapes-liste.rev.vu li { background-size: 100% 1.5px; }
.apparitions .lb-etapes-liste.rev.vu li > *, .apparitions .lb-etapes-liste.rev.vu li::before { opacity: 1; translate: 0 0; }
.apparitions .lb-etapes-liste.rev li:nth-child(2) { transition-delay: .15s; }
.apparitions .lb-etapes-liste.rev li:nth-child(3) { transition-delay: .3s; }
.apparitions .lb-etapes-liste.rev li:nth-child(1) > *, .apparitions .lb-etapes-liste.rev li:nth-child(1)::before { transition-delay: .3s; }
.apparitions .lb-etapes-liste.rev li:nth-child(2) > *, .apparitions .lb-etapes-liste.rev li:nth-child(2)::before { transition-delay: .45s; }
.apparitions .lb-etapes-liste.rev li:nth-child(3) > *, .apparitions .lb-etapes-liste.rev li:nth-child(3)::before { transition-delay: .6s; }
.apparitions .rv-tarifs.rev > .rv-tarif { opacity: 0; translate: 0 36px; transition: opacity .9s ease, translate 1.1s var(--sortie), transform .25s var(--sortie), box-shadow .25s; transition-delay: calc(var(--i, 0) * 110ms), calc(var(--i, 0) * 110ms), 0s, 0s; }
.apparitions .rv-tarifs.rev.vu > .rv-tarif { opacity: 1; translate: 0 0; }
.apparitions .lb-horaires-liste.rev { border-top-color: transparent; position: relative; }
.apparitions .lb-horaires-liste.rev::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--filet); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--sortie); }
.apparitions .lb-horaires-liste.rev.vu::before { transform: scaleX(1); }
.apparitions .lb-horaires-liste.rev > li { opacity: 0; translate: -24px 0; transition: opacity .8s ease, translate 1s var(--sortie); transition-delay: calc(.2s + var(--i, 0) * 120ms); }
.apparitions .lb-horaires-liste.rev.vu > li { opacity: 1; translate: 0 0; }

/* ——— Avis des élèves (public/avis.js, page /review) ——— */
.avis-etoiles { color: var(--encre); letter-spacing: 0.08em; font-size: 15px; white-space: nowrap; }
.avis-etoiles span { color: var(--filet-fort); }
.avis-tete { display: flex; justify-content: space-between; align-items: end; gap: 12px 40px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px); }
.avis-tete h2 { font-size: var(--titre-section); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin: 0; }
.avis-tete p { margin: 0; color: var(--gris); font-size: 15.5px; display: flex; align-items: center; gap: 8px; }
.avis-tete p b { color: var(--encre); }
/* La galerie : une carte à la fois, la suivante dépasse à droite. La rangée va jusqu'aux bords de l'écran (--bord-g et
   --bord-d, mesurés par avis.js), alignée sur la colonne. Un long avis s'arrête au bout de 7 lignes ; « + » l'ouvre. */
.avis-galerie { --bord-g: 0px; --bord-d: 0px; }
.avis-piste {
  list-style: none; margin: 0 calc(-1 * var(--bord-d)) 0 calc(-1 * var(--bord-g)); padding: 0 var(--bord-d) 0 var(--bord-g);
  display: grid; grid-auto-flow: column; grid-auto-columns: min(700px, calc(100vw - 2 * var(--gouttiere) - 28px)); gap: clamp(12px, 1.6vw, 20px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bord-g) var(--bord-d); scrollbar-width: none;
}
.avis-piste::-webkit-scrollbar { display: none; }
.avis-fiche { scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 40px) clamp(22px, 2.6vw, 32px); border-radius: 18px; background: var(--surface-2); }
.avis-extrait { margin: 0; font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; }
.avis-pied { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; font-size: 14.5px; }
.avis-pied .avis-verifie { margin-left: 4px; }
.avis-pied .avis-date, .avis-fenetre footer .avis-date { display: block; color: var(--gris); font-size: 13.5px; margin-top: 2px; }
.avis-plus { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--encre); color: var(--papier); transition: transform 0.25s var(--sortie), background 0.2s; }
.avis-plus:hover { background: var(--action-fonce); transform: scale(1.06); }
.avis-plus:active { transform: scale(0.94); }
.avis-plus svg { width: 16px; height: 16px; }
.avis-plus[hidden] { display: none; }
.avis-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 32px; margin-top: 20px; }
.avis-fleches { display: flex; gap: 10px; margin-left: auto; }
.avis-fleche { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--surface-2); color: var(--encre); transition: background 0.2s, opacity 0.2s, transform 0.2s var(--sortie); }
.avis-fleche:hover:not(:disabled) { background: var(--filet); }
.avis-fleche:active:not(:disabled) { transform: scale(0.94); }
.avis-fleche:disabled { opacity: 0.35; cursor: default; }
.avis-fleche svg { width: 18px; height: 18px; }
:is(.avis-fleche, .avis-plus):focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.avis-galerie.immobile .avis-fleches { display: none; }
.avis-fenetre { width: min(640px, calc(100vw - 32px)); max-height: min(86dvh, 820px); padding: clamp(28px, 4vw, 44px); border-radius: 18px; overflow: auto; overscroll-behavior: contain; }
.avis-fenetre::backdrop { background: rgba(23, 24, 28, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.avis-entier { margin: 18px 0 24px; font-size: 18px; font-weight: 500; line-height: 1.55; letter-spacing: -0.01em; }
.avis-entier p { margin: 0 0 0.9em; }
.avis-fenetre footer { font-size: 14.5px; padding-top: 16px; border-top: 1px solid var(--filet); }
@media (prefers-reduced-motion: reduce) { .avis-plus, .avis-fleche { transition: none; } }
.avis-invite { margin: 22px 0 0; color: var(--gris); }
.avis-comment { margin-top: 20px; font-size: 14px; color: var(--gris); }
.avis-bas .avis-comment { margin: 9px 0 0; }
.avis-comment summary { cursor: pointer; width: fit-content; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--filet-fort); }
.avis-comment p { max-width: 70ch; margin: 10px 0 0; line-height: 1.55; }
.cp-section.avis-section { padding-bottom: clamp(60px, 8vw, 110px); }

.avis-page { padding-top: clamp(28px, 6vw, 72px); padding-bottom: clamp(48px, 8vw, 96px); }
.avis-page > #avis { max-width: 680px; }
.avis-carte h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.05em; line-height: 1.02; margin: 0 0 12px; text-wrap: balance; }
.avis-intro, .avis-aide { color: var(--gris); font-size: 17px; line-height: 1.55; margin: 0 0 28px; }
.avis-sur { margin: 0 0 6px; color: var(--gris); font-size: 15px; }
.avis-etat { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.avis-etat.published { color: var(--accent); }
.avis-etat.refused { color: var(--rouge); }
.avis-texte { margin: 0 0 24px; padding: 22px; border-radius: var(--r-surface); background: var(--surface-2); }
.avis-texte p { margin: 10px 0; font-size: 17px; line-height: 1.55; }
.avis-texte footer { font-size: 14.5px; font-weight: 600; }
.avis-forme { display: grid; gap: 22px; }
.avis-note { border: 0; margin: 0; padding: 0; }
.avis-note legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
/* Les étoiles : cinq boutons radio, de 5 à 1 dans le code, affichés de 1 à 5 (row-reverse) pour que le survol
   allume aussi les étoiles d'avant. */
.avis-choix { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.avis-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.avis-choix label { cursor: pointer; font-size: 34px; line-height: 1; color: var(--filet-fort); transition: color 0.12s ease, transform 0.12s ease; }
.avis-choix label::before { content: "★"; }
.avis-choix label:hover, .avis-choix label:hover ~ label, .avis-choix input:checked ~ label { color: var(--encre); }
.avis-choix input:focus-visible + label { outline: 2px solid var(--encre); outline-offset: 2px; border-radius: 4px; }
.avis-choix label:active { transform: scale(0.92); }
.avis-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.avis-forme textarea { font: inherit; font-size: 16px; line-height: 1.55; padding: 12px 14px; border-radius: var(--r-petit); border: 1px solid var(--filet-fort); background: var(--papier); color: var(--encre); resize: vertical; min-height: 150px; }
.avis-forme textarea:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px var(--surface-2); }
.facultatif { font-weight: 400; color: var(--gris); }
.avis-accord { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; cursor: pointer; }
.avis-accord input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--encre); flex: none; }
.avis-regles { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--filet); color: var(--gris); font-size: 13.5px; line-height: 1.55; }
.avis-verifie { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; vertical-align: 1px; }
.avis-verifie svg { width: 14px; height: 14px; fill: var(--accent); }

/* Live lessons, sans compte : la carte qui remplace l'agenda */
.rv-invite { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-surface); background: var(--surface-2); }
.rv-invite h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; margin: 0 0 12px; text-wrap: balance; }
.rv-invite-texte > p { margin: 0 0 18px; color: var(--gris); font-size: 17px; line-height: 1.55; max-width: 34em; }
.rv-invite-texte .rv-invite-dispo { display: flex; align-items: center; gap: 9px; color: var(--accent); font-weight: 700; font-size: 15.5px; }
.rv-point { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); animation: rv-pouls 2.2s ease-out infinite; }
@keyframes rv-pouls { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .rv-point { animation: none; } }
.rv-invite .actions { margin-top: 24px; }
.rv-invite-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rv-invite-liste li { display: grid; gap: 3px; padding: 14px 0; border-top: 1px solid var(--filet-fort); }
.rv-invite-liste li:first-child { border-top: 0; padding-top: 0; }
.rv-invite-liste b { font-size: 15.5px; }
.rv-invite-liste span { color: var(--gris); font-size: 15px; line-height: 1.5; }
@media (max-width: 760px) { .rv-invite { grid-template-columns: minmax(0, 1fr); } }


/* La ligne de résumé des avis, près des boutons (à partir de 3 avis) */
.avis-resume { margin: 16px 0 0; font-size: 15px; }
.avis-resume a { display: inline-flex; align-items: baseline; gap: 5px; flex-wrap: wrap; color: var(--gris); text-decoration: none; }
.avis-resume a:hover { color: var(--encre); }
.avis-resume a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.avis-resume b { color: var(--encre); }
.avis-resume-etoile { color: var(--encre); }
.avis-resume-resa { margin: -14px 0 22px; }
.cp-avis-resume { margin-top: 18px; }
/* Elle arrive après le reste (titre, boutons), au lieu d'apparaître avant eux pendant leur animation. */
.avis-resume:not([hidden]) { animation: avis-resume-entree 0.6s var(--sortie) 0.7s both; }
@keyframes avis-resume-entree { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .avis-resume:not([hidden]) { animation: none; } }

/* Live lessons : « How it works » en quatre étapes, et les questions */
.lb-etapes-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .lb-etapes-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .lb-etapes-liste { grid-template-columns: minmax(0, 1fr); } }
.rv-faq { border-top: 1px solid var(--filet); max-width: 860px; }
.rv-faq details { border-bottom: 1px solid var(--filet); }
.rv-faq summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; letter-spacing: -0.02em; cursor: pointer; }
.rv-faq summary::-webkit-details-marker { display: none; }
.rv-faq summary::after { content: "+"; font-weight: 400; font-size: 26px; line-height: 0.8; color: var(--gris); transition: transform 0.3s var(--sortie); }
.rv-faq details[open] summary::after { transform: rotate(45deg); }
.rv-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.rv-faq details p { margin: -6px 0 22px; color: var(--gris); font-size: 16.5px; line-height: 1.6; max-width: 40em; }
.rv-faq-fin { margin: 22px 0 0; color: var(--gris); }

/* ——— Contact ——— */
.contact-page { padding-top: clamp(28px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 110px); }
.contact-tete { max-width: 640px; margin-bottom: clamp(28px, 4vw, 48px); }
.contact-tete h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin: 0 0 14px; }
.contact-tete p { font-size: 19px; color: var(--gris); line-height: 1.55; margin: 0; }
.contact-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.contact-aide h2 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.contact-aide ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.contact-aide a { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--filet); text-decoration: none; color: var(--encre); }
.contact-aide a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.contact-aide span { color: var(--gris); font-size: 14.5px; }
.contact-zone { padding: clamp(22px, 3vw, 34px); border-radius: var(--r-surface); background: var(--surface-2); }
.contact-forme { display: grid; gap: 18px; }
.contact-forme .champ > span { font-size: 14px; font-weight: 600; }
.contact-forme select, .contact-forme textarea { font: inherit; font-size: 16px; padding: 11px 13px; border-radius: var(--r-petit); border: 1px solid var(--filet-fort); background: var(--papier); color: var(--encre); width: 100%; }
.contact-forme textarea { line-height: 1.55; resize: vertical; min-height: 170px; }
.contact-forme select:focus, .contact-forme textarea:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px var(--surface); }
.contact-ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contact-moi { margin: 0; color: var(--gris); }
.contact-moi b { color: var(--encre); font-weight: 600; }
.contact-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-direct { margin: 18px 0 0; font-size: 14.5px; color: var(--gris); }
.contact-merci h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.04em; margin: 0 0 10px; }
.contact-merci p { color: var(--gris); font-size: 17px; line-height: 1.55; margin: 0 0 22px; }
.contact-merci:focus { outline: none; }
@media (max-width: 760px) { .contact-grille, .contact-ligne { grid-template-columns: minmax(0, 1fr); } }

/* Le coupon dans le récapitulatif : le champ prend la place, « Apply » reste un petit bouton à côté
   (la règle « .rv-recap .bouton », faite pour le grand bouton de paiement, ne doit pas s'y appliquer). */
.rv-recap .rv-coupon-form { align-items: stretch; margin-top: 10px; }
.rv-recap .rv-coupon-form input { height: 42px; }
.rv-recap .rv-coupon-form .bouton { flex: none; width: auto; height: 42px; margin-top: 0; padding: 0 18px; font-size: 15px; }

/* Le choix du fuseau horaire (public/fuseaux.js) : un bouton, puis une recherche */
.tz { position: relative; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--gris); }
.tz-bouton { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--papier); color: var(--encre); font: inherit; font-size: 14.5px; cursor: pointer; max-width: 100%; }
.tz-bouton:hover { border-color: var(--gris-doux); }
.tz-bouton:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.tz-bouton b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-heure { color: var(--gris); font-variant-numeric: tabular-nums; }
.tz-bouton svg { width: 15px; height: 15px; color: var(--gris); flex: none; transition: transform 0.2s ease; }
.tz-bouton[aria-expanded="true"] svg { transform: rotate(180deg); }
.tz-panneau { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(380px, calc(100vw - 32px)); padding: 10px; border-radius: var(--r-surface); background: var(--surface); box-shadow: var(--ombre-flottante), 0 0 0 1px var(--filet); }
.tz-recherche { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--papier); color: var(--encre); font: inherit; font-size: 15.5px; }
.tz-recherche:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px var(--surface-2); }
.tz-liste { list-style: none; margin: 8px 0 0; padding: 0; max-height: 290px; overflow-y: auto; overscroll-behavior: contain; }
.tz-liste li[role="option"] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 10px; border-radius: var(--r-petit); cursor: pointer; color: var(--encre); }
.tz-liste li[role="option"] b { font-weight: 600; font-size: 14.5px; }
.tz-liste li[role="option"] b small { font-weight: 600; font-size: 11.5px; color: var(--accent); margin-left: 6px; }
.tz-liste li[role="option"] span { font-size: 13px; color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tz-liste li.actif, .tz-liste li[role="option"]:hover { background: var(--surface-2); }
.tz-liste li[aria-selected="true"] b::after { content: " ✓"; color: var(--accent); }
.tz-vide { padding: 12px 10px; font-size: 14px; color: var(--gris); }
.rv-fuseau .tz { margin: -4px 0 14px; }
@media (max-width: 620px) { .tz { width: 100%; } .tz-bouton { width: 100%; } }

/* ——— Pas de saut à l'affichage ———
   Le pied de page commence sous le bas de l'écran : ce qui arrive juste après l'affichage (avis, créneaux, listes)
   allonge la page sans le faire remonter puis redescendre sous les yeux. (La page d'une histoire tient dans l'écran.) */
html:not(.page-episode) body > main { min-height: calc(100dvh - var(--haut-entete)); }
/* Mes mots en révision : le pied de page suit la carte, sans grand vide entre les deux */
html:not(.page-episode) body > main:has(.espace.en-revision) { min-height: 0; }
/* Blog et Courses vides (envoyés construits par le serveur, rien n'arrive après) : le pied de page suit le contenu. */
html:not(.retour-position) body > main:has(.ct-attente, .blog-attente) { min-height: 0; }
/* Au rechargement, le contenu garde la hauteur qu'avait la page le temps de se construire, pied de page dessous (theme.js). */
html.retour-position body > main { min-height: var(--hauteur-retour); }
/* Une page qui se construit après l'affichage (voir theme.js) reste invisible le temps que son script sache quoi montrer. */
.en-attente main { visibility: hidden; }

/* ——— Sans JavaScript ———
   « Stories », les cours et le blog arrivent construits par le serveur et se lisent sans JavaScript ; écouter une
   histoire, suivre une leçon et le compte en ont besoin. La barre du haut et le pied de page (écrits par le serveur)
   restent utilisables ; ce qui ne marcherait pas est caché (menu du téléphone, choix de l'apparence, « Back to top »,
   menu du compte, cloche, formulaires, filtres des histoires, rubriques du blog, niveaux et boutons d'achat des cours : ils passent
   tous par JavaScript), et une ligne explique pourquoi. Les formulaires de compte envoient en POST : jamais d'e-mail
   ni de mot de passe dans l'adresse. */
html:not(.js) :is(.burger, .theme, .haut-de-page, .cloche, button.bouton-compte, form, .st-trouver, .rubriques, .ct-niveaux-liste, button[data-action], button[data-prevenir]) { display: none !important; }
.sans-js { margin: 0; padding: 12px 16px; background: var(--surface-2); color: var(--encre); font-size: 15px; text-align: center; }
/* Les couvertures qui attendent leur photo pour apparaître en fondu (le script s'en charge) : sans lui, tout de suite. */
html:not(.js) .pochette.fondu > *, html:not(.js) .pochette.fondu::after { opacity: 1; }
/* Le blog (envoyé construit) : les articles sont montrés tout de suite, et le premier article à la une, sans les
   commandes du slider. */
html:not(.js) .reveler { opacity: 1; transform: none; }
html:not(.js) .diapo:first-child { visibility: visible; opacity: 1; }
html:not(.js) .diapo:first-child .diapo-texte > * { opacity: 1; transform: none; }
html:not(.js) .diapo:first-child .diapo-fond img { transform: none; }
html:not(.js) .blog-commandes { display: none; }

/* ——— L'annonce du moment (src/annonces.mjs), tout en haut des pages ——— */
.bandeau-annonce { position: relative; background: var(--encre); color: var(--papier); overflow: hidden; transition: height 0.25s var(--sortie), opacity 0.2s; }
.bandeau-annonce.fermee { height: 0 !important; opacity: 0; }
.bandeau-annonce p { margin: 0 auto; max-width: 1100px; padding: 10px 52px; text-align: center; font-size: 14.5px; line-height: 1.45; text-wrap: balance; }
.bandeau-annonce a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; margin-left: 6px; }
.bandeau-annonce a:hover { text-decoration-thickness: 2px; }
.bandeau-annonce-fermer { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: inherit; display: grid; place-items: center; cursor: pointer; opacity: 0.75; transition: opacity 0.15s, background 0.15s; }
.bandeau-annonce-fermer:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.bandeau-annonce-fermer svg { width: 16px; height: 16px; }
.bandeau-annonce :focus-visible { outline: 2px solid var(--papier); outline-offset: 2px; }
@media (max-width: 600px) { .bandeau-annonce p { padding: 9px 46px 9px 16px; text-align: left; font-size: 14px; } }
html:not(.js) .bandeau-annonce-fermer { display: none; }

/* Vacances et absences (réglées dans l'administration), en tête de l'agenda de /live */
.rv-pause { display: grid; gap: 6px; margin: -6px 0 22px; padding: 14px 18px; border-radius: var(--r-surface); background: var(--surface-2); border-left: 3px solid var(--accent); font-size: 15.5px; line-height: 1.5; }
.rv-pause[hidden] { display: none; }

/* /live : une section ou un cours atteint par un lien (#live-mes, #reserver, #lesson-12…) s'arrête sous la barre du site. */
.live-page > section[id], .rv-notes-liste li[id] { scroll-margin-top: calc(var(--haut-entete) + 24px); }

/* ——— Packs de cours (page Live, #packs) ——— */
.rv-cadeau { margin: 22px 0 0; }
/* Payer avec son pack, ou par carte (récapitulatif de la réservation) */
.rv-payer-avec { border: 0; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--filet-fort); display: grid; gap: 8px; }
.rv-payer-avec legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--gris); }
.rv-choix-paiement { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--filet); cursor: pointer; }
.rv-choix-paiement:has(input:checked) { border-color: var(--encre); }
.rv-choix-paiement input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.rv-choix-paiement b { display: block; font-size: 15px; }
.rv-choix-paiement small { font-size: 13px; color: var(--gris); }

/* ——— Cartes cadeaux (/gift) ——— */
.cadeau-page { padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 110px); }
.cadeau-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: clamp(36px, 5vw, 64px); }
.cadeau-texte h1 { font-size: var(--titre-page, clamp(44px, 7vw, 88px)); font-weight: 800; letter-spacing: -0.055em; line-height: 0.98; margin: 0 0 18px; text-wrap: balance; }
.cadeau-texte p { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; color: var(--gris); max-width: 32em; margin: 0; text-wrap: pretty; }
.cadeau-scene { display: grid; place-items: center; min-height: 240px; }
/* La carte cadeau, comme une carte de correspondance (public/enveloppe.js) : à gauche l'offre et le petit mot, signé ;
   un trait ; à droite le timbre, le destinataire et le code. La carte est un « conteneur » : tout ce qu'elle contient se
   mesure en cqi (centièmes de sa largeur), pour garder les mêmes proportions sur la page, dans l'enveloppe ou sur téléphone. */
.carte-cadeau { container-type: inline-size; position: relative; width: min(100%, 440px); aspect-ratio: 1.6; border-radius: 14px; background: var(--surface); border: 1px solid var(--filet); box-shadow: var(--ombre-flottante); color: var(--encre); transform: rotate(-2.5deg); transition: transform .5s var(--sortie); overflow: hidden; }
.carte-cadeau:hover { transform: rotate(-1deg) translateY(-3px); }
/* Les textes de la carte ne prennent rien de ce qui l’entoure (marges, tailles, « b » en bloc…) : chaque règle .cc-* suit. */
.carte-cadeau .cc-face :where(p, b, small, span) { margin: 0; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; display: revert; }
.carte-cadeau .cc-face { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); padding: 5.4cqi 5.6cqi 5cqi; gap: 0 5cqi; }
.carte-cadeau .cc-gauche { display: flex; flex-direction: column; min-width: 0; padding-right: 5cqi; border-right: 1px solid var(--filet); }
.carte-cadeau .cc-droite { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.carte-cadeau .cc-marque { margin: 0; font-size: 3cqi; color: var(--gris); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-cadeau .cc-marque b { display: inline; color: var(--encre); font-weight: 700; }
.carte-cadeau .cc-quoi { display: flex; align-items: flex-end; gap: 2.4cqi; margin-top: 4.5cqi; }
.carte-cadeau .cc-n { font-size: 17cqi; font-weight: 800; letter-spacing: -0.07em; line-height: 0.78; }
.carte-cadeau .cc-lecons { display: flex; flex-direction: column; font-size: 4.4cqi; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; padding-bottom: 0.3cqi; }
.carte-cadeau .cc-lecons small { font-size: 2.8cqi; font-weight: 400; color: var(--gris); letter-spacing: 0; margin-top: 0.9cqi; }
.carte-cadeau .cc-lettre { margin-top: auto; }
.carte-cadeau .cc-mot { margin: 0; font-family: var(--lecture-serif); font-style: italic; font-size: 4.1cqi; line-height: 1.28; color: var(--encre); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.carte-cadeau .cc-signe { margin: 1.4cqi 0 0; font-size: 3cqi; color: var(--gris); }
.carte-cadeau .cc-signe::before { content: "— "; }
.carte-cadeau .cc-timbre { align-self: flex-end; width: 13.5cqi; aspect-ratio: 60 / 72; transform: rotate(3deg); filter: drop-shadow(0 0.3cqi 0.5cqi rgba(23,24,28,.18)); }
.carte-cadeau .cc-timbre svg { display: block; width: 100%; height: 100%; }
.carte-cadeau .cc-pour { margin: auto 0 0; display: flex; flex-direction: column; gap: 0.6cqi; }
.carte-cadeau .cc-pour small, .carte-cadeau .cc-code small { font-size: 2.5cqi; color: var(--gris); letter-spacing: 0.01em; }
.carte-cadeau .cc-pour b { font-size: 4.8cqi; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; padding-bottom: 1cqi; border-bottom: 1px solid var(--filet-fort); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-cadeau .cc-code { margin: 4cqi 0 0; display: flex; flex-direction: column; gap: 0.5cqi; min-height: 9cqi; }
.carte-cadeau .cc-code b { font-size: 3.6cqi; font-weight: 700; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.carte-cadeau .cc-code .cc-code-vide { color: var(--filet-fort); font-weight: 400; }
.carte-cadeau.grande { width: min(100%, 460px); }
.cadeau-zone { margin-bottom: clamp(48px, 7vw, 90px); }
.cadeau-form { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px 48px; align-items: start; }
.cadeau-etape { grid-column: 1; }
.cadeau-etape h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 750; margin: 0 0 14px; }
.cadeau-etape h2 span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--encre); color: var(--papier); font-size: 13.5px; }
.cadeau-tailles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.cadeau-taille { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--filet-fort); background: var(--surface); color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.cadeau-taille[aria-pressed="true"] { border-color: var(--encre); box-shadow: 0 0 0 1px var(--encre); }
.cadeau-taille b { font-size: 15px; }
.cadeau-taille span { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.cadeau-taille small { font-size: 13px; color: var(--gris); }
.cadeau-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.cadeau-champs .reglage { font-size: 14px; font-weight: 600; }
.cadeau-champs .reglage small { font-weight: 400; color: var(--gris); }
.cadeau-champs input, .cadeau-champs textarea, .cadeau-code input { font: inherit; font-size: 16px; font-weight: 400; padding: 11px 13px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--surface); color: var(--encre); width: 100%; }
.cadeau-champs input:focus, .cadeau-champs textarea:focus, .cadeau-code input:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px var(--surface-2); }
.cadeau-champs .reglage[hidden] { display: none; }
/* Le champ de date sur iPhone : Safari lui donne une largeur minimale à lui, qui le faisait sortir de l'écran. Il prend
   la largeur de sa colonne, comme les autres champs, la date alignée à gauche. */
.cadeau-champs .reglage, .cadeau-champs input { min-width: 0; }
.cadeau-champs input[type="date"] { -webkit-appearance: none; appearance: none; display: block; max-width: 100%; min-height: 48px; text-align: left; }
.cadeau-champs input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.cadeau-mot { grid-column: 1 / -1; }
.cadeau-mot textarea { resize: vertical; }
.cadeau-recap { grid-column: 2; grid-row: 1 / span 2; }
.cadeau-etat { max-width: 640px; padding: 22px 24px; border-radius: 14px; background: var(--surface-2); }
.cadeau-etat.ok { background: var(--accent-pale); }
.cadeau-etat p { margin: 0; font-size: 17px; line-height: 1.55; }
.cadeau-etat .actions { margin-top: 16px; }
.cadeau-etat .erreur { margin-top: 10px; }
.cadeau-code { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; max-width: 520px; }
.cadeau-code label { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 600; flex: 1; min-width: 200px; }
.cadeau-code input { text-transform: uppercase; letter-spacing: 0.08em; }
.cadeau-comment h2 { font-size: var(--titre-sous, 32px); font-weight: 800; letter-spacing: -0.04em; margin: 0 0 24px; }
.cadeau-comment[hidden] { display: none; }
@media (max-width: 900px) {
  .cadeau-tete { grid-template-columns: minmax(0, 1fr); }
  .cadeau-form { grid-template-columns: minmax(0, 1fr); }
  .cadeau-recap { grid-column: 1; grid-row: auto; }
}
@media (max-width: 620px) {
  .cadeau-champs { grid-template-columns: minmax(0, 1fr); }
  .cadeau-tailles { grid-template-columns: minmax(0, 1fr); }
  .lb-etapes-liste { grid-template-columns: minmax(0, 1fr); }
}
/* La carte s'imprime seule. */
@media print {
  .cadeau-page > :not(.cadeau-tete), .cadeau-texte, .entete, .pied-site, .bandeau-annonce, .sans-js { display: none !important; }
  .cadeau-tete { display: block; margin: 0; }
  .carte-cadeau { transform: none; box-shadow: none; border: 1px solid #999; margin: 40px auto; }
}

/* ——— Se désabonner (/unsubscribe) ——— */
.desabo-page { padding-top: clamp(48px, 8vw, 110px); padding-bottom: clamp(48px, 8vw, 110px); }
.desabo { max-width: 620px; }
.desabo h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin: 0 0 16px; text-wrap: balance; }
.desabo p { font-size: 18px; line-height: 1.55; color: var(--gris); margin: 0; }
.desabo .actions { margin-top: 22px; }
.desabo .erreur { margin-top: 12px; }

/* Le tampon de la carte cadeau, une fois envoyée (public/enveloppe.js), et la confirmation qui attend la fin de l'envoi. */
.cadeau-zone.en-attente-envoi { opacity: 0; }
.carte-cadeau { position: relative; }
/* Le cachet de la poste, à cheval sur le timbre : deux cercles d'encre, le mot et la date. */
.carte-cadeau .cc-tampon { position: absolute; right: 12.5cqi; top: 8cqi; width: 16cqi; height: 16cqi; border-radius: 50%; border: 0.45cqi solid rgba(23, 24, 28, .62); box-shadow: inset 0 0 0 0.8cqi transparent, inset 0 0 0 1.15cqi rgba(23, 24, 28, .45); color: rgba(23, 24, 28, .72); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2cqi; transform: rotate(-14deg); background: transparent; pointer-events: none; mix-blend-mode: multiply; }
:root[data-theme="dark"] .cc-tampon { mix-blend-mode: normal; border-color: rgba(255,255,255,.6); color: rgba(255,255,255,.75); box-shadow: inset 0 0 0 0.8cqi transparent, inset 0 0 0 1.15cqi rgba(255,255,255,.4); }
.carte-cadeau .cc-tampon b { font-size: 3.4cqi; font-weight: 800; letter-spacing: -0.01em; line-height: 1; }
.carte-cadeau .cc-tampon small { font-size: 2.6cqi; font-weight: 600; line-height: 1.1; }
@media print { .carte-cadeau .cc-tampon { display: none; } }

/* ——— L'enveloppe (public/enveloppe.js) : envoi après l'achat, réception par la personne qui reçoit le cadeau ———
   Le dos (l'intérieur, gris), le rabat (dressé quand elle est ouverte), la carte, la poche de devant (trois triangles)
   et le sceau de cire rouge. La scène est fixée à l'écran, au-dessus de la page, derrière un voile. */
.env-scene { position: fixed; inset: 0; z-index: 85; }
.env-voile { position: absolute; inset: 0; background: color-mix(in srgb, var(--papier) 86%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; }
.env { position: absolute; perspective: 1100px; transform-origin: 50% 60%; }
.env-dos { position: absolute; inset: 0; z-index: 1; border-radius: 8px; background: linear-gradient(180deg, #dfe1e5, #eceef1 55%, #e4e6ea); box-shadow: 0 2px 6px rgba(23,24,28,.08), 0 30px 70px -24px rgba(23,24,28,.35); }
.env-rabat { position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 6; transform-origin: 50% 0; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(180deg, #ffffff, #f1f2f4); filter: drop-shadow(0 2px 2px rgba(23,24,28,.12)); }
.env.ouverte .env-rabat { transform: rotateX(180deg); z-index: 2; background: linear-gradient(0deg, #d9dbe0, #e9ebee); }
.env-poche { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; }
.env-poche path { stroke: rgba(23,24,28,.07); stroke-width: .3; vector-effect: non-scaling-stroke; }
.env-poche .g { fill: #f6f7f8; } .env-poche .d { fill: #f1f2f4; } .env-poche .b { fill: #fbfbfc; }
.carte-cadeau.dans-env { z-index: 3; box-shadow: 0 1px 3px rgba(23,24,28,.12); transition: none; border-radius: 10px; }
.env-sceau { position: absolute; left: 50%; top: 57%; z-index: 7; width: 16%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -50%) rotate(-6deg); visibility: hidden; filter: drop-shadow(0 2px 2px rgba(80, 20, 12, .35)); border-radius: 50%; }
.env-sceau:focus-visible { outline: none; box-shadow: 0 0 0 5px rgba(255,255,255,.9), 0 0 0 7px rgba(185, 58, 43, .45); }
.env-sceau:disabled { cursor: default; }
.env-moitie { position: absolute; inset: 0; display: block; }
.env-moitie svg { width: 100%; height: 100%; display: block; }
.env-moitie.g { clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%); }
.env-moitie.d { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%); }
.env-texte { position: absolute; left: 0; right: 0; margin: 0 auto; width: min(560px, 100% - 32px); z-index: 96; text-align: center; color: var(--encre); }
.env-texte h2 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.env-texte p { margin: 0 0 14px; font-size: 17px; line-height: 1.5; color: var(--gris); text-wrap: pretty; }
.env-texte .actions { justify-content: center; }
.carte-cadeau.cc-voyage { position: fixed; z-index: 90; margin: 0; transition: none; pointer-events: none; will-change: transform; transform-origin: 50% 50%; }


/* ——— Les pages courtes (08/10) ———
   Un message, un petit formulaire, une carte : 404, désabonnement, avis, pages de compte (connexion, inscription, mot de
   passe), invitations à créer un compte (profil, mots, notifications… sans être connecté), une carte cadeau (?code=).
   Le contenu (main) fait au moins la hauteur de l'écran (voir « Pas de saut à l'affichage ») : au lieu de rester collé
   en haut au-dessus d'un grand vide, il se tient au milieu, aligné sur le logo comme le reste du site. Un peu plus de
   marge en bas qu'en haut : le bloc paraît centré à l'œil. Les pages construites après l'affichage restent invisibles
   le temps de savoir quoi montrer (data-apparitions), pour ne pas se déplacer sous les yeux. */
body > main:is(.introuvable, .desabo-page, .avis-page),
body > main:has(.espace-invitation),
body > main:has(> .conteneur.introuvable),
.cadeau-page:is(.vue-carte, .vue-message) {
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(64px, 9vw, 120px);
}
body > main:has(.espace-invitation) > .espace, body > main:has(> .conteneur.introuvable) > .introuvable { min-height: 0; padding-top: 0; padding-bottom: 0; }
.acces { align-content: center; padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(64px, 9vw, 120px); }
/* Une carte cadeau : le titre, la phrase et ce qu'on peut faire (l'ajouter, réserver, imprimer) d'un côté, la carte de
   l'autre ; un code qui ne marche pas : le message et le champ, seuls. */
.cadeau-page.vue-carte .cadeau-tete, .cadeau-page.vue-message .cadeau-tete { margin-bottom: 0; }
.cadeau-page.vue-carte .cadeau-texte h1 { font-size: clamp(40px, 5.2vw, 72px); }
.cadeau-texte .cadeau-zone { margin: clamp(24px, 3vw, 34px) 0 0; }
.cadeau-page.vue-carte .cadeau-comment:not([hidden]) { margin-top: clamp(56px, 8vw, 96px); }
.cadeau-page.vue-message .cadeau-tete { grid-template-columns: minmax(0, 1fr); }
.cadeau-page.vue-message .cadeau-scene { display: none; }
.cadeau-page.vue-message .cadeau-texte h1 { font-size: clamp(36px, 5vw, 64px); }
.cadeau-page.vue-message .cadeau-zone { margin: clamp(24px, 3vw, 34px) 0 0; }
.cadeau-mes-lien { margin-top: 40px; font-size: 15px; color: var(--gris); }
.cadeau-aide { margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--gris); }

/* ——— My lessons : mes cours avec Jérôme (/my-lessons) et la page de chacun (/my-lessons/<cours>), classes ml-* ——— */
.ml { padding-top: 26px; padding-bottom: 80px; }
.ml .espace-invitation { padding-top: 34px; }
.lien-retour { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--gris); text-decoration: none; margin-bottom: 18px; }
.lien-retour::before { content: ""; width: 7px; height: 7px; border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); }
.lien-retour:hover { color: var(--encre); }
.ml-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 28px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1.5px solid var(--encre); }
.ml-tete h1 { margin: 0 0 6px; font-size: clamp(34px, 4.2vw, 54px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; text-wrap: balance; }
.ml-tete p { margin: 0; color: var(--gris); font-size: 16px; }
.ml-tete .actions { margin: 0; }
.ml-etat { display: inline-block; padding: 5px 12px; border-radius: 99px; font-size: 13.5px; font-weight: 700; background: var(--accent-pale); color: var(--accent); white-space: nowrap; }
.ml-etat.fini { background: var(--surface-2); color: var(--encre); }
.ml-etat.annule { background: #fdecea; color: var(--rouge); }
.ml-etat.attente { background: var(--surface-2); color: var(--encre); }
/* Une demande de cours : l'heure demandée, en clair ; l'autre heure proposée par Jérôme, sur la carte sombre. */
:root[data-theme="dark"] .ml-etat.annule { background: #3a1d19; }
.ml-carte { padding: 20px 22px; border-radius: 14px; border: 1px solid var(--filet); background: var(--surface); }
.ml-carte > h2 { margin: 0 0 12px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.ml-carte > p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--gris); }
.ml-carte > p:last-child { margin-bottom: 0; }
.ml-carte > p b { color: var(--encre); }
.ml-carte > .actions { margin-top: 4px; }
.ml-gris { color: var(--gris); }

/* La bannière après une réservation. */
.bandeau-ok { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 22px; padding: 16px 18px; border-radius: 14px; background: var(--accent-pale); color: var(--encre); animation: fenetre-entree 0.45s var(--sortie); }
.bandeau-ok b { font-size: 19px; letter-spacing: -0.02em; }
.bandeau-ok p { margin: 2px 0 0; font-size: 15px; line-height: 1.5; color: var(--gris); }
.bandeau-ok-coche { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--papier); }
.bandeau-ok-coche svg { width: 18px; height: 18px; }

/* Rejoindre : la carte sombre. */
.ml-rien { background: var(--surface-2); border-color: transparent; }

.ml-note { font-size: 14px; font-weight: 700; color: var(--encre); white-space: nowrap; }

/* Préparer, devoirs, mots. */
.ml-devoirs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ml-devoirs label { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; cursor: pointer; }
.ml-devoirs input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.ml-devoirs input:checked + span { color: var(--gris); text-decoration: line-through; text-decoration-color: var(--filet-fort); }
/* Une fiche de devoirs (src/devoirs.mjs) à rendre avant le cours, avant les consignes à cocher ; rendue, elle se barre comme elles. */
.dv-td-fiche { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0 -14px 2px; padding: 11px 14px; border-radius: 12px; background: var(--surface-2); color: var(--encre); text-decoration: none; }
.dv-td-fiche svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dv-td-texte { min-width: 0; }
.dv-td-texte b { display: block; font-size: 15.5px; font-weight: 650; line-height: 1.35; }
.dv-td-texte small { display: block; margin-top: 1px; color: var(--gris); font-size: 13.5px; }
.dv-td-aller { font-size: 14.5px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--filet-fort); white-space: nowrap; }
.dv-td-fiche:hover .dv-td-aller { text-decoration-color: currentColor; }
.dv-td-coche { position: relative; width: 18px; height: 18px; border-radius: 4px; background: var(--accent); }
.dv-td-coche::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 4px; height: 9px; border: solid var(--papier); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dv-td-fiche.fait .dv-td-texte b { color: var(--gris); text-decoration: line-through; text-decoration-color: var(--filet-fort); }
@media (max-width: 560px) {
  .dv-td-fiche { grid-template-columns: 18px minmax(0, 1fr); align-items: start; }
  .dv-td-fiche svg, .dv-td-coche { margin-top: 2px; }
  .dv-td-aller { grid-column: 2; justify-self: start; }
}
.ml-mots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ml-mots > span { padding: 5px 11px; border-radius: 99px; background: var(--accent-pale); color: var(--accent); font-size: 14px; font-weight: 600; }
.ml-mots > span > small { font-weight: 400; color: var(--gris); margin-left: 2px; }
.ml-lien { font-size: 14.5px; font-weight: 700; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--filet-fort); }
.ml-lien:hover { text-decoration-color: currentColor; }
.ml-histoire { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; background: var(--surface-2); color: inherit; text-decoration: none; }
.ml-histoire > img, .ml-histoire-vide { display: block; width: 44px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; background: var(--filet); }
.ml-histoire > span > b { display: block; font-size: 15px; }
.ml-histoire > span > small { color: var(--gris); font-size: 13px; }
.ml-histoire .ml-lien { text-decoration: underline; }

/* Le compte-rendu. */
.ml-carte > .ml-resume { margin: 0 0 4px; font-size: 16.5px; line-height: 1.6; color: var(--encre); }
.ml-citation { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--filet-fort); font-size: 15px; line-height: 1.55; color: var(--encre); }

/* Ma note sur le cours. */
.ml-avis .avis-note { margin: 0 0 10px; }
.ml-avis .avis-choix label { font-size: 30px; }
.ml-avis textarea { display: block; width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--papier); color: var(--encre); resize: vertical; }
.ml-avis .avis-accord { margin: 12px 0 14px; font-size: 14px; color: var(--gris); }
.ml-avis .avis-accord b { color: var(--encre); }
.ml-avis .bouton { height: 42px; padding: 0 20px; font-size: 15px; }
.ml-avis .erreur { margin: 0 0 12px; }
.ml-delai { margin: 12px 0 0; font-size: 13px; }
.ml-etoiles-lues { font-size: 22px; }

/* À côté : changer, la suite, les détails. */
.ml-annuler { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--r-petit); border: 1px solid color-mix(in srgb, var(--rouge) 45%, transparent); background: transparent; color: var(--rouge); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background 0.15s ease; }
.ml-annuler:hover { background: color-mix(in srgb, var(--rouge) 8%, transparent); }
.ml-annuler:active { transform: translateY(1px); }
.ml-details { margin: 0; display: grid; }
.ml-details > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--filet); font-size: 14.5px; line-height: 1.45; }
.ml-details > div:first-child { border-top: 0; padding-top: 0; }
.ml-details dt { color: var(--gris); }
.ml-details dd { margin: 0; }
.ml-details dd small { display: block; color: var(--gris); font-size: 13.5px; }
.ml-fenetre-actions { justify-content: flex-end; margin-top: 18px; }

.ml-avis textarea:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px var(--surface-2); }

/* ——— Live lessons : la réservation (/live/book, classes rb-*) et les prix de /live ——— */
.rb { padding-top: 26px; padding-bottom: 80px; }
.rb-tete { padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1.5px solid var(--encre); }
.rb-tete h1 { margin: 0 0 8px; font-size: clamp(34px, 4.2vw, 54px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.rb-tete p { margin: 0; max-width: 40em; color: var(--gris); font-size: 16px; line-height: 1.5; }
.rb .rv-etape h2 { letter-spacing: 0; }
.rb .rv-recap h2 { letter-spacing: -0.01em; }
.rb .rv-invite h2 { margin: 0 0 12px; }
/* Le pack seul, sans choisir d'heure maintenant (sous le bouton de paiement). */
.rv-pack-seul { display: block; width: 100%; margin: 12px 0 0; font-size: 14px; white-space: normal; text-align: center; }
.rv-pack-seul:disabled { opacity: .45; cursor: not-allowed; }
/* Les prix de /live : chaque carte mène à la réservation, avec la durée et le nombre de cours choisis. */
a.rv-tarif { text-decoration: none; }
.rv-tarif-action { margin-top: auto; padding-top: 18px; font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.rv-prix-duree { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0 0 18px; }
.rv-prix-duree p { margin: 0; color: var(--gris); font-size: 15px; }
.rv-prix-duree[hidden] { display: none; }
.ml-carte > .ml-retractation { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--filet); font-size: 13.5px; line-height: 1.5; color: var(--gris); }
.ml-retractation .bouton-texte { font-size: 13.5px; }

/* ——— Purchases & gifts (/purchases, classes pu-*) : mes achats, mes cadeaux, leurs factures ——— */
.pu { padding-top: 26px; padding-bottom: 80px; }
.pu-tete { padding-bottom: 20px; border-bottom: 1.5px solid var(--encre); }
.pu-tete h1 { margin: 0 0 8px; font-size: clamp(34px, 4.2vw, 54px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.pu-tete p { margin: 0; max-width: 40em; color: var(--gris); font-size: 16px; line-height: 1.5; }
.pu-bloc { margin-top: 40px; max-width: 880px; }
.pu-bloc > h2 { margin: 0 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.pu-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.pu-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.pu-quoi > b { display: block; font-size: 16px; letter-spacing: -0.01em; }
.pu-quoi > small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--gris); }
.pu-etat { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--encre); }
.pu-etat.ok { color: var(--accent); font-weight: 600; }
.pu-etat.fini { color: var(--gris); }
.pu-prix { text-align: right; font-size: 16px; font-weight: 700; white-space: nowrap; }
.pu-prix small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--gris); }
.pu-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 8px; font-size: 14.5px; }
.pu-actions .bouton { height: 38px; padding: 0 16px; font-size: 14px; }
.pu-doc::before { content: "PDF"; display: inline-block; margin-right: 6px; padding: 1px 5px; border-radius: 4px; background: var(--surface-2); color: var(--gris); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; vertical-align: 1px; }
.pu-annuler { color: var(--rouge); }
.pu-note { color: var(--gris); font-size: 13px; margin-left: -12px; }
.pu-cadeaux { margin-top: 18px; }
.pu-pied { margin: 48px 0 0; font-size: 15px; color: var(--gris); }
@media (max-width: 560px) { .pu-note { flex-basis: 100%; margin: -6px 0 0; } }

/* ——— Home (« / » pour un membre, public/accueil.js, classes hm-*) : une grande action, le reste du jour, la semaine ——— */
.hm { padding-top: clamp(32px, 5vw, 56px); padding-bottom: 80px; }
.hm-col { max-width: 960px; }
.hm-bonjour { margin: 0 0 4px; font-size: clamp(34px, 4vw, 50px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; text-wrap: balance; }
.hm-date { margin: 0 0 26px; color: var(--gris); font-size: 15.5px; }

/* La grande action */
.hm-une { position: relative; display: grid; gap: 18px 28px; padding: 26px 28px; border-radius: 18px; }
.hm-une .hm-quoi { display: block; font-size: 14px; font-weight: 650; }
.hm-une .hm-titre { display: block; margin: 4px 0 6px; font-size: clamp(28px, 3.2vw, 38px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; text-wrap: balance; }
.hm-une .hm-detail { display: block; margin: 0; font-size: 15.5px; line-height: 1.5; }
.hm-une .actions { margin-top: 18px; gap: 10px 20px; }
/* Le cours qui commence : sombre, comme sur la page du cours. */
.hm-une-cours { --f: #17181c; --e: #fff; --d: rgba(255,255,255,.74); --v: #8fd3b4; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--f); color: var(--e); }
:root[data-theme="dark"] .hm-une-cours { --f: #1f2a25; --e: #ededee; box-shadow: inset 0 0 0 1px #2e3d36; }
.hm-une-cours .hm-quoi { color: var(--v); }
.hm-une-cours .hm-detail { color: var(--d); }
.hm-une-cours .bouton { background: var(--e); color: var(--f); }
.hm-une-cours .lien-souligne { color: var(--e); }
.hm-avant { padding: 16px 18px; border-radius: 12px; background: rgba(255,255,255,.07); align-self: start; }
.hm-avant b { display: block; font-size: 14px; margin-bottom: 8px; }
.hm-avant ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14.5px; line-height: 1.45; color: var(--d); }
.hm-avant li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.hm-avant li::before { content: ""; width: 14px; height: 14px; margin-top: 3px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px currentColor; }
.hm-avant li.fait span { text-decoration: line-through; }
.hm-avant li.fait::before { background: var(--v); box-shadow: none; }
/* Le prochain cours et, à côté, les suivants (plus discrets) : les devoirs passent alors sous les boutons. */
.hm-cours-bloc { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px 24px; align-items: start; }
.hm-une-cours.avec-suite { grid-template-columns: minmax(0, 1fr); }
.hm-ensuite .hm-bloc-tete { margin-bottom: 8px; }
.hm-ensuite ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hm-ensuite li > a { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--filet); color: inherit; text-decoration: none; transition: background .2s; }
.hm-ensuite li > a:hover { background: var(--surface-2); }
.hm-ensuite .pr-date { background: var(--surface-2); }
.hm-ensuite li > a b { display: block; font-size: 15px; }
.hm-ensuite li > a small { color: var(--gris); font-size: 13.5px; }
.hm-plus { margin: 10px 0 0; font-size: 13.5px; color: var(--gris); }
/* Réviser ses mots : vert pâle, le nombre en grand. */
.hm-une-mots { background: var(--accent-pale); grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.hm-une-mots .hm-quoi { color: var(--accent); }
.hm-une-mots .hm-detail { color: var(--gris); }
.hm-puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.hm-puces span { padding: 5px 11px; border-radius: 99px; background: var(--surface); font-size: 14px; color: var(--accent); font-weight: 600; }
.hm-grand { margin: 0; font-size: clamp(64px, 8vw, 96px); font-weight: 800; letter-spacing: -0.06em; line-height: .85; color: var(--accent); text-align: right; }
.hm-grand small { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0; margin-top: 8px; }
/* Une histoire ou une formation : sa couverture, et toute la carte est le lien. */
.hm-une-contenu { grid-template-columns: 120px minmax(0, 1fr); align-items: center; background: var(--surface-2); color: inherit; text-decoration: none; transition: background .2s; }
.hm-une-contenu:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--filet)); }
.hm-une-contenu .hm-quoi { color: var(--accent); }
.hm-une-contenu .hm-detail { color: var(--gris); }
.hm-une-contenu .jauge { display: block; margin-top: 12px; max-width: 320px; }
.hm-visuel { display: block; container-type: inline-size; }
.hm-visuel .pochette { width: 100%; }
.hm-visuel .pochette :is(.auteur, .maison, .serie, .etiquette, .progression-carte) { display: none; }
.hm-visuel .pochette .titre { top: auto; bottom: 9%; font-size: 15cqw; }
.hm-visuel .pochette.illustree .titre, .hm-visuel .pochette.illustree::after { display: none; }
.hm-livre { display: block; }
.hm-livre .k-livre { width: 100%; padding: 8px; justify-content: flex-end; }
.hm-livre .k-livre .k-livre-haut, .hm-livre .k-livre .k-livre-bas { display: none; }
.hm-texte { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hm-texte .actions { display: flex; }
/* Commencer : trois étapes. */
.hm-une-debut { background: var(--surface-2); }
.hm-une-debut .hm-detail { color: var(--gris); }
.hm-etapes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: etape; }
.hm-etapes li { counter-increment: etape; padding: 16px; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--gris); line-height: 1.45; }
.hm-etapes li::before { content: counter(etape); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--encre); color: var(--papier); font-weight: 700; font-size: 13px; }
.hm-etapes li.fait::before { content: "✓"; background: var(--accent); }
.hm-etapes li.fait { opacity: .7; }
.hm-etapes b { color: var(--encre); font-size: 15.5px; }
.hm-etapes .bouton { margin-top: auto; align-self: flex-start; height: 38px; padding: 0 16px; font-size: 14px; }

/* Also today, le prochain cours, la semaine */
.hm-bloc { margin-top: 30px; }
.hm-bloc > h2, .hm-bloc-tete h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.hm-bloc-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.hm-bloc-tete .lien-fleche { font-size: 14.5px; }
.hm-liste { list-style: none; margin: 0; padding: 0; }
.hm-liste li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--filet); }
.hm-icone { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; color: var(--encre); }
.hm-icone svg { width: 20px; height: 20px; }
.hm-icone img { width: 100%; height: 100%; object-fit: cover; }
.hm-liste li > span:nth-child(2) b { display: block; font-size: 15.5px; font-weight: 650; }
.hm-liste li > span:nth-child(2) small { color: var(--gris); font-size: 13.5px; }
.hm-liste li > a { font-size: 14.5px; font-weight: 700; color: var(--encre); text-underline-offset: 3px; }
.hm-liste li.fait b { color: var(--gris); text-decoration: line-through; text-decoration-color: var(--filet-fort); }
.hm-liste li.fait .hm-icone { background: var(--accent-pale); color: var(--accent); }
.hm-semaine { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--encre); border-bottom: 1px solid var(--filet); }
.hm-semaine > div { padding: 12px 16px 12px 0; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hm-semaine > div + div { padding-left: 16px; border-left: 1px solid var(--filet); }
.hm-semaine b { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hm-semaine small { font-size: 13px; color: var(--gris); }
.hm-semaine .hm-minutes { display: grid; grid-template-columns: auto minmax(0, 170px); gap: 0 18px; align-items: end; justify-content: start; }
.hm-minutes > div { display: flex; flex-direction: column; }
.hm-semaine .acc-semaine { margin: 0; height: 44px; }
.hm-semaine .acc-semaine i { height: calc(var(--h) * 26px); }

@media (max-width: 760px) {
  .hm-une-cours, .hm-une-mots, .hm-cours-bloc { grid-template-columns: minmax(0, 1fr); }
  .hm-grand { text-align: left; font-size: 64px; }
  .hm-une { padding: 22px; }
  .hm-une-contenu { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
  .hm-etapes { grid-template-columns: minmax(0, 1fr); }
  .hm-semaine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-semaine > div:first-child { grid-column: 1 / -1; padding: 12px 0; }
  .hm-semaine > div:nth-child(2) { padding-left: 0; border-left: 0; }
  .hm-semaine > div + div { border-top: 1px solid var(--filet); }
  .hm-liste li { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; }
  .hm-icone { width: 36px; height: 36px; }
}

/* ——— Les dictées : la page d'une dictée (dictation.js), classes dc- ——— */
.dc { padding-top: 26px; padding-bottom: clamp(64px, 9vw, 120px); }
.dc-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 40px; padding-bottom: 22px; border-bottom: 1.5px solid var(--encre); }
.dc-sur { margin: 0 0 10px; font-size: 14.5px; color: var(--gris); }
.dc-tete h1 { margin: 0; font-size: clamp(40px, 5.6vw, 76px); font-weight: 800; letter-spacing: -0.055em; line-height: 0.95; text-wrap: balance; }
.dc-faits { display: flex; gap: 26px; margin: 0 0 6px; padding: 0; list-style: none; }
.dc-faits li { display: flex; flex-direction: column; font-size: 13.5px; color: var(--gris); }
.dc-faits b { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; color: var(--encre); line-height: 1.15; }
.dc-etapes { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 22px 0 34px; padding: 0; list-style: none; font-size: 15px; font-weight: 600; color: var(--gris-doux); }
.dc-etapes li { display: inline-flex; align-items: center; gap: 9px; }
.dc-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--gris); transition: background 0.3s, color 0.3s; }
.dc-etapes li.fait, .dc-etapes li.ici { color: var(--encre); }
.dc-num { position: relative; }
/* Étape faite : le chiffre s'efface (color: transparent, sans changer la taille), la coche se pose au centre du cercle,
   en position absolue (dans la grille, le chiffre caché la décalait vers le bas selon le navigateur). */
.dc-etapes li.fait .dc-num { background: var(--accent); color: transparent; }
.dc-etapes li.fait .dc-num::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 5px; border-left: 2px solid var(--papier); border-bottom: 2px solid var(--papier); transform: translate(-50%, -50%) translate(0.5px, -1.5px) rotate(-45deg); }
.dc-etapes li.ici .dc-num { background: var(--encre); color: var(--papier); }
.dc-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 6vw, 88px); align-items: start; }
.dc-principal { max-width: 720px; min-width: 0; }
.dc-vue[hidden] { display: none; }
.dc-vue { animation: dc-arrive 0.5s var(--sortie); }
@keyframes dc-arrive { from { opacity: 0; transform: translateY(12px); } }
.dc-vue h2 { margin: 0 0 8px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.dc-texte { margin: 0 0 22px; font-size: 17px; line-height: 1.55; color: var(--gris); max-width: 34em; }
.dc-suite { margin-top: 26px; }
.dc-lecteur { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 18px; border-radius: var(--r-surface); background: var(--surface-2); }
.dc-jouer { display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--encre); color: var(--papier); cursor: pointer; transition: transform 0.15s; }
.dc-jouer:active { transform: scale(0.95); }
.dc-jouer svg { width: 22px; height: 22px; }
.dc-jouer.en-cours svg { margin-left: 0; }
.dc-piste { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dc-barre { height: 4px; border-radius: 2px; background: var(--filet-fort); overflow: hidden; }
.dc-barre i { display: block; height: 100%; width: 0; background: var(--encre); }
.dc-temps { font-size: 13.5px; color: var(--gris); }
.dc-vitesse { display: flex; gap: 4px; }
.dc-vitesse label { position: relative; cursor: pointer; }
.dc-vitesse input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.dc-vitesse span { display: inline-block; padding: 5px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--gris); }
.dc-vitesse input:checked + span { background: var(--papier); color: var(--encre); box-shadow: 0 1px 2px rgba(23, 24, 28, 0.12); }
.dc-vitesse input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.dc-lecteur-petit .dc-jouer { width: 46px; height: 46px; }
.dc-lecteur-petit .dc-jouer svg { width: 18px; height: 18px; }
.dc-morceaux { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.dc-morceaux button { width: 34px; height: 34px; border: 0; border-radius: 50%; font: inherit; font-size: 13.5px; font-weight: 700; background: var(--surface-2); color: var(--gris); cursor: pointer; }
.dc-morceaux button.fait { background: var(--accent-pale); color: var(--accent); }
.dc-morceaux button[aria-current] { background: var(--encre); color: var(--papier); }
.dc-zone { display: block; margin-top: 16px; }
.dc-zone textarea, .dc-relecture textarea { display: block; width: 100%; padding: 14px 16px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--papier); color: var(--encre); font: inherit; font-size: 20px; line-height: 1.5; resize: vertical; }
.dc-zone textarea:focus, .dc-relecture textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.dc-accents { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.dc-accents button { min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--filet); border-radius: var(--r-petit); background: var(--papier); font: inherit; font-size: 16px; color: var(--encre); cursor: pointer; }
.dc-accents button:hover { border-color: var(--encre); }
.dc-deja { margin-top: 26px; border-top: 1px solid var(--filet); padding-top: 14px; }
.dc-deja summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.dc-deja p { margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: var(--gris); }
.dc-relecture { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: morceau; }
.dc-relecture li { display: grid; grid-template-columns: 28px 40px minmax(0, 1fr); align-items: center; gap: 10px; counter-increment: morceau; }
.dc-relecture li::before { content: counter(morceau); font-size: 14px; font-weight: 700; color: var(--gris-doux); text-align: right; font-variant-numeric: tabular-nums; }
.dc-mini { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--encre); cursor: pointer; }
.dc-mini svg { width: 14px; height: 14px; margin-left: 2px; }
.dc-relecture textarea { font-size: 17px; padding: 10px 12px; min-height: 0; resize: none; overflow: hidden; }
.dc-erreur { margin: 0 0 12px; color: var(--rouge); font-size: 15px; }
.dc-score { display: flex; align-items: center; gap: 22px; margin-bottom: 24px; }
.dc-chiffre { margin: 0; font-size: clamp(72px, 9vw, 112px); font-weight: 800; letter-spacing: -0.06em; line-height: 0.8; font-variant-numeric: tabular-nums; }
.dc-score h2 { margin-bottom: 6px; }
.dc-score .dc-texte { margin: 0; }
/* Ce que la dictée travaillait : après le résultat, avant le texte corrigé. */
.dc-focus { max-width: 68ch; margin: 0 0 26px; padding: 16px 20px 16px 18px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.dc-focus h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; letter-spacing: 0; }
.dc-focus p { margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: var(--encre); }
.dc-focus p:last-child { margin-bottom: 0; }
.dc-focus .dc-lien { margin-top: 0; }
.dc-corrige { padding: 22px 24px; border-radius: var(--r-surface); background: var(--surface-2); font-size: 19px; line-height: 2.05; overflow-wrap: break-word; }
.dc-faute, .dc-accepte { display: inline; border: 0; padding: 0; font: inherit; line-height: inherit; color: inherit; background: none; cursor: pointer; border-radius: 4px; }
.dc-faute s { color: var(--rouge); text-decoration-thickness: 1.5px; }
.dc-faute s + ins { margin-left: 4px; }
.dc-faute ins { text-decoration: none; color: var(--accent); font-weight: 700; }
.dc-oubli ins { text-decoration: underline dashed var(--accent); text-underline-offset: 5px; }
.dc-accepte span { border-bottom: 2px dotted var(--accent); }
.dc-faute:hover, .dc-faute[aria-pressed="true"], .dc-accepte:hover, .dc-accepte[aria-pressed="true"] { background: var(--papier); box-shadow: 0 -4px 0 var(--papier), 0 4px 0 var(--papier); }
.dc-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 13.5px; color: var(--gris); }
.dc-l-faute { color: var(--rouge); text-decoration: line-through; }
.dc-l-juste { color: var(--accent); font-weight: 700; }
.dc-l-accepte { border-bottom: 2px dotted var(--accent); color: var(--encre); }
.dc-explication { margin-top: 18px; padding: 18px 20px; border-left: 3px solid var(--encre); background: var(--papier); box-shadow: inset 0 0 0 1px var(--filet); border-radius: 0 var(--r-petit) var(--r-petit) 0; }
.dc-explication:empty { display: none; }
.dc-explication h3 { margin: 0 0 6px; font-size: 16px; }
.dc-explication p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--gris); }
.dc-explication .dc-quoi { color: var(--encre); margin-bottom: 6px; }
.dc-explication i { color: var(--encre); font-style: normal; font-weight: 600; }
.dc-explication .dc-signe { margin-top: 10px; font-size: 13.5px; color: var(--gris-doux); }
.dc-vue h2.dc-sous-titre { margin: 40px 0 10px; font-size: 22px; }
.dc-pieges { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.dc-pieges li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.dc-pieges .dc-etat { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px; color: var(--papier); }
.dc-pieges .ok .dc-etat { background: var(--accent); }
.dc-pieges .dc-etat { position: relative; }
.dc-pieges .ok .dc-etat::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 4px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translate(-50%, -50%) translate(0.5px, -1px) rotate(-45deg); }
.dc-pieges .rate .dc-etat { background: color-mix(in srgb, var(--rouge) 12%, var(--papier)); box-shadow: inset 0 0 0 1.5px var(--rouge); }
.dc-pieges strong { display: block; font-size: 16px; }
.dc-pieges p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--gris); }
.dc-pieges .dc-bilan { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.dc-pieges .ok .dc-bilan { color: var(--accent); }
.dc-pieges .rate .dc-bilan { color: var(--rouge); }
.dc-cote { display: grid; gap: 28px; }
.dc-cote-bloc h2 { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.dc-cote-bloc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; color: var(--gris); }
.dc-passees { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.dc-passees li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--filet); font-size: 14.5px; }
.dc-passees a { color: var(--encre); text-decoration: none; }
.dc-passees a:hover { text-decoration: underline; }
.dc-passees b { font-weight: 600; color: var(--gris); white-space: nowrap; }
.dc-prochaine { margin: 12px 0 0; font-size: 14px; color: var(--gris); }
.dc-prochaine b { color: var(--encre); }
.fenetre-confirmer .invitation-raison { font-size: 16px; line-height: 1.5; }
@media (max-width: 900px) {
  .dc-grille { grid-template-columns: minmax(0, 1fr); }
  .dc-tete { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .dc-lecteur { grid-template-columns: auto minmax(0, 1fr); }
  .dc-vitesse { grid-column: 1 / -1; justify-content: flex-end; }
  .dc-zone textarea { font-size: 18px; }
  .dc-corrige { margin-inline: calc(-1 * var(--gouttiere)); border-radius: 0; padding: 18px var(--gouttiere); font-size: 17.5px; }
  .dc-score { gap: 16px; }
  .dc-suite .bouton { flex: 1; }
  .dc-relecture li { grid-template-columns: 18px 40px minmax(0, 1fr); gap: 8px; }
}
.dc-touches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13.5px; color: var(--gris); }
.dc-touches kbd + kbd, .dc-touches kbd:not(:first-child) { margin-left: 10px; }
.dc-touches kbd { display: inline-block; min-width: 22px; padding: 1px 7px; border: 1px solid var(--filet-fort); border-bottom-width: 2px; border-radius: 5px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--encre); background: var(--papier); text-align: center; }
@media (hover: none) { .dc-touches { display: none; } }
.dc-passage { border-radius: 4px; transition: background 0.25s, box-shadow 0.25s; }
.dc-passage.entendu { background: var(--accent-pale); box-shadow: 0 0 0 3px var(--accent-pale); }
.dc-lien { display: inline-block; margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--accent); }
.dc-explication .dc-lien { margin-top: 10px; }
.dc-score.parfait .dc-chiffre { color: var(--accent); }
.dc-ensuite { margin-top: 8px; }
.dc-cartes.seule { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.dc-rappel { margin: 0 0 18px; padding: 14px 18px; border-left: 3px solid var(--accent); border-radius: 0 var(--r-petit) var(--r-petit) 0; background: var(--accent-pale); }
.dc-rappel h3 { margin: 0 0 4px; font-size: 15px; color: var(--accent); }
.dc-rappel p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--encre); }
.dc-rappel b { font-weight: 700; }
.dc-essais { margin: -6px 0 22px; }
.dc-essais p { margin: 8px 0 0; font-size: 14px; color: var(--gris); }
.dc-essais-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-essais-choix button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 14px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--papier); font: inherit; font-size: 14.5px; font-weight: 700; color: var(--encre); cursor: pointer; }
.dc-essais-choix button small { font-size: 13px; font-weight: 400; color: var(--gris); }
.dc-essais-choix button[aria-pressed="true"] { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); cursor: default; }
.dc-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dc-carte { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; border-radius: var(--r-surface); background: var(--surface-2); }
.dc-carte h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.dc-carte p { margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: var(--gris); }
.dc-carte .bouton { margin-top: auto; }
.dc-carte .bouton.discret { background: var(--papier); }
@media (max-width: 600px) { .dc-cartes { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .dc-vue { animation: none; } .dc-passage { transition: none; } }

/* ——— Les dictées : la page « Dictations » (dictations.js), classes dh- ——— */
.dh { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(64px, 9vw, 120px); }
.dh-tete { padding-bottom: 22px; border-bottom: 1.5px solid var(--encre); margin-bottom: clamp(28px, 4vw, 44px); }
.dh-tete h1 { margin: 0 0 12px; font-size: clamp(44px, 6.4vw, 88px); font-weight: 800; letter-spacing: -0.055em; line-height: 0.95; }
.dh-chapo { margin: 0; max-width: 36em; font-size: 18px; line-height: 1.5; color: var(--gris); }
.dh-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 6vw, 88px); align-items: start; }
.dh-une { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-surface); background: var(--surface-2); color: var(--encre); text-decoration: none; transition: box-shadow 0.2s; }
.dh-une:hover { box-shadow: inset 0 0 0 1.5px var(--encre); }
.dh-sur { font-size: 14.5px; color: var(--gris); }
.dh-une-titre { font-size: clamp(34px, 4.4vw, 58px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.98; text-wrap: balance; }
.dh-faits { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 14.5px; color: var(--gris); }
.dh-faits b { color: var(--encre); font-weight: 700; }
.dh-une-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; }
.dh-resultat { font-size: 15px; font-weight: 700; color: var(--accent); }
.dh-une .bouton.discret { background: var(--papier); }
.dh-toutes { margin-top: clamp(36px, 5vw, 56px); }
.dh-toutes h2, .dh-cote h2, .dh-comment h2 { margin: 0 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.dh-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.dh-ligne { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: baseline; gap: 6px 18px; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.dh-n { font-size: 14px; font-weight: 700; color: var(--gris-doux); font-variant-numeric: tabular-nums; }
.dh-titre { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--encre); text-decoration: none; }
a.dh-titre:hover { text-decoration: underline; }
.dh-meta { font-size: 14px; color: var(--gris); white-space: nowrap; }
.dh-etat { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; font-size: 14px; font-weight: 600; color: var(--gris); text-align: right; }
.dh-etat.fait { color: var(--accent); }
.dh-etat:has(.dh-essai), .dh-resultat:has(.dh-essai) { flex-direction: column; align-items: flex-end; gap: 2px; }
.dh-resultat:has(.dh-essai) { display: inline-flex; align-items: flex-start; }
.dh-essai { white-space: nowrap; }
.dh-essai-dernier { font-weight: 500; color: var(--gris); }
.dh-etat svg { width: 14px; height: 14px; }
.dh-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: etape; }
.dh-etapes li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; counter-increment: etape; font-size: 14.5px; line-height: 1.5; color: var(--gris); }
.dh-etapes li::before { content: counter(etape); grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--encre); color: var(--papier); font-size: 13px; font-weight: 700; }
.dh-etapes b { color: var(--encre); font-size: 15.5px; }
.dh-prochaine { margin: 22px 0 0; font-size: 14.5px; color: var(--gris); }
.dh-prochaine b { color: var(--encre); }
.dh-vide { max-width: 36em; }
.dh-vide h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -0.04em; }
.dh-vide p { margin: 8px 0 0; color: var(--gris); font-size: 16px; }
.dh-comment { margin-top: 44px; max-width: 520px; }
.dh-visiteur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.dh-visiteur h2 { margin: 0 0 12px; font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.dh-visiteur-texte > p { margin: 0 0 26px; font-size: 17px; line-height: 1.55; color: var(--gris); max-width: 32em; }
.dh-visiteur .actions { margin-top: 28px; }
.dh-visiteur-texte > .dh-note { margin: 14px 0 0; font-size: 14px; color: var(--gris); }
.dh-exemple { margin: 0; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-surface); background: var(--surface-2); }
.dh-exemple-texte { margin: 0 0 18px; font-size: clamp(19px, 2vw, 23px); line-height: 1.8; }
.dh-faute { padding: 2px 4px; border-radius: 4px; background: var(--papier); box-shadow: 0 0 0 3px var(--papier); }
.dh-faute s { color: var(--rouge); text-decoration-thickness: 1.5px; }
.dh-faute ins { margin-left: 4px; text-decoration: none; color: var(--accent); font-weight: 700; }
.dh-exemple-note { display: grid; gap: 6px; padding: 16px 18px; border-left: 3px solid var(--encre); background: var(--papier); border-radius: 0 var(--r-petit) var(--r-petit) 0; font-size: 15.5px; line-height: 1.5; color: var(--gris); }
.dh-exemple-note strong { color: var(--encre); font-size: 16px; }
.dh-exemple-note i { font-style: normal; font-weight: 600; color: var(--encre); }
.dh-exemple-note small { font-size: 13px; color: var(--gris-doux); }
.dh-progres { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--filet); }
.dh-courbe { display: block; width: 100%; height: auto; margin: 4px 0 2px; overflow: visible; }
.dh-axe { stroke: var(--filet-fort); stroke-width: 1; }
.dh-trait { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.dh-point { fill: var(--papier); stroke: var(--accent); stroke-width: 2; }
.dh-dernier { fill: var(--accent); }
.dh-valeur { font-size: 13px; font-weight: 700; fill: var(--encre); }
.dh-legende-courbe { margin: 0 0 12px; font-size: 12.5px; color: var(--gris-doux); }
.dh-tendance { margin: 0; font-size: 15px; line-height: 1.5; color: var(--encre); }
.dh-progres h3 { margin: 20px 0 8px; font-size: 14.5px; font-weight: 700; }
.dh-faibles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.dh-faibles li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--filet); font-size: 14.5px; }
.dh-faibles b { font-weight: 600; color: var(--rouge); white-space: nowrap; }
@media (max-width: 900px) {
  .dh-grille, .dh-visiteur { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .dh-ligne { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .dh-meta { grid-column: 2; grid-row: 2; }
  .dh-etat { grid-column: 3; grid-row: 1; }
  .dh-une-pied .bouton { flex: 1; }
}
.compte-bloc { scroll-margin-top: calc(var(--haut-entete) + 24px); }

/* Sur un écran tactile, le choix du thème et « Back to top » se touchent facilement (44 pixels de haut). */
@media (pointer: coarse), (max-width: 760px) {
  .theme button, .haut-de-page { min-height: 44px; padding: 0 6px; }
  .theme { gap: 6px; }
}
/* Un choix en segments ne coupe jamais « 5 min » en deux ; sur un écran étroit, les segments se resserrent et passent
   à la ligne entiers si besoin. */
.choix-segments span { white-space: nowrap; }
@media (max-width: 480px) {
  .choix-segments { flex-wrap: wrap; }
  .choix-segments span { padding: 7px 11px; font-size: 14px; }
}

/* Mes cours : changer l'heure d'un cours (les heures libres, jour par jour). */
.ml-changer-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ml-deplacer { width: min(100% - 32px, 760px); }
.ml-heures { max-height: min(56vh, 520px); overflow-y: auto; margin: 4px 0 12px; }
.ml-semaine { margin: 8px 0 4px; }
.ml-heures-jour { padding: 10px 0; border-top: 1px solid var(--filet); }
.ml-heures-jour > span { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.ml-heures-jour > div { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-heures-jour button { min-height: 40px; padding: 0 14px; border: 1px solid var(--filet-fort); border-radius: 999px; background: var(--papier); color: var(--encre); font: inherit; font-size: 14.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
.ml-heures-jour button:hover { border-color: var(--encre); }
.ml-heures-jour button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.ml-choix { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-petit); background: var(--surface-2); font-size: 15px; }
.ml-gris { color: var(--gris); }

/* Live lessons : la confirmation « You’re on the list » et le questionnaire arrivent en fondu, l'un après l'autre. */
.fondu-entre { animation: fondu-entre 0.5s ease both; animation-delay: var(--delai, 0s); }
@keyframes fondu-entre { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .fondu-entre { animation: none; } }
.lb-appel + .live-questions { margin-top: 16px; padding-top: 0; border-top: 0; }
.lb-appel .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* Live lessons, « My hours » : la semaine sur sept lignes. Le jour, une piste horaire avec les plages en couleur, et les
   heures en clair ; une échelle au-dessus. Les plages s'étirent quand le bloc apparaît. */
.lb-semaine { max-width: 980px; border-top: 1px solid var(--filet); }
.lb-jour { display: grid; grid-template-columns: 8em minmax(0, 1fr) 15em; align-items: center; gap: 10px 22px; padding: 12px 0; border-bottom: 1px solid var(--filet); }
.lb-jour > b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.lb-jour.vide > b, .lb-jour.vide .lb-heures { color: var(--gris); font-weight: 500; }
.lb-piste { position: relative; height: 14px; border-radius: 7px; background: var(--surface-2); overflow: hidden; }
.lb-piste span { position: absolute; top: 0; bottom: 0; border-radius: 7px; background: var(--accent); transform-origin: left center; transition: transform 0.9s var(--sortie, ease) calc(0.15s + var(--i, 0) * 0.06s); }
.apparitions .lb-semaine.rev:not(.vu) .lb-piste span { transform: scaleX(0); }
.lb-heures { font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.lb-echelle { padding: 4px 0 6px; border-bottom: 0; }
.lb-piste-echelle { position: relative; height: 16px; }
.lb-piste-echelle i { position: absolute; transform: translateX(-50%); font-style: normal; font-size: 12.5px; color: var(--gris); font-variant-numeric: tabular-nums; }
.lb-piste-echelle i:first-child { transform: none; }
.lb-piste-echelle i:last-child { transform: translateX(-100%); }
@media (max-width: 700px) {
  .lb-jour { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 0; }
  .lb-jour > b { grid-column: 1; grid-row: 1; }
  .lb-heures { grid-column: 2; grid-row: 1; font-size: 14px; }
  .lb-piste, .lb-piste-echelle { grid-column: 1 / -1; grid-row: 2; }
  .lb-echelle > span { display: none; }
  .lb-echelle { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .lb-piste span { transition: none; } .apparitions .lb-semaine.rev:not(.vu) .lb-piste span { transform: none; } }

/* Téléphone : les grands titres respirent. L'interlettrage très serré des grands écrans (−0,05 em et plus) tasse les
   lettres à cette taille ; ici il s'ouvre un peu, et les lignes s'écartent. */
@media (max-width: 600px) {
  :root body :is(h1, .demonstration h2, .section-titre, .auteur-texte h2, .inscription h2, .guide-fin h2, .quatre-tete h2, .recit-volet h2,
    .diapo h2, .st-affiche h2, .lance-toi h2, .lb-appel h2, .avis-tete h2, .carte-recto h2, .rv-section h2) { letter-spacing: -0.03em; line-height: 1.06; }
  :root body .quatre-mot { letter-spacing: -0.045em; }
}

/* « How the stories work » : un niveau sans histoire n'est pas présenté (data-niveaux, écrit par le serveur). */
html[data-niveaux]:not([data-niveaux~="a1-a2"]) [data-niveau="a1-a2"],
html[data-niveaux]:not([data-niveaux~="b1-b2"]) [data-niveau="b1-b2"],
html[data-niveaux]:not([data-niveaux~="c1-c2"]) [data-niveau="c1-c2"] { display: none; }

/* Pied de page d'un membre : il connaît le site, la présentation ne sert plus. */
html.membre .pied-presentation p { display: none; }
/* Sur téléphone, le pied de page d'un membre tient en peu de place : la marque seule, centrée ; pas de colonne
   « Stories » (la page Stories y mène) ; « Learn » et « Help » côte à côte, des liens plus serrés, le bas sur deux lignes. */
@media (max-width: 600px) {
  html.membre .pied-site { padding: 28px 0 20px; }
  html.membre .pied-presentation { text-align: center; margin-bottom: 30px; }
  html.membre .pied-haut { gap: 0; }
  html.membre .pied-colonnes { grid-template-columns: 1fr 1fr; gap: 0 20px; }
  html.membre .pied-colonnes > div:nth-child(2) { display: none; }
  html.membre .pied-colonnes h2 { margin-bottom: 4px; }
  html.membre .pied-colonnes a { padding: 6px 0; font-size: 15px; }
  html.membre .pied-bas { margin-top: 20px; padding-top: 14px; gap: 10px 20px; font-size: 13px; }
}

/* ——— Réserver (/live/book) : le calendrier de la semaine, dans le fuseau de l'élève. En vert, les heures où un cours
   de cette durée peut commencer ou se tenir ; en gris rayé, « Unavailable » (sans jamais dire pourquoi) ; en noir, le
   cours choisi. Sur téléphone, la semaine défile de côté, les heures restent à gauche. ——— */
.rc-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 10px; padding: 0; list-style: none; font-size: 13px; color: var(--gris); }
.rc-legende i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.rc-legende .libre { background: var(--accent-pale); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.rc-legende .pris { background: repeating-linear-gradient(135deg, var(--filet) 0 3px, var(--surface-2) 3px 6px); }
.rc-legende .choix { background: var(--encre); }
.rc-defile { overflow-x: auto; overscroll-behavior-x: contain; border-top: 1px solid var(--encre); scroll-snap-type: x proximity; padding-bottom: 12px; }
.rc-grille { display: grid; grid-template-columns: 48px repeat(7, minmax(78px, 1fr)); min-width: 600px; }
.rc-jour { scroll-snap-align: start; scroll-margin-left: 48px; }
.rc-jour-tete { height: 48px; padding: 6px 4px 0; border-bottom: 1px solid var(--filet); text-align: center; font-size: 13px; line-height: 1.2; }
.rc-jour-tete b { display: block; font-weight: 600; color: var(--gris); }
.rc-jour-tete span { font-size: 17px; font-weight: 800; }
.rc-jour.rc-sans .rc-jour-tete { opacity: .45; }
.rc-corps { position: relative; height: var(--hauteur); background-image: repeating-linear-gradient(to bottom, var(--filet) 0 1px, transparent 1px 52px); }
.rc-jour .rc-corps { border-left: 1px solid var(--filet); }
.rc-heures { position: sticky; left: 0; z-index: 4; background: var(--papier); }
.rc-heures .rc-corps { background: none; }
.rc-heures span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11.5px; color: var(--gris); font-variant-numeric: tabular-nums; }
.rc-heures span:first-child { transform: none; }
.rc-pris, .rc-libre, .rc-choix { position: absolute; left: 3px; right: 3px; border-radius: 6px; overflow: hidden; font-size: 11.5px; line-height: 1.25; text-align: left; }
.rc-pris { z-index: 1; padding: 4px 6px; background: repeating-linear-gradient(135deg, var(--filet) 0 4px, var(--surface-2) 4px 8px); color: var(--gris); }
.rc-pris span { font-weight: 600; }
.rc-libre { z-index: 2; border: 0; padding: 4px 6px; background: var(--accent-pale); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; display: flex; align-items: flex-start; font-variant-numeric: tabular-nums; }
.rc-libre:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.rc-libre:focus-visible { outline: 2px solid var(--encre); outline-offset: 1px; }
.rc-choix { z-index: 3; padding: 4px 6px; background: var(--encre); color: var(--papier); font-weight: 700; pointer-events: none; box-shadow: 0 4px 14px rgb(20 22 26 / .22); font-variant-numeric: tabular-nums; }
.rc-aide { margin: 10px 0 0; font-size: 13.5px; color: var(--gris); }
@media (max-width: 600px) { .rc-grille { grid-template-columns: 44px repeat(7, minmax(92px, 1fr)); min-width: 0; width: calc(44px + 7 * 92px); } }

/* Changer l'heure d'un cours : son heure actuelle, en pointillés dans le calendrier. */
.rc-actuel { position: absolute; left: 3px; right: 3px; z-index: 2; border-radius: 6px; border: 1.5px dashed var(--encre); background: color-mix(in srgb, var(--papier) 70%, transparent); padding: 3px 6px; font-size: 11.5px; font-weight: 700; color: var(--encre); pointer-events: none; }
.rc-legende .actuel { border: 1.5px dashed var(--encre); }

/* Le calendrier : le cours en pointillés sous la souris (avec son heure) avant de cliquer, et sous le calendrier les
   départs possibles de la zone choisie, pour régler l'heure exacte d'un toucher. */
.rc-survol { position: absolute; left: 3px; right: 3px; z-index: 3; border-radius: 6px; border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent-pale) 60%, transparent); padding: 3px 6px; font-size: 11.5px; font-weight: 700; color: var(--accent); pointer-events: none; font-variant-numeric: tabular-nums; }
.rc-libre { cursor: pointer; }
.rc-departs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 12px 0 0; }
.rc-departs > span { font-size: 14px; font-weight: 600; }
.rc-departs > div { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-departs button { min-height: 40px; min-width: 64px; padding: 0 12px; border: 1px solid var(--filet-fort); border-radius: 999px; background: var(--papier); color: var(--encre); font: inherit; font-size: 14.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
.rc-departs button:hover { border-color: var(--encre); }
.rc-departs button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }

/* « How was your lesson? » (public/note-cours.js) : la fenêtre monte doucement ; les étoiles arrivent l'une après
   l'autre, s'allument jusqu'à celle qu'on touche, avec un petit rebond ; puis un « Merci ! ». */
.nc-fenetre { width: min(460px, calc(100vw - 32px)); text-align: center; }
.nc-fenetre[open] { animation: nc-monte .5s var(--sortie) both; }
@keyframes nc-monte { from { opacity: 0; transform: translateY(28px) scale(.98); } }
.nc-fenetre h2 { padding: 0 32px; text-wrap: balance; }
.nc-quand { margin: -2px 0 18px; color: var(--gris); font-size: 15px; }
.nc-etoiles { display: flex; justify-content: center; gap: 6px; }
.nc-etoiles button { width: 52px; height: 52px; padding: 4px; border: 0; background: none; cursor: pointer; border-radius: 12px; color: var(--filet-fort); animation: nc-etoile .45s var(--sortie) both; animation-delay: calc(.18s + var(--i) * .06s); }
.nc-etoiles button:focus-visible { outline: 2px solid var(--encre); outline-offset: 1px; }
.nc-etoiles svg { width: 100%; height: 100%; fill: currentColor; transition: transform .25s var(--sortie), color .2s ease; transition-delay: calc(var(--i) * 35ms); }
.nc-etoiles button.allumee { color: #e8a923; }
.nc-etoiles button.allumee svg { transform: scale(1.06); }
.nc-etoiles.pulse button.allumee svg { animation: nc-rebond .5s var(--sortie); animation-delay: calc(var(--i) * 45ms); }
@keyframes nc-etoile { from { opacity: 0; transform: translateY(8px) scale(.7); } }
@keyframes nc-rebond { 40% { transform: scale(1.28) rotate(-6deg); } 100% { transform: scale(1.06); } }
.nc-mot { min-height: 1.5em; margin: 6px 0 4px; font-weight: 600; font-size: 15px; }
.nc-prive { margin: 0 0 18px; color: var(--gris); font-size: 13.5px; }
.nc-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.nc-champ { display: block; text-align: left; margin: 4px 0 12px; }
.nc-champ span { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.nc-champ textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--papier); color: var(--encre); font: inherit; font-size: 16px; resize: vertical; }
.nc-champ textarea:focus { outline: none; border-color: var(--encre); }
.nc-case { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin: 0 0 16px; font-size: 14.5px; }
.nc-case small { color: var(--gris); }
.nc-fenetre .erreur { margin: -6px 0 12px; text-align: left; }
.nc-etape[data-etape="2"]:not([hidden]), .nc-merci:not([hidden]) { animation: nc-glisse .35s var(--sortie) both; }
@keyframes nc-glisse { from { opacity: 0; transform: translateX(16px); } }
.nc-merci { padding: 8px 0 6px; }
.nc-merci p { color: var(--gris); margin: 0; }
.nc-coeur { width: 56px; height: 56px; margin: 0 auto 8px; color: #e8a923; animation: nc-rebond .6s var(--sortie) both; }
.nc-coeur svg { width: 100%; height: 100%; fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .nc-fenetre[open], .nc-etoiles button, .nc-etoiles.pulse button.allumee svg, .nc-etape, .nc-coeur { animation: none !important; }
  .nc-etoiles svg { transition: none; }
}
.nc-etoiles:focus, .nc-fenetre h2[tabindex]:focus { outline: none; }
.cadeau-complet { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border-radius: var(--r-petit); background: var(--surface-2); font-size: 14.5px; font-weight: 400; }

/* ——— My words : la révision en cartes. Une pile (les suivantes dépassent derrière), une carte qui se retourne en 3D
   (recto : le mot et sa phrase ; verso : le sens), qu'on fait glisser une fois retournée : à droite « I know it »
   (tampon vert), à gauche « Still learning » (tampon orange). Les deux boutons dessous font la même chose. ——— */
.fc-pile { position: relative; display: grid; margin: 4px 0 0; perspective: 1400px; }
.fc-pile > * { grid-area: 1 / 1; }
.fc-fond { border-radius: var(--r-livre); background: var(--surface); box-shadow: inset 0 0 0 1px var(--filet); }
.fc-fond-1 { transform: translateY(10px) scale(.965); opacity: .8; }
.fc-fond-2 { transform: translateY(20px) scale(.93); opacity: .5; }
.fc-carte { position: relative; z-index: 1; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; animation: fc-arrive .4s var(--sortie); --oui: 0; --non: 0; }
@keyframes fc-arrive { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.fc-carte:focus { outline: none; }
.fc-carte:focus-visible .fc-face { box-shadow: var(--ombre-livre), inset 0 0 0 1px var(--filet), 0 0 0 3px var(--accent-pale); }
.fc-interieur { display: grid; transform-style: preserve-3d; transition: transform .55s var(--sortie); }
.fc-carte.retournee .fc-interieur { transform: rotateY(180deg); }
.fc-face {
  grid-area: 1 / 1; min-height: min(56vh, 420px); padding: clamp(26px, 5vw, 48px); text-align: left;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-livre);
  box-shadow: var(--ombre-livre), inset 0 0 0 1px var(--filet);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.fc-verso { transform: rotateY(180deg); justify-content: center; }
.fc-face small { font-style: italic; color: var(--gris); }
.fc-recto h2 { font-size: clamp(40px, 7vw, 64px); font-weight: 800; letter-spacing: -0.05em; line-height: 1.02; margin: 6px 0 20px; overflow-wrap: anywhere; }
.fc-verso h3 { font-size: clamp(24px, 4vw, 32px); font-weight: 800; letter-spacing: -0.03em; margin: 4px 0 16px; }
.fc-face .carte-ecoute { margin-top: 18px; }
.fc-indice { margin: auto 0 0; padding-top: 22px; font-size: 13.5px; font-weight: 600; color: var(--gris); text-align: center; }
/* Les tampons, de plus en plus visibles à mesure qu'on fait glisser */
.fc-tampon { position: absolute; top: 22px; z-index: 2; padding: 6px 12px; border: 3px solid currentColor; border-radius: 10px; font-size: 18px; font-weight: 800; letter-spacing: .01em; text-transform: none; pointer-events: none; background: color-mix(in srgb, var(--surface) 80%, transparent); }
.fc-tampon-oui { left: 20px; color: var(--accent); transform: rotate(-10deg); opacity: var(--oui); }
.fc-tampon-non { right: 20px; color: #c46a12; transform: rotate(10deg); opacity: var(--non); }
.fc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.fc-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--filet-fort); background: var(--papier); color: var(--encre); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s, opacity .2s; }
.fc-bouton span { font-size: 18px; }
.fc-bouton kbd { font-size: 12px; color: inherit; background: transparent; border-color: currentColor; opacity: .55; }
.fc-non:hover { border-color: #c46a12; color: #9a520b; }
.fc-oui { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.fc-oui kbd { color: inherit; opacity: .7; }
.fc-geste { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--gris); }
.fc-annuler { margin: 14px 0 0; text-align: center; font-size: 14.5px; animation: arrivee .3s var(--sortie); }
.fc-annuler-fin { margin-top: 22px; }
/* Le verso : la réponse. Le sens en grand, la traduction dessous ; le mot rappelé en petit en haut */
.fc-verso { justify-content: center; }
/* Le recto : le mot seul, sa nature et ses deux écoutes, au milieu de la carte */
.fc-recto { justify-content: center; }
.fc-exemple { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--filet); }
.fc-exemple .carte-extrait { font-size: 16.5px; line-height: 1.55; }
.fc-exemple .carte-source { margin-top: 8px; }
.fc-rappel { margin: 0 0 18px; font-size: 15px; color: var(--gris); }
.fc-rappel b { color: var(--encre); font-weight: 700; }
.fc-rappel small { font-style: italic; margin-left: 4px; }
.fc-sens { margin: 0 0 14px; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; color: var(--encre); text-wrap: balance; }
.fc-verso .carte-en { font-size: 18px; }
.fc-verso .carte-dico { align-self: flex-start; margin-top: 22px; font-size: 14px; }
.revision-aide { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; text-align: center; }
/* ——— Le mode révision, sur ordinateur et tablette : centré, et tout tient dans l'écran ——— */
@media (min-width: 761px) and (pointer: fine), (min-width: 761px) and (hover: hover) {
  .espace.en-revision { padding-top: 28px; padding-bottom: 56px; }
  .en-revision .espace-tete { margin-bottom: 26px; align-items: center; }
  .en-revision .espace-tete > div { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
  .en-revision .espace-tete h1 { font-size: 30px; letter-spacing: -0.03em; margin: 0; }
  .en-revision .espace-tete p { font-size: 15px; }
  .revision { max-width: 720px; margin: 0 auto; }
  /* La carte prend la hauteur de son contenu (recto et verso toujours à la même hauteur : ils partagent la même
     case), sans grand vide autour d'un mot seul, et jamais plus haute que l'écran ne le permet */
  .revision .fc-face { min-height: 320px; max-height: calc(100dvh - var(--haut-entete) - 280px); overflow: auto; }
  .revision .fc-recto h2 { font-size: clamp(40px, 5.2vw, 60px); }
  .revision .carte-extrait { font-size: 17px; }
  .revision .fc-actions { margin-top: 20px; }
  .revision .revision-aide { margin-top: 14px; }
}
@media (max-width: 600px) {
  .fc-face { min-height: min(52vh, 400px); }
  .fc-bouton { font-size: 15.5px; padding: 0 10px; white-space: nowrap; }
  .fc-bouton kbd, .revision-aide { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-carte, .fc-annuler { animation: none; }
  .fc-interieur { transition: none; }
}

/* « Feedback » : un petit bouton discret en bas à droite (ordinateur seulement), et le formulaire. */
.feedback-flottant { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--filet-fort); border-radius: 999px; background: var(--papier); color: var(--encre); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgb(20 22 26 / .10); opacity: .9; transition: opacity .2s, transform .2s var(--sortie), border-color .2s; }
.feedback-flottant:hover { opacity: 1; border-color: var(--encre); transform: translateY(-1px); }
.feedback-flottant svg { width: 16px; height: 16px; }
@media (max-width: 760px), (pointer: coarse) { .feedback-flottant { display: none; } }
@media print { .feedback-flottant { display: none; } }
.menu-feedback { display: block; width: 100%; margin-top: 18px; padding: 14px 0 0; border: 0; border-top: 1px solid var(--filet); background: none; color: var(--gris); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.menu-feedback b { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.fb-fenetre { width: min(460px, calc(100vw - 32px)); }
.fb-intro { color: var(--gris); margin: 0 0 16px; }
.fb-types { display: flex; gap: 8px; margin-bottom: 12px; }
.fb-types label { flex: 1; }
.fb-types input { position: absolute; opacity: 0; pointer-events: none; }
.fb-types span { display: block; padding: 10px 8px; border: 1px solid var(--filet-fort); border-radius: 999px; text-align: center; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.fb-types input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.fb-types input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }
.fb-champ { display: block; margin-bottom: 12px; }
.fb-champ > span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.fb-champ small { font-weight: 400; color: var(--gris); }
.fb-champ textarea, .fb-champ input { width: 100%; padding: 11px 13px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--papier); color: var(--encre); font: inherit; font-size: 16px; }
.fb-champ textarea { resize: vertical; }
.fb-champ textarea:focus, .fb-champ input:focus { outline: none; border-color: var(--encre); }
.fb-piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fb-actions { display: flex; justify-content: flex-end; }
.fb-merci { text-align: center; padding: 10px 0 4px; }
.fb-merci p { color: var(--gris); margin: 0; }
/* « Feedback » : réservé aux membres connectés (un visiteur écrit par la page Contact). */
html:not(.membre) .feedback-flottant, html:not(.membre) .menu-feedback { display: none !important; }

/* ——— Le mode immersion (public/langue.js) ——— */
html.lg-attente body { visibility: hidden; }
.langue-choix { display: inline-flex; padding: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--filet-fort); flex: none; }
.langue-choix button { border: 0; background: none; color: var(--gris); font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; padding: 4px 9px; border-radius: 999px; cursor: pointer; line-height: 1.2; }
.langue-choix button[aria-pressed="true"] { background: var(--encre); color: var(--papier); }
.langue-choix button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav .langue-choix { margin-left: 8px; align-self: center; }
.menu-langue { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--filet); font-size: 15px; color: var(--gris); }
.menu-langue small { color: var(--gris); }
.menu-langue .langue-choix button { font-size: 14px; padding: 6px 14px; }
@media (max-width: 760px) { .nav .langue-choix { display: none; } }
/* Le choix de la langue dans la barre : un sélecteur, la langue en cours (« EN », « ES », et en mode immersion « ● FR »
   avec un point vert qui pulse), qui ouvre la liste des trois langues (public/langue.js) */
.lg-point { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.langue-selecteur { position: relative; margin-left: 6px; align-self: center; }
.langue-selecteur > button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 11px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--filet-fort); color: var(--encre); font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; cursor: pointer; transition: box-shadow .15s; }
.langue-selecteur > button:hover, .langue-selecteur.ouvert > button { box-shadow: inset 0 0 0 1px var(--encre); }
.langue-selecteur > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.langue-selecteur .lg-chevron { width: 14px; height: 14px; color: var(--gris); transition: transform .2s; }
.langue-selecteur.ouvert .lg-chevron { transform: rotate(180deg); }
.lg-code-fr, .lg-code-es, .lg-code-zh { display: none; }
html:is([data-langue="fr"], [data-langue="es"], [data-langue="zh"]) .langue-selecteur .lg-code-en { display: none; }
html[data-langue="fr"] .langue-selecteur .lg-code-fr, html[data-langue="es"] .langue-selecteur .lg-code-es, html[data-langue="zh"] .langue-selecteur .lg-code-zh { display: inline; }
html[data-langue="fr"] .langue-selecteur .lg-point { display: inline-block; animation: lg-pouls 2s ease-out infinite; }
.langue-liste { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 186px; flex-direction: column; padding: 6px; background: var(--surface); border-radius: var(--r-surface); box-shadow: var(--ombre-flottante), 0 0 0 1px var(--filet); }
.langue-selecteur.ouvert .langue-liste { display: flex; animation: lg-liste .16s ease-out; }
@keyframes lg-liste { from { opacity: 0; transform: translateY(-4px); } }
.langue-liste button { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--r-petit); background: none; color: var(--encre); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.langue-liste button b { width: 1.7em; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--gris); }
.langue-liste button small { margin-left: auto; padding-left: 10px; font-size: 12.5px; color: var(--gris); }
.langue-liste button:hover, .langue-liste button:focus-visible { background: var(--surface-2); outline: none; }
.langue-liste button[aria-checked="true"] { font-weight: 600; }
.langue-liste button[aria-checked="true"] b { color: var(--accent); }
.langue-liste button[aria-checked="true"]::after { content: ""; align-self: center; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--accent); }
.langue-liste button:has(small)[aria-checked="true"]::after { margin-left: 10px; }
@media (max-width: 760px) { .nav .langue-selecteur { display: none; } }
/* Le français (le mode immersion) en tête, mis à part par un filet ; puis les autres langues */
.langue-liste .lg-sep { height: 1px; margin: 5px 8px; background: var(--filet); }
.langue-liste [data-choix-langue="fr"] { font-weight: 600; }
.langue-choix [data-choix-langue="fr"] { position: relative; margin-right: 7px; }
.langue-choix [data-choix-langue="fr"]::after { content: ""; position: absolute; top: 22%; bottom: 22%; right: -4px; width: 1px; background: var(--filet-fort); }
@media (prefers-reduced-motion: reduce) { .langue-selecteur.ouvert .langue-liste { animation: none; } }
@keyframes lg-pouls {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  70%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); }
}
/* Téléphone : le point sur le bouton du menu ☰ */
.burger { position: relative; }
.burger .lg-pastille { position: absolute; top: 4px; right: 2px; }
html[data-langue="fr"] .burger .lg-pastille { display: block; animation: lg-pouls 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .lg-point { animation: none !important; } }
/* Le passage au français : les lettres glissent (langue.js) */
/* (Le texte animé garde le retour à la ligne de son parent : un titre « nowrap » reste sur ses lignes) */
.lg-boite { white-space: inherit; }
/* Le passage au français (View Transitions, public/langue.js) : chaque bloc glisse vers sa nouvelle place et prend sa
   nouvelle taille ; l'anglais s'efface en fondu pendant que les lettres françaises, déjà là, se réorganisent. */
::view-transition-group(*) { animation-duration: .8s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(*) { animation: lg-vt-sortie .35s ease both; }
::view-transition-new(*) { animation: none; opacity: 1; }
::view-transition-old(root) { animation: lg-vt-sortie .4s ease both; }
::view-transition-new(root) { animation: lg-vt-entree .4s ease both; }
@keyframes lg-vt-sortie { to { opacity: 0; } }
@keyframes lg-vt-entree { from { opacity: 0; } }
.lg-mot { display: inline-block; white-space: nowrap; }
.lg-lettre { display: inline-block; will-change: transform; }
/* Les lettres animées sont des <span> : aucun style du site visant les « span » d'un bloc (une largeur minimale pour
   aligner les numéros du sommaire, une couleur, une marge…) ne doit les toucher, sinon les lettres s'écartent. */
:is(.lg-boite, .lg-mot, .lg-lettre) {
  min-width: 0 !important; max-width: none !important; width: auto !important; height: auto !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
  color: inherit !important; font: inherit !important; letter-spacing: inherit !important; text-decoration: inherit !important;
  float: none !important; position: static !important; vertical-align: baseline !important; flex: none !important;
}
.lg-boite { display: inline !important; }
:is(.lg-mot, .lg-lettre) { display: inline-block !important; }
/* Le retour à l'anglais : un fondu flou */
/* (Des animations, pas des transitions : le menu du téléphone et la barre ont leurs propres transitions, qui
   écrasaient celle-ci et rendaient le flou sec.) Le flou monte en 0,4 s, l'anglais arrive, puis il se dissipe en 0,6 s. */
html.lg-flou-entree :is(main, .entete, .pied-site, .menu-mobile) { animation: lg-flou-entree .4s cubic-bezier(.4, 0, .7, .2) forwards; }
html.lg-flou-sortie :is(main, .entete, .pied-site, .menu-mobile) { animation: lg-flou-sortie .6s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes lg-flou-entree { to { filter: blur(6px); opacity: .25; } }
@keyframes lg-flou-sortie { from { filter: blur(6px); opacity: .25; } to { filter: blur(0); opacity: 1; } }
/* Les passages qui n'existent que dans une langue (la traduction anglaise des CGV, l'anglais des mentions légales) */
html[data-langue="fr"] [data-version="en"] { display: none !important; }
/* Les CGV : en français, seule la version française (celle qui fait foi). Le fichier public/terms.html n'est pas
   modifié pour ça : il doit rester identique à la version archivée (src/cgv.mjs). */
html[data-langue="fr"] .texte-legal > section#en, html[data-langue="fr"] .texte-legal > .legal-sommaire { display: none !important; }
@media (prefers-reduced-motion: reduce) { html:is(.lg-flou-entree, .lg-flou-sortie) :is(main, .entete, .pied-site, .menu-mobile) { animation: none; } }

/* ——— Page publique d'une histoire réservée (src/apercu.mjs) : couverture, début du texte, mots expliqués ——— */
.apercu { padding-bottom: clamp(56px, 8vw, 104px); }
.ap-tete {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px);
  align-items: end; padding-top: var(--haut-page);
}
.ap-couverture {
  width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; display: block;
  border-radius: var(--r-livre); box-shadow: var(--ombre-livre); background: var(--surface-2);
}
.ap-serie { color: var(--gris); font-size: 14.5px; margin-bottom: 14px; }
.ap-serie a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--filet-fort); }
.ap-serie a:hover { color: var(--encre); }
.ap-intro h1 { font-size: var(--titre-page); font-weight: 800; letter-spacing: -0.055em; line-height: 0.95; text-wrap: balance; }
.ap-meta { margin-top: 18px; color: var(--gris); font-size: 15px; font-variant-numeric: tabular-nums; }
.ap-meta b { color: var(--encre); font-weight: 700; }
.ap-resume { margin-top: 22px; max-width: 34em; font-family: var(--lecture-serif); font-size: clamp(19px, 1.7vw, 22px); line-height: 1.45; }
.ap-membres { display: flex; gap: 10px; align-items: flex-start; margin-top: 26px; max-width: 34em; color: var(--gris); font-size: 15px; line-height: 1.45; }
.ap-cadenas { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #f2c94c; color: #2b2410; }
.ap-cadenas svg { width: 12px; height: 12px; }
.ap-appel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.ap-appel p { color: var(--gris); font-size: 14.5px; }
.ap-appel p a { color: var(--encre); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.ap-section { margin-top: clamp(56px, 7vw, 96px); }
.ap-section > * { max-width: 760px; }
.ap-section h2 { font-size: var(--titre-bloc, 28px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 22px; }
.ap-extrait { position: relative; font-family: var(--lecture-serif); font-size: clamp(19px, 1.8vw, 22px); line-height: 1.6; }
.ap-extrait p + p { margin-top: 0.9em; }
/* La fin de l'extrait s'efface : la suite est pour les membres. */
.ap-extrait.coupe { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.ap-suite { margin-top: 14px; color: var(--gris); font-size: 15px; }

.ap-lexique { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); border-top: 1px solid var(--filet); }
.ap-lexique > div { padding: 16px 0; border-bottom: 1px solid var(--filet); }
.ap-lexique dt { font-family: var(--lecture-serif); font-size: 21px; font-weight: 600; line-height: 1.25; }
.ap-lexique dd { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 14.5px; line-height: 1.45; color: var(--gris); }
.ap-nature { font-style: italic; }
.ap-en { color: var(--accent); font-weight: 600; }
.ap-def { flex-basis: 100%; color: var(--encre); }

.ap-fin::before { content: ""; display: block; max-width: none; height: 1px; background: var(--filet); margin-bottom: clamp(32px, 4vw, 48px); }
.ap-fin > p:not(.ap-libres) { max-width: 34em; font-size: var(--chapo, 18px); line-height: 1.5; }
.ap-libres { margin-top: 26px; color: var(--gris); font-size: 15px; line-height: 1.5; }
.ap-libres a { color: var(--encre); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .ap-tete { grid-template-columns: 1fr; align-items: start; gap: 26px; }
  .ap-couverture { width: 46vw; max-width: 220px; }
  .ap-lexique { grid-template-columns: 1fr; }
  .ap-appel .bouton { width: 100%; }
}

/* Les tableaux d'un article du blog (markdown « | a | b | ») : lisibles, aérés, défilants sur téléphone. */
.article-corps .k-table-defile { overflow-x: auto; margin: 1.4em 0 1.6em; }
.article-corps table { border-collapse: collapse; min-width: 100%; font-size: 0.94em; }
.article-corps th, .article-corps td { padding: 10px 18px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--filet); }
.article-corps th { font-weight: 700; border-bottom-color: var(--filet-fort); }
.article-corps tr:last-child td { border-bottom: 0; }
/* Le lexique d'un article en français : un bouton par mot, pour l'enregistrer dans My words (public/blog.js) */
.article-corps .lexique-table th:last-child, .article-corps .lexique-table td.lexique-ajout { width: 1%; padding-right: 0; }
.article-corps .lexique-table td.lexique-ajout { padding-top: 7px; padding-bottom: 7px; vertical-align: middle; text-align: right; }
.lexique-bouton { width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--filet-fort); border-radius: 50%; background: none; color: var(--gris); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s var(--sortie); }
.lexique-bouton svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lexique-bouton:hover { border-color: var(--accent); color: var(--accent); }
.lexique-bouton:active { transform: scale(0.9); }
.lexique-bouton[aria-pressed="true"] { border-color: transparent; background: var(--accent-pale); color: var(--accent); }
.lexique-bouton.vient[aria-pressed="true"] { animation: lexique-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes lexique-pop { from { transform: scale(0.6); } }
/* Dans le texte, les mots en gras du lexique : soulignés en pointillé comme dans les histoires, surlignés une fois
   enregistrés ; leur bulle, le mot, son sens et le bouton */
.article-corps strong.lexique-mot { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer; border-radius: 3px; transition: background 0.25s ease, box-shadow 0.25s ease; }
.article-corps strong.lexique-mot:hover, .article-corps strong.lexique-mot.ouvert { text-decoration-style: solid; }
.article-corps strong.lexique-mot:focus:not(:focus-visible) { outline: none; }
.article-corps strong.lexique-mot.sauve, .article-corps strong.lexique-mot.ouvert { background: var(--accent-pale); box-shadow: 0 0 0 3px var(--accent-pale); }
.lexique-bulle { position: absolute; z-index: 60; width: min(320px, calc(100vw - 24px)); padding: 16px 18px; background: var(--surface); border-radius: var(--r-surface); box-shadow: var(--ombre-flottante), 0 0 0 1px var(--filet); animation: lexique-bulle 0.22s var(--sortie); }
@keyframes lexique-bulle { from { opacity: 0; transform: translateY(6px); } }
.lexique-bulle-mot { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.lexique-bulle-en { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: var(--gris); }
.lexique-bulle-en b { margin-right: 8px; font-size: 11.5px; font-weight: 700; color: var(--encre); }
.lexique-bulle-ajout { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 10px; border: 1px solid var(--filet-fort); border-radius: 99px; background: var(--surface); color: var(--encre); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s; }
.lexique-bulle-ajout svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lexique-bulle-ajout:hover { border-color: var(--accent); color: var(--accent); }
.lexique-bulle-ajout:active { transform: translateY(1px); }
.lexique-bulle-ajout[aria-pressed="true"] { border-color: transparent; background: var(--accent-pale); color: var(--accent); }
.lexique-bulle-ajout[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .lexique-bouton.vient[aria-pressed="true"], .lexique-bulle { animation: none; } }

/* L'aperçu d'un article pas encore en ligne (/blog/<adresse>?apercu, administration seulement) : un bandeau qui reste
   sous la barre du site, pour ne jamais confondre l'aperçu avec la page publiée. */
.apercu-bandeau { position: sticky; top: var(--haut-entete); z-index: 40; display: flex; align-items: center; justify-content: center; gap: 8px 18px; flex-wrap: wrap; padding: 9px var(--gouttiere); background: var(--encre); color: var(--papier); font-size: 14px; text-align: center; }
.apercu-bandeau b { font-weight: 700; }
.apercu-bandeau a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--papier) 50%, transparent); }
.apercu-bandeau a:hover { text-decoration-color: currentColor; }

/* Inscriptions sur invitation (bêta privée) : une note sous le titre de la page d'inscription. */
.acces-beta { margin: -4px 0 0; padding: 12px 14px; border-radius: var(--r-petit); background: var(--surface-2); font-size: 14.5px; line-height: 1.5; color: var(--gris); }
.acces-beta b { color: var(--encre); }

/* Le niveau d'un article écrit en français (rubrique « In French ») : à côté de la rubrique, comme sur les histoires. */
.blog-niveau { display: inline-block; margin-left: 9px; padding: 1px 6px; border-radius: 4px; font-size: 11.5px; font-weight: 700; line-height: 1.5; letter-spacing: 0.01em; color: var(--encre); box-shadow: inset 0 0 0 1px var(--filet-fort); vertical-align: 1px; font-variant-numeric: tabular-nums; }
.diapo-rubrique .blog-niveau { margin-left: 2px; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
/* (les images élargies tiennent dans l'écran ; sur Windows, la barre de défilement compte dans 100vw : on coupe ce
   débordement d'un pixel ou deux plutôt que de laisser apparaître un défilement horizontal) */
#article { overflow-x: clip; }
.acces-lettre { font-size: 14px; color: var(--gris); }
/* La lettre de la semaine, proposée dans « Also today » : oui, ou non merci */
.hm-choix { display: flex; gap: 14px; align-items: center; white-space: nowrap; }
.hm-choix button { padding: 0; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hm-choix .hm-non { font-weight: 500; color: var(--gris); }

/* ——— My France (/my-france) : la carte des départements trouvés, le niveau, la découverte en plein écran ——— */
.mf { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(64px, 9vw, 120px); --mf-vide: color-mix(in srgb, var(--encre) 7%, var(--papier)); --mf-frontiere: color-mix(in srgb, var(--encre) 20%, var(--papier)); }
.mf-poser-voile { --mf-vide: color-mix(in srgb, var(--encre) 7%, var(--papier)); --mf-frontiere: color-mix(in srgb, var(--encre) 20%, var(--papier)); }
.mf-tete { position: relative; padding-bottom: 22px; border-bottom: 1.5px solid var(--encre); margin-bottom: clamp(28px, 4vw, 40px); }
.mf-tete h1 { margin: 0 0 12px; font-size: clamp(44px, 6.4vw, 88px); font-weight: 800; letter-spacing: -0.055em; line-height: 0.95; }
.mf-chapo { margin: 0; max-width: 40em; font-size: 18px; line-height: 1.5; color: var(--gris); }
.mf-grille { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (max-width: 900px) { .mf-grille { grid-template-columns: 1fr; } }
.mf-carte-cadre { position: relative; }
@media (min-width: 901px) { .mf-carte-cadre { position: sticky; top: var(--mf-collant, calc(var(--haut-entete) + 16px)); } }
.mf-carte { width: 100%; height: auto; display: block; overflow: visible; }
.mf-dep { fill: var(--mf-vide); stroke: var(--papier); stroke-width: 1.1; transition: fill .3s; }
.mf-dep.vide:hover { fill: color-mix(in srgb, var(--encre) 11%, var(--papier)); }
.mf-dep.trouve { fill: var(--c); stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; paint-order: stroke; cursor: pointer; filter: drop-shadow(0 1.5px 1.2px rgba(23, 24, 28, .22)); }
.mf-dep.trouve:hover { filter: drop-shadow(0 3px 3px rgba(23, 24, 28, .3)) brightness(1.06); }
.mf-dep.a-poser { opacity: 0; }
.mf-frontieres path { fill: none; stroke: var(--mf-frontiere); stroke-width: 1.3; stroke-linejoin: round; pointer-events: none; }
.mf-frontieres .mf-region-faite { stroke: var(--c); stroke-width: 3.4; opacity: .9; }
.mf-encadre { fill: none; stroke: var(--filet-fort); stroke-width: 1.2; stroke-dasharray: 3 4; }
.mf-encadre-nom { font-size: 15px; fill: var(--gris); font-family: var(--sans); }
.mf-bulle { position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); background: var(--encre); color: var(--papier); font-size: 14px; line-height: 1.3; padding: 7px 11px; border-radius: 7px; white-space: nowrap; opacity: 0; transition: opacity .12s; z-index: 2; }
.mf-bulle small { display: block; opacity: .7; font-size: 12.5px; }
.mf-bulle-ville { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.mf-bulle-ville::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px currentColor; flex: none; }
/* Le point de la préfecture, sur un autocollant posé */
.mf-villes { pointer-events: none; }
.mf-ville { fill: #fff; stroke: var(--encre); stroke-width: 1.5; transition: opacity .5s; }
.mf-ville.a-poser { opacity: 0; transition: none; }
.mf-bulle.vue { opacity: 1; }
.mf-legende { margin: 14px 0 0; font-size: 14.5px; color: var(--gris); }
.mf-pose { position: fixed; z-index: 28; pointer-events: none; will-change: transform, filter; }
/* La pose : la page s'efface, la carte seule au centre ; ensuite, elle rejoint sa place et le voile se lève */
.mf-poser-voile { position: fixed; inset: 0; z-index: 28; display: grid; place-items: safe center; padding: calc(var(--haut-entete) + 24px) 16px 24px; overflow: hidden; background: color-mix(in srgb, var(--papier) 93%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .5s ease; }
.mf-poser-voile.vue { opacity: 1; }
.mf-poser-voile.part { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .85s ease, backdrop-filter .85s ease; }
.mf-pose svg { width: 100%; height: 100%; overflow: visible; display: block; }

.mf-cote { display: grid; gap: 26px; }
.mf-niveau { border: 1px solid var(--filet); border-radius: 14px; padding: 22px 22px 20px; }
.mf-niveau-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mf-niveau-haut b { font-size: 15px; color: var(--gris); font-weight: 600; }
.mf-niveau-haut strong { font-size: 44px; letter-spacing: -.04em; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.mf-jauge { height: 10px; border-radius: 99px; background: var(--surface-2); margin: 16px 0 10px; overflow: hidden; }
.mf-jauge i { display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--accent); transition: width 1.2s var(--sortie); }
.mf-niveau p { margin: 0; font-size: 15.5px; color: var(--gris); }
.mf-niveau p b { color: var(--encre); }
.mf-niveau .mf-attente { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--accent-pale); color: var(--encre); font-size: 14.5px; }
.mf-compte { display: flex; gap: 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--filet); font-size: 14.5px; color: var(--gris); }
.mf-compte b { display: block; font-size: 22px; color: var(--encre); letter-spacing: -.02em; }
.mf-invite h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.03em; }
.mf-invite .bouton { margin: 16px 0 10px; }
.mf-invite .mf-petit { font-size: 14.5px; }
.mf-h2 { margin: 0 0 10px; font-size: 19px; letter-spacing: -.02em; }
.mf-points { list-style: none; margin: 0; padding: 0; font-size: 15.5px; }
.mf-points li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--filet); }
.mf-points li span:last-child { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mf-regions { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.mf-regions li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; padding: 6px 0; }
.mf-regions i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.mf-regions li.zero i { background: var(--mf-vide); box-shadow: inset 0 0 0 1px var(--filet-fort); }
.mf-regions li span:last-child { color: var(--gris); font-variant-numeric: tabular-nums; font-size: 14px; }
.mf-regions li.complete span:last-child { color: var(--accent); font-weight: 700; }
.mf-regions li.mf-sous { display: block; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--filet); font-size: 14px; font-weight: 700; color: var(--gris); }

/* La découverte, en plein écran */
html.mf-sans-defilement { overflow: hidden; }
.mf-revel { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--papier); overflow: auto; opacity: 0; transition: opacity .45s ease; }
.mf-revel:focus, .mf-fete:focus { outline: none; }
.mf-revel.vue { opacity: 1; }
.mf-revel::before { content: ""; position: fixed; inset: 0; background: radial-gradient(60vmax 50vmax at 50% 46%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%); pointer-events: none; }
.mf-revel-x { position: fixed; top: 18px; right: 22px; z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--encre); font-size: 22px; cursor: pointer; }
.mf-scene { position: relative; width: min(100% - 48px, 1120px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: 40px 0; }
.mf-cote-autocollant { display: grid; justify-items: center; gap: 18px; transform: translateX(var(--decal, 0)); transition: transform 1s var(--sortie); }
.mf-revel.ouvert .mf-cote-autocollant { transform: none; }
.mf-annonce { margin: 0; font-size: 15px; font-weight: 700; color: var(--gris); opacity: 0; animation: mf-monter .7s var(--sortie) .15s forwards; }
.mf-annonce b { color: var(--c-fonce); }
.mf-autocollant { width: min(100%, 420px); aspect-ratio: 1; display: grid; place-items: center; animation: mf-poser 1.15s var(--sortie) .25s both; }
.mf-autocollant svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-4deg); }
@keyframes mf-poser { 0% { opacity: 0; transform: scale(.5) rotate(-16deg) translateY(40px); filter: blur(6px); } 55% { opacity: 1; filter: none; } 72% { transform: scale(1.045) rotate(1deg); } 100% { transform: none; } }
.mf-reflet { animation: mf-reflet 1.6s ease-in-out 1.25s both; }
@keyframes mf-reflet { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(340%) skewX(-18deg); } }
.mf-pastille { opacity: 0; transform-box: fill-box; transform-origin: center; animation: mf-pastille .6s cubic-bezier(.3, 1.5, .5, 1) 1.05s forwards; }
@keyframes mf-pastille { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
.mf-nom { text-align: center; opacity: 0; animation: mf-monter .8s var(--sortie) .9s forwards; transition: opacity .5s, max-height .8s var(--sortie); max-height: 140px; }
.mf-nom strong { display: block; font-size: clamp(34px, 4.6vw, 52px); line-height: 1; letter-spacing: -.04em; font-weight: 800; }
.mf-nom span { color: var(--gris); font-size: 16px; }
.mf-revel.ouvert .mf-nom { animation: none; opacity: 0; max-height: 0; overflow: hidden; }
@keyframes mf-monter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mf-fiche { opacity: 0; transform: translateX(28px); pointer-events: none; transition: opacity .7s ease .35s, transform .9s var(--sortie) .3s; max-width: 560px; }
.mf-revel.ouvert .mf-fiche { opacity: 1; transform: none; pointer-events: auto; }
.mf-fiche-haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.mf-fiche-haut p { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--c-fonce); }
.mf-langues { display: inline-flex; border: 1px solid var(--filet-fort); border-radius: 99px; padding: 2px; }
.mf-langues button { border: 0; background: none; border-radius: 99px; padding: 3px 11px; font: inherit; font-size: 13px; font-weight: 700; color: var(--gris); cursor: pointer; }
.mf-langues button[aria-pressed="true"] { background: var(--encre); color: var(--papier); }
.mf-fiche h2 { margin: 0; font-size: clamp(36px, 4.2vw, 50px); line-height: 1; letter-spacing: -.04em; font-weight: 800; }
.mf-chef { margin: 8px 0 16px; font-size: 16px; color: var(--gris); }
.mf-chef b { color: var(--encre); }
.mf-desc { margin: 0 0 20px; font-size: 17.5px; line-height: 1.6; }
.mf-fiche h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--gris); }
.mf-connus { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.mf-connus li { padding-left: 16px; position: relative; font-size: 16px; line-height: 1.5; }
.mf-connus li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.mf-faire { margin: 0 0 20px; font-size: 16px; line-height: 1.6; }
.mf-mot { border-radius: 12px; background: color-mix(in srgb, var(--c) 10%, var(--papier)); padding: 14px 16px; margin-bottom: 4px; }
.mf-mot h3 { margin-bottom: 4px; color: var(--c-fonce); }
.mf-mot p { margin: 0; font-size: 16px; }
.mf-mot q { font-style: italic; quotes: "« " " »"; }
.mf-suite { display: none; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--gris); transition: opacity .35s, visibility .35s; }
.mf-suite svg { width: 14px; height: 14px; animation: mf-inviter 1.6s ease-in-out infinite; }
@keyframes mf-inviter { 50% { transform: translateY(3px); } }
.mf-fiche-bas { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--filet); }
.mf-progres-region { font-size: 14.5px; color: var(--gris); min-width: 200px; flex: 1; }
.mf-progres-region b { color: var(--encre); }
.mf-mini-jauge { height: 6px; border-radius: 99px; background: var(--surface-2); margin-top: 6px; overflow: hidden; max-width: 260px; }
.mf-mini-jauge i { display: block; height: 100%; width: var(--p); background: var(--c); border-radius: inherit; }
/* Sur ordinateur, la découverte tient dans l'écran : seul le texte de la fiche défile, un fondu dit qu'il y a une suite. */
@media (min-width: 861px) {
  .mf-revel { overflow: hidden; }
  .mf-scene { height: 100vh; padding: 64px 0 40px; }
  .mf-autocollant { width: min(100%, 420px, 50vh); }
  .mf-fiche { display: flex; flex-direction: column; max-height: calc(100vh - 104px); }
  .mf-fiche-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 14px; margin-right: -14px; scrollbar-width: thin; scrollbar-color: var(--filet-fort) transparent; }
  .mf-fiche-corps.deborde:not(.fin) { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent); }
  .mf-fiche-bas { flex: none; }
  .mf-fiche-corps.deborde + .mf-suite { display: flex; }
  .mf-fiche-corps.deborde.fin + .mf-suite { opacity: 0; visibility: hidden; }
}
@media (max-width: 860px) {
  .mf-revel { place-items: start center; }
  .mf-scene { grid-template-columns: 1fr; padding: 64px 0 40px; gap: 18px; }
  .mf-cote-autocollant { transform: translateY(var(--decal-y, 0)); }
  .mf-autocollant { width: min(78vw, 340px); transition: width 1s var(--sortie); }
  .mf-revel.ouvert .mf-autocollant { width: min(46vw, 190px); }
  .mf-fiche { transform: translateY(30px); }
}

/* Une région complète */
.mf-fete { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--papier); opacity: 0; transition: opacity .45s; text-align: center; }
.mf-fete.vue { opacity: 1; }
.mf-fete::before { content: ""; position: fixed; inset: 0; background: radial-gradient(55vmax 45vmax at 50% 40%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%); pointer-events: none; }
.mf-fete-scene { position: relative; display: grid; justify-items: center; gap: 10px; padding: 30px 24px; }
.mf-fete-dessin { position: relative; }
.mf-fete svg { width: min(78vw, 360px); height: min(48vh, 360px); overflow: visible; }
.mf-morceau { opacity: 0; transform-box: fill-box; transform-origin: center; animation: mf-morceau .8s var(--sortie) forwards; }
@keyframes mf-morceau { from { opacity: 0; transform: scale(1.5) rotate(-10deg); } to { opacity: 1; transform: none; } }
.mf-trace { fill: none; stroke: var(--c-fonce); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: var(--l); stroke-dashoffset: var(--l); animation: mf-tracer 1.4s ease-in-out 1s forwards; }
@keyframes mf-tracer { to { stroke-dashoffset: 0; } }
.mf-sceau { position: absolute; right: -6px; top: 24px; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--c-fonce); color: #fff; font-weight: 800; font-size: 13px; line-height: 1.1; letter-spacing: .02em; box-shadow: 0 0 0 5px var(--papier), 0 10px 24px -8px rgba(23, 24, 28, .4); opacity: 0; animation: mf-tamponner .6s cubic-bezier(.3, 1.6, .5, 1) 2.3s forwards; }
.mf-sceau span { display: block; font-size: 26px; letter-spacing: -.03em; }
@keyframes mf-tamponner { from { opacity: 0; transform: scale(1.8) rotate(-24deg); } to { opacity: 1; transform: rotate(-12deg); } }
.mf-fete h2 { margin: 6px 0 0; font-size: clamp(36px, 5vw, 56px); line-height: 1; letter-spacing: -.04em; font-weight: 800; opacity: 0; animation: mf-monter .8s var(--sortie) 1.9s forwards; }
.mf-fete p { margin: 0; max-width: 46ch; color: var(--gris); font-size: 17px; opacity: 0; animation: mf-monter .8s var(--sortie) 2.1s forwards; }
.mf-fete .bouton { margin-top: 14px; opacity: 0; animation: mf-monter .8s var(--sortie) 2.5s forwards; }
/* Toute la France : la carte entière se remplit région par région, puis le grand tampon */
.mf-fete-tout .mf-fete-scene { gap: 8px; padding: 20px 24px; }
.mf-fete-tout svg { width: auto; height: min(60vh, 620px); max-width: 88vw; }
.mf-fete-tout .mf-morceau { animation-duration: .6s; }
.mf-fete-tout .mf-trace { stroke-width: 2.4; animation-duration: 1.6s; animation-delay: 3.6s; }
.mf-fete-tout .mf-sceau { width: 122px; height: 122px; right: -18px; top: 6%; font-size: 11px; animation-delay: 4.6s; }
.mf-fete-tout .mf-sceau span { font-size: 40px; }
.mf-fete-tout h2 { animation-delay: 4.2s; }
.mf-fete-tout p { animation-delay: 4.4s; }
.mf-fete-tout .bouton { animation-delay: 4.9s; }
/* Le drapeau, très pâle, qui flotte derrière la carte une fois remplie */
.mf-drapeau { position: fixed; left: 50%; top: 44%; width: min(96vw, 1180px); aspect-ratio: 3 / 2; display: flex; transform: translate(-50%, -50%) rotate(-3deg); opacity: 0; pointer-events: none; animation: mf-drapeau-venir 1.8s ease 3.4s forwards; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.mf-drapeau i { flex: 1; background: linear-gradient(90deg, #0055a4 0 33.34%, #fff 33.34% 66.67%, #ef4135 66.67%); background-size: calc(var(--n) * 100%) 100%; background-position: calc(var(--k) / (var(--n) - 1) * 100%) 0; animation: mf-flotter 3.6s ease-in-out infinite; animation-delay: calc(var(--k) * -.12s); }
@keyframes mf-drapeau-venir { to { opacity: .17; } }
@keyframes mf-flotter { 0%, 100% { transform: translateY(-2.2%); filter: brightness(1); } 50% { transform: translateY(2.2%); filter: brightness(.86); } }
@media (prefers-reduced-motion: reduce) {
  .mf-revel *, .mf-fete *, .mf-revel, .mf-fete { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .mf-trace { stroke-dashoffset: 0; }
  .mf-drapeau i { animation: none; }
}

/* Home : l'encadré My France (un autocollant à ouvrir, sinon le niveau) */
.hm-france-carte { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 8px; padding: 14px 16px; border-radius: 12px; background: var(--accent-pale); color: var(--encre); text-decoration: none; }
.hm-france-carte b { display: block; font-size: 16px; }
.hm-france-carte small { display: block; color: var(--gris); font-size: 14.5px; }
.hm-france-carte .bouton { white-space: nowrap; }
.hm-france-autocollant { width: 44px; height: 44px; color: var(--accent); transform: rotate(-6deg); filter: drop-shadow(0 2px 2px rgba(23, 24, 28, .2)); }
.hm-france-autocollant svg { width: 100%; height: 100%; }
.hm-france.nouveau .hm-france-autocollant { animation: hm-france-bouge 2.4s ease-in-out infinite; }
@keyframes hm-france-bouge { 0%, 70%, 100% { transform: rotate(-6deg); } 80% { transform: rotate(4deg) scale(1.06); } 90% { transform: rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .hm-france.nouveau .hm-france-autocollant { animation: none; } }
.hm-france-niveau { margin-top: 6px; }
.hm-france-niveau p { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.hm-france-niveau p b { font-size: 16px; }
.hm-france-niveau p span { color: var(--gris); font-size: 14.5px; }
.hm-france-jauge { height: 8px; border-radius: 99px; background: var(--surface-2); margin: 10px 0 8px; overflow: hidden; }
.hm-france-jauge i { display: block; height: 100%; width: var(--p); background: var(--accent); border-radius: inherit; }
.hm-france-niveau small { color: var(--gris); font-size: 14.5px; }
@media (max-width: 560px) { .hm-france-carte { grid-template-columns: 40px minmax(0, 1fr); } .hm-france-carte .bouton { grid-column: 1 / -1; justify-self: start; } }

/* My France : la présentation, à la première visite */
.mf-intro { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--papier) 82%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .38s ease; }
.mf-intro.vue { opacity: 1; }
.mf-intro:focus { outline: none; }
.mf-intro-boite { width: min(100%, 560px); padding: clamp(26px, 4vw, 40px); border-radius: 18px; background: var(--papier); box-shadow: var(--ombre-flottante); transform: translateY(16px) scale(.98); transition: transform .6s var(--sortie); }
.mf-intro.vue .mf-intro-boite { transform: none; }
.mf-intro-sur { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; color: var(--accent); }
.mf-intro h2 { margin: 0 0 20px; font-size: clamp(32px, 4.4vw, 44px); line-height: 1; letter-spacing: -.045em; font-weight: 800; }
.mf-intro-etapes { list-style: none; counter-reset: etape; margin: 0 0 26px; padding: 0; display: grid; gap: 14px; }
.mf-intro-etapes li { counter-increment: etape; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; }
.mf-intro-etapes li::before { content: counter(etape); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--encre); color: var(--papier); font-weight: 800; font-size: 14px; }
.mf-intro-etapes b { font-size: 16.5px; }
.mf-intro-etapes span { color: var(--gris); font-size: 15px; line-height: 1.5; }
.mf-intro-ok { width: 100%; justify-content: center; }
.mf-intro-note { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--gris); }

/* My France : la photo du département derrière l'autocollant (une fois la fiche ouverte), discrète, qui s'estompe vers la fiche */
.mf-photo { position: fixed; left: 0; top: 0; bottom: 0; width: var(--jusqua, 50vw); background-size: cover; background-position: center; opacity: 0; filter: saturate(.85); transition: opacity 1.4s ease .2s;
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .75) 45%, transparent 100%); mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .75) 45%, transparent 100%); pointer-events: none; }
.mf-revel.ouvert .mf-photo { opacity: .32; }
:root[data-theme="dark"] .mf-revel.ouvert .mf-photo { opacity: .26; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mf-revel.ouvert .mf-photo { opacity: .26; } }
.mf-credit { position: fixed; left: 16px; bottom: 10px; z-index: 1; margin: 0; font-size: 11.5px; color: var(--gris); opacity: 0; transition: opacity .8s ease 1s; }
.mf-credit a { color: inherit; }
.mf-revel.ouvert .mf-credit { opacity: .8; }
@media (max-width: 860px) {
  .mf-photo { width: 100%; bottom: auto; height: 46vh; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .7) 50%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .7) 50%, transparent 100%); }
  .mf-credit { position: static; padding: 0 24px 24px; }
}

/* My France : après une pose, le prochain autocollant attend qu'on le demande */
.mf-suivant { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 27; display: inline-flex; align-items: baseline; gap: 10px; padding: 13px 22px; border: 0; border-radius: 999px; background: var(--encre); color: var(--papier); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(23, 24, 28, .45); transform: translate(-50%, 16px); opacity: 0; transition: opacity .3s ease, transform .3s var(--sortie); }
.mf-suivant.vue { opacity: 1; transform: translate(-50%, 0); }
.mf-suivant small { font-weight: 500; font-size: 13px; opacity: .7; }
.mf-suivant:active { transform: translate(-50%, 1px) scale(.98); }
.mf-suivant:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

/* My France : couper ou remettre le son (choix gardé dans le navigateur) */
.mf-son-bouton { position: absolute; top: 6px; right: 0; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--filet-fort); border-radius: 999px; background: var(--papier); color: var(--gris); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: color .2s, border-color .2s; }
.mf-son-bouton:hover { color: var(--encre); border-color: var(--encre); }
.mf-son-bouton:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.mf-son-bouton svg { width: 17px; height: 17px; }
.mf-son-bouton[aria-pressed="true"] .mf-son-coupe, .mf-son-bouton[aria-pressed="false"] .mf-son-ondes { display: none; }
@media (max-width: 600px) { .mf-son-bouton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .mf-son-bouton { padding: 8px; top: 2px; } }

/* My France : le nom d'une région complète, écrit sur la carte */
.mf-noms { pointer-events: none; }
.mf-nom-region { font-family: "EB Garamond", Georgia, serif; font-style: italic; font-weight: 600; letter-spacing: .01em; text-anchor: middle; dominant-baseline: middle; fill: #fff; stroke: var(--c); stroke-width: 6px; stroke-linejoin: round; paint-order: stroke; }
.mf-nom-region.arrive { animation: mf-nom-arrive 1.4s var(--sortie) both; }
@keyframes mf-nom-arrive { from { opacity: 0; letter-spacing: .14em; filter: blur(3px); } to { opacity: 1; letter-spacing: .01em; filter: none; } }
@media (prefers-reduced-motion: reduce) { .mf-nom-region.arrive { animation: none; } }

/* My France : la règle de chaque activité, sous son nom, et le plafond du jour */
.mf-regles li { align-items: baseline; }
.mf-regles li small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--gris); }
.mf-plafond { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--gris); }

/* ——— Le chat avec Jérôme (/messages, public/messages.js et public/chat-commun.js) ———
   La bulle dans la barre (à côté de la cloche), puis la conversation, qui occupe toute la hauteur sous la barre.
   Les bulles de l'élève sont à l'encre, celles de Jérôme gris clair ; « Seen » et « typing… » en vert (la couleur des états). */
.chat-lien { position: relative; width: 40px; height: 40px; margin-left: -6px; border-radius: 50%; color: var(--encre); display: grid; place-items: center; transition: background 0.2s; }
.chat-lien:hover, .chat-lien.courant { background: var(--surface-2); }
.chat-lien svg { width: 21px; height: 21px; }
.chat-pastille { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--papier); }
.chat-pastille[hidden] { display: none; }
.page-chat body { overflow: hidden; }
.page-chat .entete { position: relative; }
.chat-page { height: calc(100dvh - var(--chat-haut, 64px)); display: flex; justify-content: center; }
/* (la hauteur minimale des pages, « body > main », ne vaut pas ici : sur téléphone, elle repoussait la zone de saisie
   sous la barre d'onglets de l'espace membre) */
html.page-chat body > main.chat-page { min-height: 0; }
.chat-cadre { width: 100%; max-width: 820px; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--filet); border-right: 1px solid var(--filet); position: relative; }
.chat-chargement { margin: auto; display: flex; gap: 6px; }
.chat-chargement i { width: 8px; height: 8px; border-radius: 50%; background: var(--filet-fort); animation: cf-saut 1.2s infinite ease-in-out; }
.chat-chargement i:nth-child(2) { animation-delay: .15s; } .chat-chargement i:nth-child(3) { animation-delay: .3s; }
.chat-erreur { margin: auto; padding: 24px; color: var(--gris); text-align: center; max-width: 30em; }

.chat-tete { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--filet); flex: none; }
.chat-avatar { position: relative; width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--surface-2) url("/images/jerome-cutout-800.webp") 50% 6% / 190% auto no-repeat; }
.chat-avatar.grand { width: 68px; height: 68px; margin: 0 auto 16px; }
.chat-en-ligne { position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--papier); }
.chat-en-ligne[hidden] { display: none; }
.chat-qui h1 { font-size: 17px; letter-spacing: -.01em; margin: 0; line-height: 1.2; }
.chat-statut { margin: 1px 0 0; font-size: 13.5px; color: var(--gris); min-height: 1.3em; }
.chat-statut.actif { color: var(--accent); font-weight: 600; }
.chat-lecon { margin: 0 0 0 auto; text-align: right; font-size: 13px; line-height: 1.4; color: var(--gris); }
.chat-lecon b { color: var(--encre); font-weight: 600; }

.chat-corps { flex: 1; min-height: 0; position: relative; }
.chat-zone { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 8px; outline: 0; }
.chat-vide { margin: 30vh auto 0; max-width: 24em; text-align: center; color: var(--gris); font-size: 15px; }

/* Le fil (commun avec la messagerie de l'administration) */
.cf-liste { display: flex; flex-direction: column; gap: 2px; }
.cf-jour { align-self: center; font-size: 12px; font-weight: 600; color: var(--gris-doux); margin: 16px 0 10px; }
.cf-bulle { max-width: min(72%, 34em); padding: 9px 14px 10px; border-radius: 19px; font-size: 15.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.cf-bulle a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cf-bulle.lui { align-self: flex-start; background: var(--surface-2); color: var(--encre); }
.cf-bulle.moi { align-self: flex-end; background: var(--encre); color: var(--papier); }
.cf-bulle.lui.apres { border-top-left-radius: 6px; } .cf-bulle.lui.avant { border-bottom-left-radius: 6px; }
.cf-bulle.moi.apres { border-top-right-radius: 6px; } .cf-bulle.moi.avant { border-bottom-right-radius: 6px; }
.cf-bulle:not(.avant) { margin-bottom: 6px; }
.cf-bulle.arrive { animation: cf-arrive .32s var(--sortie) both; }
.cf-bulle.envoi { opacity: .55; }
.cf-bulle.echec { opacity: .55; box-shadow: 0 0 0 1.5px var(--rouge); }
@keyframes cf-arrive { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.cf-etat { align-self: flex-end; font-size: 12px; color: var(--gris-doux); margin: -2px 4px 8px; }
.cf-etat.vu { color: var(--accent); }
.cf-etat.echec { color: var(--rouge); }
.cf-etat button { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }
.cf-ecrit { margin: 4px 0 6px; }
.cf-ecrit[hidden] { display: none; }
.cf-points { display: inline-flex; gap: 4px; background: var(--surface-2); padding: 13px 15px; border-radius: 19px; }
.cf-points i { width: 7px; height: 7px; border-radius: 50%; background: var(--gris-doux); animation: cf-saut 1.2s infinite ease-in-out; }
.cf-points i:nth-child(2) { animation-delay: .15s; } .cf-points i:nth-child(3) { animation-delay: .3s; }
@keyframes cf-saut { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.cf-nouveau { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); border: 0; border-radius: 99px; background: var(--encre); color: var(--papier); font: inherit; font-size: 13px; font-weight: 700; padding: 7px 14px; cursor: pointer; box-shadow: 0 6px 20px -8px rgba(0,0,0,.35); }
.cf-nouveau[hidden] { display: none; }

/* La saisie */
.chat-saisie { flex: none; padding: 10px 16px 14px; border-top: 1px solid var(--filet); background: var(--papier); }
.chat-boite { display: flex; align-items: flex-end; gap: 10px; border: 1px solid var(--filet-fort); border-radius: 23px; padding: 5px 5px 5px 18px; transition: border-color .15s, box-shadow .15s; background: var(--papier); }
.chat-boite:focus-within { border-color: var(--encre); box-shadow: 0 0 0 3px color-mix(in srgb, var(--encre) 8%, transparent); }
.chat-boite { flex-wrap: wrap; }
.chat-boite textarea { flex: 1 1 160px; min-width: 0; border: 0; outline: 0; resize: none; font: inherit; font-size: 16px; line-height: 1.45; padding: 8px 0; max-height: min(40vh, 320px); background: transparent; color: var(--encre); overflow-y: hidden; }
.chat-boite textarea.deborde { overflow-y: auto; }
/* Plusieurs lignes : le texte sur toute la largeur, les outils et l'envoi dessous, à droite */
.chat-boite.multi { padding: 6px 6px 6px 18px; border-radius: 20px; }
.chat-boite.multi textarea { flex-basis: 100%; padding-right: 10px; }
.chat-boite.multi .cs-outils { margin-left: auto; }
/* Le champ défile sans barre (il suit le curseur ; molette, trackpad et flèches marchent) ; quand du texte est caché
   au-dessus, le haut s'estompe, et le bas quand il en reste en dessous. */
.chat-boite textarea { scrollbar-width: none; }
.chat-boite textarea::-webkit-scrollbar { display: none; }
.chat-boite textarea.cache-haut { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px); mask-image: linear-gradient(to bottom, transparent, #000 28px); }
.chat-boite textarea.cache-bas { -webkit-mask-image: linear-gradient(to top, transparent, #000 28px); mask-image: linear-gradient(to top, transparent, #000 28px); }
.chat-boite textarea.cache-haut.cache-bas { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.chat-envoyer { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: transform .12s, opacity .15s; }
.chat-envoyer:disabled { opacity: .25; cursor: default; }
.chat-envoyer:not(:disabled):active { transform: scale(.92); }
.chat-envoyer:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.chat-envoyer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chat-aide { display: flex; justify-content: space-between; gap: 12px; margin: 7px 6px 0; font-size: 12px; color: var(--gris-doux); }
.chat-lecture { flex: none; margin: 0; padding: 16px 24px 20px; border-top: 1px solid var(--filet); text-align: center; color: var(--gris); font-size: 14.5px; }
.chat-lecture a { color: var(--encre); font-weight: 600; }

/* Pas (ou plus) élève */
.chat-ferme { position: relative; flex: 1; display: grid; place-items: center; overflow: hidden; padding: 24px 16px; }
.chat-fantome { position: absolute; inset: 0; padding: 40px 12%; display: flex; flex-direction: column; gap: 12px; filter: blur(6px); opacity: .55; pointer-events: none; }
.chat-fantome i { height: 40px; width: 46%; border-radius: 19px; background: var(--surface-2); }
.chat-fantome i:nth-child(even) { align-self: flex-end; width: 36%; background: var(--filet-fort); }
.chat-fantome i:nth-child(3n) { height: 62px; width: 58%; }
.chat-ferme-carte { position: relative; max-width: 470px; text-align: center; background: var(--papier); border: 1px solid var(--filet); border-radius: 20px; padding: 32px 34px 28px; box-shadow: 0 24px 60px -30px rgba(23, 24, 28, .3); }
.chat-ferme-carte h1 { font-size: 24px; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 10px; text-wrap: balance; }
.chat-ferme-carte p { color: var(--gris); margin: 0 0 22px; font-size: 15.5px; }
.chat-ferme-carte .chat-ferme-plus { margin: 16px 0 0; font-size: 14px; }
.chat-ferme-plus a { color: var(--encre); font-weight: 600; }

@media (max-width: 700px) {
  .chat-cadre { border: 0; }
  .chat-tete { padding: 10px 14px; gap: 11px; }
  .chat-avatar { width: 38px; height: 38px; }
  .chat-lecon { font-size: 12px; max-width: 45%; }
  .chat-zone { padding: 12px 12px 6px; }
  .cf-bulle { max-width: 82%; }
  .chat-saisie { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  .chat-aide { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cf-bulle.arrive, .cf-points i, .chat-chargement i { animation: none; } }

/* Le chat : une ligne par message (la bulle, et le bouton pour réagir à côté), les réactions, les liens, la mise en forme */
.cf-ligne { position: relative; display: flex; align-items: center; gap: 4px; }
.cf-ligne.moi { flex-direction: row-reverse; }
.cf-ligne .cf-bulle { position: relative; }
.cf-bulle.a-reactions { margin-bottom: 20px; }
.cf-bulle strong { font-weight: 700; }
.cf-bulle u { text-underline-offset: 2px; }
.cf-lien { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2.5px; overflow-wrap: anywhere; }
.cf-bulle .cf-lien { color: var(--accent); text-decoration: underline; }
.cf-bulle.moi .cf-lien { color: #8fd8b5; }
:root[data-theme="dark"] .cf-bulle.moi .cf-lien { color: #1d6b52; }
.cf-lien:hover { text-decoration-thickness: 2.5px; }
.cf-lien-icone { width: .82em; height: .82em; margin-left: 3px; vertical-align: -.05em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cf-reagir { width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--gris-doux); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
.cf-reagir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.cf-ligne:hover .cf-reagir, .cf-reagir:focus-visible, .cf-ligne.choix .cf-reagir { opacity: 1; }
.cf-reagir:hover { background: var(--surface-2); color: var(--encre); }
/* Corriger (Jérôme, au survol d'un message de l'élève) et la carte d'une correction, sous le message corrigé. */
.cf-corriger { width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--gris-doux); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
.cf-corriger svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cf-ligne:hover .cf-corriger, .cf-corriger:focus-visible { opacity: 1; }
.cf-corriger:hover { background: var(--surface-2); color: var(--encre); }
@media (pointer: coarse) { .cf-corriger { opacity: 1; } }
.cf-correction { width: min(100%, 460px); box-sizing: border-box; margin: 6px 0 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--filet); font-size: 14.5px; line-height: 1.5; }
.cf-correction.moi { margin-left: auto; }
.cf-correction-tete { margin: 0 0 8px; font-size: 13px; color: var(--gris); }
.cf-correction-paire { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid var(--filet); }
.cf-correction-tete + .cf-correction-paire { border-top: 0; padding-top: 0; }
.cf-correction-paire del { color: var(--gris); text-decoration-color: var(--rouge); }
.cf-correction-juste { font-weight: 600; color: var(--encre); }
.cf-correction-juste b { color: var(--accent); font-weight: 700; }
.cf-correction-paire small { color: var(--gris); font-size: 13px; }
.cf-correction-pied { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 6px 0 0; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: 13.5px; }
.cf-correction-pied b { color: var(--accent); font-weight: 600; }
.cf-correction-pied a { font-weight: 600; color: var(--encre); }
.cf-correction-modifier { margin-left: auto; padding: 0; border: 0; background: none; color: var(--encre); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* La note d'un cours citée par Jérôme, comme une réponse dans iMessage (public/chat-commun.js) : la légende, la note dans
   une bulle discrète, puis la réponse, reliée par un trait arrondi qui descend du coin de la citation et tourne vers elle.
   Le groupe prend la largeur du plus large des deux ; la réponse de Jérôme garde son côté (le trait s'allonge jusqu'à elle). */
.cf-cite { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: min(80%, 36em); margin-top: 10px; }
.cf-cite.lui { align-self: flex-start; }
.cf-cite.moi { align-self: flex-end; }
.cf-cite.arrive { animation: cf-arrive .32s var(--sortie) both; }
.cf-cite-legende { margin: 0 0 0 14px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--gris-doux); }
.cf-citation { max-width: 100%; box-sizing: border-box; padding: 9px 15px 10px; border-radius: 19px; border: 1px solid var(--filet-fort); font-size: 14px; line-height: 1.45; color: var(--gris); }
.cf-citation-etoiles { display: block; color: var(--encre); letter-spacing: .08em; font-size: 13.5px; line-height: 1.5; white-space: nowrap; }
.cf-citation-etoiles i { font-style: normal; color: var(--filet-fort); }
.cf-citation-texte { margin: 1px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.cf-cite .cf-ligne { align-self: stretch; flex-direction: row; align-items: flex-start; }
.cf-cite .cf-bulle { max-width: none; min-width: 0; animation: none; }
/* Le trait : du coin de la citation jusqu'au milieu de la première ligne de la réponse, la pointe contre la bulle */
.cf-fleche { position: relative; flex: 0 0 40px; align-self: stretch; color: var(--gris-doux); }
.cf-cite.moi .cf-fleche { flex: 1 0 40px; }
.cf-fleche::before { content: ""; position: absolute; left: 17px; right: 3px; top: -5px; height: 26px; box-sizing: border-box; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; border-bottom-left-radius: 13px; }
.cf-fleche::after { content: ""; position: absolute; right: 3px; top: 20px; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transform-origin: 100% 0; }
/* Réagir à sa propre réponse : pas de bouton entre le trait et la bulle (la pastille et l'appui long restent) */
.cf-cite.moi .cf-reagir { display: none; }
@media (max-width: 700px) { .cf-cite { max-width: 90%; } }
@media (prefers-reduced-motion: reduce) { .cf-cite.arrive { animation: none; } }
.cf-reactions { position: absolute; bottom: -15px; display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--filet); background: var(--papier); color: var(--encre); border-radius: 99px; padding: 1px 7px; font: 600 12.5px/1.6 var(--sans); white-space: nowrap; cursor: pointer; box-shadow: 0 2px 6px -2px rgba(23, 24, 28, .18); }
.cf-bulle.lui .cf-reactions { right: 10px; }
.cf-bulle.moi .cf-reactions { left: 10px; }
.cf-reactions.mienne { border-color: color-mix(in srgb, var(--accent) 55%, var(--filet)); }
.cf-reactions:disabled { cursor: default; }
.cf-choix { position: absolute; bottom: calc(100% - 2px); z-index: 6; display: flex; gap: 2px; padding: 4px; background: var(--papier); border: 1px solid var(--filet); border-radius: 99px; box-shadow: 0 10px 30px -12px rgba(23, 24, 28, .35); animation: cf-choix .18s var(--sortie) both; }
.cf-ligne.lui .cf-choix { left: 0; }
.cf-ligne.moi .cf-choix { right: 0; }
.cf-choix button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font-size: 21px; line-height: 1; cursor: pointer; transition: transform .12s, background .12s; }
.cf-choix button:hover, .cf-choix button:focus-visible { transform: scale(1.18); background: var(--surface-2); outline: 0; }
.cf-choix button[aria-pressed="true"] { background: var(--accent-pale); }
@keyframes cf-choix { from { opacity: 0; transform: translateY(4px) scale(.96); } }
@media (pointer: coarse) { .cf-reagir { display: none; } .cf-bulle { -webkit-touch-callout: none; } }

/* La saisie : les outils, discrets tant qu'on n'écrit pas */
.chat-saisie { position: relative; }
.cs-outils { display: flex; align-items: center; align-self: flex-end; padding-bottom: 4px; }
.cs-outil { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--gris-doux); font: 700 14.5px/1 var(--sans); display: grid; place-items: center; cursor: pointer; opacity: .5; transition: opacity .15s, background .15s, color .15s; }
.chat-boite:focus-within .cs-outil, .chat-boite:hover .cs-outil, .cs-outil[aria-expanded="true"] { opacity: 1; }
.cs-outil:hover, .cs-outil[aria-expanded="true"] { background: var(--surface-2); color: var(--encre); }
.cs-outil:focus-visible { outline: 2px solid var(--encre); outline-offset: 1px; opacity: 1; }
.cs-i { font-style: italic; font-weight: 600; font-family: Georgia, serif; font-size: 16px; }
.cs-u { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.cs-emoji { margin-left: 2px; }
.cs-emoji svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.cs-emojis { position: absolute; z-index: 8; right: 16px; bottom: calc(100% + 6px); width: min(352px, calc(100% - 32px)); display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; background: var(--papier); border: 1px solid var(--filet); border-radius: 16px; box-shadow: 0 18px 40px -18px rgba(23, 24, 28, .4); animation: cf-choix .18s var(--sortie) both; }
.cs-emojis[hidden] { display: none; }
.cs-emojis button { aspect-ratio: 1; border: 0; border-radius: 10px; background: none; font-size: 21px; line-height: 1; cursor: pointer; }
.cs-emojis button:hover, .cs-emojis button:focus-visible { background: var(--surface-2); outline: 0; }
@media (max-width: 420px) { .cs-outil { width: 26px; } .cs-emojis { right: 10px; width: calc(100% - 20px); } }

/* ——— L'espace membre : la barre de gauche (src/gabarit.mjs, coquille), qui remplace la barre du haut d'un membre ———
   La barre du haut ne garde que la langue et la cloche. Sur téléphone : des onglets en bas, et « More ». */
.em-cote, .em-onglets, .em-plus { display: none; }
html.espace body { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start; }
html.espace body > :not(.em-cote):not(.em-onglets):not(script):not(dialog):not(template) { grid-column: 2; min-width: 0; }
html.espace .em-cote { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 2px; padding: 20px 14px 14px; border-right: 1px solid var(--filet); background: var(--papier); overflow-y: auto; z-index: 31; }
.em-marque { font-size: 17px; font-weight: 800; letter-spacing: -.03em; padding: 2px 10px 20px; color: var(--encre); text-decoration: none; white-space: nowrap; }
.em-marque .avec { color: var(--gris); font-weight: 500; }
.em-groupe { display: grid; gap: 1px; }
.em-groupe + .em-groupe { border-top: 1px solid var(--filet); margin-top: 10px; padding-top: 10px; }
.em-groupe.em-bas { margin-top: auto; border-top: 0; }
.em-cote a:not(.em-marque) { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--gris); font-weight: 500; font-size: 14.5px; }
.em-cote a:not(.em-marque):hover { background: var(--surface-2); color: var(--encre); }
.em-cote a[aria-current="page"] { background: var(--surface-2); color: var(--encre); font-weight: 650; }
.em-cote svg, .em-onglets svg, .em-plus svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.em-n { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; white-space: nowrap; }
.em-n.gris { background: none; color: var(--gris-doux); font-weight: 600; }
.em-moi { position: relative; border-top: 1px solid var(--filet); margin-top: 10px; padding-top: 10px; }
.em-moi-bouton { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 6px 8px; border-radius: 8px; text-align: left; cursor: pointer; color: var(--encre); font: inherit; }
.em-moi-bouton:hover, .em-moi-bouton[aria-expanded="true"] { background: var(--surface-2); }
.em-moi-bouton .initiale, .em-plus-moi .initiale { width: 32px; height: 32px; flex: none; font-size: 14px; }
.em-moi-bouton b, .em-plus-moi b { display: block; font-size: 14px; }
.em-moi-bouton small, .em-plus-moi small { display: block; color: var(--gris-doux); font-size: 12px; }
.em-moi-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: var(--papier); border: 1px solid var(--filet); border-radius: var(--r-surface); box-shadow: var(--ombre-flottante, 0 18px 40px -18px rgba(23, 24, 28, .35)); padding: 6px; display: grid; }
.em-moi-menu p { margin: 4px 8px 6px; font-size: 12.5px; color: var(--gris-doux); overflow: hidden; text-overflow: ellipsis; }
.em-moi-menu a, .em-moi-menu button { padding: 8px 10px !important; border-radius: 6px; font-size: 14px !important; border: 0; background: none; text-align: left; cursor: pointer; color: var(--encre) !important; font: inherit; }
.em-moi-menu a:hover, .em-moi-menu button:hover { background: var(--surface-2); }
.em-moi-menu[hidden] { display: none; }
/* La barre du haut d'un membre : la langue et la cloche, à droite */
html.espace .entete { background: var(--voile); border-bottom: 0; }
html.espace .entete .marque, html.espace .burger, html.espace .compte-mobile, html.espace .chat-lien, html.espace .menu-mobile { display: none !important; }
html.espace .entete .nav > :not(.langue-selecteur) { display: none !important; }
html.espace .entete .nav { margin-left: auto; }
html.espace .feedback-flottant { z-index: 20; }

@media (max-width: 820px) {
  html.espace body { display: block; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  html.espace .em-cote { display: none; }
  html.espace .entete .marque { display: block !important; }
  html.espace .em-onglets { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--voile); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-top: 1px solid var(--filet); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .em-onglets a, .em-onglets button { position: relative; display: grid; justify-items: center; gap: 2px; border: 0; background: none; color: var(--gris-doux); text-decoration: none; font: 600 10.5px/1.2 var(--sans); padding: 4px 0; cursor: pointer; }
  .em-onglets svg { width: 23px; height: 23px; }
  .em-onglets a[aria-current="page"] { color: var(--encre); }
  .em-onglets .em-n { position: absolute; top: 0; left: calc(50% + 5px); min-width: 17px; height: 17px; font-size: 10px; padding: 0 5px; margin: 0; }
  html.espace .feedback-flottant { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .page-chat .chat-page { height: calc(100dvh - var(--chat-haut, 64px) - 64px - env(safe-area-inset-bottom)); }
}
.em-plus[open] { display: block; position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 86dvh; overflow-y: auto; border: 0; border-radius: 20px 20px 0 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); background: var(--papier); color: var(--encre); animation: em-monte .3s var(--sortie); }
.em-plus::backdrop { background: rgba(10, 10, 12, .35); }
@keyframes em-monte { from { transform: translateY(40px); opacity: 0; } }
.em-plus-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.em-plus-tete b { font-size: 22px; letter-spacing: -.03em; }
.em-plus-fermer { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface-2); font-size: 22px; line-height: 1; cursor: pointer; color: var(--encre); }
.em-plus-moi { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.em-plus-liste { display: grid; background: var(--surface-2); border-radius: 14px; overflow: hidden; }
.em-plus-liste a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; text-decoration: none; color: var(--encre); font-weight: 550; font-size: 15px; }
.em-plus-liste a + a { border-top: 1px solid var(--filet); }
.em-plus-sortir { width: 100%; border: 0; background: none; color: var(--rouge); font: 600 15px var(--sans); padding: 14px; margin-top: 6px; cursor: pointer; }
.em-moi-bouton .initiale, .em-plus-moi .initiale { border-radius: 50%; background: var(--encre); color: var(--papier); display: grid; place-items: center; font-style: normal; font-weight: 700; }

/* ——— Today, l'accueil d'un membre (public/accueil.js) ——— */
.td { max-width: 1240px; margin: 0 auto; padding: 6px 40px 60px; }
.td-salut { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 30px; margin-bottom: 22px; }
.td-date { margin: 0; color: var(--gris-doux); font-size: 14px; font-weight: 500; }
.td-bonjour { font-size: clamp(34px, 5vw, 50px); line-height: 1; letter-spacing: -.05em; margin: 6px 0 0; font-weight: 800; color: var(--encre); }
.td-semaine { display: grid; grid-template-columns: auto auto; gap: 4px 16px; align-items: end; }
.td-semaine ol { grid-row: 1 / 3; list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; align-items: end; height: 46px; }
.td-semaine li { display: grid; justify-items: center; align-content: end; gap: 4px; width: 18px; height: 100%; font-size: 11px; font-weight: 600; color: var(--gris-doux); }
.td-semaine li i { display: block; width: 100%; min-height: 4px; border-radius: 4px; background: var(--filet); }
.td-semaine li.un-peu i { background: color-mix(in srgb, var(--accent) 45%, var(--filet)); }
.td-semaine li.ok i { background: var(--accent); }
.td-semaine li.auj span { color: var(--encre); }
.td-semaine p { margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--gris); white-space: nowrap; }
.td-semaine p b { color: var(--encre); }
.td-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
/* Rien de nouveau à droite : pas de colonne, la page garde une largeur de lecture. */
.td-grille.sans-rail { grid-template-columns: minmax(0, 860px); }
.td-col { min-width: 0; }

.td-reprendre { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 270px; padding: 28px 30px 24px; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; background: #17181c center 30% / cover no-repeat; }
.td-reprendre::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 10, 12, .92) 8%, rgba(10, 10, 12, .55) 50%, rgba(10, 10, 12, .1)); }
.td-reprendre.sans-image { min-height: 220px; }
.td-ou { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .75); margin-bottom: 12px; }
.td-ou b { color: #fff; }
.td-reprendre blockquote { margin: 0 0 20px; font-family: var(--lecture-serif); font-style: italic; font-weight: 500; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.2; max-width: 21em; text-wrap: balance; }
.td-reprendre blockquote.phrase::before { content: "« "; color: rgba(255, 255, 255, .5); }
.td-reprendre blockquote.phrase::after { content: " »"; color: rgba(255, 255, 255, .5); }
.td-reprendre blockquote.resume { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.35; }
.td-lecture { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.td-jouer { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #17181c; border-radius: 99px; padding: 11px 20px 11px 15px; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .15s; }
.td-reprendre:hover .td-jouer { transform: scale(1.03); }
.td-jouer svg { width: 18px; height: 18px; fill: currentColor; }
.td-barre { flex: 1; max-width: 300px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.td-barre i { display: block; height: 100%; background: #fff; border-radius: 99px; }
.td-reste { font-size: 13px; color: rgba(255, 255, 255, .78); }

.td-section h2 { font-size: 19px; letter-spacing: -.02em; margin: 34px 0 4px; font-weight: 750; }
.td-sous { margin: 0 0 12px; color: var(--gris); font-size: 14px; }
.td-taches { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.td-taches li { border-bottom: 1px solid var(--filet); }
.td-tache { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 4px; color: var(--encre); text-decoration: none; }
a.td-tache:hover { background: linear-gradient(to right, var(--surface-2), transparent); }
.td-case { width: 24px; height: 24px; border-radius: 50%; border: 1.6px solid var(--filet-fort); display: grid; place-items: center; }
.td-tache.fait .td-case, .td-tache.lettre.fait .td-case { background: var(--accent); border-color: var(--accent); }
.td-tache.fait .td-case::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.td-tache b { display: block; font-weight: 600; font-size: 15px; }
.td-tache.fait b { color: var(--gris-doux); text-decoration: line-through; text-decoration-color: var(--filet-fort); }
.td-tache small { color: var(--gris); font-size: 13.5px; }
.td-tache .fr, .td-cours-info .fr { font-family: var(--lecture-serif); font-style: italic; font-size: 1.08em; color: var(--encre); }
.td-duree { font-size: 13px; color: var(--gris-doux); font-weight: 600; white-space: nowrap; }
.td-nouveau { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--accent); background: var(--accent-pale); padding: 1px 8px; border-radius: 99px; margin-left: 7px; vertical-align: 1px; }
/* La lettre du dimanche : une ligne discrète sous la liste. */
.td-lettre { margin: 14px 0 0; font-size: 13.5px; color: var(--gris); }
.td-lettre .hm-choix { display: inline-flex; gap: 12px; margin-left: 4px; }
.td-lettre .hm-choix button { font-size: 13.5px; }
.td-etagere { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.td-livre { display: grid; gap: 8px; text-decoration: none; color: var(--encre); }
.td-image { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; background: var(--surface-2) center / cover no-repeat; overflow: hidden; }
.td-image em { position: absolute; left: 8px; bottom: 8px; font-style: normal; font-size: 11.5px; font-weight: 700; background: rgba(255, 255, 255, .92); color: #17181c; padding: 2px 8px; border-radius: 99px; }
.td-livre b { font-size: 14.5px; line-height: 1.25; }
.td-livre small { color: var(--gris-doux); font-size: 12.5px; margin-top: -6px; }

.td-rail { display: grid; align-content: start; }
.td-bloc { padding: 18px 0; border-top: 1px solid var(--filet); }
.td-bloc:first-child { border-top: 0; padding-top: 0; }
.td-bloc-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.td-bloc-tete h2 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--gris); }
.td-bloc-tete a, .td-lien { font-size: 13px; color: var(--accent); font-weight: 600; text-decoration: none; }
.td-cours-info { color: var(--gris); font-size: 13.5px; margin: 4px 0 12px; }
.td-avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--surface-2) url("/images/jerome-cutout-800.webp") 50% 6% / 190% auto no-repeat; }
.td-rencontre { display: flex; gap: 12px; align-items: start; font-size: 13.5px; color: var(--gris); margin-bottom: 12px; }
.td-rencontre p { margin: 0; }
.td-message { display: grid; grid-template-columns: 36px 1fr; gap: 11px; text-decoration: none; color: var(--encre); }
.td-message b { font-size: 14px; }
.td-message time { font-size: 12px; color: var(--gris-doux); margin-left: 6px; }
.td-apercu { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 13.5px; color: var(--gris); }
.td-message.non-lu .td-apercu { color: var(--encre); font-weight: 600; }
.td-france-chiffre { margin: 0 0 8px; font-size: 13.5px; color: var(--gris); }
.td-france-chiffre b { font-size: 22px; letter-spacing: -.03em; color: var(--encre); margin-right: 4px; }
.td-france-jauge { display: block; height: 6px; border-radius: 99px; background: var(--filet); overflow: hidden; }
.td-france-jauge i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.td-france-texte { display: block; margin-top: 6px; font-size: 12.5px; color: var(--gris-doux); }
.td-france-nouveau { display: grid; gap: 2px; text-decoration: none; color: var(--encre); background: var(--accent-pale); border-radius: 10px; padding: 12px 14px; }
.td-france-nouveau small { color: var(--gris); font-size: 13px; }
/* Le prochain cours en visio sur Today : en premier dans la colonne, en bloc court (public/cours-visio.js, compact).
   Clair ; sombre quand il y a quelque chose à faire tout de suite (le cours est aujourd'hui, une autre heure proposée). */
.td-visio { margin-bottom: 30px; }
.td-visio .td-section-tete { margin-top: 0; }
.td-cours { border: 1px solid var(--filet); border-radius: 16px; overflow: hidden; background: var(--surface); }
.td-cours-tete { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 22px; }
.td-cours-tete.avec-bouton { grid-template-columns: 60px minmax(0, 1fr) auto; }
.td-cours-jour { width: 60px; height: 60px; border-radius: 12px; background: var(--encre); color: var(--papier); display: grid; place-content: center; text-align: center; line-height: 1; }
.td-cours-jour span { font-size: 12.5px; font-weight: 650; opacity: .72; }
.td-cours-jour b { font-size: 27px; font-weight: 800; letter-spacing: -.04em; margin-top: 3px; }
.td-cours-texte { min-width: 0; }
.td-cours-texte p { margin: 0; }
.td-cours-etat { font-size: 13px; font-weight: 650; color: var(--gris); margin-bottom: 3px !important; }
.td-cours-quand { font-size: 20px; font-weight: 750; letter-spacing: -.025em; }
.td-cours-quand a { color: inherit; text-decoration: none; }
.td-cours-quand a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.td-cours-detail { margin-top: 3px !important; font-size: 14px; color: var(--encre); }
.td-cours-note { margin-top: 2px !important; font-size: 14px; line-height: 1.45; color: var(--gris); }
.td-cours-mot { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, .08); font-size: 14.5px; line-height: 1.5; }
.td-cours-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 8px !important; font-size: 14px; color: var(--gris); }
.td-cours-liens a { font-weight: 650; color: var(--encre); text-underline-offset: 3px; text-decoration-color: var(--filet-fort); white-space: nowrap; }
.td-cours-liens span a { font-weight: 600; }
.td-cours-fort { display: inline-flex; align-items: center; gap: 9px; padding: 11px 19px; border-radius: 99px; background: #fff; color: #17181c !important; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; transition: transform .15s var(--sortie); }
.td-cours-fort:hover { transform: scale(1.03); }
.td-cours-fort svg { width: 19px; height: 19px; fill: currentColor; margin-left: -3px; }
.td-cours.sombre { border-color: #17181c; }
.td-cours.sombre .td-cours-tete { background: #17181c; color: #fff; padding: 22px; }
.td-cours.sombre .td-cours-jour { background: #fff; color: #17181c; }
.td-cours.sombre .td-cours-etat, .td-cours.sombre .td-cours-note, .td-cours.sombre .td-cours-liens { color: rgba(255, 255, 255, .72); }
.td-cours.sombre .td-cours-detail { color: #fff; }
.td-cours.sombre .td-cours-liens a:not(.td-cours-fort) { color: #fff; text-decoration-color: rgba(255, 255, 255, .4); }
.td-cours .ml-avant { border-top: 1px solid var(--filet); padding: 16px 22px 18px; }
.td-cours .ml-avant-tete h3 { font-size: 15.5px; }
.td-section-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin: 34px 0 12px; }
.td-section-tete h2 { margin: 0 !important; }
.td-section-tete a { font-size: 13.5px; font-weight: 650; color: var(--gris); }
@media (max-width: 1100px) { .td-grille { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .td-etagere { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .td { padding: 4px 16px 30px; }
  .td-salut { margin-bottom: 18px; }
  .td-reprendre { min-height: 250px; padding: 22px 20px 20px; }
  .td-barre { display: none; }
  /* La semaine sur une rangée (les barres, puis les deux lignes) : le cours et « Resume » remontent d'autant. */
  .td-semaine { grid-template-columns: auto 1fr; gap: 2px 14px; }
  .td-semaine ol { height: 38px; gap: 4px; }
  .td-semaine li { width: 14px; font-size: 10px; }
  .td-semaine p { font-size: 13px; white-space: normal; }
  .td-cours-tete, .td-cours-tete.avec-bouton { grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 14px; padding: 16px; }
  .td-cours.sombre .td-cours-tete { padding: 18px 16px; }
  .td-cours-jour { width: 52px; height: 52px; }
  .td-cours-jour b { font-size: 23px; }
  .td-cours-quand { font-size: 18px; }
  .td-cours-agir { grid-column: 1 / -1; }
  .td-cours-agir .td-cours-fort { width: 100%; justify-content: center; }
  .td-cours-liens { gap: 4px 16px; font-size: 13.5px; }
  .td-cours .ml-avant { padding: 14px 16px 16px; }
}

/* ——— Stories, dans l'espace membre : toutes les histoires en couvertures (public/episodes-page.js, « carte ») ——— */
html.espace .st { max-width: 1240px; margin: 0 auto; padding: 6px 40px 60px; }
html.espace .st .conteneur { max-width: none; padding: 0; }
html.espace .st-tete { padding: 0; margin: 6px 0 26px; border: 0; }
html.espace .st-tete h1 { font-size: clamp(30px, 3.6vw, 38px); line-height: 1; letter-spacing: -.045em; margin: 0; }
html.espace .em-sous { margin: 8px 0 0; color: var(--gris); font-size: 15.5px; }
html.espace .st-faits, html.espace #st-une, html.espace #mot-acces, html.espace #st-etageres, html.espace #st-soutien,
html.espace .st-toutes-tete, html.espace .st-trouver-plus, html.espace .lien-historique, html.espace .st-pages { display: none !important; }
html.espace .st-toutes { margin: 0; padding: 0; border: 0; }
html.espace .st-trouver { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 0; border: 0; }
html.espace .st-trouver .choix-cases { gap: 6px; }
html.espace .st-trouver .choix-cases span { padding: 5px 13px; font-size: 13.5px; font-weight: 600; }
html.espace .resultats-ligne { margin: 6px 0 16px; }
html.espace .compte-resultats { font-size: 13.5px; color: var(--gris-doux); }
.em-catalogue { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; }
.em-livre { display: grid; gap: 8px; text-decoration: none; color: var(--encre); }
.em-couv { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; background: #2a2b2f center / cover no-repeat; overflow: hidden; transition: transform .25s var(--sortie); }
.em-livre:hover .em-couv { transform: translateY(-2px); }
.em-couv em { position: absolute; left: 8px; bottom: 8px; font-style: normal; font-size: 11.5px; font-weight: 700; background: rgba(255, 255, 255, .92); color: #17181c; padding: 2px 8px; border-radius: 99px; }
.em-avance { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .3); }
.em-avance i { display: block; height: 100%; background: #fff; }
.em-avance + em { bottom: 12px; }
.em-fini { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.em-fini svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.em-livre b { font-size: 14.5px; line-height: 1.25; }
.em-livre small { color: var(--gris-doux); font-size: 12.5px; margin-top: -6px; }
@media (max-width: 1100px) { .em-catalogue { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  html.espace .st { padding: 6px 16px 40px; }
  .em-catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  html.espace .st-trouver .choix-cases { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
}
html.espace .st-tete { display: block; }
.em-catalogue > li { border: 0 !important; padding: 0 !important; }

/* ——— L'espace membre : toutes les pages à la même échelle (titres de 38 px, une largeur, des marges de 40 px) ——— */
html.espace {
  --titre-page: clamp(30px, 3.6vw, 38px);
  --titre-section: clamp(24px, 2.4vw, 30px);
  --haut-page: 10px;
  --largeur: 1240px;
  --gouttiere: 40px;
}
html.espace main h1 { letter-spacing: -0.045em; line-height: 1; }
@media (max-width: 820px) { html.espace { --gouttiere: 16px; } }
html.espace :is(.dh-tete, .ml-tete, .rb-tete, .l-entete, .pu-tete, .espace-invitation, .espace-tete, .catalogue-tete, .articles-tete, .live-tete, .compte-tete) h1,
html.espace .cat-tete h1 { font-size: var(--titre-page); letter-spacing: -0.045em; line-height: 1; }
html.espace .dh-tete .dh-chapo, html.espace .ml-tete p { font-size: 15.5px; }

/* ——— Réserver : « Calendar / List » (public/live-book.js). La liste : les heures, jour par jour. ——— */
.rv-semaine { flex-wrap: wrap; gap: 6px 14px; }
.rv-vues { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--surface-2); margin-left: auto; order: 3; }
.rv-semaine .rv-vues button { text-decoration: none; padding: 5px 13px; border-radius: 99px; font-size: 13.5px; font-weight: 600; color: var(--gris); }
.rv-semaine .rv-vues button[aria-pressed="true"] { background: var(--papier); color: var(--encre); box-shadow: 0 1px 3px rgba(23, 24, 28, .12); }
.rv-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.rv-jour { display: grid; align-content: start; gap: 6px; padding: 10px 8px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--filet); }
.rv-jour b { font-size: 13px; text-align: center; margin-bottom: 2px; }
.rv-jour button { width: 100%; border: 0; border-radius: 8px; padding: 7px 0; background: var(--accent-pale); color: var(--accent); font: 600 13.5px var(--sans); cursor: pointer; }
.rv-jour button:hover { background: var(--accent); color: #fff; }
.rv-jour button[aria-pressed="true"] { background: var(--encre); color: var(--papier); }
.rv-rien { font-size: 12.5px; color: var(--gris-doux); text-align: center; padding: 6px 0; }
@media (max-width: 760px) {
  .rv-jours { grid-template-columns: 1fr; }
  .rv-jour { grid-template-columns: 64px repeat(auto-fill, minmax(62px, 1fr)); align-items: center; }
  .rv-jour b { text-align: left; margin: 0; }
}
html.espace .rb > .lien-retour { display: none; }

/* ——— Messages, dans l'espace membre : toute la largeur à droite de la barre, sans traits verticaux ——— */
html.espace .chat-cadre { max-width: none; border-left: 0; border-right: 0; }
html.espace .st-trouver .choix-cases span { white-space: nowrap; }
@media (max-width: 820px) {
  html.espace .st-trouver { flex-direction: column; flex-wrap: nowrap; }
  html.espace .st-trouver .choix-cases { margin-inline: -16px; padding-inline: 16px; }
  html.espace .st-niveaux small { display: none; }
}

/* ——— Courses, dans l'espace membre : le titre et sa phrase dessous, comme Stories ——— */
html.espace .ct-tete { padding-top: 6px; margin-bottom: 26px; }
html.espace .ct-tete h1 { font-size: var(--titre-page); letter-spacing: -0.045em; line-height: 1; }
html.espace .ct-tete-bas { display: block; margin-top: 8px; }
html.espace .ct-tete-bas p { display: inline; font-size: 15.5px; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--gris); max-width: none; }
html.espace .ct-tete-bas p + p::before { content: " "; }
html.espace .ct-tete-bas small { display: inline; font-size: inherit; margin: 0; }

/* Today, avec un cours qui vient : la carte sombre du cours, et l'histoire à reprendre à côté */

/* Blog, dans l'espace membre : le titre en haut, comme les autres pages (sous le carrousel s'il y a des articles à la une) */
html.espace .articles-section { padding-top: 10px; }
html.espace .blog-une:has(#diapos > *) + .articles-section { padding-top: 40px; }
html.espace .articles-tete p { font-size: 15.5px; }
html.espace .articles-tete p { margin-top: 8px; max-width: 60ch; }

/* Stories, dans l'espace membre : les cartes des rayons, par rangées de cinq ; la carte laissée sous la souris s'ouvre
   (sa fiche, comme sur Netflix). Au doigt ou sur un petit écran : une grille simple, un toucher ouvre l'aperçu. */
#grille.em-catalogue { container: etageres / inline-size; --ecart: 14px; display: block; list-style: none; margin: 0; padding: 0; }
#grille.em-catalogue > li.em-rangee { margin: 0; }
#grille.em-catalogue > li.em-rangee + li.em-rangee { margin-top: 22px; }
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) { #grille.em-catalogue { --ecart: 24px; } }
@media not ((hover: hover) and (pointer: fine) and (min-width: 1100px)) {
  #grille.em-catalogue { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 14px; }
  #grille.em-catalogue > li.em-rangee, #grille.em-catalogue .st-rang { display: contents; }
  #grille.em-catalogue > li.em-rangee + li.em-rangee { margin-top: 0; }
  #grille.em-catalogue .st-rang > .livre { min-width: 0; }
  #grille.em-catalogue .st-rang .pochette { height: auto; aspect-ratio: 2 / 3; }
}
/* Dans la grille de l'espace, un bloc centré par des marges automatiques se réduirait à son contenu : pleine largeur. */
html.espace body > main, html.espace .td, html.espace .st { width: 100%; }
/* Quatre cartes par rangée : la carte ouverte est assez haute pour toute sa fiche. */
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  #grille.em-catalogue .st-etagere { --carte: calc((100cqw - 3 * var(--ecart)) / 4); --ouverte: calc(var(--carte) * 1.7); }
}
/* La grille simple : le petit élément de fin d'un rayon (.st-rang::after) y prendrait une case vide. */
#grille.em-catalogue .st-rang::after { display: none; }

/* Le résumé en anglais des histoires débutants (A1-A2), sous le français, plus discret */
.fiche-resume-en { font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.7); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-affiche .st-resume-en { margin: -8px 0 16px; max-width: 30em; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.65); }
.st-apercu .st-resume-en { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--gris); }

/* Dictations, dans l'espace membre : un titre à l'échelle de l'espace ; « How it works » passe dessous quand la place manque. */
html.espace .dh-grille { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
html.espace .dh-une-titre { font-size: clamp(30px, 3.2vw, 46px); }
@media (max-width: 1180px) {
  html.espace .dh-grille { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  html.espace .dh-grille > aside, html.espace .dh-cote { max-width: 560px; }
}
/* Réserver, dans l'espace, quand la place manque : le calendrier en pleine largeur, le récapitulatif dessous. */
@media (max-width: 1180px) { html.espace .rv-resa { grid-template-columns: minmax(0, 1fr); } }

/* ——— My words (public/words.js) : la révision du jour, puis le tableau des mots ——— */
.mw-tete { margin: 0 0 24px; }
.mw-tete p { margin: 8px 0 0; color: var(--gris); font-size: 15.5px; }
.mw-retour { display: inline-flex; align-items: center; gap: 4px; margin: -10px 0 14px -6px; border: 0; background: none; padding: 6px 10px 6px 4px; border-radius: 8px; font: 600 14.5px var(--sans); color: var(--gris); cursor: pointer; }
.mw-retour:hover { background: var(--surface-2); color: var(--encre); }
.mw-retour svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mw-retour[hidden] { display: none; }
.mw-revision { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 34px; align-items: center; background: var(--surface-2); border-radius: 16px; padding: 30px 32px; margin-bottom: 30px; }
.mw-revision h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.mw-revision > div > p { margin: 0 0 18px; color: var(--gris); }
/* Ceux qui lui résistent : une liste courte, sous la révision du jour (les mêmes mots que sur sa fiche, chez Jérôme). */
.mw-durs { margin: 0 0 26px; }
.mw-durs h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.02em; }
.mw-durs > p { margin: 0 0 12px; color: var(--gris); font-size: 15px; }
.mw-durs ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mw-durs li { display: grid; gap: 1px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--filet); }
.mw-durs li b { font-weight: 650; }
.mw-durs li span, .mw-durs li small { color: var(--gris); font-size: 13px; }
.mw-boites { display: flex; gap: 6px; margin: 0 0 20px; }
.mw-boites span { flex: 1; text-align: center; font-size: 12px; color: var(--gris); }
.mw-boites b { height: 42px; border-radius: 8px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--filet); font-size: 17px; display: grid; place-items: center; color: var(--encre); margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.mw-boites span:last-child b { background: var(--accent-pale); box-shadow: none; color: var(--accent); }
.mw-carte { background: var(--papier); border-radius: 14px; padding: 26px 28px; box-shadow: 0 18px 40px -26px rgba(23, 24, 28, .4); transform: rotate(-1.2deg); }
.mw-carte > span { display: block; font-family: var(--lecture-serif); font-style: italic; font-size: 34px; line-height: 1.1; }
.mw-carte p { margin: 10px 0 0; color: var(--gris); font-size: 14px; }
.mw-carte p span { font-family: var(--lecture-serif); font-style: italic; font-size: 1.1em; color: var(--encre); }
.mw-carte .mw-carte-phrase { font-family: var(--lecture-serif); font-style: italic; font-size: 16px; color: var(--encre); line-height: 1.45; }
.mw-carte mark { background: none; color: inherit; box-shadow: inset 0 -2px 0 var(--accent); }
.mw-outils { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 4px; }
.mw-filtres { gap: 6px; }
.mw-filtres span { padding: 5px 13px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.mw-outils-droite { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mw-outils-droite .recherche input { width: 150px; }
.mw-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.mw-table th { text-align: left; font-size: 12.5px; color: var(--gris-doux); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--filet); }
.mw-table td { padding: 12px 6px; border-bottom: 1px solid var(--filet); vertical-align: middle; font-size: 14px; color: var(--gris); }
.mw-table td:first-child b { display: block; font-family: var(--lecture-serif); font-style: italic; font-weight: 500; font-size: 19px; color: var(--encre); }
.mw-table td:first-child small { font-size: 12px; font-style: italic; color: var(--gris-doux); }
.mw-table td:nth-child(2) { color: var(--encre); }
.mw-table td a { color: var(--gris); text-decoration: none; }
.mw-table td a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.mw-force { display: inline-flex; gap: 3px; vertical-align: middle; }
.mw-force i { width: 14px; height: 6px; border-radius: 99px; background: var(--filet-fort); }
.mw-force i.plein { background: var(--accent); }
.mw-quand { display: block; margin-top: 4px; font-size: 12px; color: var(--gris-doux); }
.mw-quand.du { color: var(--accent); font-weight: 600; }
.mw-actions { white-space: nowrap; text-align: right; }
.mw-ecouter, .mw-table .retirer { border: 0; background: var(--surface-2); width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; color: var(--encre); vertical-align: middle; }
.mw-ecouter svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mw-ecouter.joue { background: var(--accent); color: #fff; }
.mw-table .retirer { margin-left: 6px; background: none; color: var(--gris-doux); font-size: 20px; line-height: 1; padding: 0; }
.mw-table .retirer:hover { background: var(--surface-2); color: var(--rouge); }
@media (max-width: 1000px) { .mw-revision { grid-template-columns: minmax(0, 1fr); } .mw-carte { display: none; } }
@media (max-width: 700px) {
  .mw-revision { padding: 22px 20px; }
  .mw-table thead { display: none; }
  .mw-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--filet); }
  .mw-table td { padding: 0; border: 0; }
  .mw-table td:nth-child(3) { display: none; }
  .mw-table td:nth-child(4) { grid-column: 1; }
  .mw-table td.mw-actions { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .mw-outils-droite .recherche input { width: 120px; }
}
.mw-outils-droite { flex-wrap: nowrap; }
.mw-outils-droite .recherche { flex: none; width: 190px; max-width: none; margin: 0; }
.mw-outils-droite .recherche input { width: 100%; }
.mw-outils-droite .tri-mots select { font-size: 13.5px; }
@media (max-width: 700px) { .mw-outils-droite { flex-wrap: wrap; } .mw-outils-droite .recherche { width: 100%; } }
.mw-outils-droite .recherche { height: 38px; border-radius: 99px; }

/* ——— Dictations, un membre (public/dictations.js) : la dictée du moment en grand, puis ses dictées et ses progrès ——— */
.dh-une-zone { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; align-items: end; background: var(--surface-2); border-radius: 16px; padding: 30px 32px; margin: 0 0 34px; }
.dh-quand { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--accent); }
.dh-une-zone .dh-une-titre { display: block; margin: 0 0 10px; font-family: var(--lecture-serif); font-style: italic; font-weight: 500; font-size: clamp(32px, 3.4vw, 44px); letter-spacing: 0; line-height: 1.05; }
.dh-info { margin: 0 0 20px; color: var(--gris); max-width: 36em; }
.dh-suivante { display: grid; gap: 3px; padding: 16px 18px; border-radius: 12px; background: var(--papier); }
.dh-suivante b { font-size: 12.5px; color: var(--gris); }
.dh-suivante span { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.dh-suivante small { font-size: 12.5px; color: var(--gris-doux); }
.dh-deux { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 38px; align-items: start; }
.dh-deux h2 { margin: 0 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.dh-historique { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.dh-historique li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--filet); align-items: start; }
.dh-d { font-weight: 700; font-size: 14px; }
.dh-d small { display: block; color: var(--gris-doux); font-weight: 500; font-size: 12.5px; }
.dh-historique p { margin: 0; font-size: 14px; color: var(--gris); }
.dh-historique p b { font-family: var(--lecture-serif); font-style: italic; font-weight: 500; font-size: 17px; color: var(--encre); }
.dh-historique a { font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.dh-historique a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dh-chiffre { margin: 0; font-size: 46px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.dh-deux .dh-tendance { margin: 6px 0 0; font-size: 13.5px; color: var(--gris); }
.dh-deux .dh-tendance b { color: var(--encre); }
.dh-comment-court { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--filet); }
.dh-comment-court h2 { font-size: 15px; }
.dh-comment-court .dh-etapes { font-size: 13.5px; }
@media (max-width: 1180px) { .dh-deux { grid-template-columns: minmax(0, 1fr); } .dh-cote { max-width: 560px; } }
@media (max-width: 760px) {
  .dh-une-zone { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .dh-historique li { grid-template-columns: 64px minmax(0, 1fr); }
  .dh-historique a { grid-column: 2; }
}
html.espace :is(.dh-tete, .ml-tete) { border-bottom: 0; padding-bottom: 0; margin-bottom: 26px; }

/* ——— My lessons (public/my-lessons.js) : chaque information a une seule place ———
   Un cours à venir est un seul objet (.ml-cours) : en haut, sombre, quand et quoi faire ; en bas, clair, ce qu'il faut
   préparer. Le même bloc sur la liste et sur la page du cours. Dessous, les cours suivants et le pack (.ml-suite) ; puis
   le journal (.ml-journal), dont le dernier cours noté est ouvert ; sur la page d'un cours passé, des sections simples. */
.ml-cours { margin-top: 26px; border: 1px solid var(--filet); border-radius: 22px; overflow: hidden; background: var(--surface); }
.lien-retour + .ml-cours, .bandeau-ok + .ml-cours { margin-top: 0; }
.ml-sombre { --f: #17181c; --e: #fff; --d: rgba(255,255,255,.68); --v: #8fd3b4; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: end; padding: 24px 28px 26px; background: var(--f); color: var(--e); }
:root[data-theme="dark"] .ml-sombre { --f: #1f2a25; --e: #ededee; }
.ml-sombre .ml-etiquette { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0; font-size: 13.5px; font-weight: 650; color: var(--v); }
.ml-sombre .attente { padding: 3px 10px; border-radius: 99px; background: rgba(231,195,122,.15); color: #e7c37a; }
.ml-sombre :is(h1, h2) { margin: 0; font-size: clamp(30px, 4.4vw, 42px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; color: var(--e); }
.ml-sombre :is(h1, h2)::first-letter { text-transform: uppercase; }
.ml-sombre .ml-heure { margin: 8px 0 0; font-size: 16px; color: var(--d); }
.ml-sombre .ml-heure-avant { margin: 2px 0 0; font-size: 14px; color: var(--d); }
.ml-dans { text-align: right; }
.ml-dans b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.ml-dans span { display: block; max-width: 290px; margin: 6px 0 0 auto; font-size: 13.5px; line-height: 1.45; color: var(--d); }
.ml-sombre .ml-mot { grid-column: 1 / -1; margin: 0; padding: 0 0 0 12px; border-left: 2px solid rgba(255,255,255,.35); font-size: 15px; line-height: 1.55; color: var(--e); }
.ml-boutons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 2px; }
.ml-boutons :is(a, button) { display: inline-flex; align-items: center; min-height: 42px; padding: 0 17px; border-radius: 99px; border: 1px solid rgba(255,255,255,.24); background: none; color: var(--e); font: inherit; font-size: 14.5px; font-weight: 650; text-decoration: none; cursor: pointer; transition: border-color 0.15s ease; }
.ml-boutons :is(a, button):hover { border-color: var(--e); }
.ml-boutons :is(a, button):disabled { opacity: .5; cursor: default; }
.ml-boutons :is(a, button):focus-visible { outline: 2px solid var(--v); outline-offset: 2px; }
.ml-boutons .fort { background: var(--e); border-color: var(--e); color: var(--f); }
.ml-pied { grid-column: 1 / -1; margin: -2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--d); overflow-wrap: anywhere; }
.ml-pied a { color: var(--e); }
.ml-avant { padding: 20px 28px 24px; }
.ml-avant-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; margin: 0 0 12px; }
.ml-avant-tete h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.ml-avant-tete span { font-size: 13.5px; color: var(--gris); }
.ml-avant .ml-devoirs label { font-size: 15.5px; }
.ml-rien-a-faire { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--gris); }
.ml-sous-titre { margin: 18px 0 8px; font-size: 13.5px; font-weight: 650; color: var(--gris); }

.ml-suite { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px 16px; align-items: center; margin: 18px 0 0; padding: 0 4px; }
.ml-suite > dt { font-size: 14px; color: var(--gris); }
.ml-suite > dd { grid-column: 2; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ml-suite > dd.ml-legende { margin-top: -6px; font-size: 13px; line-height: 1.5; color: var(--gris); display: block; }
.ml-suite .bouton { margin-left: auto; }
.ml-pastille { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--filet-fort); font-size: 14px; color: var(--encre); text-decoration: none; white-space: nowrap; transition: background 0.15s ease; }
.ml-pastille:hover { background: var(--surface-2); }
.ml-pastille b { font-weight: 700; }
.ml-pastille small { font-size: 13px; color: var(--gris); }
.ml-pastille.attente { border-style: dashed; }
.ml-barre { display: flex; gap: 3px; width: 150px; }
.ml-barre i { flex: 1; height: 8px; border-radius: 3px; background: var(--filet); }
.ml-barre i.pris { background: var(--accent); }
.ml-barre i.prevu { background: color-mix(in srgb, var(--accent) 38%, transparent); }
.ml-pack-texte { font-size: 15px; }
.ml-pack-texte small { font-size: 13.5px; color: var(--gris); }
.ml-libre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 26px; padding: 24px 28px; border-radius: 22px; background: var(--surface-2); }
.ml-libre h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.ml-libre p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--gris); }

.ml-journal { margin-top: 52px; }
.ml-section-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin: 0 0 12px; }
.ml-section-tete h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.ml-section-tete span { font-size: 14px; color: var(--gris); }
.ml-section-tete .bouton-texte { font-size: 14px; font-weight: 650; }
.ml-lignes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.ml-lignes > li { border-bottom: 1px solid var(--filet); }
.ml-ligne { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 14px 4px; color: inherit; text-decoration: none; }
.ml-ligne:hover .ml-sujet { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--filet-fort); }
.ml-ligne time { font-size: 14px; color: var(--gris); }
.ml-sujet { font-size: 15.5px; }
.ml-lignes .gris .ml-sujet { color: var(--gris); }
.ml-ouvrir { font-size: 13.5px; font-weight: 650; color: var(--gris); }
.ml-lignes .ouverte .ml-sujet { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.ml-lignes .ouverte .ml-notes { padding: 0 4px 22px 124px; }
/* Les demandes sans suite et les cours annulés : une ligne grise, en bas du journal, qui s'ouvre sur les leurs. */
.ml-autres summary { list-style: none; cursor: pointer; scroll-margin-top: 90px; }
.ml-autres summary::-webkit-details-marker { display: none; }
.ml-autres summary .ml-sujet { grid-column: 2; color: var(--gris); }
.ml-autres summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.ml-autres .cacher, .ml-autres [open] .voir { display: none; }
.ml-autres [open] .cacher { display: inline; }
.ml-autres .ml-lignes > li:last-child { border-bottom: 0; }

.ml-notes .ml-resume { margin: 0 0 22px; font-size: 20px; line-height: 1.45; letter-spacing: -0.012em; color: var(--encre); }
.ml-groupe + .ml-groupe { margin-top: 20px; }
.ml-groupe h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 650; color: var(--gris); }
.ml-corr { display: grid; gap: 1px; margin: 0 0 12px; font-size: 16px; line-height: 1.45; }
.ml-corr s { color: var(--gris); text-decoration-color: var(--rouge); }
.ml-corr span { font-weight: 600; }
.ml-corr span b { color: var(--accent); }
.ml-corr small { font-size: 13.5px; color: var(--gris); }
.ml-groupe .ml-mots { margin: 0; }
.ml-groupe .ml-mots + .ml-lien { display: inline-block; margin-top: 10px; }

.ml-tete-cours { flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.ml-tete-cours h1::first-letter { text-transform: uppercase; }
.ml-section { padding: 26px 0; border-top: 1px solid var(--filet); }
.ml-tete-cours + .ml-section { border-top: 1.5px solid var(--encre); }
.ml-section > p { margin: 0; font-size: 16px; line-height: 1.55; }
.ml-section > .bouton { margin-top: 16px; }
.ml-section .ml-etoiles-lues { margin: 0 0 8px; }
.ml-section .ml-citation { margin: 0 0 8px; }
.ml-petit-gris { margin: 0; font-size: 14px !important; }
.ml-details { display: grid; margin: 0; padding: 20px 4px 0; border-top: 1px solid var(--filet); }
.ml-details > div { grid-template-columns: 96px minmax(0, 1fr); padding: 4px 0; border-top: 0; font-size: 14px; }
.ml-cours + .ml-details { margin-top: 22px; padding-top: 0; border-top: 0; }

/* Changer ou annuler, ajouter à l'agenda : des choix en grand. */
.ml-choix { display: grid; gap: 8px; margin: 0 0 4px; }
.ml-choix :is(a, button) { display: block; width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--filet-fort); background: none; font: inherit; font-size: 15.5px; font-weight: 650; color: var(--encre); text-align: left; text-decoration: none; cursor: pointer; transition: background 0.15s ease; }
.ml-choix :is(a, button):hover { background: var(--surface-2); }
.ml-choix .rouge { color: var(--rouge); }
@media (max-width: 760px) {
  .ml-sombre { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .ml-dans { text-align: left; }
  .ml-dans span { margin-left: 0; }
  .ml-avant { padding: 18px 20px 22px; }
  .ml-suite { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ml-suite > dd { grid-column: 1; }
  .ml-suite > dd + dt { margin-top: 12px; }
  .ml-suite > dd.ml-legende { margin-top: 0; }
  .ml-suite .bouton { margin-left: 0; }
  .ml-libre { padding: 22px 20px; }
  .ml-ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .ml-sujet { grid-column: 1 / -1; grid-row: 2; }
  .ml-lignes .ouverte .ml-notes { padding-left: 4px; }
  .ml-autres summary .ml-sujet { grid-column: 1; grid-row: 1; }
  .ml-details > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* Proposer une autre heure à Jérôme : le petit mot */
.ml-mot-jerome { display: grid; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 600; }
.ml-mot-jerome small { font-weight: 400; color: var(--gris); }
.ml-mot-jerome textarea { width: 100%; font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--papier); color: var(--encre); resize: vertical; }

/* ——— La présentation d'une formation, pour un membre (public/course.js, presentationMembre) ——— */
.fp { max-width: var(--largeur); margin: 0 auto; padding: 6px var(--gouttiere) 60px; }
.fp-retour { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 14px -6px; padding: 6px 10px 6px 4px; border-radius: 8px; font-weight: 600; font-size: 14.5px; color: var(--gris); text-decoration: none; }
.fp-retour:hover { background: var(--surface-2); color: var(--encre); }
.fp-retour svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fp-une { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 40px; align-items: center; margin-bottom: 44px; }
.fp-quand { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--accent); }
.fp-titre { margin: 0 0 12px; font-size: clamp(32px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance; }
.fp-sous { margin: 0 0 22px; font-size: 17px; line-height: 1.5; color: var(--gris); max-width: 32em; }
.fp-une .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.fp-petit { margin: 14px 0 0; font-size: 13.5px; color: var(--gris-doux); }
.fp-video { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border: 0; border-radius: 16px; background: var(--surface-2); overflow: hidden; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.fp-video.sans-video { cursor: default; }
/* La présentation hébergée sur le site : une image tirée de la vidéo, plutôt que le livre. */
.fp-video.image { aspect-ratio: 16 / 9; background: #000; }
.fp-video .fp-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--sortie), filter .3s; }
.fp-video.image:hover .fp-image { transform: scale(1.02); filter: brightness(.92); }
.fp-video.image small { color: #fff; background: rgba(0, 0, 0, .55); padding: 4px 9px; border-radius: 6px; }
.fp-video .k-livre { width: 38%; box-shadow: 0 24px 50px -24px rgba(23, 24, 28, .45); transform: rotate(-2deg); transition: transform .4s var(--sortie); }
.fp-video:not(.sans-video):hover .k-livre { transform: rotate(0deg) scale(1.02); }
.fp-jouer { position: absolute; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--encre); color: #fff; box-shadow: 0 10px 30px -10px rgba(23, 24, 28, .5); }
.fp-jouer svg { width: 24px; height: 24px; fill: currentColor; }
.fp-video small { position: absolute; left: 14px; bottom: 12px; font-size: 12.5px; font-weight: 600; color: var(--gris); }
.fp-deux { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
.fp-deux h2 { margin: 0 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.fp-deux h2 + * { margin-top: 0; }
.fp-acquis { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 10px; }
.fp-acquis li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.45; }
.fp-acquis li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%231d6b52' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.fp-acquis small { display: block; color: var(--gris); font-size: 13.5px; }
.fp-module { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 8px; font-size: 15px; font-weight: 700; }
.fp-module span { font-size: 12.5px; color: var(--gris-doux); font-variant-numeric: tabular-nums; }
.fp-lecons { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--filet); counter-reset: lecon; }
.fp-lecons li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 2px; border-bottom: 1px solid var(--filet); font-size: 14.5px; }
.fp-lecons li > a, .fp-lecons li > span:first-child { color: var(--encre); text-decoration: none; min-width: 0; }
.fp-lecons li > a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.fp-lecons b { font-weight: 600; }
.fp-lecons li.faite b { color: var(--gris); }
.fp-fait { color: var(--accent); }
.fp-gratuit { margin-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--accent); }
.fp-duree { flex: none; font-size: 13px; color: var(--gris-doux); font-variant-numeric: tabular-nums; }
.fp-faq { margin-top: 0; }
.fp-cote { display: grid; gap: 16px; }
.fp-carte { background: var(--surface-2); border-radius: 14px; padding: 20px 22px; }
.fp-carte h3 { margin: 0 0 10px; font-size: 14.5px; font-weight: 700; }
.fp-carte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: var(--gris); }
.fp-carte li b { color: var(--encre); font-weight: 600; }
.fp-prof { display: flex; gap: 12px; align-items: center; }
.fp-prof p { margin: 0; font-size: 14px; color: var(--gris); }
.fp-avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; background: #e9e7e3 url("/images/jerome-cutout-800.webp") 50% 6% / 190% auto no-repeat; }
.fp-avis { margin-top: 44px; }
@media (max-width: 1100px) { .fp-une, .fp-deux { grid-template-columns: minmax(0, 1fr); } .fp-video { max-width: 560px; } .fp-cote { max-width: 560px; } }
/* Dans l'espace membre, une page vide (« Mes cours » sans cours…) reste en haut, comme les autres pages, et à la même échelle. */
html.espace body > main:has(.espace-invitation) { justify-content: flex-start; padding-top: 10px; padding-bottom: 60px; }
html.espace .espace-invitation p { font-size: 15.5px; }
html.espace .ml .espace-invitation { padding-top: 0; }

/* Une fiche peut avoir plusieurs exemples (le même mot vu dans plusieurs cours ou histoires) : l'un sous l'autre,
   chacun avec sa source. */
.fc-un-exemple + .fc-un-exemple { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--filet); }

/* ——— Le maillage interne (src/liens.mjs) : la fin d'une histoire, l'encart d'un article, « Go further » ——— */
.fin-histoire-corps { max-width: 640px; margin: 0 auto; }
.fin-histoire h2 { margin: 0 0 18px; font-size: 22px; font-weight: 850; letter-spacing: -0.03em; line-height: 1.2; }
.fin-histoire h2 span { font-family: var(--lecture-serif); font-weight: 600; letter-spacing: 0; font-size: 1.08em; }
.fin-histoire .suivante { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; border-radius: 14px; border: 1px solid var(--filet); color: var(--encre); text-decoration: none; }
.fin-histoire .suivante:hover { border-color: var(--filet-fort); }
.fin-histoire .suivante img { width: 112px; height: 150px; object-fit: cover; border-radius: 8px; }
.fin-histoire .suivante small { display: block; color: var(--accent); font-weight: 700; font-size: 12.5px; }
.fin-histoire .suivante b { display: block; margin: 2px 0 4px; font-family: var(--lecture-serif); font-size: 26px; font-weight: 600; line-height: 1.15; }
.fin-histoire .resume-suivante { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--gris); font-size: 14.5px; line-height: 1.45; }
.fin-histoire .ecouter { display: inline-flex; margin-top: 12px; padding: 8px 14px; border-radius: 8px; background: var(--action); color: var(--sur-action); font-size: 13.5px; font-weight: 700; }
.liens-sujet { margin-top: 24px; }
.liens-sujet h3 { margin: 0 0 10px; font-size: 13.5px; font-weight: 750; color: var(--gris); }
.liens-sujet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lien-sujet { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: var(--encre); text-decoration: none; }
.lien-sujet:hover { background: #eeeff1; }
.lien-sujet > i { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--papier); }
.lien-sujet > i svg { width: 19px; height: 19px; }
.lien-sujet small { display: block; color: var(--gris-doux); font-size: 12px; font-weight: 650; }
.lien-sujet b { font-size: 15px; line-height: 1.3; }
.lien-sujet .prix { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.ap-fin { padding-top: 34px; padding-bottom: 60px; border-top: 1.5px solid var(--encre); max-width: 720px; }

.encart-histoire { margin: 26px 0; }
.encart-histoire a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--filet); color: var(--encre); text-decoration: none; }
.encart-histoire a:hover { border-color: var(--filet-fort); }
.encart-histoire img, .encart-histoire .lie-sans-image { width: 64px; height: 84px; object-fit: cover; border-radius: 7px; background: var(--surface-2); }
.encart-texte small { display: block; color: var(--accent); font-weight: 700; font-size: 12.5px; }
.encart-texte b { display: block; font-family: var(--lecture-serif); font-size: 19px; font-weight: 600; }
.encart-texte > span { color: var(--gris); font-size: 14px; }
.encart-jouer { width: 42px; height: 42px; border-radius: 50%; background: var(--action); color: var(--sur-action); display: grid; place-items: center; }
.encart-jouer svg { width: 16px; height: 16px; margin-left: 2px; }
.pour-aller { max-width: 680px; margin: 0 auto; padding-top: 26px; padding-bottom: clamp(48px, 7vw, 80px); border-top: 1.5px solid var(--encre); }
.pour-aller h2 { margin: 0 0 16px; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.035em; }
.formation-liee { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 22px; border-radius: 16px; background: var(--accent-pale); color: var(--encre); text-decoration: none; margin-bottom: 16px; }
.formation-liee small { display: block; color: var(--accent); font-weight: 750; font-size: 12.5px; }
.formation-liee b { display: block; font-size: 22px; font-weight: 850; letter-spacing: -0.03em; margin: 2px 0 4px; }
.formation-liee span span { color: var(--gris); font-size: 14.5px; }
.formation-liee .bouton { background: var(--accent); color: #fff; white-space: nowrap; }
.histoires-liees { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.histoires-liees a { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid var(--filet); color: var(--encre); text-decoration: none; }
.histoires-liees a:hover { border-color: var(--filet-fort); }
.histoires-liees img, .histoires-liees .lie-sans-image { width: 52px; height: 70px; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.histoires-liees b { display: block; font-family: var(--lecture-serif); font-size: 17px; font-weight: 600; }
.histoires-liees small { color: var(--gris); font-size: 12.5px; }
@media (max-width: 640px) {
  .fin-histoire .suivante { grid-template-columns: 84px minmax(0, 1fr); }
  .fin-histoire .suivante img { width: 84px; height: 112px; }
  .fin-histoire .suivante b { font-size: 21px; }
  .formation-liee, .histoires-liees { grid-template-columns: minmax(0, 1fr); }
  .formation-liee .bouton { justify-self: start; }
}

/* ——— My words : « Add a word » (public/words.js) ——— */
.mw-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.mw-ajouter { display: inline-flex; align-items: center; gap: 8px; }
.mw-ajouter svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.mw-vous { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; color: var(--accent); background: var(--accent-pale); padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.mw-vous svg, .mw-table .modifier svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.mw-table .modifier { border: 0; background: none; color: var(--gris-doux); width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle; }
.mw-table .modifier:hover { background: var(--surface-2); color: var(--encre); }
.mw-table .modifier svg { width: 15px; height: 15px; }
.mw-fenetre { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; }
.mw-fenetre form { display: grid; gap: 16px; }
.mw-fenetre h2 { margin: 0; font-size: 22px; letter-spacing: -0.03em; display: flex; justify-content: space-between; align-items: center; }
.mw-fermer { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--gris-doux); cursor: pointer; padding: 0 4px; }
.mw-chapo { margin: -10px 0 0; color: var(--gris); font-size: 14.5px; }
.mw-champ { display: grid; gap: 6px; }
.mw-champ > span:first-child { font-size: 13.5px; font-weight: 700; }
.mw-champ > span:first-child small { color: var(--gris-doux); font-weight: 500; margin-left: 4px; }
.mw-champ input { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--filet-fort); font: inherit; font-size: 15.5px; background: var(--papier); color: var(--encre); }
.mw-champ input[name="word"] { font-family: var(--lecture-serif); font-size: 20px; }
.mw-champ input[readonly] { background: var(--surface-2); }
.mw-champ input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.mw-rempli { position: relative; display: block; }
.mw-rempli em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 11.5px; color: var(--accent); font-weight: 650; pointer-events: none; background: var(--papier); padding-left: 6px; }
.mw-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mw-sugg { display: grid; gap: 8px; }
.mw-sugg:empty { display: none; }
.mw-sugg-tete { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--gris); font-weight: 650; }
.mw-sugg-tete small { font-weight: 500; color: var(--gris-doux); }
.mw-sens { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--filet); background: var(--papier); text-align: left; cursor: pointer; font: inherit; color: var(--encre); width: 100%; }
.mw-sens:hover { border-color: var(--filet-fort); }
.mw-sens.histoire { border-color: #bfdccf; }
.mw-sens.choisi { border-color: var(--accent); background: var(--accent-pale); }
.mw-sens b { font-size: 15px; }
.mw-ex { grid-column: 1; font-family: var(--lecture-serif); font-style: italic; font-size: 15px; color: #2b2e34; }
.mw-en { display: block; font-family: var(--sans); font-style: normal; color: var(--gris-doux); font-size: 12.5px; }
.mw-src { grid-column: 1; font-size: 12px; color: var(--gris-doux); }
.mw-sens.histoire .mw-src { color: var(--accent); font-weight: 650; }
.mw-prendre { grid-column: 2; grid-row: 1 / span 3; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 8px; background: var(--action); color: var(--sur-action); white-space: nowrap; }
.mw-sens.choisi .mw-prendre { background: var(--accent); }
.mw-plus { justify-self: start; font-size: 13px; }
.mw-credit, .mw-rien { margin: 0; font-size: 12px; color: var(--gris-doux); }
.mw-credit a { color: inherit; }
.mw-rien { font-size: 13.5px; }
.mw-attente { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--gris-doux); font-size: 13.5px; }
.mw-attente i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--filet-fort); border-top-color: var(--accent); animation: mw-tourne .8s linear infinite; }
@keyframes mw-tourne { to { transform: rotate(360deg); } }
.mw-deja { padding: 12px 14px; border-radius: 11px; background: #fff4d6; color: #5c4300; font-size: 13.5px; }
.mw-deja[hidden] { display: none; }
.mw-deja b { color: #3d2c00; }
.mw-apercu-carte { border-radius: 12px; border: 1px dashed var(--filet-fort); padding: 14px 16px; display: grid; gap: 2px; }
.mw-apercu-carte[hidden] { display: none; }
.mw-apercu-carte .mw-t { color: var(--gris-doux); font-size: 12px; font-weight: 650; margin-bottom: 4px; }
.mw-apercu-carte b { font-family: var(--lecture-serif); font-style: italic; font-weight: 500; font-size: 24px; }
.mw-apercu-carte span { color: var(--gris); font-size: 13.5px; }
.mw-apercu-carte i { margin-top: 4px; font-family: var(--lecture-serif); font-size: 15.5px; color: #2b2e34; }
.mw-erreur { margin: 0; color: var(--rouge); font-size: 14px; }
.mw-erreur[hidden] { display: none; }
.mw-boutons { display: flex; justify-content: flex-end; gap: 10px; }
.mw-boutons .bouton:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 640px) {
  .mw-fenetre { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 92dvh; }
  .mw-deux { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .mw-attente i { animation: none; } }

/* Le chinois simplifié (public/i18n/zh.js) : les caractères chinois n'ont pas l'approche serrée des titres latins, et
   prennent la police chinoise du système (PingFang SC, Microsoft YaHei, Noto Sans CJK) */
html[data-langue="zh"] body { font-family: var(--sans), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
html[data-langue="zh"] :is(h1, h2, h3) { letter-spacing: 0; }
html[data-langue="zh"] .ouverture-texte h1 { line-height: 1.12; }


/* ——— What's new (/whats-new, src/nouveautes.mjs) : une liste par langue, celle de la langue choisie est visible ——— */
.qn { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) 24px 96px; }
.qn-tete h1 { font-size: clamp(38px, 6vw, 60px); font-weight: 800; letter-spacing: -.045em; line-height: 1; margin: 0 0 14px; }
.qn-tete p { font-size: 18px; line-height: 1.5; color: var(--gris); margin: 0; max-width: 34em; }
.qn-tete p a, .qn-pied a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.qn-liste { display: none; }
html:not([data-langue]) .qn-liste[data-qn="en"], html[data-langue="en"] .qn-liste[data-qn="en"], html[data-langue="fr"] .qn-liste[data-qn="fr"],
html[data-langue="es"] .qn-liste[data-qn="es"], html[data-langue="zh"] .qn-liste[data-qn="zh"] { display: block; }
.qn-mois { margin: 56px 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--gris); }
.qn-entree { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 24px; padding: 28px 0; border-top: 1px solid var(--filet); scroll-margin-top: 80px; }
.qn-date { margin: 0; font-size: 14px; color: var(--gris); padding-top: 4px; }
.qn-date b { display: block; color: var(--encre); font-size: 15px; font-weight: 600; }
.qn-corps h3 { font-size: 23px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; margin: 0 0 8px; display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.qn-pastille { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--accent); }
.qn-pastille i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.qn-corps p { font-size: 16.5px; line-height: 1.6; margin: 0 0 12px; color: var(--encre); max-width: 36em; }
.qn-images { display: grid; gap: 12px; margin: 6px 0 14px; }
.qn-images.plusieurs { grid-template-columns: 1fr 1fr; }
.qn-image { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--filet); }
.qn-essayer { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }
.qn-essayer::after { content: "→"; transition: transform .2s var(--sortie, ease); }
.qn-essayer:hover::after { transform: translateX(3px); }
.qn-vide { margin: 48px 0 0; color: var(--gris); }
.qn-pied { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--filet); font-size: 15px; color: var(--gris); }
@media (max-width: 640px) {
  .qn-entree { grid-template-columns: 1fr; gap: 6px; }
  .qn-date { padding: 0; } .qn-date b { display: inline; margin-right: 4px; }
  .qn-corps h3 { font-size: 21px; }
  .qn-images.plusieurs { grid-template-columns: 1fr; }
}
/* Le point vert de « What's new » dans le menu du membre (et sur « More », sur téléphone) */
.em-point { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: auto; flex: none; }
.em-plus-bouton { position: relative; }
.em-plus-bouton .em-point { position: absolute; top: 4px; left: calc(50% + 9px); width: 8px; height: 8px; margin: 0; box-shadow: 0 0 0 2px var(--papier); }

/* « My mistakes » sous les corrections d'un cours (public/my-lessons.js) */
.ml-erreurs { margin: 10px 0 2px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: 15px; line-height: 1.5; }
.ml-erreurs b { color: var(--accent); }
.ml-erreurs a { font-weight: 600; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }

/* ——— « My mistakes » dans My words (public/words.js) : la bande, la liste, la carte à réécrire ——— */
/* La révision du jour (public/revision.js) : ce qui attend, et les jours suivants. */
.rdj-reste { margin: 10px 0 0; font-size: 14.5px; color: var(--gris); display: flex; gap: 8px; align-items: baseline; max-width: 34em; }
.rdj-reste i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-1px); }
.rdj-jours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 22px 0 6px; max-width: 460px; }
.rdj-jours span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--filet); font-size: 13px; color: var(--gris); text-align: left; }
.rdj-jours span b { font-size: 18px; color: var(--encre); font-variant-numeric: tabular-nums; }
.rdj-jours span.auj { border-color: var(--encre); }
.mm-bande { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin: 18px 0 8px; padding: 22px 26px; border-radius: 16px; border: 1px solid var(--filet); }
.mm-bande > div:first-child { flex: 1 1 340px; }
.mm-bande .mm-paire { flex: 1 1 280px; }
.mm-actions-bande { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.mm-actions-bande .mm-lien { margin-top: 0; }
.mm-bande h2 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.02em; }
.mm-bande p { margin: 0; color: var(--gris); font-size: 15.5px; line-height: 1.5; max-width: 34em; }
.mm-lien { margin-top: 12px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--encre); cursor: pointer; }
.mm-paire { display: grid; gap: 6px; padding: 16px 18px; border-radius: 12px; background: var(--surface-2); font-size: 16px; }
.mm-paire small { color: var(--gris); font-size: 12.5px; }
.mm-faux { color: var(--gris); text-decoration: line-through; text-decoration-color: var(--rouge); }
.mm-juste { font-weight: 600; color: var(--encre); }
.mm-juste b, .mm-ecrit b { color: var(--accent); font-weight: 700; }
.mm-ecrit u { text-decoration: underline wavy var(--rouge); text-underline-offset: 4px; }
.mm-bloc { display: block; margin-top: 2px; }
.mm-table td small { display: block; color: var(--gris); font-size: 13px; margin-top: 4px; }
.mm-carte { width: 100%; max-width: 720px; margin: 0 auto; min-height: 400px; box-sizing: border-box; padding: 40px 48px; border: 1px solid var(--filet); border-radius: 4px; background: var(--papier); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 20px 40px -24px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 18px; }
.mm-etiquette { margin: 0; font-size: 13px; color: var(--gris); display: flex; gap: 8px; align-items: center; }
.mm-etiquette i { width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); flex: none; }
.mm-phrase { font-size: 30px; line-height: 1.3; letter-spacing: -.02em; font-weight: 700; margin: 0; }
.mm-consigne { margin: 0; color: var(--gris); font-size: 15px; }
.mm-champ { width: 100%; box-sizing: border-box; padding: 14px 16px; font: inherit; font-size: 19px; border: 1.5px solid var(--encre); border-radius: 10px; background: transparent; color: var(--encre); }
.mm-champ:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.mm-touches { display: flex; gap: 6px; flex-wrap: wrap; }
.mm-touches button { min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--filet); border-radius: 8px; background: none; color: var(--encre); font: inherit; font-size: 16px; cursor: pointer; }
.mm-touches button:hover { background: var(--surface-2); }
.mm-verdict { font-size: 16px; font-weight: 700; margin: 0; }
.mm-verdict.oui { color: var(--accent); } .mm-verdict.non { color: var(--rouge); }
.mm-ligne { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 16px; font-size: 19px; line-height: 1.45; }
.mm-ligne small { font-size: 13px; color: var(--gris); padding-top: 4px; }
.mm-pourquoi { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: 15px; color: var(--encre); }
.mm-pourquoi small { display: block; color: var(--gris); font-size: 12.5px; margin-bottom: 2px; }
.mm-suite { margin: 0; color: var(--gris); font-size: 15px; }
.mm-actions { max-width: 720px; margin: 16px auto 0; display: grid; }
.mm-actions .bouton { height: 54px; border-radius: 999px; font-size: 17px; justify-content: center; }
.mm-actions kbd { margin-left: 8px; font: 600 12px/1 var(--sans); padding: 3px 5px; border: 1px solid currentColor; border-radius: 4px; opacity: .7; }
@media (max-width: 640px) {
  .mm-bande { padding: 18px; }
  .mm-carte { padding: 24px 20px; min-height: 0; }
  .mm-phrase { font-size: 24px; }
  .mm-ligne { grid-template-columns: 1fr; gap: 2px; font-size: 17px; }
  .mm-actions kbd { display: none; }
}
/* (dans la liste, les phrases gardent la police du texte : le tableau des mots met ses <b> et <small> en italique) */
.mw-table.mm-table td .mm-faux, .mw-table.mm-table td .mm-juste { display: block; font: inherit; font-size: 16px; font-style: normal; }
.mw-table.mm-table td .mm-juste { font-weight: 600; }
.mw-table.mm-table td .mm-juste b { display: inline; font: inherit; font-weight: 700; font-style: normal; color: var(--accent); }
.mw-table.mm-table td > small { font-style: normal; }

/* Réserver (/live/book) : un raccourci par mois (on réserve jusqu'à 3 mois à l'avance, 6 avec un pack), et plusieurs
   cours d'un coup avec un pack (« Several lessons ») : des blocs numérotés dans le calendrier, le décompte du pack,
   la liste des cours choisis, puis l'écran « envoyé » (maquette validée le 28/10/2026). */
.rv-mois { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.rv-mois button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--filet-fort); border-radius: 999px; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--gris); cursor: pointer; }
.rv-mois button:hover { border-color: var(--encre); color: var(--encre); }
.rv-mois button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.rv-mois i { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--papier); font-size: 11px; display: grid; place-items: center; }
.rc-choix.rc-multi { pointer-events: auto; cursor: pointer; border: 0; display: flex; align-items: flex-start; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 700; }
.rc-choix.rc-multi b { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--papier); color: var(--encre); display: grid; place-items: center; font-size: 11px; }
.rc-choix.rc-multi i { margin-left: auto; font-style: normal; opacity: 0; transition: opacity .15s; }
.rc-choix.rc-multi:hover i, .rc-choix.rc-multi:focus-visible i { opacity: 1; }
.rc-choix.rc-multi.dernier { box-shadow: 0 0 0 3px var(--accent-pale), 0 4px 14px rgb(20 22 26 / .22); }
.rv-cal-plein .rc-libre { opacity: .45; cursor: not-allowed; }
.rv-plein { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--accent-pale); color: var(--accent); font-size: 14px; font-weight: 600; }
.rv-mode { display: flex; margin: 14px 0 0; background: var(--surface); }
.rv-mode button { flex: 1; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.rv-mode button[aria-pressed="true"] { background: var(--surface-2); }
.rv-compte { margin-top: 16px; }
.rv-compte p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0 0 8px; font-size: 15px; }
.rv-compte p span { color: var(--gris); font-size: 14px; }
.rv-points { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; margin: 0 0 14px; }
.rv-points i { height: 6px; border-radius: 3px; background: var(--filet-fort); }
.rv-points i.choisi { background: var(--accent); }
.rv-points i.pris { background: var(--gris-doux); }
.rv-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; max-height: 340px; overflow-y: auto; }
.rv-liste li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--filet-fort); }
.rv-liste li > b { width: 24px; height: 24px; border-radius: 50%; background: var(--encre); color: var(--papier); display: grid; place-items: center; font-size: 12px; }
.rv-aller { display: flex; justify-content: space-between; gap: 10px; border: 0; background: none; padding: 0; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--encre); text-align: left; text-decoration: none; cursor: pointer; }
.rv-aller span { color: var(--gris); font-weight: 500; font-variant-numeric: tabular-nums; }
.rv-retirer { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--gris); font-size: 18px; cursor: pointer; }
.rv-retirer:hover, .rv-retirer:focus-visible { background: var(--surface); color: var(--rouge); }
.rv-liste-vide { margin: 0 0 4px; font-size: 14px; color: var(--gris); }
.rv-repeter { display: block; margin: 0 0 6px; font-size: 14px; text-align: left; white-space: normal; line-height: 1.4; }
.rv-repete { margin: 0 0 6px; font-size: 13.5px; color: var(--accent); }
.rv-envoye { max-width: 560px; margin: 10px auto 40px; text-align: center; }
.rv-envoye-coche { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; background: var(--accent-pale); color: var(--accent); }
.rv-envoye-coche svg { width: 26px; height: 26px; }
.rv-envoye h2 { font-size: clamp(26px, 4vw, 34px); letter-spacing: -.02em; margin: 14px 0 8px; }
.rv-envoye > p { color: var(--gris); }
.rv-envoye .rv-liste { text-align: left; margin: 22px 0 16px; max-height: none; }
.rv-attente { font-size: 12.5px; font-weight: 700; color: var(--gris); background: var(--surface-2); padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.rv-envoye .rv-envoye-reste { color: var(--encre); font-size: 15px; }
.rv-envoye .actions { justify-content: center; margin-top: 18px; }

/* ——— Le parrainage (public/invite.js, maquette validée le 30/10/2026 : Code/apercu-parrainage) : classes pa-* ———
   /invite : le lien d'un élève, ses récompenses, ses amis ; /invite/<CODE> : la page que reçoit l'ami.
   Le vert ne dit qu'un état : ce qui est à toi (une récompense), ce qui est fait. */
.pa { padding-top: 26px; padding-bottom: 80px; }
.pa:not(.pa-accueil) > * { max-width: 880px; }
.pa-offre { display: grid; grid-template-columns: 1fr 1fr; margin: 30px 0 0; border-bottom: 1px solid var(--filet); }
.pa-offre > div { padding: 0 28px 26px 0; }
.pa-offre > div + div { padding: 0 0 26px 28px; border-left: 1px solid var(--filet); }
.pa-offre h2 { margin: 0 0 6px; font-size: 15px; font-weight: 650; color: var(--gris); letter-spacing: 0; }
.pa-offre .pa-montant { display: block; margin: 0 0 8px; font-size: clamp(38px, 5vw, 52px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.pa-offre p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.pa-lien { margin: 28px 0 0; padding: 20px 22px; border-radius: 14px; background: var(--surface-2); }
.pa-lien label { display: block; margin: 0 0 10px; font-size: 14px; font-weight: 650; }
.pa-lien-ligne { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.pa-lien-ligne output { flex: 1 1 280px; min-width: 0; display: block; height: 48px; line-height: 48px; padding: 0 16px; border-radius: var(--r-petit); background: var(--papier); box-shadow: inset 0 0 0 1px var(--filet-fort); font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.pa-lien-ligne .bouton { height: 48px; padding: 0 20px; }
.pa-lien p { margin: 12px 0 0; font-size: 14px; color: var(--gris); line-height: 1.5; }
.pa-lien b.pa-code { color: var(--encre); letter-spacing: .04em; }
.pa-lien .bouton-texte { margin-left: 6px; font-size: 14px; color: var(--gris); }
.pa-recompense { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 22px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--filet); }
.pa-recompense .pa-montant { font-size: 40px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.pa-recompense .pa-montant.vide { color: var(--filet-fort); }
.pa-recompense p { margin: 0; font-size: 15px; line-height: 1.5; }
.pa-recompense p small { display: block; color: var(--gris); font-size: 14px; }
.pa-historique { margin: 12px 0 0; font-size: 14px; color: var(--gris); }
.pa-amis { list-style: none; margin: 0; padding: 0; }
.pa-amis li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.pa-amis .initiale { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--encre); display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 14px; }
.pa-amis b { font-size: 16px; }
.pa-amis p { grid-column: 2; margin: 0; font-size: 14px; color: var(--gris); line-height: 1.45; }
.pa-amis .pa-etat { grid-column: 3; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 650; white-space: nowrap; color: var(--gris); }
.pa-amis .pa-etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--filet-fort); }
.pa-amis .pa-etat.vert { color: var(--accent); }
.pa-amis .pa-etat.vert::before { background: var(--accent); }
.pa-compte { font-size: 14px; font-weight: 500; color: var(--gris); margin-left: 8px; letter-spacing: 0; }
.pa-regles { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pa-regles li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.5; }
.pa-regles li::before { content: ""; width: 5px; height: 5px; margin: 10px 0 0 3px; border-radius: 50%; background: var(--encre); }
.pa-regles-pied { margin: 16px 0 0; font-size: 14px; color: var(--gris); }
.pa-regles-pied a { color: var(--encre); }
.pa-pas-encore { margin: 30px 0 0; max-width: 34em; font-size: 17px; line-height: 1.55; }
.pa-pas-encore p { margin: 0; }
.pa-pas-encore .bouton { margin-top: 22px; }
.pa-ligne-texte { margin: 0; font-size: 15.5px; line-height: 1.55; }
.pa-gris { margin-top: 8px; color: var(--gris); font-size: 14px; }
.pa-code-forme { display: flex; gap: 8px; max-width: 420px; }
.pa-code-forme input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--filet-fort); border-radius: var(--r-petit); background: var(--papier); color: var(--encre); font: inherit; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.pa-code-forme input::placeholder { text-transform: none; letter-spacing: 0; }
.pa-code-forme input:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px var(--surface-2); }
.pa-code-forme .bouton { height: 44px; }
.pa-code-forme + .erreur { margin: 8px 0 0; }
/* La page que reçoit l'ami */
.pa.pa-accueil { padding-top: var(--haut-page); padding-bottom: 90px; }
.pa-accueil-tete { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.pa-accueil-tete h1 { margin: 0; font-size: var(--titre-page); font-weight: 800; letter-spacing: -0.055em; line-height: .95; text-wrap: balance; }
.pa-accueil-tete > div > p:not([class]) { margin: 22px 0 0; max-width: 32em; font-size: var(--chapo); line-height: 1.5; color: var(--gris); }
.pa-accueil-tete img { width: 100%; max-width: 340px; height: auto; justify-self: end; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.pa-cadeau { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; align-items: center; margin: 30px 0 0; padding: 18px 22px; border-radius: 14px; background: var(--accent-pale); }
.pa-cadeau b { grid-row: 1 / span 2; font-size: 40px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--accent); }
.pa-cadeau span { font-size: 15.5px; font-weight: 650; line-height: 1.4; }
.pa-cadeau small { font-size: 14px; color: var(--gris); line-height: 1.45; }
.pa-accueil-actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin: 24px 0 0; }
.pa-accueil-actions .bouton { height: 50px; padding: 0 26px; font-size: 16px; }
.pa-accueil-actions a.lien-souligne { font-size: 15px; }
.pa-attention, .pa-fait { margin: 24px 0 0; max-width: 34em; font-size: 15.5px; line-height: 1.5; }
.pa-fait { color: var(--accent); font-weight: 650; }
#pa-actions .erreur { margin: 10px 0 0; }
.pa-etapes { margin: clamp(56px, 7vw, 90px) 0 0; padding: 26px 0 0; border-top: 1.5px solid var(--encre); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; list-style: none; counter-reset: etape; }
.pa-etapes li { counter-increment: etape; font-size: 15.5px; line-height: 1.5; }
.pa-etapes li::before { content: counter(etape); display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 14px; border-radius: 50%; background: var(--encre); color: var(--papier); font-size: 14px; font-weight: 700; }
.pa-etapes b { display: block; margin-bottom: 4px; font-size: 17px; }
.pa-tarifs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 40px 0 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.pa-tarifs div { padding: 16px 0; }
.pa-tarifs div + div { padding-left: 20px; border-left: 1px solid var(--filet); }
.pa-tarifs dt { font-size: 14px; color: var(--gris); }
.pa-tarifs dd { margin: 4px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.pa-tarifs dd small { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--gris); }
.pa-petit { margin: 22px 0 0; max-width: 46em; font-size: 14px; line-height: 1.55; color: var(--gris); }
/* La page de réservation (public/live-book.js) : la remise de l'ami, les récompenses du parrain, le code d'un élève */
.pa-ligne-remise { display: flex; justify-content: space-between; gap: 10px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--filet-fort); font-size: 15px; font-weight: 650; color: var(--accent); }
.pa-ligne-remise + small, .pa-attend { display: block; margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--gris); font-weight: 400; }
.pa-attend { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--filet-fort); }
.pa-utiliser { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--filet-fort); font-size: 15px; cursor: pointer; }
.pa-utiliser input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.pa-utiliser b { font-weight: 650; }
.pa-utiliser small { display: block; margin-top: 2px; font-size: 13px; color: var(--gris); line-height: 1.45; }
.pa-utiliser .pa-moins { font-weight: 650; color: var(--accent); white-space: nowrap; }
.pa-utiliser:has(input:not(:checked)) .pa-moins { color: var(--gris); text-decoration: line-through; }
.rv-recap .pa-code-forme { margin-top: 8px; }
.rv-recap .pa-code-forme input { height: 42px; font-size: 15px; }
.rv-recap .pa-code-forme .bouton { width: auto; height: 42px; margin-top: 0; padding: 0 18px; font-size: 15px; }
@media (max-width: 760px) {
  .pa-offre { grid-template-columns: minmax(0, 1fr); }
  .pa-offre > div, .pa-offre > div + div { padding: 0 0 22px; border-left: 0; }
  .pa-offre > div + div { padding-top: 22px; border-top: 1px solid var(--filet); }
  .pa-lien { padding: 18px 16px; }
  .pa-lien-ligne output { padding: 0 12px; font-size: 14.5px; }
  .pa-lien-ligne .bouton { flex: 1; }
  .pa-recompense { grid-template-columns: auto minmax(0, 1fr); }
  .pa-recompense .bouton { grid-column: 1 / -1; justify-self: start; }
  .pa-amis li { grid-template-columns: 40px minmax(0, 1fr); }
  .pa-amis .pa-etat { grid-column: 2; grid-row: auto; margin-top: 4px; }
  .pa-accueil-tete { grid-template-columns: minmax(0, 1fr); }
  .pa-accueil-tete img { display: none; }
  .pa-etapes { grid-template-columns: minmax(0, 1fr); }
  .pa-tarifs { grid-template-columns: 1fr 1fr; }
  .pa-tarifs div + div { padding-left: 0; border-left: 0; }
  .pa-tarifs div:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--filet); }
}