/* AURUM — système de design « Origin Financial »
   Galerie nocturne : canvas quasi noir, serif chuchoté, tuiles chromatiques,
   élévation par paliers de surface (jamais par ombre). */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  color-scheme: dark;

  /* Chromatiques — réservés aux tuiles pleines et aux signaux de données */
  --iris: #847dff;
  --cyan: #00b3dd;
  --pale-iris: #d1c9ff;
  --deep-iris: #4b49aa;
  --orchid: #dd90d8;
  --periwinkle: #90b8f0;

  /* Surfaces — l'élévation se lit par le pas de couleur */
  --obsidian: #0f1011;
  --abyss: #090a0b;
  --graphite: #2e2e2e;
  --steel: #3f4041;
  --silver: #cacaca;

  /* Texte */
  --pure: #ffffff;
  --cloud: #f5f5f7;
  --ash: #b0b0b1;     /* légèrement éclairci : aucune écriture ne doit paraître sombre */
  --fog: #8c8d8e;
  --void: #000000;

  /* Alias applicatifs */
  --bg: var(--obsidian);
  --surface: var(--graphite);
  --surface-2: var(--steel);
  --surface-3: #4a4b4c;
  --text: var(--pure);
  --text-muted: var(--ash);
  --text-faint: var(--fog);
  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.22);

  /* Argent — par couches très fines. Jamais un aplat : un filet, un liseré,
     une icône. La teinte doit s'apercevoir, pas se remarquer. */
  --accent: #cdd2d8;
  --accent-soft: rgba(205, 210, 216, 0.34);
  --accent-faint: rgba(205, 210, 216, 0.15);
  --accent-on-light: #6a7380;   /* assombri pour rester lisible sur blanc */

  /* Tuiles claires — remplacent les aplats chromatiques.
     Le texte s'y inverse : sombre sur blanc, sinon illisible. */
  --tile-light: #ffffff;
  --on-light: #0f1011;
  --on-light-soft: rgba(15,16,17,0.66);
  --on-light-faint: rgba(15,16,17,0.46);
  --on-light-line: rgba(15,16,17,0.12);
  --on-light-fill: rgba(15,16,17,0.06);

  /* Signaux financiers (données uniquement) */
  --success: #5ccb8f;
  --success-soft: rgba(92, 203, 143, 0.14);
  --danger: #e8796f;
  --danger-soft: rgba(232, 121, 111, 0.14);

  /* Typographie — trois voix */
  --font-display: 'Playfair Display', 'Lyon Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rayons */
  --radius: 30px;      /* tuiles et cartes de fonctionnalité */
  --radius-sm: 16px;   /* cartes standard */
  --radius-xs: 8px;    /* boutons, champs, éléments de nav */
  --radius-pill: 9999px;

  /* Rythme */
  --page-max: 1200px;
  --section-gap: 80px;
  --card-padding: 32px;

  --ease-pro: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  font-family: var(--font-sans);
}

* { box-sizing: border-box; }

html { background: var(--obsidian); }
html, body { margin: 0; color: var(--text); -webkit-font-smoothing: antialiased; }
body { background: transparent; min-height: 100vh; overflow-x: hidden; position: relative; font-size: 16px; line-height: 1.5; }

/* Décor 3D fixe, très en retrait — la typographie porte l'essentiel */
.ambient-3d { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.3; }

button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
.icon-svg { display: block; flex-shrink: 0; }
a { color: var(--pure); }

#app { min-height: 100vh; position: relative; z-index: 1; }

/* ---------- Voix typographiques ---------- */

.font-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.015em;
}

/* Étiquettes techniques : mono, majuscules, fort interlettrage */
.eyebrow, .mono-label, .step-counter, .roadmap-tag, .offer-name,
.lesson-block h3, .field label, .site-stats span, .tier-legend-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.182em;
  color: var(--ash);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-pill);
  padding: 8px 20px;
  color: var(--cloud);
  align-self: flex-start;
  width: fit-content;
}

h1, h2, h3 { font-weight: 400; }

/* ---------- Surfaces ---------- */

.card {
  background: var(--graphite);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  /* système volontairement plat : aucune ombre portée */
}

.section-title {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.182em;
  color: var(--ash);
  margin: 48px 0 16px;
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px;
}
.section-title span.muted { font-size: 11px; color: var(--fog); letter-spacing: 0.1em; white-space: nowrap; }

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

.btn {
  border: none; border-radius: var(--radius-xs);
  padding: 12px 18px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 400;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
  width: 100%;
}
/* Action principale : blanc sur noir, le seul élément à contraste maximal */
.btn-gold { background: var(--pure); color: var(--void); }
.btn-gold:hover { background: var(--cloud); }
.btn-gold .icon-svg { color: var(--void); }
.btn-ghost { background: transparent; color: var(--pure); border: 1px solid rgba(255,255,255,0.9); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid rgba(232,121,111,0.5); }
.btn-danger:hover { background: rgba(232,121,111,0.1); }
.btn-done { background: transparent; color: var(--success); border: 1px solid rgba(92,203,143,0.5); }
.btn-sm { padding: 9px 14px; font-size: 14px; width: auto; }
.btn-row { display: flex; gap: 12px; }
.btn-row .btn { flex: 1; }

.back-btn {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: none;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.182em;
  color: var(--ash); padding: 4px 0 20px; transition: color 0.2s ease;
}
.back-btn:hover { color: var(--pure); }

/* ---------- Champs ---------- */

.field { margin-bottom: 20px; }
.field label { display: block; margin-bottom: 8px; }
.field input[type="text"], .field input[type="number"], .field select {
  width: 100%; background: var(--void); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xs); padding: 12px 16px;
  color: var(--cloud); font-size: 16px; font-weight: 400; outline: none;
  transition: border-color 0.2s ease;
}
.field input:focus, .field select:focus { border-color: rgba(255,255,255,0.45); }
.field select { appearance: none; }
.field select option { background: var(--graphite); color: var(--pure); }
.field input::placeholder { color: var(--fog); }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

.empty-state { text-align: center; padding: 40px 16px; color: var(--ash); font-size: 14px; }
.empty-state .icon-svg { margin: 0 auto 12px; color: var(--fog); }
.disclaimer-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.016em; color: var(--fog); line-height: 1.6; margin-top: 8px; }

/* ---------- Logo chromé ---------- */

:root {
  /* Argent poli. L'effet métallique tient au contraste local entre éclats et
     creux, pas à l'assombrissement général : les hautes lumières restent au
     blanc pur, les creux descendent dans les gris bleutés sans jamais
     devenir sombres, sinon le logo se ternit sur fond noir. */
  --chrome-grad: linear-gradient(
    180deg,
    #ffffff 0%, #f7f9fc 12%, #e0e5ed 28%, #c6cdda 41%,
    #ffffff 48%,   /* éclat : l'arête de la surface polie */
    #a9b2c1 54%,   /* creux mesuré — assez pour le métal, pas pour éblouir */
    #d6dbe5 66%, #f1f4f9 80%,
    #ffffff 90%, #cfd5df 100%
  );
}

.chrome-text,
/* le texte révélé vit dans des sous-spans : le dégradé doit les atteindre,
   sinon ils héritent du remplissage transparent et deviennent invisibles */
.chrome-text .reveal-word,
.chrome-text .reveal-word > span {
  background-image: var(--chrome-grad);
  background-size: 100% 220%;
  background-position: 0 30%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: background-position 0.5s var(--ease-pro);
}
.chrome-text:hover, .chrome-text:hover .reveal-word > span,
.site-brand:hover .chrome-text { background-position: 0 70%; }

/* ---------- Navigation (verre dépoli, seule vraie profondeur du système) ---------- */

.site { max-width: var(--page-max); margin: 0 auto; padding: 0 24px; }

.site-nav {
  position: sticky; top: 0; z-index: 30;
  margin: 0 -24px; padding: 0 24px;
  background: rgba(15,16,17,0.72);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}
.site-nav-inner {
  max-width: var(--page-max); margin: 0 auto;
  display: flex; align-items: center; gap: 20px; padding: 14px 0;
}
.site-brand {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; padding: 0;
  font-family: var(--font-display); font-size: 22px; letter-spacing: 0.04em;
}
.site-brand .logo-mark { width: 26px; height: 26px; }
.site-links { display: flex; gap: 8px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.site-links::-webkit-scrollbar { display: none; }
.site-links button {
  background: rgba(255,255,255,0.1); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 9px 12px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 400; color: var(--cloud);
  white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease;
}
.site-links button:hover { background: rgba(255,255,255,0.18); }
.site-links button.active { background: var(--pure); color: var(--void); border-color: var(--pure); }

/* ---------- Contenu principal ---------- */

.site-main { padding: 40px 0 80px; min-height: 60vh; }
.site-main.dir-fwd  { animation: enterFwd 0.5s var(--ease-pro); }
.site-main.dir-back { animation: enterBack 0.5s var(--ease-pro); }
.site-main.dir-deep, .site-main.dir-shallow { animation: enterSoft 0.45s var(--ease-pro); }
@keyframes enterFwd  { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes enterBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes enterSoft { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.screen-exit-fwd, .screen-exit-back, .screen-exit-deep, .screen-exit-shallow {
  animation: exitFade 0.22s ease forwards; pointer-events: none;
}
@keyframes exitFade { to { opacity: 0; transform: translateY(-10px); } }

@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.stagger { opacity: 0; animation: riseIn 0.5s var(--ease-pro) forwards; animation-delay: var(--d, 0ms); }

/* Apparition du texte : chaque mot monte derrière un masque.
   Le débord vertical/horizontal est compensé pour ne pas rogner
   les jambages ni les italiques. */
.reveal-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.06em 0.08em 0.14em 0;
  margin: 0 0 -0.14em -0.02em;
}
.reveal-word > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: wordRise 0.55s cubic-bezier(0.22, 0.9, 0.24, 1) forwards;
}
@keyframes wordRise {
  to { transform: translateY(0); opacity: 1; }
}

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

/* Deux colonnes : le texte à gauche, le champ neuronal à droite */
.site-hero { display: grid; gap: 40px; padding: 70px 0 50px; align-items: center; }
.site-hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 5.2vw, 68px); line-height: 0.95; letter-spacing: -0.02em;
  margin: 24px 0; color: var(--pure);
}
.site-hero-scene { display: flex; justify-content: center; align-items: center; }
.site-hero-scene .hero-scene { width: 100%; height: 400px; max-width: 520px; cursor: crosshair; }
.hero-scene canvas { display: block; }

