/* =============================================================================
   RME ACADEMY, charte graphique et système de composants
   Royal Market Enterprise, par Augustin BK Félix
   -----------------------------------------------------------------------------
   Thème sombre luxe financier. Mobile d'abord. Poids maîtrisé pour la 3G.
   Sommaire :
     01. Variables
     02. Réinitialisation et base
     03. Typographie
     04. Mise en page, conteneurs, grilles
     05. Barre de navigation
     06. Boutons
     07. Cartes
     08. Encadrés pédagogiques
     09. Barres de progression et compteurs
     10. Badges, pastilles, cadenas
     11. Tableaux
     12. Formulaires
     13. Section héros
     14. Tarifs
     15. Programme, arborescence des modules
     16. Bloc communauté
     17. Emplacements à fournir
     18. Pied de page et bandeau de risque
     19. Animations au défilement
     20. Utilitaires
     21. Accessibilité, impression, préférences système
   ============================================================================= */

/* -----------------------------------------------------------------------------
   01. VARIABLES
   -------------------------------------------------------------------------- */
:root {
  /* Fonds */
  --nuit-900: #070E1C;
  --nuit-800: #0A1428;
  --nuit-700: #0D1B33;
  --nuit-600: #122443;
  --nuit-500: #1A3055;

  /* Or */
  --or-600: #A8871F;
  --or-500: #C9A227;
  --or-400: #E3C158;
  --or-300: #F0D88C;

  /* Neutres */
  --creme: #F5F3EE;
  --creme-doux: #D8D5CC;
  --gris: #8E99AC;
  --gris-fonce: #5A6579;

  /* Marché */
  --vert: #16A34A;
  --vert-clair: #34D07A;
  --rouge: #DC2626;
  --rouge-clair: #F05252;
  --bleu-info: #3B82F6;

  /* Traits et surfaces */
  --trait: rgba(201, 162, 39, 0.22);
  --trait-doux: rgba(245, 243, 238, 0.10);
  --verre: rgba(255, 255, 255, 0.035);
  --verre-fort: rgba(255, 255, 255, 0.06);

  /* Typographie */
  --police: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --police-chiffres: 'Manrope', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Rythme */
  --r1: 0.25rem;
  --r2: 0.5rem;
  --r3: 0.75rem;
  --r4: 1rem;
  --r5: 1.5rem;
  --r6: 2rem;
  --r7: 3rem;
  --r8: 4.5rem;

  /* Arrondis */
  --rond-s: 8px;
  --rond-m: 14px;
  --rond-l: 20px;
  --rond-xl: 28px;

  /* Ombres */
  --ombre-s: 0 2px 10px rgba(0, 0, 0, 0.35);
  --ombre-m: 0 10px 30px rgba(0, 0, 0, 0.45);
  --ombre-or: 0 6px 26px rgba(201, 162, 39, 0.18);

  /* Voir le commentaire du theme clair. */
  --bande-section: rgba(18, 36, 67, 0.52);

  /* Largeurs */
  --large: 1200px;
  --moyen: 960px;
  --lecture: 720px;

  /* Transitions */
  --t-rapide: 140ms ease;
  --t-doux: 260ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Couleur du texte posé sur un fond doré. Elle reste sombre dans les deux
     thèmes, sinon le bouton principal devient illisible en thème clair. */
  --sur-or: #070E1C;

  /* Fonds de la barre de navigation et du bandeau de risque */
  --fond-nav: rgba(10, 20, 40, 0.82);
  --fond-nav-defile: rgba(7, 14, 28, 0.94);
  --fond-bandeau: rgba(7, 14, 28, 0.96);

  /* Halos du fond de page */
  --halo-1: rgba(201, 162, 39, 0.10);
  --halo-2: rgba(26, 48, 85, 0.55);
}

/* -----------------------------------------------------------------------------
   THÈME CLAIR
   Activé par l'attribut data-theme="clair" sur la balise html.
   Seules les variables changent, aucun composant n'est redéfini.
   -------------------------------------------------------------------------- */
:root[data-theme="clair"] {
  --nuit-900: #F2EEE5;
  --nuit-800: #FAF8F4;
  --nuit-700: #EDE8DE;
  --nuit-600: #E3DCCF;
  --nuit-500: #CFC6B4;

  /* L'or est assombri, sinon il devient illisible sur fond clair */
  --or-600: #6F5810;
  --or-500: #8A6E14;
  --or-400: #7A6012;
  --or-300: #5C4A0D;

  --creme: #0D1B33;
  --creme-doux: #2A3852;
  --gris: #5A6579;
  --gris-fonce: #8E99AC;

  --vert: #15803D;
  --vert-clair: #126B33;
  --rouge: #B91C1C;
  --rouge-clair: #9F1717;
  --bleu-info: #1D4ED8;

  --trait: rgba(138, 110, 20, 0.38);
  --trait-doux: rgba(13, 27, 51, 0.14);
  --verre: rgba(255, 255, 255, 0.92);
  --verre-fort: #FFFFFF;

  --ombre-s: 0 2px 8px rgba(13, 27, 51, 0.08);
  --ombre-m: 0 10px 28px rgba(13, 27, 51, 0.12);
  --ombre-or: 0 6px 22px rgba(138, 110, 20, 0.18);

  --fond-nav: rgba(250, 248, 244, 0.86);
  --fond-nav-defile: rgba(255, 255, 255, 0.96);
  --fond-bandeau: rgba(255, 255, 255, 0.96);

  --halo-1: rgba(201, 162, 39, 0.14);
  --halo-2: rgba(214, 205, 186, 0.5);

  /* La bande qui distingue une section sur deux. Elle doit s eclaircir en
     theme clair, sinon une bavure bleu nuit traverse la page creme. */
  --bande-section: rgba(222, 214, 198, 0.60);
}

/* -----------------------------------------------------------------------------
   02. RÉINITIALISATION ET BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.68;
  color: var(--creme-doux);
  background-color: var(--nuit-800);
  background-image:
    radial-gradient(900px 500px at 12% -8%, var(--halo-1), transparent 62%),
    radial-gradient(760px 460px at 92% 4%, var(--halo-2), transparent 60%);
  background-attachment: fixed;
  transition: background-color var(--t-doux), color var(--t-doux);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--or-400); text-decoration: none; transition: color var(--t-rapide); }
a:hover { color: var(--or-300); }

::selection { background: var(--or-500); color: var(--sur-or); }

/* Barre de défilement, discrète */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--nuit-900); }
::-webkit-scrollbar-thumb { background: var(--nuit-500); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--or-600); }

/* -----------------------------------------------------------------------------
   03. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  color: var(--creme);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 var(--r4);
}

h1 { font-size: clamp(2rem, 6.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 4.4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.55rem); }
h4 { font-size: 1.08rem; font-weight: 700; }

p { margin: 0 0 var(--r4); }

.doré, .dore { color: var(--or-400); }
.creme { color: var(--creme); }
.gris { color: var(--gris); }
.vert { color: var(--vert-clair); }
.rouge { color: var(--rouge-clair); }

/* Surtitre de section, petites capitales dorées */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: var(--r2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or-500);
  margin-bottom: var(--r3);
}
.surtitre::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--or-500);
}

.chapo {
  font-size: clamp(1rem, 2.2vw, 1.16rem);
  color: var(--gris);
  max-width: 62ch;
}

.chiffre {
  font-family: var(--police-chiffres);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* Filet doré de séparation */
.filet {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--trait), transparent);
  margin: var(--r7) 0;
}

/* -----------------------------------------------------------------------------
   04. MISE EN PAGE
   -------------------------------------------------------------------------- */
.contenant { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: var(--r4); }
.contenant-moyen { max-width: var(--moyen); }
.contenant-lecture { max-width: var(--lecture); }

.section { padding-block: var(--r7); }
.section-large { padding-block: var(--r8); }

.grille { display: grid; gap: var(--r4); }
.g2 { grid-template-columns: 1fr; }
.g3 { grid-template-columns: 1fr; }
.g4 { grid-template-columns: repeat(2, 1fr); }

.pile { display: flex; flex-direction: column; gap: var(--r4); }
.rangee { display: flex; flex-wrap: wrap; gap: var(--r3); align-items: center; }
.entre { display: flex; flex-wrap: wrap; gap: var(--r3); align-items: center; justify-content: space-between; }
.centre { text-align: center; }
.centre .chapo, .centre .surtitre { margin-inline: auto; }

@media (min-width: 720px) {
  .g2 { grid-template-columns: repeat(2, 1fr); }
  .g4 { grid-template-columns: repeat(4, 1fr); }
  .grille { gap: var(--r5); }
}
@media (min-width: 980px) {
  .g3 { grid-template-columns: repeat(3, 1fr); }
}

/* -----------------------------------------------------------------------------
   05. BARRE DE NAVIGATION
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--fond-nav);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--trait-doux);
  transition: border-color var(--t-doux), background var(--t-doux);
}
.nav.defile { border-bottom-color: var(--trait); background: var(--fond-nav-defile); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r4);
  height: 68px;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--r4);
}

.nav-marque { display: flex; align-items: center; gap: var(--r3); flex-shrink: 0; }

.nav-photo {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--or-500);
  background: var(--nuit-600);
  flex-shrink: 0;
}
/* Version sans photo, initiales dorées */
.nav-photo--vide {
  display: grid; place-items: center;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em;
  color: var(--or-400);
}

/* Logo Royal Market Enterprise dans la barre de navigation.
   Pas de cadre rond ni de bordure : un logo détouré doit respirer,
   et contain garantit qu'il ne sera jamais rogné. */
.nav-logo {
  height: 40px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  flex-shrink: 0;
}
.nav-logo--vide {
  display: grid; place-items: center;
  height: 40px; width: 40px;
  border-radius: var(--rond-s);
  border: 1.5px solid var(--or-500);
  background: var(--nuit-600);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em;
  color: var(--or-400);
}

/* Logo complet dans le pied de page, un peu plus grand */
.pied-logo .nav-logo { height: 72px; max-width: 240px; }
.pied-logo .nav-logo--vide { height: 52px; width: 52px; font-size: 0.9rem; }

/* La pastille sombre qui se trouvait ici a été retirée : elle donnait au logo
   l'air de traîner son ancien fond noir. Le thème clair reçoit désormais une
   vraie variante du fichier, voir la section 25. */

/* Le bloc de marque est décrit en section 25. */

.nav-liens { display: none; align-items: center; gap: var(--r5); }
.nav-liens a {
  color: var(--creme-doux);
  font-size: 0.92rem;
  font-weight: 600;
  position: relative;
  padding-block: var(--r2);
}
.nav-liens a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: var(--or-500);
  transition: width var(--t-doux);
}
.nav-liens a:hover::after, .nav-liens a.actif::after { width: 100%; }
.nav-liens a.actif { color: var(--or-400); }

.nav-actions { display: flex; align-items: center; gap: var(--r2); }

.nav-burger {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--trait);
  border-radius: var(--rond-s);
  color: var(--creme);
  cursor: pointer;
}
.nav-burger svg { width: 20px; height: 20px; }

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: var(--r1);
  padding: var(--r4) var(--r4) var(--r5);
  border-top: 1px solid var(--trait-doux);
  background: var(--nuit-900);
}
.nav-mobile.ouvert { display: flex; }
.nav-mobile a {
  color: var(--creme-doux);
  font-weight: 600;
  padding: var(--r3) var(--r2);
  border-radius: var(--rond-s);
}
.nav-mobile a:hover, .nav-mobile a.actif { background: var(--verre); color: var(--or-400); }
.nav-mobile .btn { margin-top: var(--r3); justify-content: center; }

@media (min-width: 980px) {
  .nav-liens { display: flex; }
  .nav-burger { display: none; }
  .nav-mobile { display: none !important; }
}

/* Le bouton de thème réutilise l'habillage du bouton burger, mais il doit
   rester visible sur grand écran, contrairement à celui ci. */
.bouton-theme { display: inline-grid !important; place-items: center; }
.bouton-theme:hover { border-color: var(--or-500); color: var(--or-400); }
.bouton-theme svg { width: 18px; height: 18px; }

/* Sur très petit écran, on masque le libellé Connexion pour laisser
   la place au bouton de thème sans casser la barre. */
@media (max-width: 420px) {
  .nav-actions .lien-connexion { display: none; }
}

/* -----------------------------------------------------------------------------
   06. BOUTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r2);
  padding: 0.82rem 1.5rem;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--rond-s);
  cursor: pointer;
  text-align: center;
  transition: transform var(--t-rapide), box-shadow var(--t-doux), background var(--t-doux), border-color var(--t-doux), color var(--t-doux);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn-or {
  background: linear-gradient(135deg, var(--or-400), var(--or-500) 55%, var(--or-600));
  color: var(--sur-or);
  box-shadow: var(--ombre-or);
}
.btn-or:hover { color: var(--sur-or); box-shadow: 0 10px 34px rgba(201, 162, 39, 0.3); transform: translateY(-1px); }

.btn-contour {
  background: transparent;
  border-color: var(--trait);
  color: var(--creme);
}
.btn-contour:hover { border-color: var(--or-500); color: var(--or-400); background: rgba(201, 162, 39, 0.06); }

.btn-plein {
  background: var(--nuit-600);
  border-color: var(--trait-doux);
  color: var(--creme);
}
.btn-plein:hover { background: var(--nuit-500); border-color: var(--trait); }

.btn-vert { background: var(--vert); color: #fff; }
.btn-vert:hover { background: var(--vert-clair); color: #fff; }

.btn-fantome { background: transparent; color: var(--gris); padding-inline: var(--r3); }
.btn-fantome:hover { color: var(--or-400); }

.btn-large { width: 100%; padding-block: 1rem; font-size: 1rem; }
.btn-petit { padding: 0.5rem 0.9rem; font-size: 0.82rem; }

.btn[disabled], .btn.inactif { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* -----------------------------------------------------------------------------
   07. CARTES
   -------------------------------------------------------------------------- */
.carte {
  position: relative;
  background: var(--verre);
  border: 1px solid var(--trait-doux);
  border-radius: var(--rond-m);
  padding: var(--r5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--t-doux), transform var(--t-doux), box-shadow var(--t-doux);
}
.carte:hover { border-color: var(--trait); }

.carte-active { border-color: var(--trait); box-shadow: var(--ombre-m); }

.carte-cliquable { cursor: pointer; }
.carte-cliquable:hover { transform: translateY(-3px); box-shadow: var(--ombre-m); border-color: var(--or-600); }

.carte-or {
  border-color: var(--or-600);
  background: linear-gradient(160deg, rgba(201, 162, 39, 0.09), var(--verre) 58%);
}

.carte-icone {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--rond-s);
  background: rgba(201, 162, 39, 0.12);
  border: 1px solid var(--trait);
  color: var(--or-400);
  margin-bottom: var(--r4);
}
.carte-icone svg { width: 21px; height: 21px; }

.carte h3 { margin-bottom: var(--r2); }
.carte p:last-child { margin-bottom: 0; }

/* Carte statistique */
.stat { text-align: center; padding: var(--r4); }
.stat-valeur {
  font-family: var(--police-chiffres);
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 800;
  color: var(--or-400);
  line-height: 1;
  display: block;
}
.stat-label {
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gris);
  margin-top: var(--r2);
  display: block;
}

/* -----------------------------------------------------------------------------
   08. ENCADRÉS PÉDAGOGIQUES
   -------------------------------------------------------------------------- */
.encadre {
  position: relative;
  border-radius: var(--rond-m);
  padding: var(--r4) var(--r5);
  margin-block: var(--r5);
  border: 1px solid;
  border-left-width: 3px;
}
.encadre-titre {
  display: flex;
  align-items: center;
  gap: var(--r2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--r3);
}
.encadre-titre svg { width: 16px; height: 16px; }
.encadre p:last-child, .encadre ul:last-child, .encadre ol:last-child { margin-bottom: 0; }

/* Erreur classique */
.encadre-erreur {
  background: rgba(220, 38, 38, 0.07);
  border-color: rgba(220, 38, 38, 0.3);
  border-left-color: var(--rouge);
}
.encadre-erreur .encadre-titre { color: var(--rouge-clair); }

