/* =========================================================================
   LA LEÇON D'UNE MASTERCLASS — direction A v2 (Ludovic, 24/09)

   Le gabarit : `theme/antithese/lecon-masterclass.php`. La vidéo et le texte
   sur huit colonnes, le rail du programme sur quatre, qui colle en haut de
   l'écran. Sous 992 px (responsive.css), le rail passe sous la vidéo derrière
   deux onglets.

   Les briques partagées : le fil d'ariane (`.archive-ariane`), la grille
   d'une vidéo et son rail (`.grille-rail`), les onglets du manchon
   (`.manchon-onglets`, js/onglets.js), le bouton plein pour la porte
   d'entrée, le corps de texte d'un article (`.detail-corps`, `.detail-texte`).
   ========================================================================= */

.lecon-page { padding-bottom: var(--espace-bloc); }

.lecon-grille { margin-top: 10px; }   /* la grille elle-même : `.grille-rail` (composants.css) */

.lecon-surtitre {
  font-family: var(--police-meta);
  font-size: var(--taille-meta);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-texte-secondaire);
}
.lecon-titre {
  margin-top: 8px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-titre-lecon);
  line-height: 1.15;
  text-transform: none;   /* la casse de la phrase, pas celle d'un titre de page (A v2) */
  text-wrap: pretty;
}

/* --- Le lecteur, et ses deux flèches ------------------------------------- */
.lecon-lecteur {
  position: relative;
  margin-top: 24px;
  aspect-ratio: 16 / 9;
  background: var(--gris-fonce);
}
.lecon-lecteur iframe { display: block; width: 100%; height: 100%; border: 0; }

/* LES FLÈCHES, à la manière d'Udemy : collées aux bords, au milieu de la
   hauteur, 44 px de large au moins. Le nom de la leçon se lit au survol et
   au clavier, dans une bulle à côté. */
.lecon-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--largeur-fleche-lecon);
  height: var(--hauteur-fleche-lecon);
  background: rgb(17 17 17 / .82);
  color: var(--c-blanc);
  border: 1px solid rgb(255 255 255 / .22);
}
.lecon-fleche-g { left: 0; border-left: 0; }
.lecon-fleche-d { right: 0; border-right: 0; }
.lecon-fleche:hover { background: var(--gris-fonce); }

.lecon-bulle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  max-width: 340px;
  padding: 10px 14px;
  background: var(--gris-fonce);
  color: var(--c-blanc);
  border: 1px solid rgb(255 255 255 / .22);
}
.lecon-bulle-g { left: calc(var(--largeur-fleche-lecon) + 12px); }
.lecon-bulle-d { right: calc(var(--largeur-fleche-lecon) + 12px); }
.lecon-fleche-g:is(:hover, :focus-visible) + .lecon-bulle-g,
.lecon-fleche-d:is(:hover, :focus-visible) + .lecon-bulle-d { display: block; }
.lecon-bulle-libelle {
  display: block;
  font-family: var(--police-meta);
  font-size: var(--taille-meta);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-meta-sur-sombre);
}
.lecon-bulle-titre {
  display: block;
  margin-top: 2px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}

/* LA LEÇON FERMÉE : le fond du lecteur, le cadenas, la porte d'entrée. Le
   lecteur n'est pas servi. */