/* Filet de sécurité léger : l'extinction du nuage se fait en 3D (voir
   edgeFade dans hero-scene.js), ce masque ne rattrape que les pixels
   extrêmes. Il atténue seulement — rien ne s'élargit, donc rien n'empiète
   sur le texte de la colonne voisine. */
#site-hero-3d {
  -webkit-mask-image: radial-gradient(ellipse 92% 90% at 50% 50%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 90% at 50% 50%, #000 70%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* Remonté pour s'aligner sur le titre. En transform : la mise en page ne
   bouge pas, donc aucun risque d'empiéter sur la colonne de texte. */
@media (min-width: 900px) {
  #site-hero-3d { transform: translateY(-38px); }
}
@media (min-width: 900px) { .site-hero { grid-template-columns: 1.05fr 0.95fr; padding: 90px 0 70px; } }
/* > span : seules les lignes directes passent en bloc — les mots révélés
   restent en ligne, sinon chaque mot occuperait sa propre ligne. */
.site-hero h1 > span { display: block; }
.site-hero h1 > span:first-child { font-style: italic; color: var(--cloud); }
.site-hero p { font-size: 18px; font-weight: 300; line-height: 1.5; color: var(--ash); max-width: 52ch; margin: 0 0 32px; }
.site-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.site-hero-actions .btn { width: auto; }





/* ---------- Sections ---------- */

.site-section {
  padding: var(--section-gap) 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s var(--ease-pro), transform 0.5s var(--ease-pro);
}
.site-section.in { opacity: 1; transform: none; }
.site-section-head { max-width: 62ch; margin-bottom: 40px; }
.site-section-head h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 4vw, 38px); line-height: 0.95; letter-spacing: -0.015em;
  margin: 20px 0 16px; color: var(--cloud);
}
.site-section-head p { color: var(--ash); line-height: 1.5; margin: 0; font-size: 16px; font-weight: 300; }

/* Tuiles chromatiques — la couleur porte seule l'identité de la catégorie */
.split-cards { display: grid; gap: 15px; }
@media (min-width: 760px) { .split-cards { grid-template-columns: 1fr 1fr; } }
.split-card {
  border: none; border-radius: var(--radius); padding: var(--card-padding);
  background: var(--tile-light); color: var(--on-light);
}
.split-card.featured { background: var(--tile-light); }
.split-badge { font-family: var(--font-display); font-size: 80px; line-height: 1; color: var(--on-light); margin-bottom: 16px; }
.split-card h3 { font-family: var(--font-display); font-size: 38px; line-height: 0.95; margin: 0 0 12px; color: var(--on-light); }
.split-card p { margin: 0; color: var(--on-light-soft); line-height: 1.5; font-size: 16px; }

.site-quote {
  margin: 48px 0 0; padding: 0; border: none;
  font-family: var(--font-display); font-size: clamp(22px, 2.9vw, 34px); line-height: 1.2;
  color: var(--cloud); font-style: italic;
  max-width: none;   /* la citation court sur toute la largeur, pas en colonne étroite */
  text-wrap: balance;
}

/* Cartes de fonctionnalité : aplats blancs, pleins, sans bordure ni ombre */
.feature-grid { display: grid; gap: 15px; }
@media (min-width: 720px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-card {
  position: relative; text-align: left; border: none; border-radius: var(--radius);
  padding: var(--card-padding); background: var(--tile-light); color: var(--on-light);
  transition: background-color 0.2s ease;
}
.feature-ic { margin-bottom: 40px; color: inherit; }
.feature-card h3 { font-family: var(--font-display); font-size: 38px; line-height: 0.95; margin: 0 0 12px; }
.feature-card p { margin: 0; color: var(--on-light-soft); font-size: 16px; line-height: 1.5; }
.feature-go { position: absolute; top: 32px; right: 32px; opacity: 0.7; }
.feature-card:hover .feature-go { opacity: 1; }

/* Paliers */
.tier-flow { display: grid; gap: 15px; margin-bottom: 24px; }
@media (min-width: 860px) { .tier-flow { grid-template-columns: repeat(4, 1fr); } }
.tier-flow-step { position: relative; background: var(--graphite); border-radius: var(--radius-sm); padding: 24px; }
.tier-flow-step b { display: block; font-family: var(--font-display); font-size: 24px; margin: 12px 0 8px; color: var(--pure); font-weight: 400; }
.tier-flow-step > span:last-of-type { font-size: 14px; color: var(--ash); line-height: 1.5; }
.tier-flow-arrow { display: none; }
@media (min-width: 860px) { .tier-flow-arrow { display: block; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: var(--fog); z-index: 2; } }


/* Vision */
.story-grid { display: grid; gap: 40px; }
@media (min-width: 880px) { .story-grid { grid-template-columns: 1.1fr 0.9fr; } }
.story-col p { color: var(--ash); line-height: 1.67; margin: 0 0 20px; font-size: 16px; font-weight: 300; }
.principle { display: flex; gap: 16px; align-items: flex-start; background: var(--graphite); border-radius: var(--radius-sm); padding: 24px; margin-bottom: 15px; }
.principle-ic { color: var(--pure); flex-shrink: 0; margin-top: 2px; }
.principle b { display: block; font-size: 18px; font-weight: 400; margin-bottom: 8px; color: var(--pure); }
.principle span { font-size: 14px; color: var(--ash); line-height: 1.67; }

/* Feuille de route */
.roadmap { display: grid; gap: 15px; }
@media (min-width: 880px) { .roadmap { grid-template-columns: repeat(3, 1fr); } }
.roadmap-step { background: var(--graphite); border: none; border-radius: var(--radius-sm); padding: var(--card-padding); }
.roadmap-step.current { background: var(--silver); }
.roadmap-step.current .roadmap-tag { color: rgba(0,0,0,0.6); }
.roadmap-step.current h3, .roadmap-step.current li { color: var(--void); }
.roadmap-step.current li .icon-svg { color: var(--void); }
.roadmap-tag { margin-bottom: 16px; }
.roadmap-step h3 { font-family: var(--font-display); font-size: 38px; line-height: 0.95; margin: 0 0 20px; color: var(--pure); }
.roadmap-step ul { list-style: none; padding: 0; margin: 0; }
.roadmap-step li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ash); line-height: 1.67; margin-bottom: 12px; }
.roadmap-step li .icon-svg { color: var(--fog); margin-top: 4px; flex-shrink: 0; }

/* Offres */
.offer-grid { display: grid; gap: 15px; }
@media (min-width: 880px) {
  .offer-grid { grid-template-columns: repeat(3, 1fr); }
  .offer-grid.two { grid-template-columns: 1fr 1.15fr; gap: 18px; }
}
.offer { background: var(--graphite); border: none; border-radius: var(--radius); padding: var(--card-padding); }
/* Offre Premium : argent poli plutôt qu'un aplat blanc. La cassure nette au
   milieu crée le reflet métallique ; les bandes restent assez claires pour
   que le texte sombre reste lisible partout. */
.offer.highlight {
  color: var(--on-light);
  background:
    linear-gradient(118deg,
      #ffffff 0%, #f4f6f9 14%, #d5dbe3 30%, #bcc4ce 44%,
      #ffffff 50%, #cdd4dd 56%, #e4e9ef 74%, #f8fafc 88%, #ffffff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(15,16,17,0.06);
}
.offer.highlight .offer-badge { background: rgba(15,16,17,0.10); }

/* Reflet qui balaie la carte, puis s'efface et marque une pause.
   Le contenu garde son propre plan : seule la bande passe par-dessus. */
.offer.highlight { overflow: hidden; }
.offer.highlight::after {
  content: "";
  position: absolute; top: -40%; bottom: -40%; left: 0; width: 58%;
  /* Bande large et sans arête : le pic reste à mi-opacité et les épaules
     s'étirent loin de part et d'autre. Une raie blanche franche lit comme un
     balayage d'écran, pas comme un reflet posé sur du métal. */
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,0.08) 22%,
    rgba(255,255,255,0.30) 40%,
    rgba(255,255,255,0.52) 50%,
    rgba(255,255,255,0.30) 60%,
    rgba(255,255,255,0.08) 78%,
    transparent 100%);
  transform: translateX(-140%) skewX(-11deg);
  /* Course quasi constante — c'est l'enveloppe d'opacité qui fait naître et
     mourir le reflet, pas une accélération. */
  animation: offerSheen 22s linear infinite;
  pointer-events: none;
}
/* Le badge garde son positionnement absolu : on ne touche qu'au plan */
.offer.highlight > *:not(.offer-badge) { position: relative; z-index: 1; }
.offer.highlight .offer-badge { z-index: 2; }

@keyframes offerSheen {
  0%   { transform: translateX(-140%) skewX(-11deg); opacity: 0; }
  10%  { opacity: 0.55; }
  38%  { opacity: 1; }
  58%  { opacity: 0.85; }
  72%  { transform: translateX(300%) skewX(-11deg); opacity: 0; }
  100% { transform: translateX(300%) skewX(-11deg); opacity: 0; }
}

/* Le reflet s'anime un peu plus vif quand on survole la carte */
.offer.highlight:hover::after { animation-duration: 13s; }

@media (prefers-reduced-motion: reduce) {
  .offer.highlight::after { animation: none; opacity: 0; }
}
.offer.highlight .offer-name { color: var(--on-light-faint); }
.offer.highlight li { color: var(--on-light-soft); }
.offer.highlight .offer-price { color: var(--on-light); }
.offer-price { font-family: var(--font-display); font-size: 80px; line-height: 1; margin: 12px 0 24px; color: var(--pure); }
.offer ul { list-style: none; padding: 0; margin: 0; }
.offer li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ash); line-height: 1.67; margin-bottom: 12px; }
.offer li .icon-svg { color: currentColor; opacity: 0.7; margin-top: 4px; flex-shrink: 0; }