/* À retenir, exactement 3 points */
.encadre-retenir {
  background: rgba(22, 163, 74, 0.07);
  border-color: rgba(22, 163, 74, 0.3);
  border-left-color: var(--vert);
}
.encadre-retenir .encadre-titre { color: var(--vert-clair); }
.encadre-retenir ol { margin: 0; padding-left: 1.15rem; }
.encadre-retenir li { margin-bottom: var(--r2); }
.encadre-retenir li:last-child { margin-bottom: 0; }

/* Respiration, anecdote de marché */
.encadre-respiration {
  background: linear-gradient(140deg, rgba(201, 162, 39, 0.09), rgba(201, 162, 39, 0.02));
  border-color: var(--trait);
  border-left-color: var(--or-500);
}
.encadre-respiration .encadre-titre { color: var(--or-400); }
.encadre-respiration em { color: var(--creme); font-style: normal; font-weight: 600; }

/* Mission pratique, FAIRE */
.encadre-mission {
  background: rgba(59, 130, 246, 0.07);
  border-color: rgba(59, 130, 246, 0.3);
  border-left-color: var(--bleu-info);
}
.encadre-mission .encadre-titre { color: #7FB0FF; }

/* Avertissement légal */
.encadre-legal {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--trait-doux);
  border-left-color: var(--gris-fonce);
  font-size: 0.84rem;
  color: var(--gris);
}
.encadre-legal .encadre-titre { color: var(--gris); }

/* Bloc à remplir par Félix */
.a-remplir {
  border: 1.5px dashed var(--or-600);
  background: rgba(201, 162, 39, 0.05);
  border-radius: var(--rond-m);
  padding: var(--r4) var(--r5);
  margin-block: var(--r4);
}
.a-remplir::before {
  content: '[À REMPLIR PAR FÉLIX]';
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--or-500);
  margin-bottom: var(--r2);
}

/* -----------------------------------------------------------------------------
   09. BARRES DE PROGRESSION
   -------------------------------------------------------------------------- */
.jauge {
  height: 7px;
  background: var(--nuit-600);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.jauge-remplie {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--or-600), var(--or-400));
  transition: width 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.jauge-pratique .jauge-remplie { background: linear-gradient(90deg, #0E7A38, var(--vert-clair)); }
.jauge-mince { height: 4px; }

.jauge-entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
  margin-bottom: var(--r2);
}
.jauge-entete span:first-child { color: var(--gris); letter-spacing: 0.06em; }
.jauge-entete span:last-child { color: var(--creme); font-family: var(--police-chiffres); font-weight: 700; }

/* -----------------------------------------------------------------------------
   10. BADGES, PASTILLES, CADENAS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.26rem 0.62rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: 99px;
  border: 1px solid;
  white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }

.badge-gratuit { color: var(--vert-clair); border-color: rgba(22, 163, 74, 0.45); background: rgba(22, 163, 74, 0.1); }
.badge-payant  { color: var(--or-400);   border-color: var(--trait);              background: rgba(201, 162, 39, 0.09); }
.badge-or      { color: var(--sur-or); border-color: var(--or-400);             background: linear-gradient(135deg, var(--or-400), var(--or-500)); }
.badge-neutre  { color: var(--gris);     border-color: var(--trait-doux);         background: var(--verre); }
.badge-nouveau { color: var(--rouge-clair); border-color: rgba(220, 38, 38, 0.4); background: rgba(220, 38, 38, 0.1); }

.cadenas { color: var(--or-500); flex-shrink: 0; }
.cadenas svg { width: 15px; height: 15px; }

/* Pastille numérotée de module */
.pastille {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--rond-s);
  background: var(--nuit-600);
  border: 1px solid var(--trait-doux);
  font-family: var(--police-chiffres);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--or-400);
}
.pastille-gratuit { border-color: rgba(22, 163, 74, 0.4); color: var(--vert-clair); }

/* -----------------------------------------------------------------------------
   11. TABLEAUX
   -------------------------------------------------------------------------- */
.tableau-defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: var(--r4); border-radius: var(--rond-m); }

table.rme {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--verre);
}
table.rme th, table.rme td { padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--trait-doux); }
table.rme th {
  color: var(--or-400);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--nuit-700);
  white-space: nowrap;
}
table.rme tbody tr:hover { background: var(--verre-fort); }
table.rme tbody tr:last-child td { border-bottom: 0; }

/* Les icônes en ligne d'un tableau doivent garder leur taille.
   Sans cette règle, la règle globale img, svg { max-width: 100% } les fait
   s'étirer à la largeur de la cellule, ce qui donne des coches géantes. */
table.rme svg {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
table.rme td:not(:first-child) { text-align: center; }
table.rme th:not(:first-child) { text-align: center; }

/* -----------------------------------------------------------------------------
   12. FORMULAIRES
   -------------------------------------------------------------------------- */
.champ { margin-bottom: var(--r4); }
.champ label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: var(--r2);
}
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 0.82rem 1rem;
  font-family: inherit;
  font-size: 0.96rem;
  color: var(--creme);
  background: var(--nuit-900);
  border: 1px solid var(--trait-doux);
  border-radius: var(--rond-s);
  transition: border-color var(--t-rapide), box-shadow var(--t-rapide);
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--gris-fonce); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--or-500);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.14);
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ-aide { font-size: 0.78rem; color: var(--gris-fonce); margin-top: var(--r2); }
.champ-erreur { font-size: 0.8rem; color: var(--rouge-clair); margin-top: var(--r2); }

/* Groupe de choix en cartes radio */
.choix { display: grid; gap: var(--r3); }
.choix-option {
  display: flex; align-items: center; gap: var(--r3);
  padding: var(--r4);
  border: 1px solid var(--trait-doux);
  border-radius: var(--rond-s);
  background: var(--verre);
  cursor: pointer;
  transition: border-color var(--t-rapide), background var(--t-rapide);
}
.choix-option:hover { border-color: var(--trait); }
.choix-option input { accent-color: var(--or-500); width: 18px; height: 18px; flex-shrink: 0; }
.choix-option.selectionne { border-color: var(--or-500); background: rgba(201, 162, 39, 0.08); }

/* -----------------------------------------------------------------------------
   13. SECTION HÉROS
   -------------------------------------------------------------------------- */
.heros { position: relative; padding-block: var(--r7) var(--r8); overflow: hidden; }
.heros-grille { display: grid; gap: var(--r6); align-items: center; }

.heros h1 { margin-bottom: var(--r4); }
.heros h1 .dore { display: block; }

.heros-portrait { position: relative; max-width: 340px; margin-inline: auto; width: 100%; }
.heros-portrait img, .heros-portrait .photo-vide {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--rond-l);
  border: 1px solid var(--trait);
  box-shadow: var(--ombre-m);
}
.heros-portrait::after {
  content: '';
  position: absolute;
  inset: -14px -14px 22px 22px;
  border: 1px solid var(--trait);
  border-radius: var(--rond-xl);
  z-index: -1;
}

.heros-signature {
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  background: var(--nuit-900);
  border: 1px solid var(--trait);
  border-radius: 99px;
  padding: 0.5rem 1.1rem;
  text-align: center;
  white-space: nowrap;
  box-shadow: var(--ombre-s);
}
.heros-signature strong { display: block; color: var(--creme); font-size: 0.88rem; }
.heros-signature span { display: block; color: var(--or-500); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; }

@media (min-width: 980px) {
  .heros-grille { grid-template-columns: 1.15fr 0.85fr; gap: var(--r8); }
  .heros-portrait { margin-inline: 0 auto; }
}

/* Bandeau défilant de marchés */
.ruban {
  display: flex;
  gap: var(--r5);
  padding: var(--r3) 0;
  border-block: 1px solid var(--trait-doux);
  overflow: hidden;
  font-family: var(--police-chiffres);
  font-size: 0.78rem;
  color: var(--gris);
  white-space: nowrap;
}
.ruban-piste { display: flex; gap: var(--r5); animation: defile 38s linear infinite; flex-shrink: 0; }
.ruban span strong { color: var(--creme-doux); }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* -----------------------------------------------------------------------------
   14. TARIFS
   -------------------------------------------------------------------------- */
.tarifs { display: grid; gap: var(--r5); align-items: stretch; }
@media (min-width: 760px)  { .tarifs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tarifs { grid-template-columns: repeat(4, 1fr); } }

.tarif {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--verre);
  border: 1px solid var(--trait-doux);
  border-radius: var(--rond-l);
  padding: var(--r5);
  transition: transform var(--t-doux), border-color var(--t-doux), box-shadow var(--t-doux);
}
.tarif:hover { transform: translateY(-4px); border-color: var(--trait); }

.tarif-vedette {
  border-color: var(--or-500);
  background: linear-gradient(165deg, rgba(201, 162, 39, 0.12), var(--verre) 55%);
  box-shadow: var(--ombre-or);
}

.tarif-etiquette {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
}

.tarif-nom { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; color: var(--or-400); margin-bottom: var(--r3); }
.tarif-prix { display: flex; align-items: baseline; gap: var(--r2); flex-wrap: wrap; margin-bottom: var(--r1); }
.tarif-montant { font-family: var(--police-chiffres); font-size: 2.15rem; font-weight: 800; color: var(--creme); line-height: 1; }
.tarif-devise { font-size: 0.95rem; color: var(--gris); font-weight: 700; }
.tarif-barre { text-decoration: line-through; color: var(--gris-fonce); font-size: 1.05rem; font-family: var(--police-chiffres); }
.tarif-periode { font-size: 0.8rem; color: var(--gris); margin-bottom: var(--r2); }
.tarif-usd { font-size: 0.76rem; color: var(--gris-fonce); margin-bottom: var(--r4); }

.tarif-liste { list-style: none; margin: 0 0 var(--r5); padding: 0; flex-grow: 1; display: grid; gap: var(--r3); }
.tarif-liste li { display: flex; gap: var(--r3); align-items: flex-start; font-size: 0.9rem; line-height: 1.5; }
.tarif-liste svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; }
.tarif-liste .oui { color: var(--vert-clair); }
.tarif-liste .non { color: var(--gris-fonce); }
.tarif-liste li.absent { color: var(--gris-fonce); }

/* -----------------------------------------------------------------------------
   15. PROGRAMME, ARBORESCENCE DES MODULES
   -------------------------------------------------------------------------- */
.bloc-titre {
  display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap;
  margin: var(--r7) 0 var(--r5);
  padding-bottom: var(--r3);
  border-bottom: 1px solid var(--trait-doux);
}
.bloc-titre h2 { margin: 0; font-size: clamp(1.25rem, 3.2vw, 1.7rem); }
.bloc-titre .badge { margin-left: auto; }

.module {
  border: 1px solid var(--trait-doux);
  border-radius: var(--rond-m);
  background: var(--verre);
  margin-bottom: var(--r3);
  overflow: hidden;
  transition: border-color var(--t-doux);
}
.module:hover { border-color: var(--trait); }
.module.ouvert { border-color: var(--trait); background: var(--verre-fort); }

.module-entete {
  display: flex; align-items: center; gap: var(--r4);
  width: 100%;
  padding: var(--r4);
  background: transparent;
  border: 0;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.module-titres { flex-grow: 1; min-width: 0; }
.module-titres h3 { font-size: 1.02rem; margin: 0 0 2px; color: var(--creme); }
.module-meta { font-size: 0.76rem; color: var(--gris); display: flex; gap: var(--r3); flex-wrap: wrap; }
.module-fleche { color: var(--gris); transition: transform var(--t-doux); flex-shrink: 0; }
.module-fleche svg { width: 18px; height: 18px; }
.module.ouvert .module-fleche { transform: rotate(180deg); color: var(--or-400); }

.module-corps { display: none; padding: 0 var(--r4) var(--r4); }
.module.ouvert .module-corps { display: block; }

.chapitre { border-left: 1px solid var(--trait-doux); padding-left: var(--r4); margin-left: 18px; padding-block: var(--r3); }
.chapitre:last-child { padding-bottom: 0; }
.chapitre h4 {
  display: flex; align-items: baseline; gap: var(--r2);
  color: var(--or-400); font-size: 0.9rem; margin: 0 0 var(--r2);
}
.chapitre h4 .num { font-family: var(--police-chiffres); font-size: 0.74rem; color: var(--gris-fonce); }

.lecons { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lecons li {
  display: flex; align-items: baseline; gap: var(--r3);
  font-size: 0.87rem;
  color: var(--creme-doux);
  padding: 0.3rem 0;
}
.lecons li .duree {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--police-chiffres);
  font-size: 0.72rem;
  color: var(--gris-fonce);
  white-space: nowrap;
}
.lecons li .puce { color: var(--or-600); flex-shrink: 0; }

/* Aperçu flouté du contenu payant */
.apercu-verrouille { position: relative; }
.apercu-verrouille .module-corps { filter: blur(3.5px); opacity: 0.5; pointer-events: none; user-select: none; }
.voile-vente {
  position: absolute; inset: auto 0 0 0;
  display: grid; place-items: center; gap: var(--r3);
  padding: var(--r5) var(--r4);
  background: linear-gradient(180deg, transparent, var(--nuit-800) 42%);
  text-align: center;
}

/* -----------------------------------------------------------------------------
   16. BLOC COMMUNAUTÉ
   -------------------------------------------------------------------------- */
.communaute-grille { display: grid; gap: var(--r3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .communaute-grille { grid-template-columns: repeat(4, 1fr); } }

.canal {
  display: flex; flex-direction: column; align-items: center; gap: var(--r2);
  padding: var(--r4) var(--r3);
  border: 1px solid var(--trait-doux);
  border-radius: var(--rond-m);
  background: var(--verre);
  text-align: center;
  color: var(--creme-doux);
  transition: border-color var(--t-doux), transform var(--t-doux);
}
.canal { position: relative; }
.canal:hover { border-color: var(--marque, var(--or-500)); transform: translateY(-2px); color: var(--creme); }
.canal:focus-visible { border-color: var(--marque, var(--or-500)); }

.canal-cadenas { position: absolute; top: .5rem; right: .5rem; line-height: 0; }
.canal-cadenas svg { width: 14px; height: 14px; color: var(--or-400); }

.canal-condition {
  margin-top: .15rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--or-400);
}
.canal svg { width: 26px; height: 26px; }
/* Un logo de marque ne se recolore pas : il porte ses couleurs officielles
   dans ses propres attributs fill. Seules les icones d interface heritent
   de la couleur du texte. */
.canal-logo { display: block; line-height: 0; }
.canal-logo svg { width: 28px; height: 28px; }
.canal strong { font-size: 0.88rem; }
.canal span { font-size: 0.74rem; color: var(--gris); line-height: 1.4; }

/* -----------------------------------------------------------------------------
   17. EMPLACEMENTS À FOURNIR
   -------------------------------------------------------------------------- */
.photo-vide, .capture-vide {
  display: grid;
  place-items: center;
  gap: var(--r2);
  padding: var(--r5) var(--r4);
  text-align: center;
  border: 1.5px dashed var(--or-600);
  border-radius: var(--rond-m);
  background:
    repeating-linear-gradient(45deg, rgba(201, 162, 39, 0.05) 0 10px, transparent 10px 20px),
    var(--nuit-700);
  color: var(--or-500);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.photo-vide small, .capture-vide small {
  display: block;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--gris);
  font-size: 0.74rem;
  max-width: 34ch;
  line-height: 1.5;
}
.capture-vide { aspect-ratio: 16 / 9; margin-block: var(--r4); }

/* -----------------------------------------------------------------------------
   18. PIED DE PAGE ET BANDEAU DE RISQUE
   -------------------------------------------------------------------------- */
.bandeau-risque {
  position: sticky;
  bottom: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--r2);
  padding: 0.55rem var(--r4);
  background: var(--fond-bandeau);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(220, 38, 38, 0.32);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--gris);
  text-align: center;
}
.bandeau-risque svg { width: 15px; height: 15px; color: var(--rouge-clair); flex-shrink: 0; }
.bandeau-risque a { color: var(--creme-doux); text-decoration: underline; text-underline-offset: 2px; }

.pied {
  border-top: 1px solid var(--trait-doux);
  background: var(--nuit-900);
  padding-block: var(--r7) var(--r5);
  margin-top: var(--r7);
}
.pied-grille { display: grid; gap: var(--r5); }
@media (min-width: 760px) { .pied-grille { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--r6); } }

