/* =========================================================================
   Institut Safyyroullah · Direction artistique v2 (brief UI/UX, 10/11/2026)
   Chargée après les styles de la page : ne change que l'apparence.
   Décors : images/deco/ (pattern-dark, lantern, mosque-silhouette, glow-gold…)
   ========================================================================= */

/* ---------- 1. Design system ---------- */

:root {
  --navy-950: #08182b;
  --navy-900: #0d2036;
  --navy-800: #112943;
  --navy-700: #162e49;

  --gold-500: #e5b83f;
  --gold-300: #f4d58a;

  --cream-50: #fbf8f0;
  --cream-100: #f4efe4;

  --green-500: #36a879;

  --text-primary: #f5f1e8;
  --text-secondary: #9baec3;

  --border-subtle: rgba(229, 184, 63, 0.18);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-card: 0 12px 35px rgba(0, 0, 0, 0.18);

  --haut: 72px;
  --transition: 0.2s ease;
}

/* Le thème sombre de la plateforme branché sur les nouvelles couleurs */
:root[data-theme="sombre"] {
  --papier: var(--navy-950);
  --sable: var(--navy-800);
  --sable-2: var(--navy-700);
  --encre: var(--text-primary);
  --encre-doux: var(--text-secondary);
  --or: var(--gold-500);
  --or-clair: var(--gold-300);
  --or-fonce: var(--gold-500);
  --dome: var(--green-500);
  --dome-fonce: #6fd3a8;
  --dome-clair: rgba(54, 168, 121, 0.16);
  --ligne: var(--border-subtle);
  --ombre-douce: var(--shadow-card);
  --c-titre: var(--text-primary);
  --c-surface: var(--navy-900);
  --c-entete: rgba(8, 24, 43, 0.92);
  --c-accent: var(--gold-500);
  --c-sur-accent: var(--navy-950);
  --c-scene: transparent;
}

:root[data-theme="sombre"] body {
  background: var(--navy-950) url("images/deco/pattern-dark.svg") center / 420px;
}

/* ---------- 2. Header ---------- */

.entete {
  height: var(--haut);
  padding: 0 24px;
}

.entete-cours {
  flex: 1;
  justify-content: flex-end;
}

.entete-cours > div:first-child {
  margin: 0 auto;
  text-align: center;
  min-width: 0;
}

.entete-cours h1 {
  font-size: 1.6rem;
  letter-spacing: 0.01em;
}

.pastille-points {
  padding: 8px 16px;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--navy-950);
}

.bouton-theme,
.bouton-cours {
  transition: border-color var(--transition), transform var(--transition);
}

/* ---------- 3. Sidebar ---------- */

.menu-gauche {
  border-right: 1px solid var(--border-subtle);
}

:root[data-theme="sombre"] .menu-gauche {
  background: linear-gradient(180deg, rgba(13, 32, 54, 0.96), rgba(8, 24, 43, 0.98));
}

.menu-tete {
  padding: 18px 18px 8px;
}

.menu-retour {
  margin: 0 0 14px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--encre);
  transition: border-color var(--transition), background var(--transition);
}

.menu-retour:hover {
  background: rgba(229, 184, 63, 0.08);
  border-color: var(--gold-500);
}

.replier {
  top: 18px;
  right: 16px;
  border-radius: var(--radius-sm);
  border-color: var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
}

/* Ligne « Niveau 2 › » : ramène à la liste des cours */
.menu-niveau-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 2px 12px;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--c-titre);
  font-family: var(--titre);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.menu-niveau-ligne svg {
  width: 20px;
  height: 20px;
  color: var(--gold-500);
  flex-shrink: 0;
}

.menu-niveau-ligne span {
  flex: 1;
}

.menu-niveau-ligne .chevron {
  width: 16px;
  height: 16px;
  color: var(--encre-doux);
  transition: transform var(--transition);
}