/* Sans caisson : le bloc final se pose sur le fond comme le reste de la
   page. Un aplat plus sombre y créait un rectangle visible en bas. Un filet
   supérieur suffit à le séparer de la section précédente. */
.site-final {
  text-align: center; padding: 96px 24px 40px; margin: 56px 0 0;
  background: transparent; border-top: 1px solid var(--border);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s var(--ease-pro), transform 0.5s var(--ease-pro);
}
.site-final.in { opacity: 1; transform: none; }
.site-final h2 { font-family: var(--font-display); font-size: clamp(30px, 5vw, 60px); line-height: 0.95; margin: 0 0 16px; color: var(--pure); }
.site-final p { color: var(--ash); margin: 0 0 32px; font-size: 18px; font-weight: 300; }
.site-final .btn { width: auto; display: inline-flex; }

.site-footer { border-top: 1px solid var(--border); margin-top: 80px; padding: 40px 0 60px; }
.site-footer-inner { max-width: 62ch; }
.site-footer .site-brand { margin-bottom: 20px; }
.site-footer p { color: var(--ash); font-size: 14px; line-height: 1.67; margin: 0 0 12px; font-weight: 300; }

/* =========================================================
   MODULES APPLICATIFS (intégrés au site)
   ========================================================= */

.page-head { margin-bottom: 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-family: var(--font-display); font-size: clamp(38px, 5vw, 60px); line-height: 0.95; margin: 12px 0 0; color: var(--pure); }
.xp-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.1); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 8px 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cloud);
}
.xp-chip .lv { color: var(--pure); font-weight: 500; }
.xp-chip .xp-val.bump { display: inline-block; animation: xpBump 0.6s var(--ease-pro); }
@keyframes xpBump { 0% { opacity: 0.4; } 100% { opacity: 1; } }

/* Tableau de bord */
.dash-top { display: grid; gap: 15px; margin-bottom: 15px; }
@media (min-width: 900px) { .dash-top { grid-template-columns: 1.5fr 1fr; align-items: stretch; } .dash-top > * { min-width: 0; } }

.hero-card {
  background: var(--graphite); border: none; border-radius: var(--radius);
  padding: 32px; display: flex; flex-direction: column;
}
.hero-total-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.182em; color: var(--fog); }
.hero-total { font-family: var(--font-display); font-size: clamp(44px, 6vw, 72px); line-height: 0.9; margin: 14px 0 12px; color: var(--pure); }
.hero-total.bump { animation: riseIn 0.6s var(--ease-pro); }
.hero-delta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; display: flex; align-items: center; gap: 6px; }
.hero-delta.up { color: var(--success); }
.hero-delta.down { color: var(--danger); }
.hero-delta.flat { color: var(--fog); }
.hero-foot { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fog); margin-top: auto; padding-top: 24px; }
.sparkline-wrap { margin: 24px 0 0; }
.spark-svg { width: 100%; height: 90px; display: block; }

.hero-split { margin-top: 28px; }
.hero-split-bar { display: flex; height: 6px; border-radius: var(--radius-pill); overflow: hidden; gap: 2px; }
.hero-split-bar span { display: block; height: 100%; }
.hero-split-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.hero-split-legend span {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ash);
}
.hero-split-legend i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Tuile chromatique : le score porte la couleur, comme les tuiles du site */
.score-tile {
  background: var(--tile-light); border-radius: var(--radius); padding: 32px;
  display: flex; flex-direction: column; color: var(--on-light);
}
.score-tile-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.182em; color: var(--on-light-faint); }
.score-tile-num { font-family: var(--font-display); font-size: clamp(56px, 8vw, 88px); line-height: 0.9; margin: 14px 0 20px; }
.score-tile-num span { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.1em; color: var(--on-light-faint); margin-left: 8px; }
.score-tile-bar { height: 3px; background: var(--on-light-line); border-radius: var(--radius-pill); overflow: hidden; }
.score-tile-bar > div { height: 100%; background: var(--on-light); transition: width 0.7s var(--ease-pro); }
.score-tile-text { font-size: 14px; line-height: 1.6; color: var(--on-light-soft); margin: 20px 0 0; }
.score-tile-empty { font-size: 14px; color: var(--on-light-soft); margin-top: 16px; line-height: 1.6; }

.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; }
.quick-tile {
  background: var(--graphite); border: none; border-radius: var(--radius-sm); padding: 24px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px; text-align: left;
  transition: background-color 0.2s ease;
}
.quick-tile:hover { background: var(--steel); }
.quick-tile .qicon { color: var(--pure); }
.quick-tile .qtext b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 400; margin-bottom: 4px; }
.quick-tile .qtext span { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.182em; color: var(--ash); }
@media (min-width: 900px) { .quick-grid { grid-template-columns: repeat(4, 1fr); } }


.dashboard-columns { display: grid; gap: 15px; }
@media (min-width: 1040px) { .dashboard-columns { grid-template-columns: 1.3fr 1fr; align-items: start; } .dashboard-columns > * { min-width: 0; } }

/* Répartition */
.donut-row { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.donut-3d { width: 200px; height: 200px; flex-shrink: 0; }
.donut-3d canvas { display: block; width: 100%; height: 100%; }
.legend-list { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 12px; }
.legend-item { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.legend-item .lbl { flex: 1; color: var(--ash); }
.legend-item .pct { font-family: var(--font-mono); font-size: 12px; color: var(--pure); }

.bar-list { display: flex; flex-direction: column; gap: 16px; }
.bar-row .bar-head { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; color: var(--ash); }
.bar-row .bar-head b { font-family: var(--font-mono); font-size: 12px; color: var(--pure); font-weight: 400; }
.bar-track { height: 4px; background: rgba(255,255,255,0.1); border-radius: var(--radius-pill); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--radius-pill); transition: width 0.6s var(--ease-pro); }

/* Score */
.score-card { display: flex; align-items: center; gap: 32px; padding: var(--card-padding); flex-wrap: wrap; }
.score-ring { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring .score-num { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; flex-direction: column; font-family: var(--font-display); font-size: 38px; color: var(--pure); }
.score-ring .score-num small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.182em; color: var(--fog); }
.score-explain { font-size: 14px; color: var(--ash); line-height: 1.67; flex: 1; min-width: 200px; }

/* Analyse IA */
.ai-card { background: var(--graphite); border: none; padding: var(--card-padding); }
.ai-card .ai-head { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.182em; color: var(--ash); display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.ai-tip { display: flex; gap: 10px; font-size: 14px; color: var(--ash); line-height: 1.67; margin-bottom: 14px; }
.ai-tip:last-child { margin-bottom: 0; }
.ai-tip .dot { color: var(--fog); flex-shrink: 0; margin-top: 4px; }

/* Patrimoine */
.holding-group-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.182em; color: var(--ash); margin: 32px 0 12px; }
.holding-group-head .gdot { width: 8px; height: 8px; border-radius: 50%; }
.holding-group-head .gtotal { margin-left: auto; color: var(--pure); }

.holding-row {
  display: flex; align-items: center; gap: 16px; background: var(--graphite);
  border: none; border-radius: var(--radius-sm); padding: 20px 24px; margin-bottom: 8px;
  transition: background-color 0.2s ease;
}
.holding-row:hover { background: var(--steel); }
.holding-row .hicon { color: var(--pure); flex-shrink: 0; }
.holding-row .hinfo { flex: 1; min-width: 0; }
.holding-row .hname { font-size: 16px; color: var(--pure); }
.holding-row .hmeta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.016em; color: var(--fog); margin-top: 6px; text-transform: uppercase; }
.holding-row .hright { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.holding-row .hvalue { font-family: var(--font-mono); font-size: 16px; color: var(--pure); white-space: nowrap; }
.holding-row .hchange { font-family: var(--font-mono); font-size: 11px; }
.holding-row .hchange.up { color: var(--success); }
.holding-row .hchange.down { color: var(--danger); }
.holding-row .hactions { display: flex; gap: 6px; }
.holding-row .hdel, .holding-row .hrefresh { background: none; border: none; color: var(--fog); padding: 6px; border-radius: var(--radius-xs); transition: color 0.2s ease, background-color 0.2s ease; }
.holding-row .hdel:hover { color: var(--danger); background: rgba(255,255,255,0.08); }
.holding-row .hrefresh:hover { color: var(--pure); background: rgba(255,255,255,0.08); }
.holding-row .hrefresh.spinning .icon-svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.fab {
  position: fixed; right: 32px; bottom: 32px; width: 56px; height: 56px; border-radius: var(--radius-pill);
  background: var(--pure); color: var(--void); border: none;
  display: flex; align-items: center; justify-content: center; z-index: 41;
  transition: background-color 0.2s ease;
}
.fab:hover { background: var(--cloud); }

/* Modale */
.modal-overlay { position: fixed; inset: 0; background: rgba(9,10,11,0.8); display: flex; align-items: flex-end; justify-content: center; z-index: 60; backdrop-filter: blur(8px); animation: overlayIn 0.2s ease; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.modal-sheet {
  width: 100%; max-width: 520px; background: var(--graphite);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 32px 32px calc(32px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto; animation: enterSoft 0.3s var(--ease-pro);
}
.modal-handle { width: 40px; height: 4px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.2); margin: 0 auto 24px; }
.modal-title { font-family: var(--font-display); font-size: 38px; line-height: 0.95; margin: 0 0 24px; color: var(--pure); }
@media (min-width: 700px) { .modal-overlay { align-items: center; } .modal-sheet { border-radius: var(--radius-sm); } }

/* Inscription */
.onboard-wrap { max-width: 620px; margin: 0 auto; padding: 20px 0 60px; }
.onboard-progress { display: flex; gap: 6px; margin-bottom: 40px; }
.onboard-progress > div { flex: 1; height: 2px; background: rgba(255,255,255,0.12); transition: background-color 0.4s ease; }
.onboard-progress > div.done { background: var(--pure); }
.onboard-title { font-family: var(--font-display); font-size: clamp(30px, 5vw, 60px); line-height: 0.95; margin: 0 0 16px; color: var(--pure); }
.onboard-subtitle { font-size: 18px; font-weight: 300; color: var(--ash); margin: 0 0 40px; line-height: 1.5; }
.onboard-body { animation: enterSoft 0.4s var(--ease-pro); }
.onboard-footer { margin-top: 32px; }
.step-counter { margin-bottom: 16px; display: block; }

.choice-grid { display: grid; gap: 12px; }
.choice-card {
  display: flex; align-items: flex-start; gap: 20px; text-align: left;
  background: var(--graphite); border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 24px; transition: background-color 0.2s ease, border-color 0.2s ease;
}
.choice-card:hover { background: var(--steel); }
.choice-card.selected { background: var(--tile-light); border-color: var(--tile-light); color: var(--on-light); }
.choice-card .cicon { color: var(--pure); flex-shrink: 0; margin-top: 2px; }
.choice-card .ctext b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 400; margin-bottom: 6px; color: var(--pure); }
.choice-card .ctext span { font-size: 14px; color: var(--ash); line-height: 1.67; }
.choice-card.selected .ctext span { color: rgba(255,255,255,0.85); }
.choice-card .ccheck { margin-left: auto; color: var(--pure); opacity: 0; transition: opacity 0.2s ease; flex-shrink: 0; }
.choice-card.selected .ccheck { opacity: 1; }

/* Éducation */
.edu-help { padding: var(--card-padding); margin-bottom: 15px; background: var(--graphite); border: none; }
.edu-help-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.edu-help-close { background: none; border: none; color: var(--fog); padding: 4px; border-radius: var(--radius-xs); }
.edu-help-close:hover { color: var(--pure); }
.edu-help-steps { display: grid; gap: 24px; }
@media (min-width: 900px) { .edu-help-steps { grid-template-columns: repeat(3, 1fr); } }
.edu-step { display: flex; gap: 14px; align-items: flex-start; }
.edu-step-ic { color: var(--pure); flex-shrink: 0; margin-top: 2px; }
.edu-step b { display: block; font-size: 16px; font-weight: 400; margin-bottom: 6px; color: var(--pure); }
.edu-step span { font-size: 14px; color: var(--ash); line-height: 1.67; }

.edu-continue { flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 24px 28px; margin-bottom: 15px; }
.edu-continue-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.182em; opacity: 0.6; }
.edu-continue-title { font-family: var(--font-display); font-size: 24px; }
.edu-continue-meta { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; }



