:root {
  --encre: #0D0A25;
  --indigo: #241B4F;
  --rose: #E0297B;
  --bleu-ciel: #2E74C2;
  --blanc: #FFFFFF;
  --lavande: #ADA7CC;
  --radius: 20px;
  --shadow: 0 12px 32px rgba(13, 10, 37, 0.35);
  --page-bg: radial-gradient(ellipse 1400px 1000px at 50% 30%, #2b2264 0%, #1a1442 45%, #0D0A25 100%);
}

/* Mode clair : identite visuelle officielle (voir css/Identite visuelle
   cours maths/design_handoff_identite_visuelle/README.md), pas une simple
   inversion des variables sombres. --blanc porte le texte (encre #0D0A25),
   --encre porte le fond (blanc pur), --indigo les panneaux (lavande pastel).
   Les surfaces sombres codees en dur (rgba blanc translucide) sont
   surchargees plus bas, en fin de fichier. */
html[data-theme="light"] {
  --encre: #FFFFFF;
  --indigo: #DCD5F2;
  --blanc: #0D0A25;
  --lavande: #6C6590;
  --rose-pastel: #F7D9E9;
  --bleu-pastel: #CDE1F6;
  --shadow: 0 14px 30px rgba(36, 27, 79, 0.16);
  --page-bg: radial-gradient(ellipse 1400px 1000px at 50% 30%, #F4F0FF 0%, #EAE3F8 45%, #FFFFFF 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Quicksand", sans-serif;
  color: var(--blanc);
  background: var(--encre);
  line-height: 1.5;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

h1, h2, h3 {
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--blanc);
}

.eyebrow {
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lavande);
  text-align: center;
  margin-bottom: 10px;
}
.eyebrow-dark { color: var(--bleu-ciel); }

.section-subtitle {
  color: var(--lavande);
  font-size: 1.1rem;
  max-width: 620px;
  margin: 0 auto 40px;
  text-align: center;
}

section h2 { text-align: center; font-size: 2.1rem; }

/* Wordmark */
.wordmark {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.wm-logi { color: var(--blanc); }
.wm-maths { color: var(--rose); }
.wordmark-sm { font-size: 1.4rem; }
.wordmark-lg { font-size: 3rem; margin-bottom: 14px; }

/* Logo ring */
.logo-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 6px solid var(--rose);
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
}
.logo-ring img { width: 86%; height: 86%; object-fit: contain; }
.logo-ring-sm { width: 44px; height: 44px; border-width: 3px; }
.logo-ring-lg { width: 150px; height: 150px; margin-bottom: 18px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled {
  cursor: default;
  opacity: 0.75;
  transform: none;
}
.btn-icon { flex-shrink: 0; }
.btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* .btn-primary/.btn-secondary : rose et bleu ciel restent des couleurs de
   marque fixes dans les deux modes (voir identite visuelle), donc le texte
   dessus doit rester blanc fixe -- var(--blanc) s'inverse en encre foncee
   en mode clair et devient illisible sur ce fond colore. */
.btn-primary {
  background: var(--rose);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(224, 41, 123, 0.4);
}
.btn-secondary {
  background: var(--bleu-ciel);
  color: #FFFFFF;
  border: 2px solid var(--bleu-ciel);
  box-shadow: 0 8px 20px rgba(46, 116, 194, 0.4);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(13, 10, 37, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.header-actions { display: flex; align-items: center; gap: 18px; }

.main-nav { display: flex; gap: 28px; }
.main-nav a {
  color: var(--lavande);
  text-decoration: none;
  font-weight: 600;
}
.main-nav a:hover { color: var(--blanc); }

.btn-nav { padding: 10px 22px; font-size: 0.95rem; }

/* Decorative blobs */
.blob {
  position: absolute;
  border-radius: 999px;
  background: var(--bleu-ciel);
  filter: blur(4px);
  z-index: 0;
  pointer-events: none;
}
.blob-hero {
  width: 480px;
  height: 480px;
  opacity: 0.35;
  bottom: -240px;
  left: 50%;
  transform: translateX(-50%);
}
/* Hero side decorations (Pythagore / Thalès) */
.hero-deco {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}
.hero-deco-left { left: 220px; }
.hero-deco-right { right: 220px; }
.hero .hero-deco-left { left: 520px; width: 210px; top: 130px; }
.hero .hero-deco-right { right: 520px; width: 210px; top: 130px; }

/* Formules animees (identites remarquables, discriminant, Tchebychev, IPP) */
.fx {
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 32px;
  text-anchor: middle;
  opacity: 0;
}
.fx-big { font-size: 42px; }
.fx-title {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 24px;
  text-anchor: middle;
  fill: var(--lavande);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0;
}
.t-blanc { fill: var(--blanc); }
.t-bleu { fill: var(--bleu-ciel); }
.t-rose { fill: var(--rose); }
.fx-bar {
  stroke: var(--blanc);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
}
.deco-tcheb .fx-bar { stroke: var(--rose); }
.fxA { animation: fxA 9s ease-in-out infinite; }
.fxB { animation: fxB 9s ease-in-out infinite; }
.fxC { animation: fxC 9s ease-in-out infinite; }
@keyframes fxA {
  0%, 100% { opacity: 0; }
  8%, 92% { opacity: 1; }
}
@keyframes fxB {
  0%, 20%, 100% { opacity: 0; }
  28%, 92% { opacity: 1; }
}
@keyframes fxC {
  0%, 40%, 100% { opacity: 0; }
  48%, 92% { opacity: 1; }
}
.deco-svg { width: 100%; height: auto; overflow: visible; }

/* Alterne 2 animations dans un meme emplacement (ex: Thales triangle <->
   papillon, ou Pythagore <-> trigo). display:none plutot qu'un fondu
   d'opacite : (1) reafficher un element relance ses animations CSS a 0%,
   donc chaque figure redemarre au debut de son trace quand elle revient ;
   (2) la frame active reste seule en flux normal et donne sa hauteur au
   conteneur .hero-deco (dont le translateY(-50%) remonte l'animation).
   La bascule est faite par js/main.js pile aux frontieres du cycle de 9s,
   au moment ou la figure sortante vient de s'effacer d'elle-meme. */
.deco-frame { display: none; }
.deco-frame.is-active { display: block; }

/* Pythagore */
.pyth-triangle {
  fill: none;
  stroke: var(--lavande);
  stroke-width: 3;
  opacity: 0;
  animation: pythFade 9s ease-in-out infinite;
}
.pyth-square {
  fill-opacity: 0.12;
  stroke-width: 3;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}
.sq-a { stroke: var(--blanc); fill: var(--blanc); animation: pythDrawA 9s ease-in-out infinite; }
.sq-b { stroke: var(--bleu-ciel); fill: var(--bleu-ciel); animation: pythDrawB 9s ease-in-out infinite; }
.sq-c {
  stroke: var(--rose);
  fill: var(--rose);
  animation: pythDrawC 9s ease-in-out infinite, pythGlow 9s ease-in-out infinite;
}
.pyth-angle {
  fill: none;
  stroke: var(--lavande);
  stroke-width: 2.5;
  opacity: 0;
  animation: pythFade 9s ease-in-out infinite;
}
.pyth-label {
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 30px;
  text-anchor: middle;
  dominant-baseline: central;
  opacity: 0;
}
.lbl-a { fill: var(--blanc); animation: pythDrawA 9s ease-in-out infinite; }
.lbl-b { fill: var(--bleu-ciel); animation: pythDrawB 9s ease-in-out infinite; }
.lbl-c { fill: var(--rose); animation: pythDrawC 9s ease-in-out infinite; }
.pyth-point {
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 22px;
  fill: var(--blanc);
  text-anchor: middle;
  dominant-baseline: central;
  opacity: 0;
  animation: pythFade 9s ease-in-out infinite;
}
.pyth-eq {
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 32px;
  fill: var(--blanc);
  text-anchor: middle;
  opacity: 0;
  animation: eqReveal 9s ease-in-out infinite;
}
@keyframes eqReveal {
  0%, 55%, 100% { opacity: 0; }
  62%, 92% { opacity: 1; }
}

@keyframes pythFade {
  0%, 100% { opacity: 0; }
  6%, 92% { opacity: 1; }
}
@keyframes pythDrawA {
  0%, 100% { opacity: 0; stroke-dashoffset: 100; }
  10% { opacity: 1; }
  25%, 92% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes pythDrawB {
  0%, 22%, 100% { opacity: 0; stroke-dashoffset: 100; }
  28% { opacity: 1; }
  42%, 92% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes pythDrawC {
  0%, 38%, 100% { opacity: 0; stroke-dashoffset: 100; }
  44% { opacity: 1; }
  58%, 92% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes pythGlow {
  0%, 60%, 100% { filter: drop-shadow(0 0 0 rgba(224, 41, 123, 0)); }
  78% { filter: drop-shadow(0 0 8px rgba(224, 41, 123, 0.9)); }
  92% { filter: drop-shadow(0 0 0 rgba(224, 41, 123, 0)); }
}

/* Thales */
.thales-ray {
  stroke: var(--lavande);
  stroke-width: 2.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: thalesDrawRay 9s ease-in-out infinite;
}
.thales-parallel {
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}
.thales-p1 { stroke: var(--bleu-ciel); animation: thalesDrawP1 9s ease-in-out infinite; }
.thales-p2 { stroke: var(--rose); animation: thalesDrawP2 9s ease-in-out infinite, thalesGlow 9s ease-in-out infinite; }
.thales-dot {
  fill: var(--blanc);
  opacity: 0;
  animation: thalesDots 9s ease-in-out infinite;
}
.thales-point {
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 20px;
  fill: var(--blanc);
  text-anchor: middle;
  dominant-baseline: central;
  opacity: 0;
  animation: thalesDots 9s ease-in-out infinite;
}
.thales-eq {
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 25px;
  fill: var(--blanc);
  text-anchor: middle;
  opacity: 0;
  animation: eqReveal 9s ease-in-out infinite;
}
.thales-eq line {
  stroke: var(--blanc);
  stroke-width: 2;
  stroke-linecap: round;
}

@keyframes thalesDrawRay {
  0%, 100% { opacity: 0; stroke-dashoffset: 100; }
  6% { opacity: 1; }
  20%, 92% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes thalesDrawP1 {
  0%, 24%, 100% { opacity: 0; stroke-dashoffset: 100; }
  30% { opacity: 1; }
  40%, 92% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes thalesDrawP2 {
  0%, 40%, 100% { opacity: 0; stroke-dashoffset: 100; }
  46% { opacity: 1; }
  56%, 92% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes thalesGlow {
  0%, 60%, 100% { filter: drop-shadow(0 0 0 rgba(46, 116, 194, 0)); }
  78% { filter: drop-shadow(0 0 7px rgba(224, 41, 123, 0.85)); }
  92% { filter: drop-shadow(0 0 0 rgba(46, 116, 194, 0)); }
}
@keyframes thalesDots {
  0%, 100% { opacity: 0; }
  10%, 92% { opacity: 1; }
}

/* Thalès configuration papillon */
.papillon-line {
  fill: none;
  stroke: var(--lavande);
  stroke-width: 2.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: papillonLine 9s ease-in-out infinite;
}
.papillon-seg {
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}
.papillon-top { stroke: var(--bleu-ciel); animation: papillonTop 9s ease-in-out infinite; }
.papillon-bottom { stroke: var(--rose); animation: papillonBottom 9s ease-in-out infinite, papillonGlow 9s ease-in-out infinite; }
.papillon-dot { fill: var(--blanc); opacity: 0; animation: papillonDots 9s ease-in-out infinite; }
.papillon-point {
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 20px;
  fill: var(--blanc);
  text-anchor: middle;
  dominant-baseline: central;
  opacity: 0;
  animation: papillonDots 9s ease-in-out infinite;
}
.papillon-eq {
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 20px;
  fill: var(--blanc);
  text-anchor: middle;
  opacity: 0;
  animation: eqReveal 9s ease-in-out infinite;
}
.papillon-eq line {
  stroke: var(--blanc);
  stroke-width: 2;
  stroke-linecap: round;
}
.frac-bleu { fill: var(--bleu-ciel); }
.frac-rose { fill: var(--rose); }

@keyframes papillonLine {
  0%, 100% { opacity: 0; stroke-dashoffset: 100; }
  6% { opacity: 1; }
  20%, 92% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes papillonTop {
  0%, 24%, 100% { opacity: 0; stroke-dashoffset: 100; }
  30% { opacity: 1; }
  40%, 92% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes papillonBottom {
  0%, 40%, 100% { opacity: 0; stroke-dashoffset: 100; }
  46% { opacity: 1; }
  56%, 92% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes papillonGlow {
  0%, 60%, 100% { filter: drop-shadow(0 0 0 rgba(224, 41, 123, 0)); }
  78% { filter: drop-shadow(0 0 7px rgba(224, 41, 123, 0.85)); }
  92% { filter: drop-shadow(0 0 0 rgba(224, 41, 123, 0)); }
}
@keyframes papillonDots {
  0%, 100% { opacity: 0; }
  10%, 92% { opacity: 1; }
}

/* Trigonométrie SOH CAH TOA */
.trigo-triangle {
  fill: none;
  stroke: var(--lavande);
  stroke-width: 3;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: trigoTriangle 9s ease-in-out infinite;
}
.trigo-arc {
  fill: none;
  stroke: var(--rose);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: trigoArc 9s ease-in-out infinite;
}
.trigo-angle {
  fill: none;
  stroke: var(--lavande);
  stroke-width: 2.5;
  opacity: 0;
  animation: trigoTriangle 9s ease-in-out infinite;
}
.trigo-theta {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 30px;
  fill: var(--rose);
  text-anchor: middle;
  opacity: 0;
  animation: trigoArc 9s ease-in-out infinite;
}
.trigo-hl {
  stroke-width: 4.5;
  stroke-linecap: round;
  opacity: 0;
}
.trigo-soh { stroke: var(--bleu-ciel); animation: trigoSoh 9s ease-in-out infinite; }
.trigo-cah { stroke: var(--rose); animation: trigoCah 9s ease-in-out infinite; }
.trigo-toa { stroke: var(--blanc); animation: trigoToa 9s ease-in-out infinite; }
.trigo-label {
  font-family: 'Baloo 2', sans-serif;
  font-size: 26px;
  font-weight: 800;
  text-anchor: middle;
  opacity: 0;
}
.trigo-label-soh { fill: var(--bleu-ciel); animation: trigoSoh 9s ease-in-out infinite; }
.trigo-label-cah { fill: var(--rose); animation: trigoCah 9s ease-in-out infinite; }
.trigo-label-toa { fill: var(--blanc); animation: trigoToa 9s ease-in-out infinite; }

@keyframes trigoTriangle {
  0%, 100% { opacity: 0; stroke-dashoffset: 100; }
  6% { opacity: 1; }
  16%, 92% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes trigoArc {
  0%, 16%, 100% { opacity: 0; stroke-dashoffset: 100; }
  22% { opacity: 1; }
  28%, 92% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes trigoSoh {
  0%, 26%, 68%, 100% { opacity: 0; }
  32%, 62% { opacity: 1; }
}
@keyframes trigoCah {
  0%, 42%, 100% { opacity: 0; }
  48%, 78% { opacity: 1; }
  82% { opacity: 0; }
}
@keyframes trigoToa {
  0%, 58%, 100% { opacity: 0; }
  64%, 88% { opacity: 1; }
  92% { opacity: 0; }
}

/* En dessous de 1620px, le texte du hero (titre, eyebrow, h2) occupe une
   largeur trop proche de celle du conteneur pour laisser une zone libre
   fiable de chaque cote : les animations decoratives s'y retrouvent
   systematiquement derriere ou par-dessus le texte. Elles sont donc
   masquees (elles sont deja aria-hidden, purement decoratives) plutot que
   rapetissees a l'infini en esperant un espace qui n'existe plus. La
   version desktop fixe (left/right: 520px, largeur 210px) ne degage
   vraiment le logo (150px) qu'a partir de viewport/2 - 75 >= 520 + 210,
   soit ~1610px de large (verifie par calcul, l'overlap etait visible de
   1400 a 1610px) ; en dessous, la version "iPad" compacte (calc 50%)
   prend le relais. Scope a .hero uniquement : les autres sections
   (identites remarquables/discriminant sur .levels, Tchebychev/IPP sur
   .lives-section) ont leurs propres offsets, bien plus proches des bords,
   et n'ont besoin d'etre masquees qu'en dessous de 1200px (regle plus bas)
   -- sans ce scope, elles restaient invisibles jusqu'a 1620px pour rien. */
@media (max-width: 1620px) {
  .hero .hero-deco { display: none; }
}
@media (max-width: 1200px) {
  .levels .hero-deco,
  .lives-section .hero-deco { display: none; }
}

/* Version iPad/petit desktop (~641-1619px) : le texte occupe presque toute
   la largeur du conteneur, donc les animations reapparaissent en petit
   format, positionnees pres du logo (comme sur mobile et grand desktop)
   plutot que collees aux bords ou en position fixe. */
@media (min-width: 641px) and (max-width: 1620px) {
  .hero .hero-deco {
    display: block;
    width: 160px;
    top: 40px;
    transform: none;
    opacity: 0.6;
    z-index: 2;
  }
  /* 250px = moitie du logo (75px) + largeur de l'animation (160px) + marge (15px) */
  .hero .hero-deco-left { left: calc(50% - 250px); }
  .hero .hero-deco-right { right: calc(50% - 250px); }
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--page-bg);
  padding: 48px 0 88px;
  text-align: center;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero h1 {
  font-size: 2.75rem;
  max-width: 700px;
}
.hero-subtitle {
  font-size: 1.15rem;
  color: var(--lavande);
  max-width: 520px;
  margin: 0 auto 32px;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero-ctas .btn { min-width: 240px; }
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}
.hero-tags li {
  padding: 6px 16px;
  border: 1px solid var(--lavande);
  border-radius: 999px;
  color: var(--lavande);
  font-size: 0.82rem;
  font-weight: 600;
}

/* Annales promo */
.annales-promo { padding: 72px 0 0; }
.annales-banner {
  position: relative;
  background: linear-gradient(135deg, rgba(224, 41, 123, 0.16) 0%, rgba(46, 116, 194, 0.14) 100%);
  border: 2px solid var(--rose);
  border-radius: var(--radius);
  padding: 44px 40px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(224, 41, 123, 0.18);
}
.annales-banner-img {
  position: absolute;
  left: 40px;
  bottom: -44px;
  width: 190px;
}
.annales-banner-text { text-align: center; }
.annales-banner h2 { font-size: 2rem; margin-bottom: 10px; }
.annales-banner p {
  color: var(--lavande);
  max-width: 640px;
  margin: 0 auto 26px;
}
.annales-banner-stats {
  display: flex;
  gap: 40px;
  justify-content: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .annales-banner { text-align: center; }
  .annales-banner-img { position: static; width: 130px; margin: 0 auto 20px; }
  .annales-banner-text { text-align: center; }
  .annales-banner p { margin: 0 auto 26px; }
  .annales-banner-stats { justify-content: center; }
}
.stat { display: flex; flex-direction: column; }
.stat-num {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--rose);
  line-height: 1;
}
.stat-label {
  color: var(--lavande);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Social section */
.social-section { padding: 80px 0 20px; }
.social-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  max-width: 720px;
  margin: 70px auto 0;
}
/* Luna au micro, posee sur le bord superieur du cadre "abonnes au total".
   L'image est DANS .social-total (pas dans la grille au-dessus) pour
   suivre le translateY(-4px) du cadre au survol : le rebond emmene la
   mascotte avec lui. */
.social-total-mascot {
  position: absolute;
  bottom: calc(100% - 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  pointer-events: none;
}
.social-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 38px 28px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--blanc);
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.social-block:hover { transform: translateY(-4px); }
.social-block-youtube {
  background: linear-gradient(160deg, rgba(255, 0, 0, 0.22) 0%, rgba(255, 0, 0, 0.08) 100%);
  border-color: #FF0000;
}
.social-block-youtube svg { color: #FF0000; }
.social-block-youtube:hover { box-shadow: 0 10px 30px rgba(255, 0, 0, 0.25); }
.social-block-tiktok {
  background: linear-gradient(160deg, rgba(224, 41, 123, 0.22) 0%, rgba(224, 41, 123, 0.08) 100%);
  border-color: var(--rose);
}
.social-block-tiktok svg { color: var(--rose); }
.social-block-tiktok:hover { box-shadow: 0 10px 30px rgba(224, 41, 123, 0.25); }
.social-name {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  margin-top: 6px;
}
.social-handle { color: var(--lavande); font-size: 0.92rem; font-weight: 600; }
.social-count {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  margin-top: 10px;
}
.social-block-youtube .social-count { color: #ff5c5c; }
.social-block-tiktok .social-count { color: var(--rose); }
.social-count-label {
  color: var(--lavande);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Decorations casees dans la marge haute de section (au-dessus de l'eyebrow),
   plutot que chevauchant le titre : chaque section a 96px de padding-top
   avant l'eyebrow, donc top:0 + une hauteur <96px tient dans cette bande
   sans jamais toucher le texte -- et sans les faire deborder du haut de
   la section (ce qui les rendrait invisibles, chaque section ayant
   overflow:hidden pour son blob de fond). */
.levels .hero-deco-left,
.levels .hero-deco-right {
  top: 60px;
  transform: none;
  width: 130px;
}
.levels .hero-deco-left { left: calc(50% - 340px); }
.levels .hero-deco-right { right: calc(50% - 340px); }

.cta-section { position: relative; overflow: hidden; }
/* Les animations Tchebychev / IPP encadrent le titre "Prochains lives"
   (deplacees depuis la section contact ou elles genaient le compteur). */
.lives-section { position: relative; overflow: hidden; }
.lives-section .hero-deco-left,
.lives-section .hero-deco-right {
  top: 30px;
  transform: none;
  width: 170px;
}
.lives-section .hero-deco-left { left: calc(50% - 320px); }
.lives-section .hero-deco-right { right: calc(50% - 320px); }

.social-total {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 26px auto 0;
  max-width: 720px;
  padding: 32px 28px;
  border-radius: var(--radius);
  border: 2px solid var(--rose);
  background: linear-gradient(160deg, rgba(255, 0, 0, 0.16) 0%, rgba(224, 41, 123, 0.16) 100%);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.social-total:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(224, 41, 123, 0.25);
}
.social-total-num {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 3.2rem;
  line-height: 1;
  background: linear-gradient(90deg, #ff5c5c 0%, var(--rose) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.social-total-label {
  color: var(--lavande);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lives-section { padding: 60px 0 20px; text-align: center; background: var(--indigo); }
.lives-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
  margin: 32px auto 0;
}
.live-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
  text-align: left;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.live-item:hover { transform: translateY(-2px); border-color: var(--rose); }
.live-date {
  flex-shrink: 0;
  /* Largeur fixe pour que le titre (partie blanche) commence a la meme
     colonne sur chaque carte, quelle que soit la longueur de la date. */
  min-width: 190px;
  color: var(--rose);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: capitalize;
}
@media (max-width: 560px) {
  .live-date { min-width: 0; }
  .live-item { flex-wrap: wrap; }
}
.live-title {
  color: var(--blanc);
  font-weight: 600;
  font-size: 0.92rem;
}

/* Levels */
.levels { padding: 96px 0; position: relative; overflow: hidden; }
.levels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.level-card {
  display: block;
  /* Meme degrade rose -> bleu ciel que le grand cadre des annales
     au-dessus (.annales-banner), juste plus discret. */
  background: linear-gradient(135deg, rgba(224, 41, 123, 0.12) 0%, rgba(46, 116, 194, 0.10) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 36px 28px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, border-color 0.15s ease;
  text-decoration: none;
  color: var(--blanc);
}
.level-card:hover { border-color: var(--rose); }
.level-card:hover { transform: translateY(-6px); }
.level-icon { font-size: 2.5rem; margin-bottom: 12px; }
.level-card h3 { font-size: 1.3rem; }
.level-card p { color: var(--lavande); margin: 0; }
.level-card-postbac { position: relative; overflow: visible; }
.level-card-mascot {
  position: absolute;
  top: -144px;
  right: 20px;
  width: 130px;
  pointer-events: none;
}

/* Video extract */
.video-extract {
  position: relative;
  overflow: hidden;
  background: var(--indigo);
  padding: 96px 0;
}
.video-wrapper {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* CTA */
.cta-section {
  /* Haut reduit pour que le compte a rebours reste proche de la liste des
     prochains lives affichee juste au-dessus. */
  padding: 18px 0 96px;
  background: var(--encre);
}
.cta-inner { text-align: center; }
.signup-form {
  display: flex;
  gap: 12px;
  justify-content: center;
  max-width: 480px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.signup-form input[type="email"] {
  flex: 1;
  min-width: 240px;
  padding: 14px 18px;
  border-radius: 999px;
  border: none;
  font-family: "Quicksand", sans-serif;
  font-size: 1rem;
}
.signup-form select {
  flex: 1;
  min-width: 140px;
  padding: 14px 40px 14px 18px;
  border-radius: 999px;
  border: none;
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--encre);
  background-color: var(--blanc);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'%3E%3Cpath fill='%230D0A25' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.signup-form select:invalid { color: var(--indigo); }
.signup-message {
  margin-top: 16px;
  color: var(--rose);
  font-weight: 600;
}
.signup-legal {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--lavande);
}
.signup-legal a { color: var(--lavande); text-decoration: underline; }
.signup-banner {
  background: var(--indigo);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 18px 0;
}
.signup-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}
.signup-banner-text { margin: 0; color: var(--blanc); font-size: 0.95rem; }
.signup-banner-text strong { color: var(--rose); }
/* Compte a rebours avant le prochain live (insere en JS si un live est
   programme) : libelle + compteur segmente compact (live-timer-sm). */
.live-countdown-row {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 8px;
}
/* Sur l'accueil, le compteur est suivi d'un gros titre (h2) : plus d'air
   qu'entre le compteur et un simple champ de formulaire (pages niveau). */
.cta-inner .live-countdown-row { margin-bottom: 28px; }
.live-countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--blanc);
  font-size: 0.9rem;
  font-weight: 700;
}
.live-countdown strong { color: #ff5252; }
.live-timer-sm { gap: 6px; }
.live-timer-sm .lb-num { font-size: 1.15rem; padding: 1px 7px; border-radius: 6px; }
.live-timer-sm .lb-unit { font-size: 0.55rem; }
.live-timer-sm .lb-colon { font-size: 1.05rem; margin-top: 1px; }
.live-countdown-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5252;
  animation: live-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes live-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}
.signup-form-compact { max-width: none; }
.signup-form-compact input[type="email"] { min-width: 200px; padding: 10px 16px; }
.signup-form-compact select { min-width: 120px; padding: 10px 32px 10px 14px; font-size: 0.9rem; }
.btn-sm { padding: 10px 20px; font-size: 0.9rem; }
.signup-message-banner {
  text-align: center;
  margin: 0;
  padding: 8px 0 0;
  background: var(--indigo);
}
.signup-consent {
  text-align: center;
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--lavande);
  opacity: 0.85;
}

/* Footer */
.site-footer {
  background: var(--encre);
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.footer-copy { margin: 0; font-size: 0.9rem; color: var(--lavande); }
/* Liens du pied de page (La methode, Confidentialite) : blancs et gras,
   meme couleur une fois visites (pas de violet navigateur), rose au survol.
   var(--blanc) suit le theme (blanc en sombre, encre en clair). */
.footer-copy a,
.footer-copy a:visited { color: var(--blanc); font-weight: 700; }
.footer-copy a:hover { color: var(--rose); }
.visitor-counter {
  flex-basis: 100%;
  order: 10;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--lavande);
}
.visitor-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 0 rgba(46, 204, 113, 0.5);
  animation: visitor-pulse 2s infinite;
}
@keyframes visitor-pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.social-links { display: flex; gap: 14px; }
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--lavande);
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.social-link:hover {
  color: var(--rose);
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.social-link-lg {
  width: 44px;
  height: 44px;
  box-shadow: 0 4px 12px rgba(13, 10, 37, 0.25);
}
.social-link-youtube { background: #FF0000; color: #FFFFFF; }
.social-link-youtube:hover { background: #e60000; color: #FFFFFF; transform: translateY(-2px) scale(1.06); }
/* Le triangle du logo YouTube (fill="var(--encre)" dans le SVG) doit rester
   fonce sur le rectangle blanc dans les deux modes -- var(--encre) devient
   blanc en mode clair et le rendrait invisible. */
.social-link-youtube svg path { fill: #0D0A25; }
.social-link-tiktok { background: var(--rose); color: #FFFFFF; }
.social-link-tiktok:hover { background: #FFFFFF; color: var(--rose); transform: translateY(-2px) scale(1.06); }

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

/* Responsive */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .levels-grid { grid-template-columns: 1fr; }
  .social-total-mascot { display: none; }
  .social-grid { margin-top: 0; }
  .level-card-postbac { margin-top: 155px; }
}

.back-to-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--rose);
  color: #FFFFFF;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  z-index: 500;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover { background: var(--bleu-ciel); }
@media (max-width: 640px) {
  .back-to-top {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(24px, calc(24px + env(safe-area-inset-bottom)));
    width: 42px;
    height: 42px;
  }
  .hero { padding-top: 44px; }
  .logo-ring-lg { width: 100px; height: 100px; margin-bottom: 10px; }
  .wordmark-lg { font-size: 2.2rem; margin-bottom: 8px; }
  .hero h1 { font-size: 2rem; }
  .hero-tags { gap: 6px; margin-bottom: 20px; }
  .hero-tags li { padding: 4px 12px; font-size: 0.75rem; }
  .signup-banner-inner { justify-content: flex-start; }
  .signup-banner-text {
    width: 100%;
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.4;
  }
  .hero .hero-deco {
    display: block;
    width: 130px;
    top: 30px;
    transform: none;
    opacity: 0.6;
    z-index: 2;
  }
  .hero .hero-deco-left { left: 10px; top: 5px; }
  .hero .hero-deco-right { right: 10px; }
}
/* Le bloc MathML de KaTeX (accessibilite/lecteurs d'ecran) est visuellement
   masque mais reste selectionnable : sans ce user-select: none, copier une
   formule duplique tout son contenu dans le presse-papier. */
.katex-mathml {
  user-select: none;
}

/* ============================================================
   Mode clair : surcharges des surfaces sombres codees en dur
   (rgba blanc translucide, invisibles sur fond clair). Le bouton
   de bascule est insere en JS dans le header (js/main.js).
   ============================================================ */
html[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(28, 22, 51, 0.10);
}
html[data-theme="light"] .site-footer { border-top-color: rgba(28, 22, 51, 0.10); }
html[data-theme="light"] .signup-banner {
  border-top-color: rgba(28, 22, 51, 0.08);
  border-bottom-color: rgba(28, 22, 51, 0.08);
}
/* Les cartes (.live-item, .level-card, .hub-card) sont pensees pour le fond
   sombre : un tres leger voile blanc translucide (4-12%) suffit a s'y
   detacher. Sur le fond pastel clair, ce meme voile est quasi invisible.
   La charte prevoit pour le clair de vraies cartes blanches avec ombre
   douce (cf. design_handoff : "0 14px 30px rgba(36,27,79,0.16) + inset 0 1px
   0 #FFFFFF"), pas une simple transparence. */
html[data-theme="light"] .live-item,
html[data-theme="light"] .level-card,
html[data-theme="light"] .hub-card {
  background: #FFFFFF;
  border-color: rgba(28, 22, 51, 0.08);
  box-shadow: 0 14px 30px rgba(36, 27, 79, 0.12), inset 0 1px 0 #FFFFFF;
}
/* .level-card (Collège/Lycée/Post-bac) : meme degrade pastel rose -> bleu
   que le grand cadre des annales au-dessus, par-dessus le blanc de base. */
html[data-theme="light"] .level-card {
  background: linear-gradient(135deg, #FDF4F9 0%, #F3F8FD 100%);
  border-color: rgba(36, 27, 79, 0.16);
}
html[data-theme="light"] .hub-card:hover {
  background: #FFFFFF;
  box-shadow: 0 18px 36px rgba(36, 27, 79, 0.18), inset 0 1px 0 #FFFFFF;
}
html[data-theme="light"] .level-card:hover {
  background: linear-gradient(135deg, #FDF4F9 0%, #F3F8FD 100%);
  box-shadow: 0 18px 36px rgba(36, 27, 79, 0.18), inset 0 1px 0 #FFFFFF;
}
/* Fond neutre en mode clair uniquement pour les badges non colores (pied de
   page) : les badges YouTube/TikTok du header gardent leur rouge/rose de
   marque dans les deux modes. */
html[data-theme="light"] .social-link:not(.social-link-youtube):not(.social-link-tiktok) { background: rgba(28, 22, 51, 0.06); }
html[data-theme="light"] .social-link:not(.social-link-youtube):not(.social-link-tiktok):hover { background: rgba(28, 22, 51, 0.12); }
/* L'anneau du logo reste rose (#E0297B, var(--rose)) dans les deux modes :
   c'est un accent constant de la charte, pas une surface a inverser. */
/* Briques de chapitre des pages niveau (style inline genere) : on ne
   surcharge la bordure que pour les cartes sans variante coloree. */
html[data-theme="light"] .chapter-card {
  background: #FFFFFF;
  box-shadow: 0 8px 20px rgba(36, 27, 79, 0.08);
}
html[data-theme="light"] .chapter-card:not(.has-fiche):not(.has-exo):not(.has-comp):not(.has-notion):not(.has-video):not(.has-topic) {
  border-color: rgba(28, 22, 51, 0.12);
}
html[data-theme="light"] .chapter-badges,
html[data-theme="light"] .chapter-vid-count { background: rgba(28, 22, 51, 0.07); }

/* Bouton de bascule clair/sombre (cree en JS dans le header) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: var(--blanc);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  padding: 0;
  line-height: 1;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); }
html[data-theme="light"] .theme-toggle {
  border-color: rgba(28, 22, 51, 0.2);
  background: rgba(28, 22, 51, 0.06);
}
html[data-theme="light"] .theme-toggle:hover { background: rgba(28, 22, 51, 0.12); }
/* Le select du formulaire utilise var(--blanc)/var(--encre) qui s'inversent
   en mode clair : on le garde blanc avec texte sombre, comme le champ email. */
html[data-theme="light"] .signup-form select {
  background-color: #FFFFFF;
  color: #1C1633;
}
html[data-theme="light"] .signup-form select:invalid { color: #6B6590; }
/* Champs blancs sur fond clair : sans contour ils deviennent invisibles en
   mode jour, on ajoute une bordure discrete + une ombre douce. */
html[data-theme="light"] .signup-form input[type="email"],
html[data-theme="light"] .signup-form select {
  border: 1.5px solid rgba(36, 27, 79, 0.25);
  box-shadow: 0 6px 16px rgba(36, 27, 79, 0.08);
}
html[data-theme="light"] .signup-form input[type="email"]:focus,
html[data-theme="light"] .signup-form select:focus {
  border-color: var(--rose);
  outline: none;
}

/* Apparition en douceur au defilement (classes posees par js/main.js) */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal-visible {
  opacity: 1;
  transform: none;
}

/* Le sujet du jour (encart insere en JS dans le cadre annales de l'accueil) */
.annales-banner p.sujet-du-jour {
  margin: 32px auto 0;
  padding: 10px 18px;
  width: fit-content;
  max-width: 100%;
  border: 1px dashed rgba(224, 41, 123, 0.5);
  border-radius: 12px;
  font-size: 0.9rem;
  color: var(--lavande);
}
.sujet-du-jour strong { color: var(--blanc); }
.sujet-du-jour a { color: var(--rose); font-weight: 700; }

/* Recherche globale (bouton header + overlay, generes en JS) */
.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: var(--blanc);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  padding: 0;
  line-height: 1;
}
.search-toggle:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); }
html[data-theme="light"] .search-toggle {
  border-color: rgba(28, 22, 51, 0.2);
  background: rgba(28, 22, 51, 0.06);
}
html[data-theme="light"] .search-toggle:hover { background: rgba(28, 22, 51, 0.12); }
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 10, 37, 0.72);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 24px;
}
/* [hidden] a la meme specificite que .search-overlay : sans cette regle,
   "display: flex" ci-dessus gagne la cascade (definie apres le style UA par
   defaut) et l'attribut hidden pose par le JS n'a plus aucun effet visuel. */
.search-overlay[hidden] { display: none; }
.search-panel {
  width: 100%;
  max-width: 560px;
  background: var(--indigo);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
html[data-theme="light"] .search-panel { border-color: rgba(28, 22, 51, 0.14); }
.search-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-input {
  flex: 1;
  width: 100%;
  padding: 13px 18px;
  border-radius: 999px;
  border: none;
  font-family: "Quicksand", sans-serif;
  font-size: 1rem;
}
.search-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: var(--blanc);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease;
}
.search-close:hover { background: rgba(255, 255, 255, 0.14); }
html[data-theme="light"] .search-close {
  border-color: rgba(28, 22, 51, 0.2);
  background: rgba(28, 22, 51, 0.06);
}
html[data-theme="light"] .search-close:hover { background: rgba(28, 22, 51, 0.12); }
.search-results { margin-top: 12px; max-height: 52vh; overflow-y: auto; }
.search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--blanc);
  text-decoration: none;
  font-size: 0.92rem;
}
.search-result:hover { background: rgba(255, 255, 255, 0.08); }
html[data-theme="light"] .search-result:hover { background: rgba(28, 22, 51, 0.07); }
.search-result-icon { flex-shrink: 0; }
.search-hint { color: var(--lavande); font-size: 0.88rem; margin: 8px 4px; }

/* Suivi de progression des chapitres (pages niveau, localStorage) */
.progress-gauge { margin: 0 0 28px; }
.progress-gauge-text {
  font-size: 0.9rem;
  color: var(--lavande);
  margin-bottom: 8px;
}
.progress-gauge-text strong { color: var(--blanc); }
.progress-hint { font-size: 0.8rem; opacity: 0.8; }
.progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
html[data-theme="light"] .progress-bar { background: rgba(28, 22, 51, 0.1); }
.progress-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bleu-ciel), var(--rose));
  transition: width 0.35s ease;
}
.chapter-num[role="button"] { cursor: pointer; position: relative; }
.chapter-num[role="button"]:hover { transform: scale(1.12); }
.chapter-card.lm-done .chapter-num { background: #2EA96B; }
.chapter-card.lm-done .chapter-title,
.chapter-card.lm-done > span:not(.chapter-num):not(.chapter-quad) { opacity: 0.65; }
.progression-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bleu-ciel);
  text-decoration: none;
}
.progression-link:hover { color: var(--rose); }

/* Tableau de bord "Ma progression" (ma-progression.html) */
.progression-loading,
.progression-empty {
  color: var(--lavande);
  text-align: center;
  padding: 24px 0;
}
.progression-total {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 32px;
}
html[data-theme="light"] .progression-total { background: rgba(28, 22, 51, 0.04); }
.progression-total .progress-gauge-text { font-size: 1.05rem; margin-bottom: 10px; }
.progression-family { margin-bottom: 36px; }
.progression-family-title { color: var(--bleu-ciel); font-size: 1.2rem; margin: 0 0 16px; }
.progression-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.progression-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 16px 18px;
}
html[data-theme="light"] .progression-card { background: rgba(28, 22, 51, 0.03); }
.progression-card-link {
  display: block;
  color: var(--blanc);
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 6px;
}
.progression-card-link:hover { color: var(--rose); }
.progression-card .progress-gauge-text { font-size: 0.85rem; margin-bottom: 8px; }
.progression-remaining { margin-top: 12px; font-size: 0.82rem; color: var(--lavande); }
.progression-remaining summary { cursor: pointer; color: var(--rose); font-weight: 600; }
.progression-remaining ul { margin: 8px 0 0; padding-left: 18px; }
.progression-remaining li { margin: 3px 0; }

/* Badges/coupe par niveau (gamification, ma-progression.html) : scopes a la
   carte de CHAQUE niveau (jamais de pool transverse, cf. js/main.js). */
.level-medal-count {
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--rose);
}
.level-medal-rule {
  font-weight: 500;
  color: var(--lavande);
}
.level-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.level-medals {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.medal-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.medal-dot {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.medal-dot.medal-locked { filter: grayscale(1); opacity: 0.3; }
.medal-dot.medal-earned { box-shadow: 0 0 0 3px rgba(224, 41, 123, 0.22); }
.medal-count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  background: #E0293B;
  border: 2px solid var(--indigo);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.level-coupe {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: linear-gradient(145deg, #FFD966, #C99A1E);
  border: 1px solid #FFD700;
}
.level-coupe.coupe-locked { filter: grayscale(1); opacity: 0.3; }
.level-coupe.coupe-earned { box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.28); }
.level-medal-hint {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--lavande);
  font-style: italic;
}
/* Bilan des QCM du niveau (valides / a retenter) sur la carte */
.level-qcm-line {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--lavande);
  font-weight: 600;
}
.level-qcm-line .qcm-line-ok { color: #58e08a; }
.level-qcm-line .qcm-line-ko { color: #ff6b6b; }

/* Synchronisation via email (ma-progression.html) */
.backup-col {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px 22px;
}
html[data-theme="light"] .backup-col { background: rgba(28, 22, 51, 0.03); }
.backup-textarea {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.25);
  color: var(--blanc);
  font-family: "Quicksand", sans-serif;
  font-size: 0.85rem;
  resize: vertical;
}
html[data-theme="light"] .backup-textarea {
  background: #fff;
  border-color: rgba(36, 27, 79, 0.2);
  color: var(--encre);
}
.backup-textarea:focus { outline: none; border-color: var(--rose); }
.backup-col .btn { margin-top: 4px; }
.backup-message { margin: 12px 0 0; font-size: 0.85rem; color: var(--rose); font-weight: 600; }
.sync-col {
  max-width: 420px;
  margin: 20px auto 0;
  text-align: center;
}
.sync-email-input { text-align: center; margin-top: 0; }
.sync-col .btn { margin-top: 12px; }
.lm-badge-bronze { background: linear-gradient(145deg, #CD7F32, #8a5522); border-color: #CD7F32; }
.lm-badge-argent { background: linear-gradient(145deg, #D8D8E0, #9a9aa5); border-color: #C0C0C0; }
.lm-badge-or { background: linear-gradient(145deg, #FFD966, #C99A1E); border-color: #FFD700; }
.lm-badge-platine { background: linear-gradient(145deg, #E5F6FF, #9FCBDB); border-color: #B9F2FF; }
.lm-badge-diamant { background: linear-gradient(145deg, var(--bleu-ciel), var(--rose)); border-color: var(--rose); }
.lm-badge-legende { background: linear-gradient(145deg, #FFD700, var(--rose), var(--bleu-ciel)); border-color: #FFD700; }
.lm-badge-trophy { background: linear-gradient(145deg, #FFD966, #C99A1E); border-color: #FFD700; }

/* Toast de celebration a l'ouverture d'un nouveau badge/trophee */
.lm-badge-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 120%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--indigo);
  border: 1px solid rgba(224, 41, 123, 0.5);
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: calc(100vw - 32px);
}
.lm-badge-toast-in { transform: translate(-50%, 0); }
.lm-toast-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.lm-toast-text { display: flex; flex-direction: column; text-align: left; }
.lm-toast-text strong { color: var(--rose); font-size: 0.85rem; }
.lm-toast-text span { color: var(--blanc); font-weight: 700; }

/* Infobulle du numero de chapitre (incite a cocher quand maitrise).
   CSS pur (pas le title natif, trop discret) : bulle semi-transparente
   au-dessus du rond, au survol/focus, avec une petite fleche qui pointe
   dessus. */
.chapter-num[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: 180px;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(224, 41, 123, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(13, 10, 37, 0.5);
  font-family: "Quicksand", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 8px 20px rgba(13, 10, 37, 0.25);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.chapter-num[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 10px;
  z-index: 30;
  border: 6px solid transparent;
  border-top-color: rgba(224, 41, 123, 0.55);
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.chapter-num[data-tooltip]:hover::after,
.chapter-num[data-tooltip]:hover::before,
.chapter-num[data-tooltip]:focus-visible::after,
.chapter-num[data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}
.chapter-card.lm-done .chapter-num[data-tooltip]::after { background: rgba(46, 169, 107, 0.55); }
.chapter-card.lm-done .chapter-num[data-tooltip]::before { border-top-color: rgba(46, 169, 107, 0.55); }
.chapter-card.lm-done .chapter-num[data-tooltip]::before { border-bottom-color: #2EA96B; }

/* Lien vers la page methode dans les sous-titres de section */
.methode-link { color: var(--rose); font-weight: 700; text-decoration: none; }
.methode-link:hover { text-decoration: underline; }

/* Barre d'annonce du prochain live (sous le header, style "drop" e-commerce) */
.live-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(224, 41, 123, 0.22) 0%, rgba(46, 116, 194, 0.22) 100%);
  border-bottom: 1px solid rgba(255, 82, 82, 0.35);
  text-decoration: none;
  cursor: pointer;
}
.live-bar:hover { background: linear-gradient(90deg, rgba(224, 41, 123, 0.3) 0%, rgba(46, 116, 194, 0.3) 100%); }
.live-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blanc);
  font-weight: 700;
  font-size: 0.92rem;
}
.live-bar-label::first-letter { text-transform: uppercase; }
.live-bar-timer {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}
.lb-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.lb-num {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--blanc);
  background: rgba(13, 10, 37, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 1px 9px;
  min-width: 2.4ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .lb-num {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(28, 22, 51, 0.15);
}
.lb-unit {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--lavande);
}
.lb-colon {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--rose);
  margin-top: 2px;
}
.lb-live-now {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: #ff5252;
  letter-spacing: 2px;
  animation: live-dot-pulse 1.4s ease-in-out infinite;
}
.live-bar-cta {
  color: var(--rose);
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
}
.live-bar:hover .live-bar-cta { text-decoration: underline; }
@media (max-width: 640px) {
  .live-bar { gap: 8px 16px; padding: 9px 12px; }
  .live-bar-label { font-size: 0.82rem; }
  .live-bar-cta { display: none; }
  .lb-num { font-size: 1.2rem; }
}

/* Fiches competences : contenu bloque (.gate-shell) tant que l'inscription
   n'a pas ete faite. .gated-content reste dans le DOM (SEO : Google voit le
   contenu complet) mais est flouté et non interactif visuellement pour un
   visiteur non inscrit ; l'overlay reste visible au scroll (position sticky)
   tant qu'on n'a pas depasse la zone floutee. */
.gate-shell { position: relative; }
.gated-content {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 96%);
}
.gate-overlay {
  position: sticky;
  top: 110px;
  z-index: 5;
  display: flex;
  justify-content: center;
  margin: -80px 0 -40px;
}
.gate-card {
  width: 100%;
  max-width: 440px;
  background: rgba(36, 27, 79, 0.92);
  backdrop-filter: blur(14px);
  border: 1.5px solid var(--rose);
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(13, 10, 37, 0.5);
}
.gate-lock { font-size: 2rem; display: block; margin-bottom: 10px; }
.gate-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.gate-card p { color: var(--lavande); font-size: 0.92rem; margin-bottom: 18px; }
.gate-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.gate-form input[type="email"],
.gate-form select {
  flex: 1;
  min-width: 160px;
  padding: 12px 16px;
  border-radius: 999px;
  border: none;
  font-family: "Quicksand", sans-serif;
  font-size: 0.95rem;
  color: var(--encre);
  background-color: var(--blanc);
}
.gate-form button {
  width: 100%;
  margin-top: 4px;
}
.gate-message { margin-top: 12px; font-size: 0.85rem; color: var(--rose); font-weight: 600; }
.gate-shell.is-unlocked .gate-overlay { display: none; }
.gate-shell.is-unlocked .gated-content {
  filter: none;
  pointer-events: auto;
  user-select: auto;
  -webkit-mask-image: none;
  mask-image: none;
}
html[data-theme="light"] .gate-card { background: rgba(255, 255, 255, 0.96); }
html[data-theme="light"] .gate-form input[type="email"],
html[data-theme="light"] .gate-form select {
  border: 1.5px solid rgba(36, 27, 79, 0.25);
  box-shadow: 0 6px 16px rgba(36, 27, 79, 0.08);
}
@media (max-width: 640px) {
  .gate-overlay { top: 80px; margin: -60px 0 -30px; }
  .gate-card { padding: 24px 20px; }
}

/* Telechargement PDF verrouille (fiches de cours/exercices) : modale plein
   ecran generee en JS au clic sur .pdf-gate-link tant que l'appareil n'est
   pas marque "inscrit". Reutilise .gate-card/.gate-form/.gate-message. */
.pdf-gate-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(13, 10, 37, 0.72);
  backdrop-filter: blur(4px);
}
.pdf-gate-modal[hidden] { display: none; }
.pdf-gate-modal .gate-card { position: relative; }
.pdf-gate-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--blanc);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.pdf-gate-close:hover { background: var(--rose); }
html[data-theme="light"] .pdf-gate-close { background: rgba(36, 27, 79, 0.08); }

/* ==========================================================================
   US site additions (logimaths.com) — level hub pages, course chapter
   listings, "coming soon" stubs, and topic/lesson pages. Kept in the shared
   stylesheet (instead of duplicated per-page inline <style>, as on the FR
   site) since this site has far fewer pages.
   ========================================================================== */

.niv-hero { background: var(--page-bg); padding: 64px 0 48px; text-align: center; }
.niv-hero h1 { font-size: 2.4rem; margin-bottom: 10px; }

.switch-nav { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.switch-nav a {
  color: var(--lavande);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.switch-nav a:hover { color: var(--blanc); border-color: var(--rose); }
html[data-theme="light"] .switch-nav a { border-color: rgba(36, 27, 79, 0.22); }
html[data-theme="light"] .switch-nav a:hover { border-color: var(--rose); }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin: 40px 0 60px;
}
.hub-icon { font-size: 2.6rem; }
.hub-title { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.35rem; }
.hub-count { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 2.2rem; color: var(--rose); line-height: 1; }
.hub-sub { color: var(--lavande); font-size: 0.9rem; }
.hub-card.hub-card-soon { opacity: 0.75; }
.hub-badge-soon {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lavande);
  background: rgba(173, 167, 204, 0.14);
  border: 1px solid rgba(173, 167, 204, 0.4);
  padding: 3px 10px;
  border-radius: 999px;
}

.chapter-section { padding: 48px 0 24px; }
.chapter-track-title {
  text-align: left;
  font-size: 1.7rem;
  margin: 10px 0 26px;
  padding-left: 14px;
  border-left: 6px solid var(--rose);
}
.chapter-group { margin-bottom: 28px; }
.chapter-group-title { font-size: 1.05rem; color: var(--bleu-ciel); font-weight: 700; margin-bottom: 12px; }
.chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.chapter-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--blanc);
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chapter-title { flex: 1; }
.chapter-card.has-topic { border-color: rgba(173, 167, 204, 0.5); }
.chapter-card.has-topic:hover { border-color: var(--lavande); background: rgba(255, 255, 255, 0.09); }
.chapter-topic-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--lavande);
  background: rgba(173, 167, 204, 0.14);
  border: 1px solid rgba(173, 167, 204, 0.4);
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  min-width: 96px;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chapter-topic-badge:hover { background: var(--lavande); border-color: var(--lavande); color: var(--encre); }
.chapter-soon-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--lavande);
  opacity: 0.7;
  white-space: nowrap;
}

.coming-soon-block { max-width: 560px; margin: 0 auto; text-align: center; padding: 60px 0 100px; }
.coming-soon-block img { width: 140px; margin-bottom: 24px; }
.coming-soon-block h2 { margin-bottom: 10px; }

.topic-hero { background: var(--page-bg); padding: 64px 0 40px; text-align: center; }
.topic-hero h1 { font-size: 2.2rem; margin-bottom: 10px; }
.topic-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lavande);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: color 0.15s ease, border-color 0.15s ease;
  margin-bottom: 18px;
}
.topic-back-btn:hover { color: var(--blanc); border-color: var(--rose); }
html[data-theme="light"] .topic-back-btn { border-color: rgba(36, 27, 79, 0.22); }
html[data-theme="light"] .topic-back-btn:hover { border-color: var(--rose); }

.lesson-section { padding: 20px 0 40px; }
.lesson-card {
  max-width: 760px;
  margin: 0 auto 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 32px;
}
.lesson-card h2 { margin-top: 0; }
.lesson-card .formula {
  background: rgba(224, 41, 123, 0.08);
  border-left: 4px solid var(--rose);
  padding: 12px 18px;
  border-radius: 8px;
  margin: 16px 0;
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
}
html[data-theme="light"] .lesson-card,
html[data-theme="light"] .practice-card {
  background: #FFFFFF;
  border-color: rgba(28, 22, 51, 0.08);
  box-shadow: 0 8px 20px rgba(36, 27, 79, 0.08);
}

.practice-section { padding: 0 0 60px; }
.practice-grid { display: grid; gap: 20px; max-width: 760px; margin: 0 auto; }
.practice-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 24px 28px;
}
.practice-card .practice-num {
  color: var(--rose);
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.practice-answer { margin-top: 16px; }
.practice-answer summary { cursor: pointer; color: var(--bleu-ciel); font-weight: 700; }
.practice-answer[open] summary { margin-bottom: 10px; }