.menu-niveau-ligne:hover .chevron {
  transform: translateX(3px);
}

/* Carte du cours ouvert */
.menu-cours-carte {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 16px;
}

.menu-cours-icone {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--navy-950);
}

.menu-cours-icone svg {
  width: 18px;
  height: 18px;
}

.menu-cours-texte {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.menu-cours-texte .menu-cours-nom {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.1;
}

.menu-cours-livre {
  font-size: 0.78rem;
  color: var(--encre-doux);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Progression : vraie valeur (chapitres vus), pourcentage calculé */
.progression-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.progression-ligne .progression {
  margin: 0 0 8px;
  color: var(--encre);
  font-size: 0.85rem;
}

.progression-pct {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--encre);
}

.jauge {
  height: 7px;
  margin-bottom: 22px;
  background: rgba(155, 174, 195, 0.18);
}

.jauge div {
  background: linear-gradient(90deg, var(--gold-600, #c99a2e), var(--gold-500));
}

.menu-tete .surtitre {
  color: var(--gold-500);
  margin-bottom: 6px;
}

/* Chapitres : à venir · en cours · terminé */
ol.chapitres {
  padding: 4px 12px 16px;
}

ol.chapitres li + li {
  margin-top: 2px;
}

ol.chapitres button {
  border-radius: var(--radius-md);
  padding: 11px 12px;
  transition: background var(--transition);
}

ol.chapitres button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.04);
}

ol.chapitres button.actif {
  background: linear-gradient(180deg, rgba(229, 184, 63, 0.2), rgba(229, 184, 63, 0.1));
  box-shadow: inset 0 0 0 1px rgba(229, 184, 63, 0.55);
}

.num {
  border-color: var(--border-subtle);
  background: var(--sable);
  color: var(--encre);
}

button.actif .num {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-950);
}

/* Ronds des chapitres (demande Tristan 10/11) :
   pas vu = pointillés · en cours = contour doré qui se remplit · vu = contour doré plein */
ol.chapitres .num {
  background: transparent;
  border: 1.5px dashed rgba(229, 184, 63, 0.45);
  color: var(--encre);
}

ol.chapitres button.actif .num {
  background: var(--gold-500);
  border: 1.5px solid var(--gold-500);
  color: var(--navy-950);
}

ol.chapitres button.vu .num {
  background: rgba(229, 184, 63, 0.1);
  border: 1.5px solid var(--gold-500);
  color: var(--gold-500);
}

ol.chapitres .temps {
  color: var(--gold-500);
  font-weight: 700;
}

/* Pied de colonne */
.mention {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 14px 16px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
}

.mention p {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.mention strong {
  font-size: 0.8rem;
  color: var(--encre);
}

.mention p span {
  font-size: 0.72rem;
  color: var(--encre-doux);
}

.mention-icone {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: radial-gradient(circle, rgba(244, 213, 138, 0.35), rgba(229, 184, 63, 0.05));
  color: var(--gold-300);
}

.mention-icone svg {
  width: 22px;
  height: 22px;
}

.mention-cadenas {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gold-500);
}

/* Liste des cours (niveau 1 de la colonne) */
.tiroir-cours {
  border-radius: var(--radius-md);
  border-color: var(--border-subtle);
}

.tiroir-cours.actuel {
  box-shadow: inset 0 0 0 1px rgba(229, 184, 63, 0.55);
}

/* ---------- 4. Support pédagogique (lecteur) ---------- */

.scene-video {
  padding: 22px 24px 16px;
  overflow: hidden;
  isolation: isolate;
}

/* Halo doré derrière le support */
:root[data-theme="sombre"] .scene-video::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 900px;
  height: 600px;
  transform: translate(-50%, -50%);
  background: url("images/deco/glow-gold.svg") center / contain no-repeat;
  opacity: 0.45;
  z-index: -1;
  pointer-events: none;
}