.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (min-width: 900px) { .theme-grid { grid-template-columns: repeat(3, 1fr); } }
.theme-card {
  background: var(--graphite); border: none; border-radius: var(--radius-sm); padding: 24px;
  text-align: left; display: flex; flex-direction: column; gap: 12px; position: relative;
  transition: background-color 0.2s ease;
}
.theme-card:hover { background: var(--steel); }
.theme-card .ticon { color: var(--pure); margin-bottom: 20px; }
.theme-card .title { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.05; color: var(--pure); }
.theme-card .meta { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.182em; color: var(--ash); }
.theme-card .mini-progress { height: 2px; background: rgba(255,255,255,0.12); overflow: hidden; }
.theme-card .mini-progress > div { height: 100%; background: var(--pure); transition: width 0.6s var(--ease-pro); }
.theme-card .complete-flag { position: absolute; top: 24px; right: 24px; color: var(--pure); }

.theme-header { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
.theme-header .icon-lg { color: var(--pure); flex-shrink: 0; margin-top: 8px; }
.theme-header h1 { font-family: var(--font-display); font-size: clamp(30px, 5vw, 60px); line-height: 0.95; margin: 0 0 12px; color: var(--pure); }
.theme-header p { margin: 0; color: var(--ash); font-size: 16px; font-weight: 300; }

.tier-block { background: var(--graphite); border: none; border-radius: var(--radius-sm); margin: 15px 0; overflow: hidden; }
.tier-block.locked { opacity: 0.45; }
.tier-head { padding: 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.tier-head-main { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.tier-head .left { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.182em; color: var(--cloud); }
.tier-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tier-head .lock, .tier-head .count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--fog); display: flex; align-items: center; gap: 6px; }
.tier-sub { font-size: 14px; color: var(--ash); margin-top: 12px; line-height: 1.5; }

.lesson-row {
  display: flex; align-items: center; gap: 16px; padding: 20px 24px;
  border: none; border-bottom: 1px solid rgba(255,255,255,0.08);
  background: none; width: 100%; text-align: left; color: var(--cloud); font-size: 16px;
  transition: background-color 0.2s ease;
}
.lesson-row:last-child { border-bottom: none; }
.lesson-row:disabled { color: var(--fog); cursor: not-allowed; }
.lesson-row:not(:disabled):hover { background: var(--steel); }
.lesson-row .check { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: transparent; }
.lesson-row .check.done { background: var(--pure); border-color: var(--pure); color: var(--void); }
.lesson-num { font-family: var(--font-mono); font-size: 10px; color: var(--fog); }
.lesson-row .title { flex: 1; }
.lesson-row .chev { color: var(--fog); display: flex; }

.lesson-card { background: var(--graphite); border: none; border-radius: var(--radius-sm); padding: 40px; }
.lesson-card h1 { font-family: var(--font-display); font-size: clamp(30px, 5vw, 60px); line-height: 0.95; margin: 20px 0 32px; color: var(--pure); }
.lesson-crumb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.182em; color: var(--ash); }
.lesson-pos { margin-left: auto; color: var(--pure); white-space: nowrap; }
.lesson-block { margin-bottom: 32px; }
.lesson-block h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.lesson-block p { margin: 0; line-height: 1.67; font-size: 18px; font-weight: 300; color: var(--cloud); }
.example-box { background: var(--abyss); border-radius: var(--radius-sm); padding: 24px; }
.example-box p { font-size: 16px; color: var(--ash); }
.lesson-hint { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ash); line-height: 1.67; background: var(--abyss); border-radius: var(--radius-xs); padding: 16px 20px; }
.lesson-hint .icon-svg { color: var(--fog); margin-top: 3px; flex-shrink: 0; }
.lesson-hint.done { color: var(--success); }
.lesson-hint.done .icon-svg { color: var(--success); }
.lesson-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.lesson-actions .btn { width: auto; flex: 1; }

/* Quiz */
.quiz-overlay { position: fixed; inset: 0; background: rgba(9,10,11,0.85); display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px; overflow-y: auto; z-index: 70; backdrop-filter: blur(8px); animation: overlayIn 0.2s ease; }
.quiz-modal { background: var(--graphite); border: none; border-radius: var(--radius-sm); max-width: 520px; width: 100%; padding: 40px 32px; margin: auto; animation: enterSoft 0.3s var(--ease-pro); }
.quiz-header { text-align: center; margin-bottom: 32px; }
.quiz-header .qhicon { color: var(--pure); display: flex; justify-content: center; margin-bottom: 16px; }
.quiz-header h2 { font-family: var(--font-display); font-size: 38px; line-height: 0.95; margin: 0 0 12px; color: var(--pure); }
.quiz-header p { margin: 0; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.182em; color: var(--ash); }
.quiz-progress-dots { display: flex; justify-content: center; gap: 6px; margin: 20px 0 8px; }
.quiz-progress-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.15); transition: background-color 0.2s ease; }
.quiz-progress-dots span.active { background: var(--pure); }
.quiz-progress-dots span.answered { background: var(--pure); }
.question-block h3 { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.15; margin: 16px 0 24px; color: var(--cloud); }
.option-btn {
  display: block; width: 100%; text-align: left; background: var(--abyss);
  border: 1px solid transparent; border-radius: var(--radius-xs); padding: 16px 20px;
  margin-bottom: 10px; font-size: 16px; color: var(--cloud);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.option-btn:hover:not(:disabled) { background: var(--steel); }
.option-btn.selected { border-color: var(--pure); }
.option-btn.correct { border-color: var(--success); color: var(--success); }
.option-btn.wrong { border-color: var(--danger); color: var(--danger); }
.option-btn:disabled { cursor: default; }
.explanation-box { background: var(--abyss); border-radius: var(--radius-xs); padding: 16px 20px; font-size: 14px; color: var(--ash); margin-top: 12px; line-height: 1.67; }
.quiz-nav { display: flex; justify-content: flex-end; margin-top: 24px; }
.quiz-nav .btn { width: auto; }
.quiz-result { text-align: center; }
.quiz-result .score-circle { width: 120px; height: 120px; border-radius: 50%; background: var(--tile-light); color: var(--on-light); display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 0 auto 24px; }
.quiz-result .score-circle span { font-family: var(--font-display); font-size: 38px; }
.quiz-result .score-circle small { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.182em; opacity: 0.8; }
.quiz-result h2 { font-family: var(--font-display); font-size: 38px; line-height: 0.95; margin: 0 0 12px; color: var(--pure); }
.quiz-result p { color: var(--ash); margin: 0 0 24px; font-size: 14px; }
.xp-gain { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--iris); margin-bottom: 24px; }
.levelup-banner { background: var(--silver); color: var(--void); border-radius: var(--radius-xs); padding: 16px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.182em; text-align: center; margin-bottom: 24px; }

/* Marchés */
.search-bar { display: flex; gap: 12px; align-items: center; background: var(--void); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-xs); padding: 12px 22px; transition: border-color 0.2s ease; }
.search-bar:focus-within { border-color: rgba(255,255,255,0.45); }
.search-bar .icon-svg { color: var(--fog); }
.search-bar input { flex: 1; background: none; border: none; outline: none; color: var(--cloud); font-size: 16px; }
.market-row {
  display: flex; align-items: center; gap: 16px; background: var(--graphite); border: none;
  border-radius: var(--radius-sm); padding: 20px 24px; margin-bottom: 8px; width: 100%; text-align: left;
  transition: background-color 0.2s ease;
}
.market-row:hover { background: var(--steel); }
.market-row .hicon { color: var(--pure); }
.market-row .msymbol { font-family: var(--font-mono); font-size: 14px; color: var(--pure); letter-spacing: 0.05em; }
.market-row .mname { font-size: 14px; color: var(--ash); margin-top: 4px; }
.market-row .mtag { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.182em; color: var(--fog); margin-left: 10px; }