.pied h5 {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-500);
  margin-bottom: var(--r3);
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r2); }
.pied ul a { color: var(--gris); font-size: 0.88rem; }
.pied ul a:hover { color: var(--or-400); }

.pied-bas {
  display: flex; flex-wrap: wrap; gap: var(--r3);
  justify-content: space-between; align-items: center;
  margin-top: var(--r6);
  padding-top: var(--r4);
  border-top: 1px solid var(--trait-doux);
  font-size: 0.78rem;
  color: var(--gris-fonce);
}

/* -----------------------------------------------------------------------------
   19. ANIMATIONS AU DÉFILEMENT
   -------------------------------------------------------------------------- */
/* Les règles d'apparition vivent désormais dans la section 23, avec leurs
   variantes. Les garder en double ici rendait l'arbitrage illisible. */

/* -----------------------------------------------------------------------------
   20. UTILITAIRES
   -------------------------------------------------------------------------- */
.mt0 { margin-top: 0; }    .mb0 { margin-bottom: 0; }
.mt2 { margin-top: var(--r2); }  .mb2 { margin-bottom: var(--r2); }
.mt3 { margin-top: var(--r3); }  .mb3 { margin-bottom: var(--r3); }
.mt4 { margin-top: var(--r4); }  .mb4 { margin-bottom: var(--r4); }
.mt5 { margin-top: var(--r5); }  .mb5 { margin-bottom: var(--r5); }
.mt6 { margin-top: var(--r6); }  .mb6 { margin-bottom: var(--r6); }
.petit { font-size: 0.84rem; }
.minuscule { font-size: 0.74rem; }
.gras { font-weight: 700; }
.plein-large { width: 100%; }
.sans-marge-liste { list-style: none; margin: 0; padding: 0; }

/* Liste à puces dorées */
.liste-or { list-style: none; margin: 0 0 var(--r4); padding: 0; display: grid; gap: var(--r3); }
.liste-or li { display: flex; gap: var(--r3); align-items: flex-start; }
.liste-or li::before { content: '▸'; color: var(--or-500); flex-shrink: 0; line-height: 1.6; }

/* -----------------------------------------------------------------------------
   21. ACCESSIBILITÉ, IMPRESSION, PRÉFÉRENCES SYSTÈME
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--or-400);
  outline-offset: 3px;
  border-radius: 4px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: var(--r3) var(--r4);
  background: var(--or-500);
  color: var(--sur-or);
  font-weight: 700;
  border-radius: 0 0 var(--rond-s) 0;
}
.saut-contenu:focus { left: 0; color: var(--sur-or); }

.invisible {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

@media print {
  .nav, .bandeau-risque, .pied, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3, h4 { color: #000; }
  .carte, .encadre { border: 1px solid #999; background: #fff; }
}

/* =============================================================================
   22. LECTEUR DE LEÇON
   Blocs propres au cycle Lire, Voir, Faire, Prouver.
   ============================================================================= */

/* Fil d'Ariane et barre de progression du chapitre */
.lecon-entete { border-bottom: 1px solid var(--trait-doux); padding-bottom: var(--r4); margin-bottom: var(--r5); }
.fil { display: flex; flex-wrap: wrap; gap: var(--r2); font-size: 0.78rem; color: var(--gris); margin-bottom: var(--r3); }
.fil a { color: var(--gris); }
.fil a:hover { color: var(--or-400); }
.fil span { color: var(--gris-fonce); }

.lecon-objectif {
  display: flex; gap: var(--r3); align-items: flex-start;
  background: rgba(201, 162, 39, 0.07);
  border: 1px solid var(--trait);
  border-radius: var(--rond-m);
  padding: var(--r4);
  margin-bottom: var(--r5);
}
.lecon-objectif svg { width: 19px; height: 19px; color: var(--or-400); flex-shrink: 0; margin-top: 2px; }
.lecon-objectif strong { display: block; color: var(--or-400); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 3px; }
.lecon-objectif p { margin: 0; color: var(--creme); }

.lecon-durees { display: flex; flex-wrap: wrap; gap: var(--r4); font-size: 0.8rem; color: var(--gris); margin-bottom: var(--r5); }
.lecon-durees span { display: inline-flex; align-items: center; gap: 6px; }
.lecon-durees svg { width: 14px; height: 14px; color: var(--or-500); }

/* Corps de lecture, confort de lecture avant tout */
.lecon-corps { font-size: 1.02rem; line-height: 1.78; }
.lecon-corps h3 { margin-top: var(--r6); margin-bottom: var(--r3); font-size: 1.22rem; color: var(--or-400); }
.lecon-corps p { margin-bottom: var(--r4); }
.lecon-corps ol, .lecon-corps ul { margin: 0 0 var(--r4); padding-left: 1.3rem; }
.lecon-corps li { margin-bottom: var(--r3); }

/* Phrase clé mise en valeur, remplace les longs paragraphes */
.cle {
  border-left: 3px solid var(--or-500);
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.10), transparent 70%);
  padding: var(--r4) var(--r5);
  margin: var(--r5) 0;
  border-radius: 0 var(--rond-s) var(--rond-s) 0;
  color: var(--creme);
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.6;
}

/* Définition d'un terme, alimente le glossaire */
.definition {
  border: 1px solid var(--trait);
  border-radius: var(--rond-m);
  padding: var(--r4);
  margin: var(--r5) 0;
  background: var(--verre);
}
.definition dt {
  color: var(--or-400);
  font-weight: 800;
  font-size: 0.94rem;
  margin-bottom: var(--r2);
  display: flex; align-items: center; gap: var(--r2);
}
.definition dt::before {
  content: 'DÉFINITION';
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--sur-or);
  background: var(--or-500);
  padding: 2px 6px;
  border-radius: 3px;
}
.definition dd { margin: 0; color: var(--creme-doux); font-size: 0.94rem; }

/* Illustration réelle, avec crédit obligatoire */
.illustration { margin: var(--r5) 0; }
.illustration img {
  width: 100%;
  border-radius: var(--rond-m);
  border: 1px solid var(--trait-doux);
  background: var(--nuit-700);
  /* height auto associé aux attributs width et height du HTML : le navigateur
     calcule lui même le rapport de chaque image et réserve la place exacte
     avant l'arrivée du fichier. Aucun recadrage, y compris sur les visuels
     verticaux. Les dimensions viennent de outils/mesurer-images.mjs. */
  height: auto;
  display: block;
}
/* Visuel plus haut que large : on plafonne la hauteur et on centre, plutôt que
   de le laisser occuper deux écrans. Le rapport est conservé, rien n'est rogné. */
.illustration--haute img {
  width: auto;
  max-width: 100%;
  max-height: 68vh;
  margin: 0 auto;
}
.illustration figcaption {
  margin-top: var(--r3);
  font-size: 0.86rem;
  color: var(--creme-doux);
  line-height: 1.5;
}
.illustration .credit {
  display: block;
  margin-top: var(--r2);
  font-size: 0.7rem;
  color: var(--gris-fonce);
}
.illustration .credit a { color: var(--gris-fonce); text-decoration: underline; }

/* Exemple concret, le cœur du nouveau format */
.exemple {
  border: 1px solid var(--trait);
  border-radius: var(--rond-m);
  overflow: hidden;
  margin: var(--r5) 0;
  background: var(--verre);
}
.exemple-titre {
  display: flex; align-items: center; gap: var(--r2);
  background: rgba(201, 162, 39, 0.12);
  padding: var(--r3) var(--r4);
  color: var(--or-300);
  font-weight: 800;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--trait);
}
.exemple-titre svg { width: 16px; height: 16px; }
.exemple-corps { padding: var(--r4); }
.exemple-situation { color: var(--creme-doux); font-size: 0.94rem; margin-bottom: var(--r4); }
.exemple-calcul { display: grid; gap: 0; margin-bottom: var(--r4); }
.exemple-calcul div {
  display: flex; justify-content: space-between; gap: var(--r4);
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--trait-doux);
  font-size: 0.92rem;
}
.exemple-calcul div:last-child { border-bottom: 0; }
.exemple-calcul span:first-child { color: var(--gris); }
.exemple-calcul span:last-child {
  color: var(--creme); font-weight: 700; text-align: right;
  font-family: var(--police-chiffres); font-variant-numeric: tabular-nums;
}
.exemple-conclusion {
  background: var(--nuit-900);
  border-radius: var(--rond-s);
  padding: var(--r3) var(--r4);
  font-size: 0.92rem;
  color: var(--creme-doux);
}

/* Exercices avec corrigé */
.exercice {
  border: 1px solid var(--trait-doux);
  border-radius: var(--rond-m);
  padding: var(--r4);
  margin-bottom: var(--r4);
  background: var(--verre);
}
.exercice-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-right: var(--r2);
  border-radius: 50%;
  background: var(--or-500); color: var(--sur-or);
  font-size: 0.76rem; font-weight: 800;
}
.exercice-enonce { color: var(--creme); font-weight: 600; margin-bottom: var(--r4); }
.exercice-options { display: grid; gap: var(--r2); margin-bottom: var(--r4); }
.exercice-option {
  display: flex; gap: var(--r3); align-items: flex-start;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--trait-doux);
  border-radius: var(--rond-s);
  background: var(--nuit-900);
  cursor: pointer;
  font-size: 0.92rem;
  transition: border-color var(--t-rapide), background var(--t-rapide);
}
.exercice-option:hover { border-color: var(--or-600); }
.exercice-option.juste { border-color: var(--vert); background: rgba(22, 163, 74, 0.12); color: var(--creme); }
.exercice-option.faux  { border-color: var(--rouge); background: rgba(220, 38, 38, 0.10); }
.exercice-option .marque { width: 16px; flex-shrink: 0; }
.exercice-option .marque svg { width: 16px; height: 16px; }

.exercice-reponse { width: 100%; margin-bottom: var(--r3); }

.corrige {
  display: none;
  border-left: 3px solid var(--vert);
  background: rgba(22, 163, 74, 0.08);
  border-radius: 0 var(--rond-s) var(--rond-s) 0;
  padding: var(--r4);
  margin-top: var(--r3);
}
.corrige.visible { display: block; }
.corrige strong { display: block; color: var(--vert-clair); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--r2); }
.corrige .reponse { color: var(--creme); font-weight: 700; margin-bottom: var(--r2); }
.corrige p { margin: 0; font-size: 0.92rem; color: var(--creme-doux); }

/* Quiz de fin de chapitre */
.quiz-carte { border: 1px solid var(--trait); border-radius: var(--rond-m); padding: var(--r5); background: var(--verre); }
.quiz-score {
  font-family: var(--police-chiffres);
  font-size: 1.6rem; font-weight: 800; color: var(--or-400);
}

/* Mission et preuve */
.mission-etapes { counter-reset: etape; list-style: none; margin: 0 0 var(--r4); padding: 0; }
.mission-etapes li {
  counter-increment: etape;
  display: flex; gap: var(--r3); align-items: flex-start;
  padding: 0.5rem 0;
  font-size: 0.94rem;
}
.mission-etapes li::before {
  content: counter(etape);
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--bleu-info);
  color: #7FB0FF;
  font-size: 0.72rem; font-weight: 800;
}

/* Navigation entre leçons */
.lecon-nav {
  display: flex; gap: var(--r3); justify-content: space-between; align-items: stretch;
  margin-top: var(--r7); padding-top: var(--r5);
  border-top: 1px solid var(--trait-doux);
}
.lecon-nav a {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--r4);
  border: 1px solid var(--trait-doux);
  border-radius: var(--rond-m);
  background: var(--verre);
  color: var(--creme);
  transition: border-color var(--t-doux);
}
.lecon-nav a:hover { border-color: var(--or-500); color: var(--creme); }
.lecon-nav a span { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.lecon-nav a.suivant { text-align: right; }
.lecon-nav a.vide { visibility: hidden; }

/* Sommaire latéral du chapitre */
.sommaire { position: sticky; top: 92px; }
.sommaire h4 { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-500); margin-bottom: var(--r3); }
.sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: som; }
.sommaire li { counter-increment: som; }
.sommaire a {
  display: flex; gap: var(--r3); align-items: baseline;
  padding: 0.5rem 0.7rem;
  border-radius: var(--rond-s);
  font-size: 0.86rem;
  color: var(--creme-doux);
  border-left: 2px solid transparent;
}
.sommaire a::before { content: counter(som); color: var(--gris-fonce); font-size: 0.74rem; flex-shrink: 0; }
.sommaire a:hover { background: var(--verre); }
.sommaire a.actif { background: var(--verre-fort); border-left-color: var(--or-500); color: var(--or-400); }
.sommaire a.faite::before { content: '✓'; color: var(--vert-clair); }

.cours-grille { display: grid; gap: var(--r5); }
@media (min-width: 1040px) {
  .cours-grille { grid-template-columns: 250px 1fr; gap: var(--r7); }
}


/* -----------------------------------------------------------------------------
   22. ACCÈS AU CANAL PRIVÉ ET BROKER PARTENAIRE
   -------------------------------------------------------------------------- */

.acces-prive { border-color: var(--marque); }
.acces-prive .surtitre { color: var(--marque); }

.acces-bandeau {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--r4);
  padding: var(--r4);
  border: 1px solid var(--trait-doux);
  border-left: 3px solid var(--marque);
  border-radius: var(--rond-m);
  background: var(--nuit-900);
}
.acces-bandeau-texte { flex: 1 1 16rem; font-size: .94rem; color: var(--creme-doux); }

.broker-logo { display: block; height: 32px; width: auto; }

/* Repère visuel employé tant que le logo officiel du broker n'a pas été
   déposé dans assets/img/. Ce n'est pas un logo, c'est une pastille. */
.broker-pastille {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--rond-s);
  color: #fff; font-weight: 800; font-size: 1.4rem; line-height: 1;
}

.acces-etapes { list-style: none; margin: var(--r4) 0 0; padding: 0; display: grid; gap: var(--r3); }
.acces-etapes li { display: flex; align-items: flex-start; gap: var(--r3); font-size: .95rem; }
.acces-num {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--marque); color: #fff;
  font-size: .82rem; font-weight: 800;
}

.acces-action {
  display: flex; flex-wrap: wrap; gap: var(--r3);
  margin-top: var(--r5);
}

.btn-broker {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95rem 1.8rem;
  border-radius: var(--rond-s);
  background: var(--marque); color: #fff;
  font-weight: 800; font-size: 1.02rem; letter-spacing: .01em;
  border: 0; cursor: pointer;
  transition: filter var(--t-doux), transform var(--t-doux);
}
.btn-broker:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.btn-broker-vide {
  background: transparent; color: var(--gris);
  border: 1px dashed var(--trait-doux); cursor: default; font-weight: 600;
}
.btn-broker-vide:hover { filter: none; transform: none; color: var(--gris); }

.acces-preuve { margin-top: var(--r3); font-size: .86rem; color: var(--gris); }

@media (max-width: 560px) {
  .acces-action { flex-direction: column; }
  .btn-broker { width: 100%; }
}


/* -----------------------------------------------------------------------------
   23. ANIMATIONS
   -----------------------------------------------------------------------------
   Règle unique : on n'anime que transform et opacity. Ce sont les deux seules
   propriétés que le navigateur compose sur la carte graphique sans recalculer
   la mise en page, ce qui permet d'animer beaucoup sans ralentir une machine
   modeste ni consommer de données.

   L'ensemble se désactive d'un coup par la classe mouvement-reduit, posée sur
   la racine quand l'utilisateur a demandé moins d'animations ou quand la
   connexion est mesurée comme lente. Voir initAnimations dans rme.js.
   -------------------------------------------------------------------------- */