/* Fond illustré derrière le lecteur (arches dorées, lanterne, mosquée au coucher du soleil), ordinateur seulement.
   Le centre de l'image est vide : le lecteur s'y pose. En mode cinéma, le fond s'efface en fondu vers le noir. */
.scene-deco {
  display: none;
}

@media (min-width: 901px) {
  .scene-deco {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    /* Arches calées sur la hauteur, collées aux bords ; le milieu (mur uni) s'étire en largeur.
       Les arches restent entières quelle que soit la largeur de l'écran. */
    background:
      url("images/deco/fond-arches-gauche.webp") left bottom / auto 100% no-repeat,
      url("images/deco/fond-arches-droite.webp") right bottom / auto 100% no-repeat,
      url("images/deco/fond-arches-milieu.webp") center bottom / 100% 100% no-repeat,
      #0b1a33;
    transition: opacity var(--cinema-duree, 0.5s) var(--cinema-courbe, ease);
  }

  .scene-deco img {
    display: none;
  }

  body.cinema .scene-deco {
    opacity: 0;
  }
}

.lecteur {
  border-radius: var(--radius-lg);
  border: 1.5px solid rgba(229, 184, 63, 0.75);
  box-shadow:
    0 0 0 1px rgba(244, 213, 138, 0.12),
    0 0 40px rgba(229, 184, 63, 0.18),
    0 24px 60px rgba(0, 0, 0, 0.5);
}

.lecteur video,
.video-anime {
  background: var(--navy-950);
}

.controles {
  background: linear-gradient(transparent, rgba(8, 24, 43, 0.96) 55%);
}

#etiquette-vitesse {
  white-space: nowrap;
}

/* Bascule replay / version animée */
.bascule {
  background: rgba(13, 32, 54, 0.85);
  border-color: var(--border-subtle);
}

.bascule button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--navy-950);
}

/* ---------- 5. Onglets ---------- */

.onglets {
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.onglet {
  border-radius: 999px;
  padding: 11px 22px;
  transition: background var(--transition), color var(--transition);
}

.onglet[aria-selected="true"] {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--navy-950);
  box-shadow: 0 8px 24px -10px rgba(229, 184, 63, 0.7);
}

.onglet:focus-visible,
.bascule button:focus-visible,
.menu-retour:focus-visible,
.menu-niveau-ligne:focus-visible,
ol.chapitres button:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
}

:root[data-theme="sombre"] .panneaux::before {
  background-image: url("images/deco/pattern-dark.svg");
  background-size: 420px;
  opacity: 0.5;
}

/* ---------- 6. Exercices ---------- */

.carte-exo {
  border-radius: var(--radius-lg);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), transform var(--transition);
}

.carte-exo:hover {
  border-color: rgba(229, 184, 63, 0.55);
  transform: translateY(-2px);
}

/* ---------- 7. Devoir ---------- */

.devoir-carte {
  border-radius: var(--radius-lg);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-card);
}

:root[data-theme="sombre"] .devoir-carte {
  background: linear-gradient(180deg, rgba(17, 41, 67, 0.92), rgba(13, 32, 54, 0.92));
}

.devoir-carte li {
  align-items: center;
  border-bottom-color: var(--border-subtle);
}

.devoir-carte li::before {
  background: var(--sable);
  color: var(--gold-500);
  border: 1px solid var(--border-subtle);
}

/* Texte de la consigne à gauche, bouton PDF à droite (empilés sur téléphone) */
.devoir-carte li > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.devoir-carte li > div > span {
  flex: 1 1 320px;
}

.devoir-carte li > div > br {
  display: none;
}

.devoir-pdf {
  gap: 8px;
  margin: 0;
  padding: 10px 18px;
  border: 1.5px solid var(--gold-500);
  background: transparent;
  color: var(--or-fonce);
  box-shadow: none;
}

.devoir-pdf svg {
  width: 18px;
  height: 18px;
}

