/* ═══════════════════════════════════════════════════════════════════
   MDG — LE LEARNING CENTER
   ───────────────────────────────────────────────────────────────────
   La page est un cours : une scène 3D qui tient l'écran, un pupitre de
   réglages à côté, une règle à la fin de chaque leçon. Elle garde cette
   forme, qui est la bonne. Ce qui change ici, c'est la matière : les
   jetons du système, l'échelle du système, les rayons du système.

   CE FICHIER PASSE APRÈS systeme.css ET GAGNE SUR LUI quand il doit,
   jamais par !important : par la spécificité d'une classe de page.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 1. LA COQUE DU COURS ════════════════════════════════════════
   L'en-tête du cours n'est pas celui du site : il porte la position
   dans le module, le son, la langue. Il reprend la matière du site. */
.lcx-entete {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) var(--marge);
  background: rgba(6, 6, 6, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--trait);
}
.lcx-marque { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.lcx-marque img { height: 24px; width: auto; display: block; }
.lcx-marque .barre { width: 1px; height: 16px; background: var(--trait-fort); }
.lcx-marque .nom {
  font-family: var(--f-display); font-weight: 600;
  font-size: var(--t-5); letter-spacing: .28em; text-transform: uppercase;
  color: var(--creme); white-space: nowrap;
}
.lcx-marque .nom em { font-style: normal; color: var(--accent); }

/* ═══ 2. LA PROGRESSION ═══════════════════════════════════════════
   La barre compte les leçons faites, pas le défilement. Une barre qui
   avance parce qu'on descend ne récompense rien. */
.lcx-rail {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--trait); overflow: hidden;
}
.lcx-rail-fill {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  transition: width .7s var(--ease);
}
.lcx-compte { font-variant-numeric: tabular-nums; }

/* La bande de reprise, bâtie comme les bandes des scènes. */
.lcx-reprise {
  position: sticky; top: 57px; z-index: 40;
  display: flex; align-items: center; gap: var(--e-4);
  padding: 9px var(--marge);
  background: var(--noir-2);
  border-bottom: 1px solid var(--trait);
  font-family: var(--f-display);
  font-size: var(--t-5); letter-spacing: .18em; text-transform: uppercase;
}
.lcx-reprise-lbl { color: var(--gris); }
.lcx-reprise-lbl::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 5px; height: 5px; margin-right: 8px;
  background: var(--accent); transform: rotate(45deg);
}
.lcx-reprise-txt { color: var(--creme); }
.lcx-reprise-go {
  margin-left: auto; padding: 0 0 2px; border: 0; background: none;
  font: inherit; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); cursor: pointer;
  border-bottom: 1px solid currentColor;
}
.lcx-reprise-go i { font-style: normal; }
.lcx-reprise-non {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gris);
}
.lcx-reprise-non:hover { color: var(--creme); }
@media (max-width: 640px) {
  .lcx-reprise { padding: 9px var(--marge); gap: var(--e-3); font-size: .62rem; letter-spacing: .14em; }
  .lcx-reprise-lbl, .lcx-reprise-non { display: none; }
}

/* ═══ 3. L'ÉCHELLE DU COURS ══════════════════════════════════════
   Cinq tailles, celles du système. La page en avait une par balise,
   écrite en clamp() : c'est ce qui la faisait ressembler à un autre
   site. */
.lcx-h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: .9;
  letter-spacing: -.04em;
  text-transform: uppercase;
  margin: 0 0 var(--e-4);
  color: var(--creme);
}
.lcx-h1 .lcx-h-t2 { color: var(--accent); }
.lcx-lede {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-2);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--creme);
  margin: 0 0 var(--e-4);
  max-width: 20em;
}
.lcx-puce {
  display: inline-flex; align-items: center;
  padding: .5em 1.1em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--trait-fort);
  background: rgba(6, 6, 6, .45);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-5);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}

/* La tête d'une leçon : le numéro, la discipline, le titre, la phrase
   qui résume, le corps. */
.lcx-nlecon {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-5);
  letter-spacing: .04em;
  padding: .35em .6em;
  border-radius: var(--rayon);
  background: var(--accent);
  color: var(--encre);
}
.lcx-disc {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-5);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.lcx-h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-1);
  line-height: .96;
  letter-spacing: -.035em;
  color: var(--creme);
  margin: 0 0 var(--e-3);
  text-wrap: balance;
}
.lcx-serif {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-3);
  line-height: 1.35;
  color: var(--accent);
  margin: 0 0 var(--e-3);
}
.lcx-corps {
  font-size: var(--t-4);
  line-height: 1.6;
  color: var(--gris);
  margin: 0;
}

/* Les sections hors leçon : intro, application, galerie, règles,
   studio, appel. Même échelle, même surtitre, même filigrane. */
.lcx-h2s {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-1);
  line-height: .96;
  letter-spacing: -.035em;
  color: inherit;
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}
.lcx-serif-s {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-2);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: inherit;
  margin: 0 0 var(--e-4);
}
.lcx-corps-s {
  font-size: var(--t-3);
  line-height: 1.65;
  color: var(--gris-2);
  margin: 0 0 var(--e-5);
}
.lcx-sur {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-5);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-sombre);
}
.lcx-sur--sombre { color: var(--gris); }
/* Le chiffre en filigrane : à l'échelle de la signature, presque
   invisible. Il date la section, il ne la décore pas. */
.lcx-filigrane {
  position: absolute;
  top: var(--e-5); right: var(--marge);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(5rem, 13vw, 11rem);
  line-height: 1;
  letter-spacing: -.05em;
  color: rgba(16, 18, 6, .05);
  pointer-events: none; user-select: none;
}