:root {
  --t-anim: 620ms;
  --t-anim-court: 380ms;
  --courbe: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- 23.1 Apparitions au défilement ---- */

.apparait {
  opacity: 0;
  transition:
    opacity var(--t-anim) ease,
    transform var(--t-anim) var(--courbe),
    filter var(--t-anim) ease;
  will-change: transform, opacity;
}
.apparait,
.apparait[data-anim="bas"]    { transform: translate3d(0, 22px, 0); }
.apparait[data-anim="haut"]   { transform: translate3d(0, -22px, 0); }
.apparait[data-anim="gauche"] { transform: translate3d(-28px, 0, 0); }
.apparait[data-anim="droite"] { transform: translate3d(28px, 0, 0); }
.apparait[data-anim="zoom"]   { transform: scale(0.93); }
.apparait[data-anim="flou"]   { transform: translate3d(0, 12px, 0); filter: blur(6px); }
.apparait[data-anim="bascule"] {
  transform: perspective(900px) rotateX(9deg) translate3d(0, 18px, 0);
  transform-origin: top center;
}

/* La révélation vient après les variantes et porte un sélecteur d'attribut,
   sans quoi elle aurait la même spécificité qu'elles et perdrait l'arbitrage :
   l'élément resterait décalé une fois révélé. */
.apparait.vu,
.apparait.vu[data-anim] {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* ---- 23.2 Barre de progression de lecture ---- */

.progression-lecture {
  position: fixed; inset: 0 auto auto 0;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--or-600), var(--or-300));
  z-index: 200;
  pointer-events: none;
}

/* ---- 23.3 Navigation compacte au défilement ---- */

.nav { transition: padding var(--t-doux), background-color var(--t-doux), box-shadow var(--t-doux); }
.nav.nav-compacte {
  background-color: rgba(7, 14, 28, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--trait-doux), var(--ombre-s);
}
:root[data-theme="clair"] .nav.nav-compacte { background-color: rgba(245, 243, 238, 0.9); }

/* ---- 23.4 Reflet qui suit le pointeur sur les cartes ---- */

/* On ne redéclare surtout pas position ici : .carte est déjà relative plus
   haut, et une redéclaration écraserait le position: sticky du sommaire des
   leçons, qui porte la même spécificité et vient avant dans la feuille. */
.carte { isolation: isolate; }
.carte::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    22rem circle at var(--px, 50%) var(--py, 0%),
    rgba(201, 162, 39, 0.10), transparent 62%);
  opacity: 0;
  transition: opacity var(--t-doux);
  pointer-events: none;
  z-index: -1;
}
@media (hover: hover) and (pointer: fine) {
  .carte.suit-pointeur:hover::before { opacity: 1; }
  .carte.suit-pointeur { transition: transform var(--t-doux), border-color var(--t-doux), box-shadow var(--t-doux); }
  .carte.suit-pointeur:hover { transform: translateY(-3px); box-shadow: var(--ombre-m); }
}

/* ---- 23.5 Balayage lumineux sur les boutons dorés ---- */

.btn-or, .btn-broker { position: relative; overflow: hidden; }
.btn-or::after, .btn-broker::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg) translateX(0);
  pointer-events: none;
}
@media (hover: hover) {
  .btn-or:hover::after, .btn-broker:hover::after { animation: balayage 720ms var(--courbe); }
}
@keyframes balayage { to { transform: skewX(-18deg) translateX(420%); } }

/* ---- 23.6 Soulignement des titres qui se trace ---- */

.titre-trace { position: relative; display: inline-block; }
.titre-trace::after {
  content: '';
  position: absolute; left: 0; bottom: -0.22em;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--or-500), transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 760ms var(--courbe) 120ms;
}
.titre-trace.vu::after, .vu .titre-trace::after { transform: scaleX(1); }

/* ---- 23.7 Ambiance du héros ---- */

.heros::before {
  content: '';
  position: absolute; inset: -30% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(52rem 32rem at 18% 8%, rgba(201, 162, 39, 0.13), transparent 62%),
    radial-gradient(44rem 28rem at 88% 28%, rgba(26, 48, 85, 0.55), transparent 64%);
  animation: derive 26s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes derive {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.07); }
}

/* Trame de chandeliers, discrète, qui rappelle le sujet du site. */
.heros::after {
  content: '';
  position: absolute; inset: auto 0 0 0;
  height: 42%;
  background-image:
    linear-gradient(to top, var(--trait-doux) 1px, transparent 1px),
    linear-gradient(to right, var(--trait-doux) 1px, transparent 1px);
  background-size: 100% 3.2rem, 4.4rem 100%;
  opacity: .30;
  mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  animation: trame 34s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes trame { to { background-position: 0 0, -4.4rem 0; } }

.heros > * { position: relative; z-index: 1; }

/* ---- 23.8 Compteurs ---- */

.stat-valeur { font-variant-numeric: tabular-nums; }
.compte-en-cours { color: var(--or-300); }

/* ---- 23.9 Micro interactions ---- */

.module:hover .module-fleche { transform: translateX(5px); }

.canal .canal-logo { transition: transform var(--t-doux); }
.canal:hover .canal-logo { transform: translateY(-3px) scale(1.09); }

.jauge-remplie { transform-origin: 0 50%; }

/* Les cartes de la grille s'inclinent très légèrement vers le pointeur. */
@media (hover: hover) and (pointer: fine) {
  .carte-inclinee { transition: transform var(--t-doux); transform-style: preserve-3d; }
  .carte-inclinee:hover {
    transform:
      perspective(900px)
      rotateX(calc(var(--incl-y, 0) * -3deg))
      rotateY(calc(var(--incl-x, 0) * 3deg))
      translateY(-3px);
  }
}

/* ---- 23.10 Entrée de page ---- */

.page-entre { animation: pageEntre 520ms var(--courbe) both; }
@keyframes pageEntre {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---- 23.11 Pulsation d appel, réservée aux boutons décisifs ---- */

.pulse-once { animation: pulseUne 1.8s var(--courbe) 900ms 2; }
@keyframes pulseUne {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
  35%      { box-shadow: 0 0 0 10px rgba(201, 162, 39, 0.16); }
  70%      { box-shadow: 0 0 0 16px rgba(201, 162, 39, 0); }
}

/* ---- 23.12 Coupure générale ----
   Une seule classe suffit à rendre le site entièrement statique, pour ceux qui
   le demandent et pour les connexions lentes. Rien n'est caché, tout est
   simplement affiché dans son état final. */

.mouvement-reduit .apparait { opacity: 1 !important; transform: none !important; filter: none !important; }
.mouvement-reduit .titre-trace::after { transform: scaleX(1) !important; transition: none !important; }
.mouvement-reduit .heros::before,
.mouvement-reduit .heros::after,
.mouvement-reduit .ruban-piste { animation: none !important; }
.mouvement-reduit .progression-lecture { display: none; }
.mouvement-reduit .btn-or::after,
.mouvement-reduit .btn-broker::after { display: none; }
.mouvement-reduit .carte::before { display: none; }
.mouvement-reduit .page-entre { animation: none !important; }
.mouvement-reduit .pulse-once { animation: none !important; }

/* -----------------------------------------------------------------------------
   24. FONDS DE MARCHÉ ET DÉCOR DES PAGES PUBLIQUES
   -----------------------------------------------------------------------------
   Un bandeau à fond photographique se compose de six couches superposées, du
   fond vers la surface : la photographie en niveaux de gris, un dégradé bichrome
   qui la teinte en bleu nuit et or, un voile qui garantit la lisibilité du
   texte, un graphique en chandeliers dessiné par decor.js, une lueur dorée, puis
   un grain fin. Le contenu de la page passe par dessus.

   Tout ce bloc est posé par decor.js sur les éléments portant data-fond.
   -------------------------------------------------------------------------- */

.a-fond {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* Un bandeau à fond photographique reste sombre dans les deux thèmes. On
     redéclare donc les couleurs localement, ce qui suffit à replacer boutons,
     cartes et badges dans leur version nuit sans toucher à leurs règles. */
  --nuit-900: #070E1C;
  --nuit-800: #0A1428;
  --nuit-700: #0D1B33;
  --nuit-600: #122443;
  --nuit-500: #1A3055;
  --or-600: #A8871F;
  --or-500: #C9A227;
  --or-400: #E3C158;
  --or-300: #F0D88C;
  --creme: #F5F3EE;
  --creme-doux: #D8D5CC;
  --gris: #9AA5B8;
  --gris-fonce: #6E7A8E;
  --trait: rgba(201, 162, 39, 0.30);
  --trait-doux: rgba(245, 243, 238, 0.14);
  --verre: rgba(255, 255, 255, 0.055);
  --verre-fort: rgba(255, 255, 255, 0.10);
  --ombre-s: 0 2px 10px rgba(0, 0, 0, 0.35);
  --ombre-m: 0 10px 30px rgba(0, 0, 0, 0.45);

  color: var(--creme);
  color-scheme: dark;
}
.a-fond h1, .a-fond h2, .a-fond h3, .a-fond h4 { color: var(--creme); }
.a-fond .chapo, .a-fond p { color: var(--creme-doux); }
.a-fond .gris, .a-fond .petit.gris, .a-fond .minuscule { color: var(--gris); }

/* La pile de couches. z-index négatif dans un contexte isolé : le décor reste
   derrière le contenu sans qu'aucun élément de la page ait à être renuméroté. */
.a-fond > .fond {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--nuit-800);
}

/* ---- 24.1 La photographie ---- */

.fond-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Désaturée et assombrie : elle donne la matière et la profondeur, jamais le
     sujet. Le sujet, c'est le texte posé dessus. */
  filter: grayscale(1) contrast(1.12) brightness(0.64);
  transform: scale(1.1);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* La gravure d'Amsterdam est un trait fin sur papier clair : le réglage commun
   l'écrase en un gris uniforme. Elle a besoin de contraste, pas de lumière. */
.a-fond[data-fond="amsterdam"] .fond-photo {
  filter: grayscale(1) contrast(1.75) brightness(0.52);
}

/* ---- 24.2 Le bichrome ---- */

.fond-duo {
  position: absolute;
  inset: 0;
  background: linear-gradient(128deg, #0A1428 0%, #16305C 46%, #C9A227 100%);
  mix-blend-mode: color;
  opacity: 0.9;
}

/* ---- 24.3 Le voile de lisibilité ----
   Deux dégradés croisés. Le premier assombrit le côté du texte, le second
   raccorde le bas du bandeau au fond de la page sans couture visible. */

.fond-voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(7, 14, 28, 0.96) 0%,
      rgba(7, 14, 28, 0.88) 26%,
      rgba(7, 14, 28, 0.52) 54%,
      rgba(7, 14, 28, 0.34) 78%,
      rgba(7, 14, 28, 0.56) 100%),
    linear-gradient(to bottom,
      rgba(7, 14, 28, 0.45) 0%,
      rgba(7, 14, 28, 0.06) 24%,
      rgba(7, 14, 28, 0.74) 86%,
      var(--nuit-900) 100%);
}
.a-fond[data-fond-voile="centre"] .fond-voile {
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(7, 14, 28, 0.42) 0%, rgba(7, 14, 28, 0.86) 62%, var(--nuit-900) 100%),
    linear-gradient(to bottom, rgba(7, 14, 28, 0.62) 0%, transparent 30%, var(--nuit-900) 100%);
}

/* ---- 24.4 Le graphique en chandeliers ---- */

.fond-chandeliers {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 78%;
  opacity: 0.85;
}
.chandeliers { display: block; width: 100%; height: 100%; }

.ch-b {
  opacity: 0;
  transform: translateY(16px);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bougieEntre 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 22ms + 180ms);
}
@keyframes bougieEntre { to { opacity: 1; transform: none; } }

.ch-b line { stroke-width: 1; }
.ch-h rect { fill: rgba(52, 208, 122, 0.72); }
.ch-h line { stroke: rgba(52, 208, 122, 0.58); }
.ch-d rect { fill: rgba(240, 82, 82, 0.66); }
.ch-d line { stroke: rgba(240, 82, 82, 0.52); }

.ch-ligne {
  fill: none;
  stroke: var(--or-400);
  stroke-width: 1.6;
  opacity: 0.72;
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  animation: tracerCours 2800ms ease-out 620ms forwards;
}
@keyframes tracerCours { to { stroke-dashoffset: 0; } }

/* Un reflet qui traverse le graphique, comme un rafraîchissement d'écran. */
.ch-balai { animation: balayerCours 9s linear 1.8s infinite; }
@keyframes balayerCours {
  from { transform: translateX(0); }
  to   { transform: translateX(1500px); }
}

/* ---- 24.4 bis Lisibilité du texte ----
   Le graphique traverse tout le bandeau, y compris la colonne de texte. Cette
   couche l'estompe là où le texte est posé, et le laisse entier ailleurs. */

.fond-texte {
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg,
    rgba(7, 14, 28, 0.93) 0%,
    rgba(7, 14, 28, 0.86) 30%,
    rgba(7, 14, 28, 0.34) 56%,
    rgba(7, 14, 28, 0.04) 74%,
    transparent 100%);
}
.a-fond[data-fond-voile="centre"] .fond-texte {
  background: radial-gradient(86% 72% at 50% 44%,
    rgba(7, 14, 28, 0.88) 0%,
    rgba(7, 14, 28, 0.72) 42%,
    rgba(7, 14, 28, 0.20) 78%,
    transparent 100%);
}

/* ---- 24.4 ter Bande graphique, sans photographie ----
   Posée au milieu d'une page, elle n'a rien à télécharger. Le graphique y est
   le sujet et non plus la texture : il occupe toute la hauteur, le voile
   s'allège, et les deux bords se fondent dans la page. */

.fond-sans-photo .fond-chandeliers { inset: 0; height: 100%; opacity: 0.5; }
.fond-sans-photo .fond-voile {
  background: linear-gradient(to bottom,
    var(--nuit-900) 0%, rgba(7, 14, 28, 0.25) 18%,
    rgba(7, 14, 28, 0.25) 82%, var(--nuit-900) 100%);
}
.fond-sans-photo .fond-texte {
  background: radial-gradient(72% 62% at 50% 50%,
    rgba(7, 14, 28, 0.86) 0%, rgba(7, 14, 28, 0.55) 56%, transparent 100%);
}
.fond-sans-photo .fond-lueur { opacity: 0.55; }
.fond-sans-photo .fond-grain { opacity: 0.09; }

/* ---- 24.5 Lueur et grain ---- */

.fond-lueur {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(34rem 24rem at 76% 16%, rgba(201, 162, 39, 0.22), transparent 66%),
    radial-gradient(28rem 20rem at 10% 86%, rgba(26, 48, 85, 0.60), transparent 70%);
}

.fond-grain {
  position: absolute;
  inset: 0;
  opacity: 0.20;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---- 24.6 Le héros, version bandeau ---- */

.heros.a-fond {
  padding-block: calc(var(--r8) + 0.5rem) var(--r8);
  min-height: min(78vh, 720px);
  display: flex;
  align-items: center;
}
.heros.a-fond .heros-grille { width: 100%; }

.heros h1 {
  font-size: clamp(2.1rem, 6.4vw, 4.05rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.heros.a-fond h1 { text-shadow: 0 2px 26px rgba(7, 14, 28, 0.6); }
.heros.a-fond .chapo { max-width: 34rem; }

/* Le portrait prend un cadre dégradé plutôt qu'un simple trait. */
.a-fond .heros-portrait img,
.a-fond .heros-portrait .photo-vide {
  border: 0;
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.38),
    0 28px 60px rgba(0, 0, 0, 0.55);
}
.a-fond .heros-portrait::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--rond-l) + 1px);
  background: linear-gradient(150deg, var(--or-400), transparent 42%, rgba(52, 208, 122, 0.45));
  opacity: 0.55;
  z-index: -1;
}

/* ---- 24.7 Les statistiques du héros ---- */

.a-fond .stat {
  background: rgba(10, 20, 40, 0.42);
  border-color: rgba(245, 243, 238, 0.12);
}
.stat-valeur {
  white-space: nowrap;
  background: linear-gradient(170deg, var(--creme) 8%, var(--or-400) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Repli pour les navigateurs qui ne découpent pas le fond sur le texte. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat-valeur { color: var(--or-400); background: none; }
}

/* ---- 24.8 Bandeau d'en tête des pages intérieures ---- */

.entete {
  padding-block: var(--r8) var(--r7);
  margin-bottom: var(--r7);
}
.entete .surtitre { margin-bottom: var(--r4); }
.entete h1 {
  font-size: clamp(1.9rem, 4.8vw, 3.2rem);
  line-height: 1.08;
  text-wrap: balance;
  margin-bottom: var(--r4);
}
.entete .chapo { max-width: 46rem; }
.entete.centre .chapo { margin-inline: auto; }

/* La section qui suit immédiatement un bandeau n'a pas besoin de son propre
   espacement haut : le bandeau l'a déjà donné. */
.entete + .section { padding-top: 0; }

/* Une page de formulaire n'a pas besoin d'un bandeau haut : le champ doit
   rester au dessus de la ligne de flottaison. */
.entete.entete-courte { padding-block: var(--r7) var(--r6); margin-bottom: var(--r6); }

/* ---- 24.9 Cartes, filet supérieur et relief ---- */

.carte::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.55), transparent);
  opacity: 0;
  transition: opacity var(--t-doux);
  pointer-events: none;
}
.carte:hover::after { opacity: 1; }
.carte-or::after { opacity: 0.8; }