.lecon-verrou { position: absolute; inset: 0; }
.lecon-verrou-texte {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 72px;
  text-align: center;
  color: var(--c-blanc);
}
.lecon-verrou-titre {
  max-width: 460px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
}
.lecon-verrou-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; }
.lecon-verrou-connexion {
  font-family: var(--police-meta);
  font-size: var(--text-sm);
  color: var(--c-blanc);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Le texte ----------------------------------------------------------- */
.lecon-texte {
  margin-top: 32px;
  max-width: var(--largeur-lecture);
}

/* --- Le rail : la masterclass, la progression, le programme -------------- */
/* LE RAIL COLLE SOUS L'EN-TÊTE, pas sous le haut de l'écran (24/09) :
   l'en-tête est fixe et passait par-dessus. Il suit l'escamotage de la
   rangée 1 (`.entete.escamote`, js/entete.js), comme la barre elle-même, et
   ne dépasse jamais la hauteur de l'écran — un programme déplié défile dans
   le rail. Même calcul que le rail d'un article (`detail.css`). */
.lecon-rail {
  position: sticky;
  top: calc(var(--hauteur-entete) + 24px);
  max-height: calc(100vh - var(--hauteur-entete) - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
  transition: top .25s ease, max-height .25s ease;
}
body:has(.entete.escamote) .lecon-rail {
  top: calc(var(--hauteur-rangee-2) + 24px);
  max-height: calc(100vh - var(--hauteur-rangee-2) - 48px);
}
.lecon-rail-identite {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--filet-noir);
}
.lecon-rail-nom {
  margin-top: 2px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
}
.lecon-rail-avec {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-family: var(--police-meta);
  font-size: var(--text-sm);
  font-weight: 500;
}
.lecon-rail-avec a {
  font-weight: 400;
  color: var(--gris-texte-secondaire);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.lecon-progression { margin-top: 20px; }
.lecon-progression-texte {
  font-family: var(--police-meta);
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
}
.lecon-jauge {
  display: grid;
  grid-template-columns: repeat(var(--segments), minmax(0, 1fr));
  gap: 3px;
  margin-top: 10px;
}
.lecon-jauge span { height: 4px; background: var(--filet-clair); }
.lecon-jauge .vu { background: var(--filet-noir); }
.lecon-jauge .entame { background: var(--filet-noir); opacity: .45; }

/* Les modules : des dépliants natifs, celui de la leçon ouvert. */
.lecon-modules { margin-top: 20px; list-style: none; padding: 0; }
.lecon-module { border-top: 1px solid var(--filet-clair); }
.lecon-module-sommet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
}
.lecon-module-sommet::-webkit-details-marker { display: none; }
.lecon-module-sommet:focus-visible { outline: 2px solid var(--gris-texte); outline-offset: 2px; }
.lecon-module-nom {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--police-meta);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-texte-secondaire);
}
/* La coche d'un module entièrement vu : posée par le script. */
.lecon-module-nom .coche { display: none; }
.lecon-module.vu .lecon-module-nom .coche { display: block; }
.lecon-module-titre {
  display: block;
  margin-top: 3px;
  font-family: var(--police-titre);
  font-size: 16px;
  line-height: 1.3;
  color: var(--gris-texte);
}
details[open] > .lecon-module-sommet .lecon-module-titre { font-weight: 700; }
.lecon-module-compte {
  display: block;
  margin-top: 4px;
  font-family: var(--police-meta);
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
  font-variant-numeric: tabular-nums;
}
.lecon-module-vide {
  padding: 0 0 14px;
  font-family: var(--police-meta);
  font-size: var(--text-sm);
  color: var(--gris-texte-secondaire);
}

/* Le chevron d'un dépliant (`.pli-chevron`, composants.css) : bas fermé,
   haut ouvert. */
details[open] > .lecon-module-sommet .pli-chevron { transform: translateY(2px) rotate(-135deg); border-color: var(--gris-texte); }

/* Une leçon : son numéro, son titre, son état. */
.lecon-lignes { list-style: none; padding: 0; margin: 0 0 12px; }
.lecon-lignes-seules { margin-top: 20px; }
.lecon-lignes-seules > .lecon-ligne { border-top: 1px solid var(--filet-clair); }
.lecon-modules .lecon-ligne + .lecon-ligne { border-top: 1px solid var(--filet-clair); }
.lecon-ligne a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: baseline;
  min-height: 44px;
  padding: 10px 0;
}
.lecon-lignes-seules .lecon-ligne a { padding: 12px 0; }
.lecon-ligne-numero {
  font-family: var(--police-meta);
  font-size: var(--text-sm);
  color: var(--gris-texte-secondaire);
  font-variant-numeric: tabular-nums;
}
.lecon-ligne-titre {
  font-family: var(--police-meta);
  font-size: 15px;
  line-height: 1.35;
  color: var(--gris-texte);
}
.lecon-ligne a:hover .lecon-ligne-titre { text-decoration: underline; text-underline-offset: 3px; }
.lecon-ligne-etat { align-self: center; display: flex; justify-content: flex-end; color: var(--gris-texte-secondaire); }
.lecon-ligne-etat .coche { display: none; }
.lecon-ligne.vu .lecon-ligne-etat .coche { display: block; }
.lecon-ligne.vu .lecon-ligne-titre { color: var(--gris-texte-secondaire); }
.lecon-ligne.ici .lecon-ligne-numero { color: var(--gris-texte); font-weight: 700; }
.lecon-ligne.ici .lecon-ligne-titre { color: var(--gris-texte); font-weight: 600; }
.lecon-ligne.ici .lecon-ligne-etat { color: var(--gris-texte); }
.lecon-ligne-ici {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-texte-secondaire);
}