.quote-card { padding: 40px; background: var(--graphite); border: none; border-radius: var(--radius); }
.quote-card .qprice { font-family: var(--font-display); font-size: clamp(48px, 8vw, 80px); line-height: 0.9; margin: 16px 0 12px; color: var(--pure); }
.quote-card .qchange { font-family: var(--font-mono); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.quote-card .qchange.up { color: var(--success); }
.quote-card .qchange.down { color: var(--danger); }
.quote-card .qmeta { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.182em; color: var(--fog); margin-top: 20px; }

/* Profil */
.profile-header { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; }
.profile-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--pure); color: var(--void); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 28px; flex-shrink: 0; }
.profile-header h1 { font-family: var(--font-display); font-size: 38px; line-height: 0.95; margin: 0; color: var(--pure); }
.profile-header p { margin: 8px 0 0; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.182em; color: var(--ash); }

.level-card { display: flex; align-items: center; gap: 32px; padding: var(--card-padding); background: var(--graphite); border: none; flex-wrap: wrap; }
.level-orb { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.level-orb-num { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 38px; color: var(--pure); pointer-events: none; }
.level-info { flex: 1; min-width: 200px; }
.level-xp { font-family: var(--font-display); font-size: 38px; line-height: 0.95; margin: 12px 0 16px; color: var(--pure); }
.progress-track { height: 2px; background: rgba(255,255,255,0.12); overflow: hidden; }
.progress-fill { height: 100%; background: var(--pure); transition: width 0.7s var(--ease-pro); }

.info-list { display: flex; flex-direction: column; }
.info-row { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 16px; }
.info-row:last-child { border-bottom: none; }
.info-row span.k { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.182em; color: var(--ash); }
.info-row span.v { color: var(--pure); text-align: right; }

.premium-card {
  background: var(--tile-light); border: none; border-radius: var(--radius);
  padding: var(--card-padding); color: var(--on-light);
}
.premium-card .eyebrow { background: var(--on-light-fill); color: var(--on-light); }
.premium-card h3 { font-family: var(--font-display); font-size: 38px; line-height: 0.95; margin: 16px 0 20px; color: var(--on-light); }
.premium-card ul { margin: 0 0 24px; padding: 0; list-style: none; }
.premium-card ul li { display: flex; gap: 10px; margin-bottom: 12px; font-size: 14px; color: var(--on-light-soft); line-height: 1.67; }
.premium-card ul li .icon-svg { color: var(--on-light); margin-top: 4px; flex-shrink: 0; }
.premium-card .btn-gold { background: var(--on-light); color: var(--pure); }

@media (prefers-reduced-motion: reduce) {
  .site-main, .site-section, .site-final, .stagger, .onboard-body { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

.score-tile-scope {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--on-light-faint);
  margin-top: auto; padding-top: 24px;
}

/* ---------- Offre gratuite / Premium ---------- */

.edu-quota {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: var(--graphite); border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 26px;
}
.edu-quota.empty { background: var(--tile-light); }
.edu-quota-text {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ash); line-height: 1.5;
}
.edu-quota.empty .edu-quota-text { color: var(--on-light-soft); }
.edu-quota-text .icon-svg { flex-shrink: 0; opacity: 0.75; }
.edu-quota-cta {
  background: var(--pure); color: var(--void); border: none; cursor: pointer;
  border-radius: 999px; padding: 10px 18px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  transition: opacity 0.2s ease;
}
.edu-quota-cta:hover { opacity: 0.82; }

.lesson-row.quota-locked .title { color: var(--fog); }
.lesson-row.quota-locked .check { opacity: 0.4; }

.premium-price { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; }
.premium-price .font-display { font-size: 68px; line-height: 1; color: var(--on-light); }
.premium-per {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--on-light-faint);
}
.premium-card h3 { margin-top: 14px; }
.premium-foot {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--on-light-faint); margin-bottom: 18px;
}
.btn-ghost-light {
  background: transparent; color: var(--on-light);
  border: 1px solid var(--on-light-line);
}
.btn-ghost-light:hover { background: var(--on-light-fill); }

.offer-price .offer-per {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ash); margin-left: 10px;
}
.offer.highlight .offer-price .offer-per { color: rgba(255,255,255,0.8); }
.offer-note {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--fog); margin-top: 20px;
}
.offer.highlight .offer-note { color: var(--on-light-faint); }

/* ---------- Grille des offres ---------- */

.billing-switch {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 26px;
  background: var(--graphite); border-radius: 999px;
}
.billing-opt {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: none; cursor: pointer;
  border-radius: 999px; padding: 10px 20px; color: var(--ash);
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  transition: background 0.25s var(--ease-pro), color 0.25s var(--ease-pro);
}
.billing-opt:hover { color: var(--pure); }
.billing-opt.active { background: var(--pure); color: var(--void); }
.billing-save {
  background: rgba(255,255,255,0.16); color: var(--pure);
  border-radius: 999px; padding: 3px 8px; font-size: 8px; letter-spacing: 0.1em;
}
.billing-opt.active .billing-save { background: var(--void); color: var(--pure); }

.offer { position: relative; display: flex; flex-direction: column; }
.offer-badge {
  position: absolute; top: 20px; right: 20px;
  background: var(--on-light-fill); color: var(--on-light);
  border-radius: 999px; padding: 6px 12px;
  font-family: var(--font-mono); font-size: 8px;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.offer-tagline {
  font-size: 14px; color: var(--ash); line-height: 1.6;
  margin: -12px 0 24px;
}
.offer.highlight .offer-tagline { color: var(--on-light-soft); }
.offer ul { flex: 1; }
.offer-cta {
  width: 100%; margin-top: 10px;
  justify-content: center;
}
.offer-cta.light { background: var(--on-light); color: var(--pure); border: none; }
.offer-cta.light:hover { opacity: 0.86; }
.offer-note { display: flex; align-items: center; gap: 7px; }
.offer-note .icon-svg { opacity: 0.65; }

/* ---------- Tunnel d'abonnement ---------- */

.checkout-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(9,10,11,0.88); backdrop-filter: blur(10px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 16px; overflow-y: auto;
  animation: overlayIn 0.2s ease;
}
.checkout-panel {
  position: relative; margin: auto; width: 100%; max-width: 880px;
  display: grid; background: var(--graphite);
  border-radius: var(--radius); overflow: hidden;
  animation: enterSoft 0.32s var(--ease-pro);
}
@media (min-width: 860px) { .checkout-panel { grid-template-columns: 0.85fr 1fr; } }

.checkout-close {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: none; cursor: pointer;
  color: var(--pure); display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.checkout-close:hover { background: rgba(255,255,255,0.2); }

.checkout-side {
  background: var(--tile-light); color: var(--on-light); padding: 40px 34px;
  display: flex; flex-direction: column;
}
.checkout-side .eyebrow { background: var(--on-light-fill); color: var(--on-light); }
.checkout-amount { display: flex; align-items: baseline; gap: 9px; margin: 22px 0 8px; }
.checkout-amount .font-display { font-size: 62px; line-height: 1; color: var(--on-light); }
.checkout-per {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--on-light-faint);
}
.checkout-billed {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--on-light-faint); margin-bottom: 28px;
}
.checkout-features { list-style: none; padding: 0; margin: 0; }
.checkout-features li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.6; color: var(--on-light-soft);
  margin-bottom: 13px;
}
.checkout-features li .icon-svg { color: var(--on-light); }
.checkout-features li .icon-svg { margin-top: 4px; flex-shrink: 0; }

.checkout-main { padding: 40px 34px; display: flex; flex-direction: column; }
.checkout-main h2 { font-family: var(--font-display); font-size: 36px; line-height: 0.98; margin: 14px 0 26px; color: var(--pure); }

.cycle-picker { display: grid; gap: 10px; margin-bottom: 24px; }
@media (min-width: 560px) { .cycle-picker { grid-template-columns: 1fr 1fr; } }
.cycle-option {
  position: relative; text-align: left; cursor: pointer;
  background: var(--steel); border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.2s var(--ease-pro), background 0.2s var(--ease-pro);
}
.cycle-option:hover { border-color: rgba(255,255,255,0.3); }
.cycle-option.active { border-color: var(--pure); background: rgba(255,255,255,0.09); }
.cycle-badge {
  position: absolute; top: -8px; right: 12px;
  background: var(--pure); color: var(--void); border-radius: 999px;
  padding: 3px 9px; font-family: var(--font-mono); font-size: 8px;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.cycle-label {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--ash);
}
.cycle-option.active .cycle-label { color: var(--pure); }
.cycle-price { font-size: 21px; color: var(--pure); }
.cycle-price small { font-size: 11px; color: var(--ash); }
.cycle-billed { font-size: 11.5px; color: var(--fog); line-height: 1.4; }

.checkout-field { margin-bottom: 20px; }
.checkout-field label {
  display: block; font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--ash); margin-bottom: 8px;
}
.checkout-account {
  background: var(--steel); border-radius: var(--radius-sm);
  padding: 13px 15px; font-size: 14px; color: var(--pure);
}
.checkout-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 18px 0; margin-bottom: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.checkout-total span {
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--ash);
}
.checkout-total strong { font-size: 24px; color: var(--pure); font-weight: 500; }
.checkout-error {
  background: rgba(221,144,216,0.14); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 13px; color: var(--orchid); margin-bottom: 16px;
}
.checkout-pay { width: 100%; justify-content: center; }
.checkout-pay:disabled { opacity: 0.6; cursor: progress; }
.checkout-trust {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 16px; font-family: var(--font-mono); font-size: 8.5px;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--fog);
  text-align: center; line-height: 1.6;
}