/* ---- 24.10 Séparateurs tracés ---- */

.separateur {
  height: 60px;
  margin-block: var(--r6);
  opacity: 0;
  transition: opacity 900ms ease;
}
.separateur.vu { opacity: 0.4; }
.separateur-trace { display: block; width: 100%; height: 100%; }
.separateur-trace path {
  fill: none;
  stroke: var(--or-500);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
}
.separateur.vu .separateur-trace path {
  animation: tracerCours 2200ms ease-out forwards;
}

/* ---- 24.11 Bandeau défilant, version lisible sur photo ---- */

.ruban {
  background: linear-gradient(90deg, var(--nuit-900), var(--nuit-800) 22%, var(--nuit-800) 78%, var(--nuit-900));
  position: relative;
  z-index: 1;
  /* Les deux extrémités s'effacent, le défilement paraît sans fin. */
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ruban span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.ruban span::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--or-500);
  flex: none;
}


/* ---- 24.11 bis La note de TikTok suit le thème ----
   Le logo officiel pose une note blanche sans plaque de couleur derrière elle,
   contrairement à YouTube et Telegram. Sur fond clair, blanche, elle disparaît.
   TikTok publie pour ce cas une note noire : c'est celle qu'on utilise. */

.marque-note { fill: #FFFFFF; }
:root[data-theme="clair"] .marque-note { fill: #121212; }
:root[data-theme="clair"] .a-fond .marque-note { fill: #FFFFFF; }

/* ---- 24.12 Ligne de crédits photographiques dans le pied ---- */

.pied-credits {
  margin: var(--r5) 0 0;
  padding-top: var(--r4);
  border-top: 1px solid var(--trait-doux);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--gris-fonce);
}
.pied-credits:empty { display: none; }
.pied-credits a { color: var(--gris); text-decoration: underline; text-underline-offset: 2px; }

/* ---- 24.13 Coupure ----
   Les mêmes règles que la section 23 : sur demande du visiteur ou sur une
   connexion lente, le décor devient une image fixe. */

.mouvement-reduit .ch-b {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.mouvement-reduit .ch-ligne {
  stroke-dashoffset: 0 !important;
  animation: none !important;
}
.mouvement-reduit .ch-balai { display: none; }
.mouvement-reduit .separateur { opacity: 0.4; }
.mouvement-reduit .separateur-trace path { stroke-dashoffset: 0; animation: none !important; }
.mouvement-reduit .fond-photo { transition: none !important; }


/* -----------------------------------------------------------------------------
   25. BLOC DE MARQUE
   -----------------------------------------------------------------------------
   Logo, nom de la plateforme, nom de l'entreprise. Trois informations dans un
   espace de quarante six pixels de haut : il faut une hiérarchie, sans quoi
   elles se gênent.

   Le logo porte un M argenté et une mention blanche, qui disparaissent sur un
   fond pâle. Les deux versions du fichier sont posées ensemble et le thème en
   cache une, ce qui rend la bascule instantanée et évite d'avoir à retoucher le
   pied de page en même temps que la barre de navigation.
   -------------------------------------------------------------------------- */

/* Le choix entre les deux versions du logo se fait désormais en JavaScript,
   dans la fonction logo de rme.js : cacher une image par le style ne l'empêche
   pas d'être téléchargée, et cela doublait le poids du logo sur chaque page. */

/* ---- 25.1 L'écusson ----
   Pas de cadre ni de bordure : une lueur dorée suffit à asseoir le logo et à
   le détacher du fond, sans lui redonner la boîte dont on vient de le sortir. */

/* L'écusson est une plaque, pas un simple espace.
   Détouré sur fond crème, le logo se fondait dans la page : son or est clair et
   sa mention est blanche. Une plaque bleu nuit avec un liseré doré le détache
   dans les deux thèmes, et donne à la marque la présence qu'elle n'avait pas. */
.nav-ecusson {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 56px;
  flex: none;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201, 162, 39, 0.20), transparent 62%),
    linear-gradient(158deg, #17325F 0%, #0B1730 54%, #070E1C 100%);
  border: 1px solid rgba(201, 162, 39, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 6px 18px rgba(7, 14, 28, 0.45);
  transition: border-color var(--t-doux), box-shadow var(--t-doux), transform var(--t-doux);
}

/* Un reflet en diagonale traverse la plaque au survol. */
.nav-ecusson::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -120%;
  width: 60%;
  height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.nav-marque:hover .nav-ecusson,
.admin-marque:hover .nav-ecusson {
  border-color: var(--or-400);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 24px rgba(201, 162, 39, 0.28);
  transform: translateY(-1px);
}
.nav-marque:hover .nav-ecusson::before,
.admin-marque:hover .nav-ecusson::before { animation: refletEcusson 760ms var(--courbe); }
@keyframes refletEcusson {
  from { left: -120%; }
  to   { left: 160%; }
}
.mouvement-reduit .nav-ecusson::before { animation: none !important; }
.nav-marque { isolation: isolate; text-decoration: none; }
.nav-marque:hover .nav-ecusson::before { transform: scale(1.18); }

.nav-logo {
  height: 42px;
  width: auto;
  max-width: 54px;
  object-fit: contain;
  display: block;
  position: relative;
  /* L or du monogramme est sombre a petite taille : on le releve un peu, et on
     lui met une lueur derriere pour qu il se detache de la plaque. */
  filter: saturate(1.18) brightness(1.1) drop-shadow(0 0 7px rgba(201, 162, 39, 0.45));
}
/* Plus de filtre a inverser : la plaque est sombre dans les deux themes. */

/* ---- 25.2 Le nom ----
   Un filet doré sépare le dessin du texte. Le sigle reste crème, le mot qui
   suit passe en or : l'œil lit RME puis ACADEMY, et non une seule masse. */

.nav-nom {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
  padding-left: var(--r3);
  border-left: 1px solid var(--trait);
}
.nav-nom strong {
  display: flex;
  gap: 0.34em;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.nom-sigle { color: var(--creme); }
.nom-or {
  background: linear-gradient(104deg, var(--or-300), var(--or-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .nom-or { color: var(--or-400); background: none; }
}
.nav-nom > span {
  font-size: 0.575rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gris);
}

/* Sur un écran étroit, le nom légal passe à la trappe avant le reste : c'est
   l'information la moins utile des trois à cette taille. */
@media (max-width: 680px) {
  .nav-nom > span { display: none; }
  .nav-nom { border-left: 0; padding-left: 0; }
  .nav-ecusson { width: 54px; height: 48px; border-radius: 12px; }
  .nav-logo { height: 36px; max-width: 46px; }
}
@media (max-width: 430px) {
  .nav-nom { display: none; }
}

/* ---- 25.3 Le logo du pied de page ---- */

.pied-logo { display: flex; }
.pied-logo .nav-logo { height: 96px; max-width: 280px; filter: none; }

/* -----------------------------------------------------------------------------
   26. SCÈNES, RACCORDS ET RELIEF
   -----------------------------------------------------------------------------
   Trois problèmes traités ensemble, parce qu'ils ont la même cause : une page
   faite de blocs posés bout à bout se lit comme une liste, pas comme un
   parcours.

   26.1 à 26.3  les photographies en premier plan, dans le flux
   26.4 à 26.6  les raccords entre sections, dégradés plutôt que tranchés
   26.7         le relief, une perspective légère à l'entrée des grilles
   26.8         les questions fréquentes, qui s'ouvrent au lieu de sauter
   -------------------------------------------------------------------------- */

/* ---- 26.1 La scène ---- */

.scene {
  position: relative;
  margin: 0;
  border-radius: var(--rond-m);
  overflow: hidden;
  isolation: isolate;
  background: var(--nuit-700);
  box-shadow: inset 0 0 0 1px var(--trait-doux);
}
.scene img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* Légèrement désaturée et assombrie, elle s'accorde avec la palette au lieu
     de la contredire. Au survol elle reprend ses couleurs : c'est ce retour
     qui donne l'impression que la page réagit. */
  filter: saturate(0.70) contrast(1.06) brightness(0.84);
  transition: transform 900ms var(--courbe), filter 600ms ease;
}
.scene:hover img,
.carte:hover .scene img,
.carte-cliquable:hover .scene img {
  transform: scale(1.055);
  filter: saturate(1) contrast(1.08) brightness(0.98);
}

.scene-voile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 14, 28, 0.10) 0%, transparent 32%, rgba(7, 14, 28, 0.78) 100%),
    linear-gradient(118deg, rgba(26, 48, 85, 0.46), transparent 56%);
}

/* Un filet doré au pied de l'image, qui la raccorde au texte qui suit. */
.scene::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or-500), transparent);
  opacity: 0.55;
}

.scene figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.85rem 1rem;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--creme);
  text-shadow: 0 1px 8px rgba(7, 14, 28, 0.9);
}

/* ---- 26.2 Les variantes ---- */

/* En tête de carte : l'image mord sur les bords, la carte devient une vignette. */
.carte > .scene--carte {
  margin: calc(var(--r5) * -1) calc(var(--r5) * -1) var(--r5);
  border-radius: var(--rond-m) var(--rond-m) 0 0;
}
.carte > .scene--carte img { aspect-ratio: 16 / 9; }

/* Bande large, pour couper une page sans l'interrompre. */
.scene--bande { border-radius: var(--rond-l); }
.scene--bande img { aspect-ratio: 32 / 9; }
@media (max-width: 720px) { .scene--bande img { aspect-ratio: 16 / 9; } }

/* Colonne verticale, dans une grille de trois. */
.scene--haute img { aspect-ratio: 3 / 4; }

/* ---- 26.3 La galerie ---- */

.galerie {
  display: grid;
  gap: var(--r4);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .galerie { grid-template-columns: repeat(3, 1fr); } }

/* Le rythme vient des hauteurs, pas d'un décalage : trois vignettes de format
   différent, centrées, se lisent mieux que trois rectangles identiques. On
   évite ainsi de poser une transform sur les mêmes éléments que l'animation
   d'apparition, qui se disputeraient la propriété. */
@media (min-width: 760px) {
  .galerie { align-items: center; }
  .galerie > .scene img { aspect-ratio: 4 / 5; }
  .galerie > .scene:nth-child(2) img { aspect-ratio: 4 / 5.9; }
}

/* ---- 26.4 Les raccords entre sections ----
   Une section sur deux reçoit une bande légèrement plus claire, dont les deux
   extrémités s'effacent. Il n'y a donc jamais de trait horizontal net : la
   page passe d'un bloc à l'autre sans marche. */

main > .section { position: relative; isolation: isolate; }

main > .section:not(.a-fond):nth-of-type(even)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      transparent 0%,
      var(--bande-section) 20%,
      var(--bande-section) 80%,
      transparent 100%),
    radial-gradient(60rem 30rem at 82% 8%, rgba(201, 162, 39, 0.07), transparent 66%);
}

/* Un filet court et dégradé sous chaque section, à la place du vide. */
main > .section:not(.a-fond)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(720px, 76%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--trait), transparent);
  pointer-events: none;
}

/* ---- 26.5 Le raccord des bandeaux photographiques ----
   Le bas d'un bandeau se fond déjà dans la page par son voile. Le haut de la
   section suivante reçoit en plus une lueur, pour que la jonction paraisse
   éclairée plutôt que coupée. */

.a-fond + .section::before,
.a-fond + .ruban + .section::before {
  background:
    linear-gradient(180deg, var(--bande-section) 0%, transparent 40%),
    radial-gradient(52rem 22rem at 50% -6%, rgba(201, 162, 39, 0.10), transparent 70%);
}

/* ---- 26.6 Le séparateur tracé, en relief ----
   La ligne seule faisait maigre. On lui ajoute une lueur floue dessous et un
   voile qui s'ouvre, ce qui lui donne une épaisseur sans la surcharger. */

.separateur { position: relative; height: 84px; }
.separateur::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, 70%);
  height: 60px;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.16), transparent 72%);
  filter: blur(12px);
  opacity: 0;
  transition: opacity 1200ms ease 300ms;
}
.separateur.vu::before { opacity: 1; }
.separateur-trace { position: relative; z-index: 1; }

/* ---- 26.7 Le relief à l'entrée ----
   Les cartes d'une grille arrivent très légèrement inclinées vers l'arrière,
   puis se redressent. Six degrés suffisent : au delà, le texte se déforme et
   l'effet devient un gadget. */

.grille { perspective: 1400px; perspective-origin: 50% 12%; }
.grille > .apparait:not(.vu) {
  transform: translate3d(0, 26px, 0) rotateX(6deg);
}
.tarifs { perspective: 1600px; perspective-origin: 50% 8%; }
.tarifs > .apparait:not(.vu) {
  transform: translate3d(0, 30px, 0) rotateX(7deg);
}

/* ---- 26.8 Les questions fréquentes ----
   Le contenu d'un details apparaît d'un coup, ce qui fait sauter la page. On
   le fait descendre, et le marqueur tourne pour dire ce qui vient de se
   passer. */

.faq { display: grid; gap: var(--r3); }

.faq details {
  border-radius: var(--rond-m);
  transition: border-color var(--t-doux), background-color var(--t-doux), transform var(--t-doux);
}
.faq details[open] {
  border-color: var(--trait);
  background: linear-gradient(162deg, rgba(201, 162, 39, 0.07), var(--verre) 56%);
}

.faq summary {
  display: flex;
  align-items: center;
  gap: var(--r3);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--creme);
  padding-right: 2.4rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }

/* Le marqueur : un rond doré qui porte une croix, tournée de quarante cinq
   degrés tant que la réponse est fermée. Elle devient un plus fermé, un
   multiplié ouvert. */
.faq summary::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  border: 1px solid var(--trait);
  background:
    linear-gradient(var(--or-400), var(--or-400)) center / 11px 1.6px no-repeat,
    linear-gradient(var(--or-400), var(--or-400)) center / 1.6px 11px no-repeat;
  transition: transform var(--t-doux), border-color var(--t-doux), background-color var(--t-doux);
}
.faq details[open] summary::after {
  transform: rotate(135deg);
  border-color: var(--or-500);
  background-color: rgba(201, 162, 39, 0.10);
}
.faq summary:hover::after { border-color: var(--or-500); }