.devoir-pdf:hover:not(:disabled) {
  background: rgba(229, 184, 63, 0.1);
  color: var(--or-fonce);
}

.depot {
  flex-basis: 100%;
  margin-top: 0;
}

.depot .depot-bouton {
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--encre);
  box-shadow: none;
}

.depot .depot-bouton:hover:not(:disabled) {
  border-color: var(--gold-500);
  background: rgba(229, 184, 63, 0.08);
}

/* « J'ai envoyé mon devoir » : pastille verte, pleine une fois cochée */
.devoir-fait {
  border: 1px solid rgba(54, 168, 121, 0.45);
  background: rgba(54, 168, 121, 0.12);
  color: var(--dome-fonce);
  transition: background var(--transition);
}

.devoir-fait:has(input:checked) {
  background: rgba(54, 168, 121, 0.28);
  border-color: var(--green-500);
}

.devoir-fait input {
  accent-color: var(--green-500);
}

/* ---------- 8. Responsive ---------- */

@media (max-width: 900px) {
  :root {
    --haut: 60px;
  }

  .entete {
    padding: 0 14px;
  }

  .entete-cours > div:first-child {
    margin: 0;
    text-align: left;
    flex: 1;
  }

  .scene-video {
    padding: 0;
  }

  .lecteur {
    border-width: 0 0 1.5px;
    border-radius: 0;
    box-shadow: none;
  }

  .onglet {
    padding: 10px 16px;
    min-height: 44px;
  }

  .controles .btn-cinema {
    display: none;
  }

  .devoir-pdf,
  .depot .depot-bouton {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-anime,
  .app,
  ol.chapitres button,
  .carte-exo {
    transition: none;
  }
}


/* =========================================================================
   v2b : au plus près de la maquette
   ========================================================================= */

:root {
  --haut: 76px;
}

@media (min-width: 901px) {
  .app {
    grid-template-columns: 320px minmax(0, 1fr);
  }
}

/* Motif arabesque discret dans la colonne */
:root[data-theme="sombre"] .menu-gauche {
  background:
    linear-gradient(180deg, rgba(13, 32, 54, 0.9), rgba(8, 24, 43, 0.95)),
    url("images/deco/pattern-dark.svg") 0 0 / 300px;
}

/* Chapitre en cours : ▶ doré à la place du numéro */
ol.chapitres button.actif .num {
  position: relative;
  font-size: 0;
  width: 30px;
  height: 30px;
  border-style: solid;
  overflow: visible;
}

/* Anneau d'avancée autour du ▶ : se remplit en doré pendant le chapitre */
ol.chapitres button.actif .num::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(var(--gold-500) var(--avance, 0%), rgba(229, 184, 63, 0.18) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  transition: background 0.3s linear;
}

ol.chapitres button.actif .num::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 1px;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--navy-950);
}

ol.chapitres button {
  padding: 12px 12px;
}

/* Livre lumineux du designer dans le pied de colonne (sinon l'icône) */
.mention-icone {
  position: relative;
  width: 52px;
  height: 52px;
}

.mention-icone img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.mention-icone img + svg {
  display: none;
}

/* ---------- Lecteur : barre de commandes pleine sous l'image (ordinateur) ---------- */