.checkout-panel.success {
  grid-template-columns: 1fr; max-width: 520px;
  padding: 44px 34px; text-align: center;
}
.checkout-done-mark {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 22px;
  background: var(--pure); color: var(--void);
  display: flex; align-items: center; justify-content: center;
}
.checkout-panel.success h2 { font-family: var(--font-display); font-size: 40px; line-height: 0.98; margin: 12px 0 14px; color: var(--pure); }
.checkout-done-text { font-size: 14.5px; color: var(--ash); line-height: 1.65; margin: 0 0 26px; }
.checkout-receipt { text-align: left; background: var(--steel); border-radius: var(--radius-sm); padding: 6px 16px; margin-bottom: 20px; }
.checkout-receipt div {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.checkout-receipt div:last-child { border-bottom: none; }
.checkout-receipt span {
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--ash);
}
.checkout-receipt strong { font-size: 14px; color: var(--pure); font-weight: 500; text-align: right; }
.checkout-demo {
  background: rgba(144,184,240,0.12); border-radius: var(--radius-sm);
  padding: 13px 15px; font-size: 12.5px; line-height: 1.55;
  color: var(--periwinkle); margin-bottom: 20px; text-align: left;
}
.checkout-panel.success .btn { width: 100%; justify-content: center; }

/* Carte d'abonnement du profil */
.premium-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.premium-status {
  background: var(--on-light); color: var(--pure);
  border-radius: 999px; padding: 5px 12px;
  font-family: var(--font-mono); font-size: 8.5px;
  text-transform: uppercase; letter-spacing: 0.13em; white-space: nowrap;
}
.premium-status.ghost { background: var(--on-light-fill); color: var(--on-light-soft); }
.premium-meta { margin: 24px 0 26px; }
.premium-meta div {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--on-light-line);
}
.premium-meta div:last-child { border-bottom: none; }
.premium-meta span {
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--on-light-faint);
}
.premium-meta strong { font-size: 14px; color: var(--on-light); font-weight: 500; }
.premium-card .btn { width: 100%; justify-content: center; }
.premium-foot { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; }

/* ---------- Page Marchés : listes par défaut ---------- */

.market-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 16px;
}
.market-tabs, .market-periods {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--graphite); border-radius: 999px;
}
.market-tab, .market-period {
  background: transparent; border: none; cursor: pointer;
  border-radius: 999px; padding: 9px 18px; color: var(--ash);
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.14em;
  transition: background 0.22s var(--ease-pro), color 0.22s var(--ease-pro);
}
.market-period { padding: 9px 14px; }
.market-tab:hover, .market-period:hover { color: var(--pure); }
.market-tab.active, .market-period.active { background: var(--pure); color: var(--void); }

.market-board { display: grid; gap: 14px; }
@media (min-width: 660px) { .market-board { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .market-board { grid-template-columns: repeat(3, 1fr); } }

.market-tile {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--graphite); border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 20px 20px 18px;
  text-align: left; cursor: pointer; min-width: 0;
  transition: border-color 0.25s var(--ease-pro), transform 0.25s var(--ease-pro);
}
.market-tile:hover { border-color: rgba(255,255,255,0.22); transform: translateY(-2px); }
.market-tile.skeleton {
  height: 168px; cursor: default;
  background: linear-gradient(100deg, var(--graphite) 30%, var(--steel) 50%, var(--graphite) 70%);
  background-size: 260% 100%; animation: tileShimmer 1.4s ease-in-out infinite;
}
@keyframes tileShimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }

.tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tile-id { min-width: 0; }
.tile-symbol {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pure); margin-bottom: 6px;
}
.tile-name {
  font-size: 12.5px; color: var(--fog); line-height: 1.4; min-height: 35px;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tile-chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  border-radius: 999px; padding: 5px 10px; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
}
.tile-chip.up { background: var(--success-soft); color: var(--success); }
.tile-chip.down { background: var(--danger-soft); color: var(--danger); }

.tile-spark { height: 64px; }
.market-spark { width: 100%; height: 100%; display: block; }
.spark-empty {
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--fog); font-family: var(--font-mono); font-size: 11px;
}

.tile-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tile-price { font-size: 19px; color: var(--pure); }
.tile-period {
  font-family: var(--font-mono); font-size: 8.5px; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--fog);
}

/* Tuile en attente de sa courbe (résultats de recherche) */
.tile-exch {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em;
  color: var(--fog); margin-left: 8px;
}
.tile-chip.pending { background: var(--steel); color: var(--fog); }
.spark-loading {
  height: 100%; border-radius: 6px;
  background: linear-gradient(100deg, var(--graphite) 30%, var(--steel) 50%, var(--graphite) 70%);
  background-size: 260% 100%; animation: tileShimmer 1.4s ease-in-out infinite;
}

/* Grande courbe de la fiche valeur */
.quote-chart { margin-top: 26px; }
.quote-chart-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 12px;
}
.quote-chart-label {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--ash);
}
.quote-chart-delta { font-family: var(--font-mono); font-size: 13px; }
.quote-chart-delta.up { color: var(--success); }
.quote-chart-delta.down { color: var(--danger); }
.quote-chart-body { height: 190px; }
.quote-chart-body.loading {
  border-radius: 8px;
  background: linear-gradient(100deg, var(--graphite) 30%, var(--steel) 50%, var(--graphite) 70%);
  background-size: 260% 100%; animation: tileShimmer 1.4s ease-in-out infinite;
}
.quote-chart-body.empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--fog); font-size: 13px; background: var(--steel); border-radius: 8px;
}
.quote-chart-foot {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 10px;
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--fog);
}

/* ---------- Textes sur les tuiles blanches ---------- */
/* Les aplats chromatiques sont devenus blancs : tout ce qui s'y trouve
   doit passer en sombre, sinon le contenu disparaît sur le fond. */

.choice-card.selected .cicon,
.choice-card.selected .ctext b { color: var(--on-light); }
.choice-card.selected .ctext span { color: var(--on-light-soft); }

.quiz-result .score-circle small { color: var(--on-light-soft); }

.edu-quota.empty .edu-quota-text .icon-svg { color: var(--on-light); }
.edu-quota.empty .edu-quota-cta { background: var(--on-light); color: var(--pure); }

.score-tile .icon-svg { color: var(--on-light); }

.split-card .icon-svg, .feature-card .icon-svg { color: inherit; }

.offer.highlight .offer-note .icon-svg,
.offer.highlight li .icon-svg { color: var(--on-light); opacity: 0.55; }

.premium-card .premium-foot .icon-svg { color: var(--on-light); opacity: 0.55; }

.checkout-side .checkout-features li .icon-svg { opacity: 0.55; }
.checkout-panel .checkout-close { background: var(--on-light-fill); color: var(--on-light); }
.checkout-panel .checkout-close:hover { background: rgba(15,16,17,0.14); }

/* ---------- Couches d'argent ---------- */
/* Appliqué en filets et en icônes, jamais en aplat : l'argent souligne la
   structure sans jamais devenir la couleur dominante. */

/* Les pastilles majuscules portent un liseré argenté */
.eyebrow {
  border-color: var(--accent-soft);
  background: linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.10)), var(--accent-faint);
}
.eyebrow .icon-svg { color: var(--accent); }

/* Filet argenté sous les titres de section.
   En absolu : .section-title est un conteneur flex, un pseudo-élément en flux
   deviendrait un item et se retrouverait poussé à droite. */
.section-title { position: relative; padding-bottom: 13px; }
.section-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* Icônes des tuiles blanches : gris argent plutôt que noir */
.feature-card .feature-ic,
.split-card .icon-svg,
.score-tile .icon-svg { color: var(--accent-on-light); }
.offer.highlight li .icon-svg,
.premium-card ul li .icon-svg,
.checkout-side .checkout-features li .icon-svg { color: var(--accent-on-light); opacity: 1; }
.premium-card .eyebrow .icon-svg,
.checkout-side .eyebrow .icon-svg { color: var(--accent-on-light); }
.premium-card .eyebrow,
.checkout-side .eyebrow,
.offer .offer-badge { border: 1px solid rgba(106,115,128,0.30); }

/* Arête supérieure argentée sur les tuiles blanches */
.feature-card, .split-card, .score-tile, .offer.highlight,
.premium-card, .checkout-side, .edu-quota.empty { position: relative; }
.feature-card::before, .split-card::before, .score-tile::before,
.offer.highlight::before, .premium-card::before, .edu-quota.empty::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
  pointer-events: none;
}

/* Survol : la bordure vire à l'argent */
.market-tile:hover { border-color: var(--accent-soft); }
.theme-card:hover, .quick-tile:hover { box-shadow: inset 0 0 0 1px var(--accent-faint); }

/* XP et niveau en argent */
.xp-chip { border-color: var(--accent-soft); }
.xp-chip .xp-val { color: var(--accent); }
.progress-fill { background: linear-gradient(90deg, var(--accent), #ffffff); }
.level-xp { color: var(--accent); }

/* Le trait de progression des quiz et des paliers */
.mini-progress > div { background: linear-gradient(90deg, var(--accent-soft), var(--accent)); }

/* ---------- Pages légales ---------- */

.legal-page { max-width: 780px; }
.legal-intro { font-size: 17px; line-height: 1.6; color: var(--cloud); margin: 0 0 12px; }
.legal-updated {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--fog); margin: 0 0 8px;
}
.legal-section { margin-top: 44px; }
.legal-section h2 {
  font-family: var(--font-display); font-size: 30px; line-height: 1.05;
  margin: 0 0 18px; color: var(--pure); font-weight: 400;
}
.legal-section p { font-size: 15px; line-height: 1.7; color: var(--ash); margin: 0 0 14px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section a { color: var(--pure); text-decoration: underline; text-underline-offset: 3px; }
.legal-section code {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--steel); border-radius: 4px; padding: 2px 6px; color: var(--cloud);
}
.legal-section strong { color: var(--pure); font-weight: 500; }

.legal-list { list-style: none; padding: 0; margin: 0 0 14px; }
.legal-list li {
  position: relative; padding-left: 20px; margin-bottom: 12px;
  font-size: 15px; line-height: 1.7; color: var(--ash);
}
.legal-list li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 9px; height: 1px; background: var(--accent);
}

.legal-table { margin: 0 0 14px; }
.legal-row {
  display: grid; gap: 6px 18px; padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px; line-height: 1.55; color: var(--ash);
}
@media (min-width: 760px) { .legal-row { grid-template-columns: 1.4fr 1.4fr 1fr 0.9fr; } }
.legal-row.legal-head {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--fog); padding-top: 0;
}
.legal-row:last-child { border-bottom: none; }