/* =========================================================================
   LES MASTERCLASS — `/masterclass/` (24/09)

   La une des articles, une par masterclass, empilées : le filet de la une
   entre deux, à l'espace d'après un filet noir de part et d'autre. Pas de
   navigation dessous (deux masterclass, format à l'essai).
   ========================================================================= */
.masterclass-une {
  /* Une rangée de plus que la carte en ligne : « Commencer » suit la
     signature, et c'est la dernière qui prend le reste de la hauteur. */
  grid-template-rows: auto auto auto auto auto 1fr;
  padding-bottom: var(--espace-filet-noir);
  margin-bottom: var(--espace-filet-noir);
  border-bottom-color: var(--filet-noir);
}
/* La dernière ne ferme rien : pas de liste dessous. */
.masterclass-une:last-of-type { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.masterclass-commencer { justify-self: start; }

/* =========================================================================
   LA PRÉSENTATION D'UNE MASTERCLASS — planche C (24/09), sur sa fiche

   La tête de toutes les listes (le nom, le manchon des masterclass), puis la
   grille de la leçon : le premier épisode, l'accroche et le texte à gauche ;
   le rail à droite — « Commencer », puis le programme détaillé.
   ========================================================================= */
.presentation-grille { margin-top: 0; }   /* la marge de la tête fait l'écart (32 · 28 · 28) */
.presentation-grille .lecon-lecteur { margin-top: 0; }
.presentation-affiche { display: block; height: 100%; }
.presentation-image { height: 100%; }
.presentation-affiche .lecture {
  width: 76px;
  height: 76px;
  padding-left: 4px;
  background: rgb(17 17 17 / .62);
  border-color: rgb(255 255 255 / .5);
  color: var(--c-blanc);
  transition: background var(--duree-survol);
}
.presentation-affiche:hover .lecture { background: rgb(17 17 17 / .85); }

/* LE TEXTE : le corps d'un article, sans surcharge (Ludovic, 24/09). */
.presentation-texte {
  margin-top: 28px;
  max-width: var(--largeur-lecture);
}

/* « Commencer la masterclass » : au rail sous un filet noir ; au téléphone,
   sous la vidéo (responsive.css). */
.presentation-commencer {
  padding-top: 18px;
  border-top: 1px solid var(--filet-noir);
}
.presentation-commencer .bouton { width: 100%; gap: 8px; }
.presentation-commencer-tel { display: none; }
/* Sur la présentation, le programme se lit en entier : pas de hauteur
   maximale. Plus haut que l'écran (Ukraine), le rail ne colle simplement
   pas — il fait alors la hauteur de la grille. */
.presentation-rail,
body:has(.entete.escamote) .presentation-rail { max-height: none; overflow: visible; }

/* LE PROGRAMME DÉTAILLÉ */
.presentation-programme-titre { margin-top: 28px; }
/* Le détail que la brique du programme ajoute sur la présentation. */
.presentation-programme-titre + .lecon-modules,
.presentation-programme-titre + .lecon-lignes-seules { margin-top: 8px; }
.presentation-programme-titre + .lecon-modules > .lecon-module:first-child,
.presentation-programme-titre + .lecon-lignes-seules > .lecon-ligne:first-child { border-top: 0; }
.lecon-ligne-libre {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: var(--taille-meta);
  font-weight: 600;
}
.lecon-ligne-description,
.lecon-module-chapeau {
  display: -webkit-box;
  margin-top: 4px;
  font-family: var(--police-meta);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--gris-texte-secondaire);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.lecon-module-chapeau { -webkit-line-clamp: 3; line-clamp: 3; }

/* Le mur d'une leçon : la ligne qui dit que l'abonnement comprend tout. */
.lecon-verrou-texte-court {
  margin-top: -6px;
  font-family: var(--police-meta);
  font-size: var(--text-sm);
  color: var(--gris-meta-sur-sombre);
}