.faq details[open] > *:not(summary) {
  animation: faqOuvre 420ms var(--courbe) both;
}
@keyframes faqOuvre {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 26.9 Coupure ---- */

.mouvement-reduit .scene img { transition: none !important; transform: none !important; }
.mouvement-reduit .grille > .apparait:not(.vu) { transform: none !important; }
.mouvement-reduit .tarifs > .apparait:not(.vu) { transform: none !important; }
.mouvement-reduit .separateur::before { opacity: 1; transition: none !important; }
.mouvement-reduit .faq details[open] > *:not(summary) { animation: none !important; }

/* -----------------------------------------------------------------------------
   27. NAVIGATION DU PROGRAMME
   -----------------------------------------------------------------------------
   Trente modules, cent quatre vingt dix huit chapitres et cinq cent quatre
   vingt dix sept leçons ne se parcourent pas dans une liste. La page se lit
   donc à trois niveaux, blocs puis modules puis leçons, avec un fil collé en
   haut pour savoir où l'on est et remonter d'un cran, et un rail de chapitres
   dans la vue d'un module.
   -------------------------------------------------------------------------- */

:root { --h-nav: 69px; }
@media (max-width: 680px) { :root { --h-nav: 60px; } }

.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- 27.1 La barre du programme ----
   Elle s appelait .fil, ce qui écrasait le fil d Ariane déjà défini en section
   22 et utilisé sur treize pages : leurs miettes de pain se retrouvaient collées
   en haut de l écran, avec un fond et une bordure. D où ce nom, plus long mais
   qui n appartient qu à elle. */

.barre-prog {
  position: sticky;
  top: var(--h-nav);
  z-index: 60;
  background: color-mix(in srgb, var(--nuit-900) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block: 1px solid var(--trait-doux);
}
/* Repli pour les navigateurs sans color-mix : un fond opaque vaut mieux qu'un
   fil transparent sur lequel le texte de la page défilerait. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .barre-prog { background: var(--nuit-900); }
}

.barre-prog-inner {
  display: flex;
  align-items: center;
  gap: var(--r4);
  flex-wrap: wrap;
  padding-block: var(--r3);
}

.barre-prog-miettes {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex: 1 1 18rem;
  min-width: 0;
  font-size: 0.82rem;
}
.barre-prog-miettes a,
.barre-prog-miettes span[aria-current] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22rem;
}
.barre-prog-miettes a { color: var(--gris); text-decoration: none; transition: color var(--t-rapide); }
.barre-prog-miettes a:hover { color: var(--or-400); }
.barre-prog-miettes span[aria-current] { color: var(--creme); font-weight: 700; }
.barre-prog-miettes svg {
  width: 15px; height: 15px;
  flex: none;
  color: var(--gris-fonce);
  transform: rotate(-90deg);
}

.barre-prog-outils { display: flex; align-items: center; gap: var(--r3); }

.barre-prog-recherche {
  display: flex;
  align-items: center;
  gap: var(--r2);
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--trait-doux);
  border-radius: 99px;
  background: var(--verre);
  transition: border-color var(--t-doux), background-color var(--t-doux);
}
.barre-prog-recherche:focus-within { border-color: var(--or-500); background: var(--verre-fort); }
.barre-prog-recherche svg { width: 16px; height: 16px; color: var(--gris); flex: none; }
.barre-prog-recherche input {
  border: 0;
  background: none;
  color: var(--creme);
  font: inherit;
  font-size: 0.84rem;
  width: 15rem;
  max-width: 44vw;
  outline: none;
}
.barre-prog-recherche input::placeholder { color: var(--gris-fonce); }

/* ---- 27.2 L'en tête d'une vue ---- */

.vue-entete {
  display: flex;
  align-items: flex-start;
  gap: var(--r5);
}
@media (max-width: 640px) { .vue-entete { flex-direction: column; gap: var(--r4); } }

.bloc-lettre {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--rond-s);
  border: 1px solid var(--trait);
  background: linear-gradient(150deg, rgba(201, 162, 39, 0.16), transparent 70%);
  font-family: var(--police-chiffres);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--or-400);
}
.bloc-lettre--grand { width: 68px; height: 68px; font-size: 1.9rem; border-radius: var(--rond-m); }
.pastille--grand { width: 68px; height: 68px; font-size: 1.5rem; border-radius: var(--rond-m); flex: none; }

/* ---- 27.3 La carte d'un bloc ---- */

.bloc-carte {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
}
.bloc-carte .bloc-lettre { margin-bottom: var(--r3); }
.bloc-carte h3 { margin-bottom: var(--r2); }
.bloc-carte .bloc-aller {
  display: inline-flex;
  align-items: center;
  gap: var(--r2);
  margin-top: auto;
  padding-top: var(--r4);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--or-400);
}
.bloc-carte .bloc-aller svg {
  width: 16px; height: 16px;
  transform: rotate(-90deg);
  transition: transform var(--t-doux);
}
.bloc-carte:hover .bloc-aller svg { transform: rotate(-90deg) translateY(-4px); }

/* ---- 27.4 La liste des modules d'un bloc ---- */

.liste-modules { display: grid; gap: var(--r3); }

.module-carte {
  display: flex;
  align-items: flex-start;
  gap: var(--r4);
  text-decoration: none;
  padding: var(--r4) var(--r5);
}
.module-carte h3 { font-size: 1.08rem; margin-bottom: var(--r2); }
.module-carte .module-carte-corps { flex: 1; min-width: 0; }
.module-carte .module-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r4);
  font-size: 0.72rem;
  color: var(--gris);
}
.module-carte .module-fleche {
  align-self: center;
  flex: none;
  color: var(--gris);
  transition: transform var(--t-doux), color var(--t-doux);
}
.module-carte .module-fleche svg { width: 20px; height: 20px; transform: rotate(-90deg); }
.module-carte:hover .module-fleche { color: var(--or-400); transform: translateX(4px); }

/* ---- 27.5 La vue d'un module ---- */

.module-vue { display: grid; gap: var(--r6); align-items: start; }
@media (min-width: 1020px) { .module-vue { grid-template-columns: 264px 1fr; } }

.rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--r4);
  border: 1px solid var(--trait-doux);
  border-radius: var(--rond-m);
  background: var(--verre);
}
@media (min-width: 1020px) {
  .rail {
    position: sticky;
    top: calc(var(--h-nav) + 58px);
    max-height: calc(100vh - var(--h-nav) - 88px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.rail-titre-liste {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-500);
  margin-bottom: var(--r3);
}

.rail-lien {
  display: flex;
  align-items: baseline;
  gap: var(--r3);
  padding: 0.5rem 0.6rem;
  border-radius: var(--rond-s);
  text-decoration: none;
  color: var(--creme-doux);
  font-size: 0.83rem;
  line-height: 1.35;
  border-left: 2px solid transparent;
  transition: background-color var(--t-rapide), color var(--t-rapide), border-color var(--t-rapide);
}
.rail-lien:hover { background: var(--verre-fort); color: var(--creme); }
.rail-lien.actif {
  background: rgba(201, 162, 39, 0.10);
  border-left-color: var(--or-500);
  color: var(--creme);
}
.rail-num {
  font-family: var(--police-chiffres);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--or-500);
  flex: none;
}
.rail-titre { flex: 1; min-width: 0; }
.rail-nb { font-size: 0.68rem; color: var(--gris-fonce); flex: none; }

/* ---- 27.6 Un chapitre et ses leçons ---- */

.module-contenu { display: grid; gap: var(--r5); min-width: 0; }

.chapitre-bloc {
  border: 1px solid var(--trait-doux);
  border-radius: var(--rond-m);
  background: var(--verre);
  padding: var(--r5);
  /* La cible d'une ancre doit s'arrêter sous la barre de navigation et le fil,
     sinon le titre du chapitre se retrouve caché dessous. */
  scroll-margin-top: calc(var(--h-nav) + 72px);
}
.chapitre-entete {
  display: flex;
  align-items: center;
  gap: var(--r3);
  flex-wrap: wrap;
  padding-bottom: var(--r4);
  margin-bottom: var(--r3);
  border-bottom: 1px solid var(--trait-doux);
}
.chapitre-entete h3 { flex: 1; min-width: 12rem; font-size: 1.05rem; }
.chapitre-entete .num {
  font-family: var(--police-chiffres);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--or-500);
  border: 1px solid var(--trait);
  border-radius: 99px;
  padding: 0.15rem 0.5rem;
}

.lecons-liste { list-style: none; margin: 0; padding: 0; }

.lecon-ligne {
  display: flex;
  align-items: center;
  gap: var(--r3);
  padding: 0.62rem 0.5rem;
  border-radius: var(--rond-s);
  text-decoration: none;
  color: var(--creme-doux);
  border-bottom: 1px solid var(--trait-doux);
  transition: background-color var(--t-rapide), color var(--t-rapide), padding-left var(--t-rapide);
}
.lecons-liste li:last-child .lecon-ligne { border-bottom: 0; }
a.lecon-ligne:hover { background: var(--verre-fort); color: var(--creme); padding-left: 0.85rem; }

.lecon-num {
  font-family: var(--police-chiffres);
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--or-500);
  width: 1.6rem;
  flex: none;
}
.lecon-titre { flex: 1; min-width: 0; font-size: 0.9rem; }
.lecon-duree { font-size: 0.68rem; color: var(--gris); flex: none; }
.lecon-fleche { color: var(--gris-fonce); flex: none; display: flex; }
.lecon-fleche svg { width: 16px; height: 16px; transform: rotate(-90deg); }
a.lecon-ligne:hover .lecon-fleche { color: var(--or-400); }

.lecon-ligne--muette { cursor: default; opacity: 0.72; }

@media (max-width: 620px) {
  .lecon-duree { display: none; }
}

/* ---- 27.7 Précédent et suivant ---- */

.sauts {
  display: grid;
  gap: var(--r3);
  grid-template-columns: 1fr;
  margin-top: var(--r6);
}
@media (min-width: 720px) { .sauts { grid-template-columns: 1fr 1fr; } }

.saut-module {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--r4) var(--r5);
  border: 1px solid var(--trait-doux);
  border-radius: var(--rond-m);
  background: var(--verre);
  text-decoration: none;
  transition: border-color var(--t-doux), transform var(--t-doux), background-color var(--t-doux);
}
.saut-module:hover { border-color: var(--or-600); background: var(--verre-fort); }
.saut-module--avant:hover { transform: translateX(-4px); }
.saut-module--apres:hover { transform: translateX(4px); }
.saut-module--apres { text-align: right; }
.saut-sens {
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-500);
}
.saut-titre { color: var(--creme); font-weight: 700; font-size: 0.92rem; }

/* ---- 27.8 Les résultats de recherche ---- */

.resultats { display: grid; gap: 2px; }

.resultat {
  display: flex;
  align-items: center;
  gap: var(--r3);
  flex-wrap: wrap;
  padding: 0.7rem 0.85rem;
  border-radius: var(--rond-s);
  border-bottom: 1px solid var(--trait-doux);
  text-decoration: none;
  color: var(--creme-doux);
  transition: background-color var(--t-rapide), padding-left var(--t-rapide);
}
.resultat:hover { background: var(--verre-fort); padding-left: 1.2rem; }
.resultat-titre { flex: 1; min-width: 10rem; color: var(--creme); font-size: 0.92rem; }
.resultat-chemin { font-size: 0.7rem; color: var(--gris); }

/* -----------------------------------------------------------------------------
   28. TARIFS, SECONDE PASSE
   -----------------------------------------------------------------------------
   Quatre cartes alignées au cordeau se lisent comme un tableau administratif.
   Ce qu'il leur manque n'est pas de la décoration : c'est une hiérarchie. Le
   prix doit se voir de loin, l'offre recommandée doit se détacher sans crier,
   et la carte doit réagir quand on l'approche.
   -------------------------------------------------------------------------- */

.tarif {
  overflow: hidden;
  isolation: isolate;
  /* Le reflet qui suit le pointeur est posé par rme.js, comme sur les cartes.
     Il a besoin d'un contexte d'empilement pour rester derrière le texte. */
}

/* Un filet dégradé en haut de chaque carte, plus franc sur l'offre vedette. */
.tarif::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--trait), transparent);
  transition: background var(--t-doux);
}
.tarif:hover::before {
  background: linear-gradient(90deg, transparent, var(--or-500), transparent);
}
.tarif-vedette::before {
  height: 3px;
  background: linear-gradient(90deg, var(--or-600), var(--or-300), var(--or-600));
}

/* L'offre vedette respire un peu plus large que les autres et porte une aura
   qui bat lentement. Une seule carte l'a : si toutes brillaient, aucune ne
   ressortirait. */
@media (min-width: 1100px) {
  .tarif-vedette { transform: scale(1.035); z-index: 1; }
  .tarif-vedette:hover { transform: scale(1.035) translateY(-4px); }
}
.tarif-vedette::after {
  content: '';
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.16), transparent 72%);
  animation: auraTarif 6.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes auraTarif {
  from { opacity: 0.45; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1.06); }
}

/* Le prix, en or et en grand. C'est l'information que le visiteur cherche. */
.tarif-montant {
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  letter-spacing: -0.02em;
  background: linear-gradient(168deg, var(--creme) 6%, var(--or-400) 94%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .tarif-montant { color: var(--or-300); background: none; }
}
.tarif-vedette .tarif-montant {
  background: linear-gradient(168deg, var(--or-300) 4%, var(--or-500) 96%);
  -webkit-background-clip: text;
  background-clip: text;
}

.tarif-nom {
  display: inline-flex;
  align-items: center;
  gap: var(--r2);
}
.tarif-nom::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--or-500);
}

/* Le prix barré ne doit pas dominer le prix réel. */
.tarif-barre { opacity: 0.7; }

/* La liste gagne un filet de séparation très léger : quatorze lignes de suite
   sans repère se lisent mal. */
.tarif-liste li { padding-bottom: var(--r3); border-bottom: 1px solid var(--trait-doux); }
.tarif-liste li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Le bouton de l'offre vedette pulse deux fois à l'arrivée, puis se tient
   tranquille. C'est un appel, pas un clignotant. */
.tarif-vedette .btn-or { animation: pulseUne 1.9s var(--courbe) 1200ms 2; }

/* ---- 28.1 Le tableau comparatif ---- */

.tableau-defilant { border-radius: var(--rond-m); }

/* Ces trois règles ne valent QUE pour le tableau comparatif des offres.
   Écrites sur table.rme, elles s'appliquaient à tous les tableaux du site : la
   ligne d'en tête se décollait et venait flotter par dessus la première ligne
   de contenu, et la troisième colonne de n'importe quel tableau se retrouvait
   teintée d'or. Le tableau du challenge mensuel, sur la page Mentorat, en était
   rendu illisible. */

/* L'en tête a été collant, il ne l'est plus.

   La classe tableau-defilant porte overflow-x: auto, ce qui fait de la boîte
   une zone de défilement dans les deux axes. Un en tête collant s'y accroche
   alors au haut de la BOÎTE et non à celui de la fenêtre : en descendant la
   page, il venait se poser par dessus la première ligne du tableau et la
   masquait. C'est exactement ce qu'on voyait, la ligne « Modules 1 à 5 »
   coupée en deux.

   Pour quatorze lignes, un en tête collant n'apportait de toute façon presque
   rien. Il reste simplement bien marqué. */
#comparatif thead th {
  background: var(--nuit-600);
  border-bottom: 2px solid var(--trait);
}

/* La colonne de l'offre complète est celle qu'on compare aux autres : on la
   teinte pour qu'elle serve de repère dans un tableau de quatorze lignes. */
#comparatif tbody td:nth-child(3),
#comparatif thead th:nth-child(3) {
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.10), rgba(201, 162, 39, 0.04));
}

/* Le survol de ligne, lui, va bien à tous les tableaux. */
table.rme tbody tr { transition: background-color var(--t-rapide); }
table.rme tbody tr:hover { background: var(--verre-fort); }

/* ---- 28.2 Les numéros d'étape du paiement ---- */

.etape-num {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: var(--r3);
  border-radius: 50%;
  border: 1px solid var(--trait);
  background: linear-gradient(150deg, rgba(201, 162, 39, 0.16), transparent 72%);
  font-family: var(--police-chiffres);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--or-400);
}

/* ---- 28.3 Coupure ---- */

.mouvement-reduit .tarif-vedette::after { animation: none !important; opacity: 0.7; }
.mouvement-reduit .tarif-vedette .btn-or { animation: none !important; }

/* -----------------------------------------------------------------------------
   29. ESPACE ADMINISTRATEUR
   -----------------------------------------------------------------------------
   Un tableau de bord n'est pas une page de site. Il n'a ni héros, ni pied de
   page, ni bandeau de risque : il a une colonne de navigation qui ne bouge
   jamais, une barre de titre, et une zone qui change. On sait toujours où on
   est et on atteint n'importe quelle section en un clic.
   -------------------------------------------------------------------------- */

.admin-corps { background: var(--nuit-900); }

.admin {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}
@media (min-width: 1000px) {
  .admin { grid-template-columns: 268px 1fr; }
}

/* ---- 29.1 Le bandeau de démonstration ----
   Rouge, en haut de tout, et il ne se ferme pas. Un mode dégradé silencieux
   finit toujours par partir en production sans que personne s'en aperçoive. */