/* ═══ 4. LA LEÇON ═════════════════════════════════════════════════
   La scène tient l'écran pendant que le pupitre défile à côté. C'est
   la forme juste : on garde l'œil sur la lumière en touchant au
   réglage. Elle ne change pas — sa matière, si. */
.lcx-split { border-top: 1px solid var(--trait); background: var(--noir); }
.lcx-vp { background: var(--noir); }

/* Le numéro en filigrane sur la scène : l'échelle du système. */
.lcx-vp::after, .lcx-cinvp::after {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(64px, 7vw, 104px);
  letter-spacing: -.04em;
  color: rgba(240, 237, 232, .07);
}

/* Les bandes de la scène : le repère en haut à gauche, la lecture en
   bas. Même écriture que la bande de reprise. */
.lcx-vp > div[style*="position: absolute"] span {
  font-family: var(--f-display);
}

/* Le pupitre. */
.lcx-aside { border-left: 1px solid var(--trait); }

/* La tête de leçon : numéro, discipline, titre, la phrase en serif,
   le corps. Les tailles viennent de l'échelle, plus de clamp() maison. */
.lcx-aside h2 {
  font-family: var(--f-display);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--creme);
}
.lcx-aside p[style*="--f-serif"],
.lcx-aside p[style*="Instrument"] {
  font-size: var(--t-3);
  line-height: 1.4;
  color: var(--creme);
}

/* La pastille du numéro de leçon. */
.lcx-aside span[style*="background: var(--accent)"][style*="font-weight: 800"] {
  border-radius: var(--rayon);
}

/* ═══ 5. LE PUPITRE ═══════════════════════════════════════════════
   Un instrument : une carte sombre, un filet, un rayon. Les rangées
   sont des réglages, pas des lignes de formulaire. */
.lcx-acc {
  border-radius: var(--rayon-g);
  background: var(--noir-2);
  box-shadow: inset 0 0 0 1px var(--trait);
  border: 0;
  overflow: hidden;
}
.lcx-acc > summary {
  background: transparent;
  border-bottom: 1px solid var(--trait);
  padding: var(--e-3) var(--e-4);
  cursor: pointer;
  list-style: none;
}
.lcx-acc > summary::-webkit-details-marker { display: none; }
.lcx-acc > summary span:first-child {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: -.01em;
  color: var(--creme);
}
.lcx-acc > div { padding: var(--e-4); }

/* Le curseur : la piste est un filet, le bouton un losange acide. */
.lcx-aside input[type="range"], .lcx-cinpanel input[type="range"] {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 22px;
  background: transparent; cursor: pointer;
}
.lcx-aside input[type="range"]::-webkit-slider-runnable-track,
.lcx-cinpanel input[type="range"]::-webkit-slider-runnable-track {
  height: 1px; background: var(--trait-fort);
}
.lcx-aside input[type="range"]::-moz-range-track,
.lcx-cinpanel input[type="range"]::-moz-range-track {
  height: 1px; background: var(--trait-fort);
}
.lcx-aside input[type="range"]::-webkit-slider-thumb,
.lcx-cinpanel input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 11px; height: 11px; margin-top: -5px;
  background: var(--accent);
  transform: rotate(45deg);
  transition: box-shadow .25s var(--ease);
}
.lcx-aside input[type="range"]::-moz-range-thumb,
.lcx-cinpanel input[type="range"]::-moz-range-thumb {
  width: 11px; height: 11px; border: 0;
  background: var(--accent);
  transform: rotate(45deg);
}
.lcx-aside input[type="range"]:hover::-webkit-slider-thumb,
.lcx-cinpanel input[type="range"]:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .18);
}
.lcx-aside input[type="range"]:focus-visible,
.lcx-cinpanel input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* La valeur, en chiffres tabulaires : elle ne doit pas danser. */
.lcx-num {
  height: 30px;
  border-radius: var(--rayon);
  background: var(--noir);
  box-shadow: inset 0 0 0 1px var(--trait);
  border: 0;
  color: var(--creme);
  font-family: var(--f-display);
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  text-align: center;
}
.lcx-num:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--accent); }

/* Les pastilles de couleur. */
.lcx-chip {
  border-radius: var(--rayon);
  cursor: pointer;
  transition: transform .25s var(--ease);
}
.lcx-chip:hover { transform: translateY(-2px); }

/* ═══ 6. LA RÈGLE ═════════════════════════════════════════════════
   Ce que la leçon laisse. Elle se lit comme une citation du système :
   un filet acide à gauche, rien d'autre. */
.lcx-aside > div[style*="border: 1px solid rgba(var(--accent-rgb)"] {
  border: 0;
  border-left: 2px solid var(--accent);
  border-radius: 0;
  background: none;
  padding-left: var(--e-4);
}

/* ═══ 7. LE LIEN VERS LA SUITE ════════════════════════════════════ */
.lcx-aside > a[style*="justify-content: space-between"] {
  border: 0;
  border-top: 1px solid var(--trait);
  border-radius: 0;
  background: none;
  padding: var(--e-4) 0 0;
  color: var(--creme);
  transition: padding-left .35s var(--ease);
}
.lcx-aside > a[style*="justify-content: space-between"]:hover { padding-left: .5em; }

/* ═══ 8. LE PIED ══════════════════════════════════════════════════
   Celui du site, avec la phrase de fin et le retour aux leçons
   au-dessus : en sortant du cours, on retombe sur le site. */
.lcx-pied { padding-top: var(--e-8); }
.lcx-fin {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-1);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--creme);
  max-width: 16em;
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}
.lcx-rejouer { margin-bottom: var(--e-7); }
.lcx-rejouer i { font-style: normal; }