@media (min-width: 901px) {
  .lecteur:not(:fullscreen) .controles {
    position: static;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--navy-900);
    border-top: 1px solid var(--border-subtle);
    opacity: 1;
  }

  /* La barre passe au-dessus des calques ; les calques ne couvrent que l'image 16:9 */
  .lecteur:not(:fullscreen) .controles {
    position: relative;
    z-index: 3;
  }

  .lecteur:not(:fullscreen) .video-anime {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* Bouton central et chargement : centrés sur l'image, au-dessus de la barre (59 px) */
  .lecteur:not(:fullscreen) .gros-play,
  .lecteur:not(:fullscreen) .chargement {
    bottom: 59px;
  }

  /* La barre reste visible pendant la lecture */
  .lecteur.lecture.calme:not(:fullscreen) .controles {
    opacity: 1;
  }

  .lecteur.lecture.calme:not(:fullscreen) {
    cursor: auto;
  }

  /* Une seule ligne : lecture · temps · progression · son · vitesse · cinéma · plein écran */
  .lecteur:not(:fullscreen) .controles .boutons {
    display: contents;
  }

  .lecteur:not(:fullscreen) #btn-play {
    order: 1;
  }

  .lecteur:not(:fullscreen) #btn-recul {
    order: 2;
  }

  .lecteur:not(:fullscreen) #btn-avance {
    order: 3;
  }

  .lecteur:not(:fullscreen) .horloge {
    order: 4;
    margin: 0 10px 0 4px;
  }

  .lecteur:not(:fullscreen) .frise {
    order: 5;
    flex: 1;
    min-width: 120px;
    margin: 0 10px;
  }

  .lecteur:not(:fullscreen) #btn-son {
    order: 6;
  }

  .lecteur:not(:fullscreen) #btn-reglages {
    order: 7;
  }

  .lecteur:not(:fullscreen) #btn-cinema {
    order: 8;
  }

  .lecteur:not(:fullscreen) #btn-plein {
    order: 9;
  }

  .lecteur:not(:fullscreen) .chapitre-en-cours,
  .lecteur:not(:fullscreen) .espace-mobile {
    display: none;
  }

  /* Bouton lecture rond doré */
  .lecteur:not(:fullscreen) #btn-play {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
    color: var(--navy-950);
  }

  .lecteur:not(:fullscreen) #btn-play svg {
    width: 16px;
    height: 16px;
  }

  /* La progression toujours visible, curseur doré */
  .lecteur:not(:fullscreen) .curseur {
    transform: translate(-50%, -50%) scale(1);
    background: var(--gold-500);
    box-shadow: 0 0 0 4px rgba(229, 184, 63, 0.22);
  }

  .lecteur:not(:fullscreen) #btn-reglages {
    border-radius: 999px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.06);
  }
}

/* ---------- Devoir : lignes plus compactes, numéros cerclés d'or ---------- */

.devoir-carte li {
  padding: 14px 0;
}

.devoir-carte li::before {
  background: transparent;
  border: 1.5px solid rgba(229, 184, 63, 0.6);
  color: var(--gold-500);
}

/* =========================================================================
   Corrections : lecteur étroit, écrans bas (téléphone à l'horizontale)
   ========================================================================= */

/* La barre s'adapte à la largeur réelle du lecteur : si elle manque de place,
   la progression passe sur sa propre ligne au-dessus des boutons */
@media (min-width: 901px) {
  .lecteur {
    container-type: inline-size;
    container-name: lecteur;
  }

  /* La bulle « Tu t'étais arrêté » reste sur l'image, au-dessus de la barre */
  .scene-video .reprise {
    bottom: calc(16px + 59px + 14px);
  }
}