.bandeau-demo {
  position: sticky;
  top: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  gap: var(--r3);
  flex-wrap: wrap;
  padding: 0.6rem var(--r5);
  background: linear-gradient(100deg, #7F1D1D, #B91C1C 60%, #7F1D1D);
  color: #FFF5F5;
  font-size: 0.82rem;
  line-height: 1.45;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
.bandeau-demo svg { width: 18px; height: 18px; flex: none; }
.bandeau-demo span { flex: 1; min-width: 14rem; }
.bandeau-demo strong { color: #FFFFFF; }
.bandeau-demo code {
  background: rgba(0, 0, 0, 0.28);
  border-radius: var(--rond-s);
  padding: 0.16rem 0.5rem;
  font-size: 0.74rem;
  color: #FFE4E4;
}

/* ---- 29.2 La colonne de gauche ---- */

.admin-rail {
  display: flex;
  flex-direction: column;
  gap: var(--r5);
  padding: var(--r5) var(--r4);
  background: var(--nuit-800);
  border-right: 1px solid var(--trait-doux);
}
@media (min-width: 1000px) {
  .admin-rail {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
  .admin-demo .admin-rail { height: calc(100vh - 44px); top: 44px; }
}

.admin-marque {
  display: flex;
  align-items: center;
  gap: var(--r3);
  text-decoration: none;
  padding-bottom: var(--r4);
  border-bottom: 1px solid var(--trait-doux);
}

.admin-nav { display: flex; flex-direction: column; gap: 3px; }

.admin-lien {
  display: flex;
  align-items: center;
  gap: var(--r3);
  width: 100%;
  padding: 0.62rem 0.7rem;
  border: 0;
  border-radius: var(--rond-s);
  background: none;
  color: var(--creme-doux);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background-color var(--t-rapide), color var(--t-rapide);
}
.admin-lien:hover { background: var(--verre-fort); color: var(--creme); }

.admin-lien.actif {
  background: linear-gradient(100deg, rgba(201, 162, 39, 0.18), rgba(201, 162, 39, 0.04));
  color: var(--creme);
  font-weight: 700;
}
/* Le repère de la section ouverte : un trait doré à gauche, qui glisse. */
.admin-lien.actif::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--or-300), var(--or-600));
}

.admin-lien-icone { display: flex; flex: none; color: var(--or-500); }
.admin-lien-icone svg { width: 18px; height: 18px; }
.admin-lien-texte { flex: 1; min-width: 0; }

.admin-pastille {
  flex: none;
  min-width: 20px;
  padding: 0.1rem 0.4rem;
  border-radius: 99px;
  background: var(--or-500);
  color: var(--sur-or);
  font-family: var(--police-chiffres);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
}

.admin-rail-bas {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--r4);
  border-top: 1px solid var(--trait-doux);
}
.admin-lien--secondaire { font-size: 0.82rem; color: var(--gris); }
.admin-lien--secondaire .admin-lien-icone { color: var(--gris-fonce); }

.admin-etat {
  display: flex;
  align-items: center;
  gap: var(--r2);
  margin-top: var(--r3);
  padding: 0.5rem 0.7rem;
  border-radius: var(--rond-s);
  background: var(--verre);
  font-size: 0.72rem;
  color: var(--gris);
}
.admin-point {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--gris-fonce);
}
.admin-point--vif { background: var(--vert-clair); box-shadow: 0 0 0 0 rgba(52, 208, 122, 0.6); animation: pouls 2.4s ease-out infinite; }
.admin-point--demo { background: #F05252; box-shadow: 0 0 0 0 rgba(240, 82, 82, 0.6); animation: pouls 2.4s ease-out infinite; }
@keyframes pouls {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 7px rgba(0, 0, 0, 0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); opacity: 1; }
}

/* ---- 29.3 La zone de droite ---- */

.admin-zone { min-width: 0; display: flex; flex-direction: column; }

.admin-barre {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--r4);
  flex-wrap: wrap;
  padding: var(--r5) var(--r6) var(--r4);
  border-bottom: 1px solid var(--trait-doux);
  background: linear-gradient(180deg, var(--nuit-800), transparent);
}
.admin-titre { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0; }
.admin-barre-actions { display: flex; gap: var(--r3); }
.admin-barre-actions svg { width: 16px; height: 16px; }

.admin-panneau { padding: var(--r6); flex: 1; min-width: 0; }
@media (max-width: 720px) {
  .admin-barre { padding: var(--r5) var(--r4) var(--r4); }
  .admin-panneau { padding: var(--r5) var(--r4); }
}

/* ---- 29.4 Les cartes de chiffres ---- */

.grille-kpi {
  display: grid;
  gap: var(--r4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.kpi { display: flex; flex-direction: column; gap: var(--r2); padding: var(--r4) var(--r5); }
.kpi-haut { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); }
.kpi-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}
.kpi-valeur { font-size: clamp(1.6rem, 3vw, 2.15rem); }
.kpi-sous { font-size: 0.74rem; color: var(--gris); }
.kpi-trace { margin-top: auto; padding-top: var(--r3); }

/* ---- 29.5 Les tracés ---- */

.trace { display: block; width: 100%; height: 100%; overflow: visible; }

.cadre-trace { height: 240px; }
.cadre-trace--court { height: 200px; }

.trace-ligne {
  fill: none;
  stroke: var(--or-400);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: tracerCours 1800ms ease-out 200ms forwards;
}
.trace-aire { opacity: 0; animation: apparaitreAire 900ms ease 900ms forwards; }
@keyframes apparaitreAire { to { opacity: 1; } }

.trace-point {
  fill: var(--or-300);
  opacity: 0;
  animation: apparaitrePoint 320ms ease forwards;
  animation-delay: calc(var(--i) * 34ms + 700ms);
}
@keyframes apparaitrePoint { to { opacity: 1; } }
.trace-courbe:hover .trace-point { fill: var(--creme); }

.trace-barre {
  fill: var(--nuit-500);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  animation: pousserBarre 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 48ms + 120ms);
  transition: fill var(--t-rapide);
}
.trace-barre--vive { fill: var(--or-500); }
.trace-barres:hover .trace-barre { fill: var(--nuit-500); }
.trace-barre:hover { fill: var(--or-400) !important; }
@keyframes pousserBarre { to { transform: scaleY(1); } }

.trace-mini { height: 34px; }
.trace-mini path { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.trace-monte path, .trace-monte circle { stroke: var(--vert-clair); fill: none; }
.trace-monte circle { fill: var(--vert-clair); stroke: none; }
.trace-baisse path { stroke: var(--rouge-clair); }
.trace-baisse circle { fill: var(--rouge-clair); }

/* ---- 29.6 Grille à deux colonnes ---- */

.grille-admin { display: grid; gap: var(--r4); }
@media (min-width: 1180px) { .grille-admin { grid-template-columns: 1fr 1fr; } }

.liste-admin { display: grid; gap: var(--r4); }

/* ---- 29.7 Les jauges d'avancement ---- */

.jauge-ligne {
  display: grid;
  grid-template-columns: 11rem 1fr 3rem;
  align-items: center;
  gap: var(--r3);
  padding: 0.42rem 0;
}
@media (max-width: 620px) { .jauge-ligne { grid-template-columns: 7rem 1fr 2.6rem; } }

.jauge-nom { font-size: 0.82rem; color: var(--creme-doux); display: flex; gap: var(--r2); }
.jauge-nom strong {
  font-family: var(--police-chiffres);
  color: var(--or-500);
  width: 1rem;
  flex: none;
}
.jauge-piste {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: var(--verre-fort);
  overflow: hidden;
}
.jauge-piste--table { width: 90px; margin-bottom: 3px; }
.jauge-remplie {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--or-600), var(--or-300));
}
.jauge-valeur {
  font-family: var(--police-chiffres);
  font-size: 0.78rem;
  color: var(--creme);
  text-align: right;
}

/* ---- 29.8 Le flux d'activité ---- */

.flux { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.flux-ligne {
  display: flex;
  align-items: flex-start;
  gap: var(--r3);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--trait-doux);
}
.flux-ligne:last-child { border-bottom: 0; }

.flux-icone {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--rond-s);
  background: var(--verre-fort);
  color: var(--or-400);
}
.flux-icone svg { width: 16px; height: 16px; }
.flux-paiement { color: var(--vert-clair); }
.flux-examen { color: var(--bleu-info); }
.flux-fin_parcours { color: var(--or-300); }

.flux-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.flux-corps strong { color: var(--creme); font-size: 0.88rem; }
.flux-texte { font-size: 0.78rem; color: var(--gris); }
.flux-date { font-size: 0.7rem; color: var(--gris-fonce); white-space: nowrap; flex: none; }

/* ---- 29.9 Fiches, avatars, montants ---- */

.avatar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--nuit-500), var(--nuit-700));
  border: 1px solid var(--trait);
  color: var(--or-400);
  font-size: 0.82rem;
  font-weight: 800;
}
.avatar--petit { width: 32px; height: 32px; font-size: 0.72rem; }

.montant {
  font-family: var(--police-chiffres);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--or-300);
  white-space: nowrap;
}

.fiche { display: grid; gap: 1px; background: var(--trait-doux); border-radius: var(--rond-s); overflow: hidden; }
.fiche-ligne {
  display: flex;
  justify-content: space-between;
  gap: var(--r4);
  padding: 0.52rem 0.75rem;
  background: var(--nuit-700);
  font-size: 0.82rem;
}
.fiche-ligne > span:first-child { color: var(--gris); }
.fiche-ligne > span:last-child { color: var(--creme); text-align: right; word-break: break-word; }

.mini-chiffre { text-align: center; }
.mini-chiffre span {
  display: block;
  font-family: var(--police-chiffres);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--or-400);
}
.mini-chiffre small { font-size: 0.68rem; color: var(--gris); }

.est-lu { opacity: 0.66; }

/* ---- 29.10 Les copies d'examen ---- */

.faq-copie summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--or-400);
  font-size: 0.86rem;
}
.faq-copie summary::-webkit-details-marker { display: none; }
.faq-copie summary::before { content: '+ '; font-family: var(--police-chiffres); }
.faq-copie[open] summary::before { content: '− '; }

.copie {
  padding: var(--r4);
  margin-bottom: var(--r3);
  border-radius: var(--rond-s);
  border-left: 2px solid var(--trait-doux);
  background: var(--verre);
}
.copie--juste { border-left-color: var(--vert); }

/* ---- 29.11 Le tableau des membres ---- */

.table-membres td { vertical-align: middle; }

/* ---- 29.12 Page de blocage ---- */

.admin-blocage {
  max-width: 44rem;
  margin: var(--r8) auto;
  padding: var(--r6);
  border: 1px solid var(--trait-doux);
  border-radius: var(--rond-l);
  background: var(--verre);
}
.admin-blocage code {
  display: inline-block;
  background: var(--nuit-900);
  border-radius: var(--rond-s);
  padding: 0.14rem 0.42rem;
  font-size: 0.82rem;
  color: var(--or-300);
}

/* ---- 29.13 Coupure ---- */

.mouvement-reduit .trace-ligne { stroke-dashoffset: 0 !important; animation: none !important; }
.mouvement-reduit .trace-aire { opacity: 1; animation: none !important; }
.mouvement-reduit .trace-point { opacity: 1; animation: none !important; }
.mouvement-reduit .trace-barre { transform: none !important; animation: none !important; }
.mouvement-reduit .admin-point { animation: none !important; }


/* -----------------------------------------------------------------------------
   30. LA CONSOLE VIVANTE
   -----------------------------------------------------------------------------
   Un cadre qui imite une fenêtre de plateforme, avec sa barre de titre et son
   voyant. Le graphique dedans ne s arrête jamais tant qu il est à l écran.
   -------------------------------------------------------------------------- */

.console {
  border: 1px solid var(--trait);
  border-radius: var(--rond-l);
  overflow: hidden;
  background: linear-gradient(170deg, var(--nuit-700), var(--nuit-900));
  box-shadow: var(--ombre-m);
}

.console-barre {
  display: flex;
  align-items: center;
  gap: var(--r3);
  flex-wrap: wrap;
  padding: 0.62rem var(--r5);
  border-bottom: 1px solid var(--trait-doux);
  background: var(--nuit-800);
  font-size: 0.78rem;
  color: var(--gris);
}
.console-barre strong { color: var(--creme); }
.console-etiquette {
  margin-left: auto;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-fonce);
}
.console-point {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--vert-clair);
  animation: pouls 2.4s ease-out infinite;
}

.console-corps { display: grid; }
@media (min-width: 900px) { .console-corps { grid-template-columns: 1.6fr 1fr; } }

.console-graphique {
  min-height: 260px;
  padding: var(--r4);
  background:
    linear-gradient(to top, var(--trait-doux) 1px, transparent 1px) 0 0 / 100% 3rem,
    linear-gradient(to right, var(--trait-doux) 1px, transparent 1px) 0 0 / 4rem 100%;
}
.console-graphique .chandeliers { height: 100%; min-height: 230px; }

.console-cote {
  padding: var(--r5);
  border-top: 1px solid var(--trait-doux);
}
@media (min-width: 900px) {
  .console-cote { border-top: 0; border-left: 1px solid var(--trait-doux); }
}

/* Les bougies qui arrivent par la droite entrent en fondu, sinon elles
   apparaissent d un coup au bord et l oeil s y accroche. */
.chandeliers-vivants .ch-b:last-child {
  animation: bougieEntre 520ms ease forwards;
  animation-delay: 0ms;
}


/* -----------------------------------------------------------------------------
   31. L ETAT DU COMPTE DANS LA BARRE
   -----------------------------------------------------------------------------
   Connexion et Commencer s adressent a quelqu un qui n a pas de compte. Une
   fois entre, il lui faut sa progression et une sortie.
   -------------------------------------------------------------------------- */

.nav-visiteur, .nav-membre { display: flex; align-items: center; gap: var(--r3); }
.nav-visiteur[hidden], .nav-membre[hidden] { display: none; }

.nav-compte { position: relative; }

.nav-compte-bouton {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid var(--trait);
  border-radius: 50%;
  background: var(--verre);
  cursor: pointer;
  transition: border-color var(--t-doux), background-color var(--t-doux);
}
.nav-compte-bouton:hover { border-color: var(--or-500); background: var(--verre-fort); }

.nav-compte-pastille {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--or-400);
  line-height: 1;
}

.nav-compte-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 40;
  min-width: 13rem;
  display: flex;
  flex-direction: column;
  padding: var(--r3);
  border: 1px solid var(--trait-doux);
  border-radius: var(--rond-m);
  background: var(--nuit-700);
  box-shadow: var(--ombre-m);
  animation: menuCompte 220ms var(--courbe);
}
.nav-compte-menu[hidden] { display: none; }
@keyframes menuCompte {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.nav-compte-nom {
  padding: 0.3rem 0.6rem var(--r3);
  margin-bottom: var(--r2);
  border-bottom: 1px solid var(--trait-doux);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-500);
}

.nav-compte-menu a,
.nav-compte-menu button {
  display: block;
  width: 100%;
  padding: 0.46rem 0.6rem;
  border: 0;
  border-radius: var(--rond-s);
  background: none;
  color: var(--creme-doux);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-rapide), color var(--t-rapide);
}
.nav-compte-menu a:hover,
.nav-compte-menu button:hover { background: var(--verre-fort); color: var(--creme); }
.nav-compte-menu .nav-deconnexion { color: var(--rouge-clair); margin-top: var(--r2); border-top: 1px solid var(--trait-doux); border-radius: 0; }

.nav-membre-mobile { display: flex; flex-direction: column; }
.nav-membre-mobile[hidden] { display: none; }
.nav-membre-mobile button {
  border: 0; background: none; color: var(--rouge-clair);
  font: inherit; text-align: left; cursor: pointer; padding: var(--r3) 0;
}

@media (max-width: 900px) {
  .nav-membre .btn-contour { display: none; }
}


/* -----------------------------------------------------------------------------
   32. EXERCICES PRATIQUES
   -----------------------------------------------------------------------------
   Le bloc où l apprenant clique au lieu de lire. Il doit se distinguer du texte
   autour sans crier : un cadre, un graphique, trois boutons, un retour.
   -------------------------------------------------------------------------- */

.exercice {
  border: 1px solid var(--trait);
  border-radius: var(--rond-m);
  background: linear-gradient(168deg, rgba(201, 162, 39, 0.05), var(--verre) 52%);
  padding: var(--r5);
}

.ex-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r3);
  flex-wrap: wrap;
  margin-bottom: var(--r3);
}
.ex-entete .surtitre { margin-bottom: 0; }

.ex-question {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--creme);
  margin-bottom: var(--r4);
}