.legal-note {
  background: var(--graphite); border-radius: var(--radius-sm);
  padding: 18px 20px; font-size: 14px !important; line-height: 1.65;
}
.legal-warning {
  background: var(--graphite); border-radius: var(--radius-sm);
  border-left: 2px solid var(--accent);
  padding: 18px 20px; color: var(--cloud) !important; font-size: 15px !important;
}

.site-footer-links {
  display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 26px;
}
.site-footer-links a {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ash); text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer-links a:hover { color: var(--pure); }
.site-footer-copy {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--fog); margin-top: 22px !important;
}

/* ---------- Bannière cookies ---------- */

.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 28px; flex-wrap: wrap;
  max-width: 1080px; margin: 0 auto;
  background: var(--graphite); border: 1px solid var(--accent-soft);
  border-radius: var(--radius-sm); padding: 20px 24px;
  animation: cookieIn 0.45s var(--ease-pro);
}
@keyframes cookieIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cookie-text { flex: 1 1 380px; font-size: 13.5px; line-height: 1.6; color: var(--ash); }
.cookie-text strong { display: block; color: var(--pure); font-weight: 500; margin-bottom: 4px; }
.cookie-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cookie-btn {
  border: none; cursor: pointer; border-radius: 999px; padding: 11px 20px;
  background: var(--pure); color: var(--void); white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.cookie-btn:hover { opacity: 0.85; }
.cookie-btn.ghost {
  background: transparent; color: var(--ash);
  border: 1px solid var(--border-strong);
}
.cookie-btn.ghost:hover { color: var(--pure); background: rgba(255,255,255,0.06); }
.cookie-link {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent-soft); padding-bottom: 2px;
}

/* ---------- XP en argent brossé ---------- */
/* Dégradé volontairement plat par rapport au logo : pas de cassure nette, pas
   de second éclat. Un chiffre qui change souvent ne doit pas scintiller —
   l'argent se devine, il n'accroche pas l'œil. */

:root {
  --silver-soft: linear-gradient(
    180deg,
    #ffffff 0%, #eef1f6 38%, #c4cbd7 68%, #e2e7ee 100%
  );
}

.xp-chip .xp-val,
.level-xp,
.xp-gain {
  background-image: var(--silver-soft);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.xp-chip .xp-val { display: inline-block; }
.xp-gain { color: transparent; }

/* =================================================================
   MOBILE — la barre à six onglets ne tient pas sous 900 px, et
   plusieurs tailles d'affichage pensées pour un grand écran doivent
   se resserrer. Tout ce qui suit ne s'applique qu'aux petits écrans.
   ================================================================= */

.nav-burger { display: none; }

@media (max-width: 899px) {
  .site-links { display: none; }
  .nav-burger {
    display: flex; align-items: center; justify-content: center;
    margin-left: auto; width: 42px; height: 42px; flex-shrink: 0;
    background: rgba(255,255,255,0.10); border: 1px solid var(--accent-soft);
    border-radius: var(--radius-xs); color: var(--pure); cursor: pointer;
  }
  .nav-burger:active { background: rgba(255,255,255,0.2); }
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 95;
  background: var(--obsidian);
  display: flex; flex-direction: column;
  padding: 18px 20px 28px;
  animation: menuIn 0.24s var(--ease-pro);
  overflow-y: auto;
}
.mobile-menu.closing { animation: menuOut 0.2s var(--ease-pro) forwards; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes menuOut { to { opacity: 0; transform: translateY(-10px); } }

.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mobile-menu-head .site-brand { padding: 0; }
.mobile-menu-close {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.10); border: 1px solid var(--border);
  border-radius: var(--radius-xs); color: var(--pure); cursor: pointer;
}

.mobile-menu-list { display: flex; flex-direction: column; margin-top: 34px; flex: 1; }
.mobile-menu-list button {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 20px 2px; text-align: left; cursor: pointer;
  background: transparent; border: none;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-size: 27px; font-weight: 400;
  color: var(--ash);
  animation: menuRowIn 0.34s var(--ease-pro) backwards;
  animation-delay: calc(var(--i) * 40ms + 60ms);
}
.mobile-menu-list button .icon-svg { color: var(--fog); flex-shrink: 0; }
.mobile-menu-list button.active { color: var(--pure); }
.mobile-menu-list button.active .icon-svg { color: var(--accent); }
@keyframes menuRowIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

.mobile-menu-foot { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 26px; }
.mobile-menu-foot a {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--fog); text-decoration: none;
}

@media (max-width: 720px) {
  /* Les très grandes tailles d'affichage écrasent la lecture sur un téléphone */
  .offer-price { font-size: 56px; margin: 10px 0 18px; }
  .split-badge { font-size: 56px; }
  .premium-price .font-display { font-size: 48px; }
  .checkout-amount .font-display { font-size: 46px; }
  .site-section h2, .site-final h2 { font-size: clamp(30px, 8.5vw, 42px); }
  .legal-section h2 { font-size: 24px; }
  .premium-card h3, .split-card h3, .feature-card h3 { font-size: 30px; }
  .checkout-main h2 { font-size: 28px; }

  /* Le champ de mots-clés doit rester lisible : iOS zoome sous 16 px */
  .search-bar input { font-size: 16px; }

  /* La scène d'accueil occupait 400 px dont beaucoup de vide */
  .site-hero-scene .hero-scene { height: 300px; }
  .site-hero { padding: 44px 0 30px; }

  /* Bandeau de quota : la pastille et le bouton passent l'un sous l'autre */
  .edu-quota { padding: 16px 18px; }
  .edu-quota-cta { width: 100%; }

  /* En-tête de page : le compteur revient sur la même ligne que le titre */
  .page-head { align-items: flex-start; }
  .xp-chip { font-size: 10px; padding: 6px 12px; }

  /* Tableau RGPD : en colonnes, chaque cellule est annoncée par son intitulé */
  .legal-row.legal-head { display: none; }
  .legal-row { gap: 4px; padding: 18px 0; }
  .legal-row span:nth-child(1)::before { content: "Donnée — "; color: var(--fog); }
  .legal-row span:nth-child(2)::before { content: "Finalité — "; color: var(--fog); }
  .legal-row span:nth-child(3)::before { content: "Base légale — "; color: var(--fog); }
  .legal-row span:nth-child(4)::before { content: "Où — "; color: var(--fog); }
}

@media (max-width: 560px) {
  /* Bannière cookies : compacte, elle mangeait la moitié de l'écran */
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: 16px 16px 14px; gap: 14px; }
  .cookie-text { font-size: 12.5px; line-height: 1.5; flex-basis: 100%; }
  .cookie-actions { width: 100%; gap: 8px; }
  .cookie-btn { flex: 1; padding: 12px 10px; font-size: 9px; letter-spacing: 0.1em; }
  .cookie-link { flex-basis: 100%; text-align: center; padding-top: 4px; }

  /* Le reflet de l'offre Premium, trop marqué sur une carte étroite */
  .offer.highlight::after { width: 75%; }
}

/* ---------- Prix d'achat et plus-value ---------- */

.buy-preview { margin: -4px 0 16px; }
.buy-hint { font-size: 12.5px; color: var(--fog); line-height: 1.5; }
.buy-preview.up, .buy-preview.down {
  background: var(--steel); border-radius: var(--radius-sm); padding: 6px 14px;
}
.buy-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.buy-row:last-child { border-bottom: none; }
.buy-row span {
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ash);
}
.buy-row strong { font-size: 14px; color: var(--pure); font-weight: 500; text-align: right; }
.buy-preview.up .buy-row.result strong { color: var(--success); }
.buy-preview.down .buy-row.result strong { color: var(--danger); }

.holding-row .hgain {
  display: block; margin-top: 3px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px;
}
.holding-row .hgain small { font-size: 9.5px; opacity: 0.8; }
.holding-row .hgain.up { color: var(--success); }
.holding-row .hgain.down { color: var(--danger); }

.auto-detect {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--steel); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 16px;
  font-size: 12.5px; line-height: 1.5; color: var(--ash);
}
.auto-detect .icon-svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

/* ---------- Quiz : récompense lisible et série ---------- */

.score-circle.perfect { box-shadow: 0 0 0 2px var(--accent-soft), 0 0 34px rgba(205,210,216,0.18); }

.streak-chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 20px;
  background: rgba(255,255,255,0.10); border: 1px solid var(--accent-soft);
  border-radius: 999px; padding: 7px 15px;
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--pure);
}
.streak-chip .icon-svg { color: var(--accent); }

.xp-breakdown {
  text-align: left; background: var(--steel); border-radius: var(--radius-sm);
  padding: 4px 16px; margin: 0 0 18px;
}
.xp-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.xp-line:last-child { border-bottom: none; }
.xp-line span {
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ash);
}
.xp-line strong { font-size: 14px; color: var(--pure); font-weight: 500; }
.xp-line.bonus strong { color: var(--accent); }

.quiz-teaser { font-size: 13px; line-height: 1.55; color: var(--ash); margin: 0 0 22px; }
.quiz-teaser strong { color: var(--pure); font-weight: 500; }



/* ---------- Répartition en barres verticales ---------- */
/* Remplace le donut : des hauteurs se comparent mieux que des angles.
   Aucune couleur de catégorie — un dégradé de blanc suffit, la hauteur
   porte seule l'information. */

.bars-card { padding: 30px 26px 24px; }

.bars-chart {
  display: flex; align-items: flex-end; gap: 10px;
  overflow-x: auto; scrollbar-width: none;
}
.bars-chart::-webkit-scrollbar { display: none; }

.vbar-col {
  flex: 1 1 0; min-width: 62px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}

.vbar-amount {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em;
  color: var(--fog); white-space: nowrap;
}

.vbar-track {
  width: 100%; height: 190px;
  display: flex; align-items: flex-end;
  background: rgba(255,255,255,0.04);
  border-radius: 6px 6px 3px 3px;
}
.vbar-fill {
  width: 100%; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #ffffff 0%, #e2e6ec 42%, #9aa3b0 100%);
  animation: barGrow 0.7s var(--ease-pro) backwards;
  animation-delay: var(--d, 0ms);
}
@keyframes barGrow { from { height: 0 !important; opacity: 0.3; } }