@container lecteur (max-width: 680px) {
  .controles {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .controles .frise {
    order: 0 !important;
    flex-basis: 100% !important;
    margin: 2px 6px 6px !important;
  }

  .controles .horloge {
    margin-right: auto !important;
  }

  /* Barre sur deux lignes (environ 92 px) : le bouton central reste centré sur l'image */
  .gros-play,
  .chargement {
    bottom: 92px !important;
  }
}

/* Écran large mais bas : la page défile au lieu de tout écraser */
@media (min-width: 901px) and (max-height: 640px) {
  html,
  body {
    height: auto;
  }

  .app {
    height: auto;
    min-height: calc(100vh - var(--haut));
    align-items: start;
  }

  /* Colonne : elle défile en entier, rien ne se chevauche */
  .menu-gauche {
    position: sticky;
    top: var(--haut);
    height: calc(100vh - var(--haut));
    overflow-y: auto;
  }

  .menu-niveau {
    flex: none;
  }

  ol.chapitres {
    flex: none;
    overflow: visible;
  }

  /* Le lecteur tient sous l'en-tête, barre comprise */
  :root body .app .scene-video .lecteur-zone {
    width: min(100%, calc((100vh - var(--haut) - 32px - 92px) * 16 / 9));
  }

  .scene-video {
    padding: 14px 24px 12px;
  }

  .scene-video .reprise {
    bottom: calc(12px + 59px + 10px);
  }

  /* Onglets et contenu : dans le flux de la page */
  .panneaux {
    flex: none;
  }

  .panneau {
    position: static;
    overflow: visible;
    min-height: 60vh;
  }
}

/* Lecteur très étroit : on garde deux lignes en retirant ±10 s (le double-tap sur l'image reste possible) */
@container lecteur (max-width: 520px) {
  #btn-recul,
  #btn-avance {
    display: none !important;
  }
}

/* Ordinateur : sous la vidéo, les notions gardent toujours une hauteur lisible.
   S'il ne reste pas assez de place (mode cinéma, petit écran), la colonne défile pour les atteindre. */
@media (min-width: 901px) {
  .contenu {
    overflow-y: auto;
  }

  .panneaux {
    flex: 1 0 auto;
    min-height: 340px;
  }
}

/* ---------- Colonne v3 (11/11) : « ‹ Niveau 2 » = retour, frise des chapitres, progression en pied ---------- */

.menu-niveau-ligne {
  padding-right: 48px;
}

.menu-niveau-ligne:hover .chevron {
  transform: translateX(-3px);
}

/* Frise : un trait relie chaque rond au suivant, pointillé tant que le chapitre n'est pas vu en entier, plein ensuite */
ol.chapitres li {
  position: relative;
}

ol.chapitres li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 44px;
  bottom: -12px;
  border-left: 2px dashed rgba(229, 184, 63, 0.35);
  pointer-events: none;
}

ol.chapitres li.vu:not(:last-child)::after {
  border-left: 2px solid var(--gold-500);
}

/* Rond : se remplit selon la part du chapitre regardée */
ol.chapitres button:not(.actif) .num {
  position: relative;
  z-index: 1;
  background: conic-gradient(rgba(229, 184, 63, 0.38) var(--rempli, 0%), var(--c-surface) 0);
}

ol.chapitres button.vu .num {
  background: var(--gold-500);
  border: 1.5px solid var(--gold-500);
  color: var(--navy-950);
}

/* Pied de colonne : progression du cours */
.progression-bloc {
  margin: 10px 14px 16px;
  padding: 14px 16px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
}

.progression-bloc .jauge {
  margin-bottom: 0;
}

.progression-bravo {
  display: none;
  margin: 12px 0 0;
  line-height: 1.35;
}

.progression-bravo strong {
  display: block;
  font-size: 0.85rem;
  color: var(--gold-500);
}

.progression-bravo span {
  font-size: 0.75rem;
  color: var(--encre-doux);
}

.progression-bloc.fini {
  border-color: var(--gold-500);
  background: linear-gradient(180deg, rgba(229, 184, 63, 0.16), rgba(229, 184, 63, 0.05));
}

.progression-bloc.fini .progression-bravo {
  display: block;
  animation: bravo-entree 0.5s ease both;
}

@keyframes bravo-entree {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .progression-bloc.fini .progression-bravo {
    animation: none;
  }
}

/* Chapitre en cours toujours visible : collé en haut ou en bas de la liste quand on fait défiler, puis il reprend sa place */
ol.chapitres li:has(> button.actif) {
  position: sticky;
  top: 0;
  bottom: 0;
  z-index: 3;
  border-radius: var(--radius-md);
  background: var(--c-surface);
  box-shadow: 0 0 0 6px var(--c-surface);
}