.ex-cadre {
  height: 320px;
  border-radius: var(--rond-s);
  border: 1px solid var(--trait-doux);
  background:
    linear-gradient(to top, var(--trait-doux) 1px, transparent 1px) 0 0 / 100% 3rem,
    linear-gradient(to right, var(--trait-doux) 1px, transparent 1px) 0 0 / 4rem 100%,
    var(--nuit-900);
  overflow: hidden;
  margin-bottom: var(--r4);
}
@media (max-width: 620px) { .ex-cadre { height: 240px; } }

.ex-graphique { display: block; width: 100%; height: 100%; }

.ex-b line { stroke-width: 1; }
.ex-h rect { fill: var(--vert-clair); }
.ex-h line { stroke: var(--vert-clair); }
.ex-d rect { fill: var(--rouge-clair); }
.ex-d line { stroke: var(--rouge-clair); }

/* La suite dévoilée est plus pâle : elle n était pas à l écran au moment du
   choix, et l oeil doit le voir immédiatement. */
.ex-futur { opacity: 0.42; }
.ex-futur rect, .ex-futur line { filter: saturate(0.5); }

.ex-zone { fill: rgba(201, 162, 39, 0.10); }

.ex-choix { display: flex; gap: var(--r3); flex-wrap: wrap; }
.ex-choix .btn { flex: 1; min-width: 8.5rem; justify-content: center; }

.ex-achat {
  background: rgba(22, 163, 74, 0.16);
  border: 1px solid rgba(52, 208, 122, 0.5);
  color: var(--vert-clair);
}
.ex-vente {
  background: rgba(220, 38, 38, 0.16);
  border: 1px solid rgba(240, 82, 82, 0.5);
  color: var(--rouge-clair);
}
.ex-dehors {
  background: var(--verre);
  border: 1px solid var(--trait-doux);
  color: var(--creme-doux);
}
.ex-choix .btn:hover:not(:disabled) { transform: translateY(-2px); }
.ex-choix .btn:disabled { opacity: 0.55; cursor: default; }

.ex-bon {
  outline: 2px solid var(--vert-clair);
  outline-offset: 2px;
  opacity: 1 !important;
}
.ex-mauvais {
  outline: 2px solid var(--rouge-clair);
  outline-offset: 2px;
  opacity: 1 !important;
}

.ex-aide { font-size: 0.72rem; color: var(--gris-fonce); margin: var(--r3) 0 0; }

.ex-retour {
  margin-top: var(--r4);
  padding: var(--r4);
  border-radius: var(--rond-s);
  border-left: 3px solid var(--trait);
  background: var(--verre);
  font-size: 0.9rem;
  animation: faqOuvre 380ms var(--courbe) both;
}
.ex-retour--juste { border-left-color: var(--vert-clair); }
.ex-retour--faux { border-left-color: var(--rouge-clair); }
.ex-retour strong { color: var(--creme); }

.ex-compteur { font-size: 0.82rem; color: var(--gris); }

/* ---- 32.1 Le calculateur compact ---- */

.calc-compact {
  border: 1px solid var(--trait-doux);
  border-radius: var(--rond-m);
  background: var(--verre);
  padding: var(--r5);
}

.calc-champs {
  display: grid;
  gap: var(--r3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  margin-bottom: var(--r4);
}
.calc-champs .champ { margin: 0; }
.calc-champs .champ span {
  display: block;
  font-size: 0.72rem;
  color: var(--gris);
  margin-bottom: var(--r2);
}

.calc-resultat {
  display: grid;
  gap: var(--r4);
  grid-template-columns: 1fr 1fr;
  padding: var(--r4);
  border-radius: var(--rond-s);
  background: var(--nuit-900);
  text-align: center;
}
.calc-resultat .stat-valeur { font-size: 1.8rem; }

.calc-formule {
  font-family: var(--police-chiffres);
  font-size: 0.74rem;
  color: var(--gris-fonce);
  text-align: center;
  margin: var(--r3) 0 0;
}

/* ---- 32.2 Coupure ---- */

.mouvement-reduit .ex-retour { animation: none !important; }


/* -----------------------------------------------------------------------------
   33. TARIFS, ALIGNEMENT DES QUATRE CARTES
   -----------------------------------------------------------------------------
   Le défaut était simple à voir et pénible à corriger : chaque carte se réglait
   à sa propre hauteur. L offre gratuite n a ni prix barré ni équivalent en
   dollars, son en tête était donc plus court, et à partir de là plus rien ne
   s alignait. Les listes commençaient à quatre hauteurs différentes et les
   quatre boutons finissaient en escalier.

   La grille imbriquée règle cela : la rangée de cartes définit trois lignes,
   en tête, liste, bouton, et chaque carte reprend ces lignes au lieu d en créer
   de nouvelles. Les trois blocs s alignent donc d une carte à l autre.

   Repli pour les navigateurs sans grille imbriquée : des hauteurs minimales,
   qui donnent un alignement approché mais correct.
   -------------------------------------------------------------------------- */

@media (min-width: 760px) {
  /* Six lignes, pas trois : le nom, le prix, la période, l équivalent en
     dollars, la liste, le bouton. Le bloc d en tête disparaît de la grille avec
     display: contents, ce qui fait remonter ses quatre enfants au niveau de la
     carte. Chaque ligne s aligne alors d une carte à l autre, y compris la
     période de l offre annuelle, qui tient sur deux lignes quand les autres
     n en prennent qu une. */
  .tarifs { grid-template-rows: auto auto auto auto 1fr auto; }
  .tarif { display: grid; grid-row: span 6; grid-template-rows: subgrid; gap: 0; }
  .tarif-tete { display: contents; }
}

@supports not (grid-template-rows: subgrid) {
  @media (min-width: 760px) {
    .tarif { display: flex; flex-direction: column; }
    .tarif-tete { display: flex; flex-direction: column; min-height: 11.5rem; }
  }
}

/* Cette règle doit rester sous les 760 pixels, et seulement là. Écrite sans
   condition, elle venait après le bloc précédent avec la même spécificité et
   annulait le display: contents : le bloc d en tête redevenait une boîte, et
   la période de l offre annuelle, qui tient sur deux lignes, décalait son
   équivalent en dollars d une ligne par rapport aux trois autres cartes. */
@media (max-width: 759px) {
  .tarif-tete { display: flex; flex-direction: column; }
}

/* L équivalent en dollars pousse le reste vers le bas quand il est là et le
   laisse remonter quand il ne l est pas. On lui réserve sa place. */
.tarif-usd { min-height: 1.15rem; margin-bottom: 0; }
.tarif-periode { min-height: 1.3rem; }

/* Le prix garde sa ligne de base même quand il n y a pas de prix barré. */
.tarif-prix { min-height: 2.9rem; align-items: baseline; }

.tarif-liste {
  margin: var(--r5) 0 0;
  align-content: start;
  gap: 0;
}

/* Le filet de séparation était trop marqué et l espacement trop large : quatre
   colonnes de six à huit lignes finissaient par ressembler à un tableau cassé. */
.tarif-liste li {
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--trait-doux);
  align-items: flex-start;
  line-height: 1.42;
  font-size: 0.86rem;
}
.tarif-liste li:first-child { padding-top: 0; }
.tarif-liste li:last-child { border-bottom: 0; }

.tarif-action { margin-top: var(--r5); display: flex; }
.tarif-action .btn { width: 100%; justify-content: center; }

/* Le prix de l offre annuelle est le plus long : il ne doit pas déborder. */
.tarif-montant { font-size: clamp(1.9rem, 2.9vw, 2.6rem); }
.tarif-devise { font-size: 0.86rem; }


/* -----------------------------------------------------------------------------
   34. L AVERTISSEMENT SUR LE RISQUE, DANS LE PIED
   -----------------------------------------------------------------------------
   Il occupait une bande collée en bas de l écran, sur toutes les pages, en
   permanence. Sur un téléphone c est une ligne de lecture perdue, et sur un
   graphique c est le bas de la courbe qui disparaît dessous. Il est descendu
   dans le pied de page, juste au dessus de la ligne de droits.
   -------------------------------------------------------------------------- */

.avertissement-pied {
  display: flex;
  align-items: flex-start;
  gap: var(--r3);
  margin: var(--r5) 0 0;
  padding: var(--r4);
  border: 1px solid rgba(240, 82, 82, 0.28);
  border-radius: var(--rond-s);
  background: rgba(220, 38, 38, 0.06);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--creme-doux);
}
.avertissement-pied svg {
  width: 16px; height: 16px;
  flex: none;
  margin-top: 2px;
  color: var(--rouge-clair);
}
.avertissement-pied a {
  color: var(--creme);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Le bandeau collé n existe plus. Sa règle reste retirée du flux d impression
   par la section 21, qui nomme encore .bandeau-risque : sans effet, et sans
   risque de revenir par surprise. */
.bandeau-risque { display: none !important; }


/* -----------------------------------------------------------------------------
   35. SERIES D EXERCICES
   -------------------------------------------------------------------------- */

.ex-serie-choix {
  display: flex;
  align-items: center;
  gap: var(--r4);
  flex-wrap: wrap;
  padding: var(--r4) var(--r5);
  margin-bottom: var(--r4);
  border: 1px solid var(--trait-doux);
  border-radius: var(--rond-m);
  background: var(--verre);
}
.ex-serie-titre {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}
.ex-serie-boutons { display: flex; gap: var(--r2); flex-wrap: wrap; }
.ex-serie { min-width: 3.2rem; justify-content: center; }

.ex-progression {
  display: flex;
  align-items: center;
  gap: var(--r3);
  flex: 1;
  min-width: 14rem;
  justify-content: flex-end;
}
.ex-progression-texte {
  font-size: 0.76rem;
  color: var(--gris);
  white-space: nowrap;
}
.ex-progression .jauge-piste { width: 7rem; flex: none; }
@media (max-width: 620px) {
  .ex-progression { justify-content: flex-start; }
  .ex-progression .jauge-piste { display: none; }
}

.ex-bilan { text-align: center; }
.ex-bilan-score { margin: var(--r5) 0; }
.ex-bilan-score .stat-valeur { font-size: clamp(2.6rem, 7vw, 4rem); display: block; }
.ex-bilan-score .stat-label { display: block; margin-top: var(--r2); }
.ex-bilan-detail {
  max-width: 34rem;
  margin: 0 auto var(--r5);
  text-align: left;
}
.ex-bilan .rangee { justify-content: center; }

/* -----------------------------------------------------------------------------
   36. TARIFS, RELIEF ET ÉTIQUETTES
   -----------------------------------------------------------------------------
   LE BOGUE. La section 28 posait overflow: hidden sur .tarif, pour contenir
   l'aura de l'offre vedette. Or l'étiquette « Le plus populaire » est placée à
   moins treize pixels du haut de la carte, c'est à dire dehors : elle se
   faisait couper net par ce même overflow. On voyait une pastille tronquée,
   posée de travers sur la bordure.

   La correction tient en deux gestes : l'overflow redevient visible, et l'aura
   passe en ombre portée, qui n'a pas besoin d'être contenue puisqu'elle ne
   déborde pas la boîte au sens de la mise en page.

   Le reste de la section donne aux quatre cartes le relief demandé : des ombres
   en couches, une arête claire en haut, une inclinaison vers le pointeur, et un
   prix légèrement extrudé.
   -------------------------------------------------------------------------- */

/* ---- 36.1 La correction ---- */

.tarif {
  overflow: visible;
  /* Trois couches : l'arête claire du haut, l'ombre de contact, l'ombre
     portée. C'est cette superposition qui fait qu'une carte a une épaisseur au
     lieu d'être un rectangle posé à plat. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 10px 26px rgba(0, 0, 0, 0.26);
  transition:
    transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 340ms ease,
    border-color var(--t-doux);
}

/* L'aura de l'offre vedette, en ombre portée plutôt qu'en pseudo élément. */
.tarif-vedette::after { content: none; }

.tarif-vedette {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.30),
    0 14px 34px rgba(0, 0, 0, 0.34),
    0 0 42px rgba(201, 162, 39, 0.18);
  animation: souffleOr 6.5s ease-in-out infinite alternate;
}
@keyframes souffleOr {
  from {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 1px 2px rgba(0, 0, 0, 0.30),
      0 14px 34px rgba(0, 0, 0, 0.34),
      0 0 28px rgba(201, 162, 39, 0.12);
  }
  to {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 1px 2px rgba(0, 0, 0, 0.30),
      0 14px 34px rgba(0, 0, 0, 0.34),
      0 0 54px rgba(201, 162, 39, 0.26);
  }
}

/* ---- 36.2 Les étiquettes ----
   Elles chevauchent la bordure haute, il leur faut donc de la place au dessus
   du nom de l'offre, et un niveau d'empilement supérieur à la carte. */

.tarif-etiquette {
  top: -14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 0.34rem 0.95rem;
  border-radius: 99px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* L'offre recommandée : pastille dorée pleine, texte sombre, légère épaisseur. */
.tarif-etiquette {
  background: linear-gradient(170deg, var(--or-300), var(--or-500));
  color: var(--sur-or);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 14px rgba(201, 162, 39, 0.34),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Les autres : en creux, pour qu'une seule pastille attire l'oeil. */
.tarif-etiquette--second {
  background: var(--nuit-800);
  color: var(--or-400);
  border: 1px solid var(--trait);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* La carte qui porte une étiquette respire au dessus de son nom. */
.tarif:has(.tarif-etiquette) { padding-top: calc(var(--r5) + 0.55rem); }

/* Repli pour les navigateurs sans :has. Une marge sur toutes les cartes vaut
   mieux qu'une étiquette collée au nom sur deux d'entre elles. */
@supports not selector(:has(*)) {
  .tarif { padding-top: calc(var(--r5) + 0.55rem); }
}

/* ---- 36.3 Le relief à l'approche ----
   La carte s'incline vers le pointeur. Cinq degrés au plus : au delà le texte
   se déforme et l'effet devient un gadget. Les variables d'inclinaison sont
   posées par suivrePointeur, dans rme.js. */

@media (hover: hover) and (pointer: fine) {
  .tarif { transform-style: preserve-3d; }

  /* Le prix, l étiquette et le bouton avancent vers le lecteur pendant que la
     carte s incline. C est ce décalage entre les plans qui fait la profondeur :
     une carte qui tourne d un bloc reste une image, trois plans qui tournent
     ensemble deviennent un objet. */
  .tarif-montant,
  .tarif-etiquette,
  .tarif-action .btn { transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1); }

  .tarif:hover .tarif-montant { transform: translateZ(26px); }
  .tarif:hover .tarif-etiquette { transform: translateX(-50%) translateZ(34px); }
  .tarif:hover .tarif-action .btn { transform: translateY(-2px) translateZ(16px); }

  .tarif:hover {
    transform:
      perspective(1000px)
      rotateX(calc(var(--incl-y, 0) * -10deg))
      rotateY(calc(var(--incl-x, 0) * 10deg))
      translateY(-6px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 2px 4px rgba(0, 0, 0, 0.30),
      0 28px 60px rgba(0, 0, 0, 0.42);
  }

  /* L'offre vedette garde son agrandissement en plus de l'inclinaison. */
  @media (min-width: 1100px) {
    .tarif-vedette:hover {
      transform:
        perspective(1000px)
        rotateX(calc(var(--incl-y, 0) * -10deg))
        rotateY(calc(var(--incl-x, 0) * 10deg))
        translateY(-6px)
        scale(1.035);
    }
  }
}

/* ---- 36.4 Le prix, extrudé ----
   drop-shadow suit la forme réelle des lettres, ce que text-shadow ne sait pas
   faire ici : le texte est transparent, sa couleur vient d'un dégradé découpé,
   et une ombre de texte se peindrait comme un double plein derrière. */

.tarif-montant {
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45))
    drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
}
.tarif-vedette .tarif-montant {
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5))
    drop-shadow(0 6px 18px rgba(201, 162, 39, 0.28));
}

/* La devise et la période se posent sur une ligne de base commune. */
.tarif-devise { align-self: baseline; }

/* ---- 36.5 Le bouton, plus épais ---- */

.tarif-action .btn {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.28);
  transition: transform var(--t-doux), box-shadow var(--t-doux), background-color var(--t-doux);
}
.tarif-action .btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 10px 22px rgba(0, 0, 0, 0.34);
}

/* ---- 36.6 Coupure ---- */

.mouvement-reduit .tarif-vedette { animation: none !important; }
.mouvement-reduit .tarif:hover { transform: none !important; }