/* La barre principale se détache d'un cran, les suivantes s'estompent */
.vbar-col:nth-child(n+2) .vbar-fill { opacity: 0.82; }
.vbar-col:nth-child(n+4) .vbar-fill { opacity: 0.62; }
.vbar-col:nth-child(n+6) .vbar-fill { opacity: 0.46; }

.vbar-pct { font-size: 17px; color: var(--pure); }
.vbar-label {
  font-family: var(--font-mono); font-size: 8px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ash);
  text-align: center; line-height: 1.4; min-height: 22px;
}

@media (prefers-reduced-motion: reduce) { .vbar-fill { animation: none; } }


/* ---------- En-tête visuel de la page Patrimoine ---------- */
/* Le total, sa courbe, sa répartition et une jauge de plus-value.
   Pas d'encadré : les formes se posent directement sur le fond. */

.pat-head { padding: 4px 0 10px; }
.pat-head-label {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--fog);
}
.pat-total {
  font-size: clamp(46px, 8.6vw, 82px); line-height: 0.95;
  color: var(--pure); margin: 14px 0 0; letter-spacing: -0.015em;
}
.pat-delta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
}
.pat-delta.up { color: var(--success); }
.pat-delta.down { color: var(--danger); }

.pat-spark { margin: 26px 0 4px; height: 120px; }
.pat-spark svg { width: 100%; height: 100%; display: block; }

.pat-split { margin-top: 26px; }
.pat-split-bar {
  display: flex; height: 7px; gap: 2px;
  border-radius: var(--radius-pill); overflow: hidden;
}
.pat-split-bar span { display: block; height: 100%; }
.pat-split-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 15px; }
.pat-split-legend span {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ash);
}
.pat-split-legend i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Jauge de plus-value : la largeur du segment clair montre ce que
   représente le gain par rapport au capital investi. */
.pat-gain { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--border); }
.pat-gain-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.pat-gain-label {
  font-family: var(--font-mono); font-size: 8.5px;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--fog);
}
.pat-gain-val { font-size: 20px; color: var(--cloud); display: flex; align-items: baseline; gap: 9px; }
.pat-gain-val em {
  font-style: normal; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.05em; opacity: 0.75;
}
.pat-gain.up .pat-gain-val { color: var(--success); }
.pat-gain.down .pat-gain-val { color: var(--danger); }

.pat-gain-bar {
  display: flex; height: 10px; gap: 2px;
  border-radius: var(--radius-pill); overflow: hidden;
}
.pat-gain-bar .invested { background: rgba(255,255,255,0.22); }
.pat-gain.up .pat-gain-bar .delta { background: var(--success); }
.pat-gain.down .pat-gain-bar .delta { background: var(--danger); }
.pat-gain-bar span { display: block; height: 100%; transition: width 0.7s var(--ease-pro); }

.pat-gain-foot {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 12px;
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--fog);
}

/* ---------- Halos de fond ---------- */
/* Quelques dégradés blancs très dilués, fixes, pour que le noir ne soit pas
   un aplat mort. Strictement statiques : aucune animation, aucune image.
   Les halos doivent se voir sans écraser les cartes graphite : elles ne se
   lisent que parce qu elles sont plus claires que le fond. Les foyers sont
   donc resserrés plutôt que dilués sur toute la page. */

body::before {
  content: "";
  /* Débord vertical : le calque se déplace au défilement, la marge évite
     qu un bord vide n apparaisse en haut ou en bas. */
  position: fixed; inset: -28% 0; z-index: -1; pointer-events: none;
  transform: translate3d(0, calc(var(--scroll-y, 0) * -16vh), 0);
  opacity: calc(1 - var(--scroll-y, 0) * 0.35);
  will-change: transform, opacity;
  background:
    /* lueur haute, côté logo */
    radial-gradient(ellipse 58% 42% at 14% -4%, rgba(255,255,255,0.15), transparent 58%),
    /* contre-jour à droite, plus bas, qui creuse la diagonale */
    radial-gradient(ellipse 46% 38% at 92% 26%, rgba(255,255,255,0.10), transparent 60%),
    /* remontée douce depuis le bas, pour que la page ne se referme pas */
    radial-gradient(ellipse 78% 44% at 52% 104%, rgba(255,255,255,0.075), transparent 62%),
    /* voile central très faible : évite la zone morte au milieu */
    radial-gradient(ellipse 70% 55% at 50% 52%, rgba(255,255,255,0.035), transparent 68%);
}

/* ---------- Barre de navigation flottante (ordinateur) ---------- */
/* La bande noire pleine largeur coupait la page en deux. À partir de 900 px
   la barre devient une pilule posée sur le contenu : le fond reste visible
   au-dessus et sur les côtés, et le verre dépoli fait le reste. */

@media (min-width: 900px) {
  .site-nav {
    position: sticky; top: 18px; z-index: 30;
    margin: 18px auto 0; padding: 0;
    width: min(var(--page-max), 100%);   /* aligné sur la colonne de contenu */
    background: rgba(22, 24, 27, 0.55);
    backdrop-filter: blur(26px) saturate(140%);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--radius-pill);
    /* Ombre portée très douce : elle décolle la pilule sans l assombrir */
    box-shadow:
      0 1px 0 rgba(255,255,255,0.06) inset,
      0 18px 40px -22px rgba(0,0,0,0.9);
    transition: background 0.3s var(--ease-pro), border-color 0.3s var(--ease-pro);
  }
  .site-nav:hover { background: rgba(26, 28, 32, 0.66); border-color: rgba(255,255,255,0.14); }

  .site-nav-inner { padding: 10px 12px 10px 22px; gap: 24px; }

  /* Onglets en pastilles discrètes : le fond gris permanent faisait lourd */
  .site-links { gap: 2px; }
  .site-links button {
    background: transparent; border: 1px solid transparent;
    border-radius: var(--radius-pill); padding: 9px 15px;
    color: var(--ash);
    transition: color 0.2s var(--ease-pro), background 0.2s var(--ease-pro);
  }
  .site-links button:hover { background: rgba(255,255,255,0.08); color: var(--pure); }
  .site-links button.active {
    background: var(--pure); color: var(--void); border-color: transparent;
  }
}

/* Même pilule sur téléphone, resserrée : marges réduites, coins un peu
   moins ronds et flou allégé — le flou coûte cher sur mobile. */
@media (max-width: 899px) {
  .site-nav {
    position: sticky; top: 10px;
    margin: 10px auto 0; padding: 0;
    width: 100%;   /* aligné sur la gouttière de la page */
    background: rgba(22, 24, 27, 0.62);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--radius-pill);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.06) inset,
      0 14px 30px -20px rgba(0,0,0,0.9);
  }
  .site-nav-inner { padding: 8px 8px 8px 16px; gap: 12px; }
  .site-brand { font-size: 19px; }
  .site-brand .logo-mark { width: 22px; height: 22px; }
  .nav-burger { width: 38px; height: 38px; border-radius: var(--radius-pill); }
}

/* Le pourcentage remplace le niveau dans l'orbe et le cercle de score */
.level-orb-num small, .score-circle .font-display small {
  font-family: var(--font-mono); font-size: 0.34em;
  letter-spacing: 0.06em; margin-left: 2px; opacity: 0.7;
}

/* ---------- Éducation : repères de rythme ---------- */
/* Trois chiffres et un jalon, pour situer l'effort sans le transformer en
   score. Le but est de donner envie de reprendre, pas de faire gagner. */

.edu-rhythm {
  background: var(--graphite); border-radius: var(--radius-sm);
  padding: 22px 24px 20px; margin-bottom: 28px;
}
.edu-rhythm-stats { display: grid; gap: 16px 28px; }
@media (min-width: 620px) { .edu-rhythm-stats { grid-template-columns: repeat(3, 1fr); } }
.edu-stat { display: flex; flex-direction: column; gap: 7px; }
.edu-stat span {
  font-family: var(--font-mono); font-size: 8.5px;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--fog);
}
.edu-stat strong { font-size: 18px; color: var(--cloud); font-weight: 400; }
.edu-stat strong.soft { font-size: 13px; color: var(--fog); }

.edu-rhythm-bar {
  height: 3px; margin-top: 20px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.10); overflow: hidden;
}
.edu-rhythm-bar > div {
  height: 100%; background: linear-gradient(90deg, var(--accent-soft), var(--pure));
  transition: width 0.7s var(--ease-pro);
}

.edu-milestone {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 16px;
  font-size: 13.5px; line-height: 1.5; color: var(--ash);
}
.edu-milestone .icon-svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

/* ---------- Module : repères de parcours ---------- */

.lesson-progress {
  height: 2px; margin: 14px 0 22px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.10); overflow: hidden;
}
.lesson-progress > div {
  height: 100%; background: var(--pure);
  transition: width 0.6s var(--ease-pro);
}

.lesson-next {
  display: flex; align-items: center; gap: 8px; margin-top: 20px;
  padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--fog);
}
.lesson-next strong { color: var(--cloud); font-weight: 400; }
.lesson-next .icon-svg { color: var(--accent); flex-shrink: 0; }

/* ---------- Bilan de thème ---------- */

.theme-bilan {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 20px; flex-wrap: wrap;
  background: var(--graphite); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px 20px; margin: 0 0 26px;
}
.theme-bilan.ready { border-color: var(--accent-soft); }
.theme-bilan-text {
  display: flex; align-items: flex-start; gap: 10px; flex: 1 1 260px;
  font-size: 13.5px; line-height: 1.55; color: var(--ash);
}
.theme-bilan-text strong { color: var(--pure); font-weight: 500; }
.theme-bilan-text .icon-svg { color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.theme-bilan-btn {
  background: var(--pure); color: var(--void); border: none; cursor: pointer;
  border-radius: 999px; padding: 10px 18px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.theme-bilan-btn:hover { opacity: 0.86; }

/* Rappel de la leçon d'origine au-dessus de chaque question */
.quiz-source {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--fog);
}
.quiz-source .icon-svg { color: var(--accent); }