/* =============================================================
   Cours — catalogue, fiche et lecteur.

   Porté depuis mew_dash/css/style.css, sections « 31. CATALOGUE DE
   COURS », « 32. FICHE DE COURS » et « 33. LECTEUR DE COURS », pour
   les trois pages refondues :
     /search-courses        -> mew_dash/cours.html
     /course/{slug}         -> mew_dash/cours-fiche.html
     /course-taking/{slug}  -> mew_dash/mentee/cours-lecture.html

   Ces maquettes reposent sur le système du tableau de bord
   (.page, .wrap, .btn, .card, .avatar, .badge), déjà servi par
   public/lernen/css/style.css : seules les règles propres aux cours
   sont reprises ici. Les couleurs de marque viennent des variables
   de cette feuille, pas du corail de mew_dash.
   ============================================================= */

/* 31. CATALOGUE DE COURS -------------------------------------
   Colonne de facettes + grille de cartes. Sert au listing des
   cours et, à terme, à celui des mentors.
------------------------------------------------------------- */
/* Héros du catalogue : un fil d'Ariane, un titre, rien d'autre.
   `.hero-head` de la maquette n'a pas de marge basse — elle y est suivie
   d'une accroche puis d'un bloc d'appel. Ici le bandeau crème s'arrêterait
   net sous le titre. */
.cours-page .hero-head { padding-bottom: 60px; }

.catalog { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; }
.catalog-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }

.catalog-filtres { display: none; }

.facets { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-card); padding: 8px 22px 14px; }
.facet { border-top: 1.5px solid var(--line); padding: 18px 0; }
.facet:first-child { border-top: none; }
.facet-head { display: flex; align-items: center; width: 100%; padding: 0; border: none; background: none; font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); cursor: pointer; }
.facet-head .ico { margin-left: auto; font-size: 20px; color: var(--muted-4); transition: transform .22s ease; }
.facet.is-closed .facet-head .ico { transform: rotate(180deg); }
.facet.is-closed .facet-body { display: none; }
.facet-body { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; }

.checkline { display: flex; align-items: center; gap: 11px; padding: 7px 8px; margin: 0 -8px; border-radius: 10px; font-size: 15.5px; font-weight: 600; color: var(--muted-2); cursor: pointer; transition: background .15s ease, color .15s ease; }
.checkline:hover { background: var(--surface); color: var(--ink); }
.checkline input { width: 18px; height: 18px; accent-color: var(--brand); flex-shrink: 0; cursor: pointer; }
.checkline .grow { min-width: 0; }
.checkline b { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--muted-5); }
.checkline.is-empty { opacity: .45; pointer-events: none; }
.checkline:has(input:checked) { color: var(--ink); font-weight: 800; }
.checkline .stars--sm { flex-shrink: 0; }

.catalog-count { font-size: 17px; font-weight: 700; color: var(--muted-2); }
.catalog-count b { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }

/* carte de cours */
.coursegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(298px, 1fr)); gap: 20px; }
.coursecard { display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-card); overflow: hidden; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.coursecard:hover { border-color: var(--brand-line); transform: translateY(-3px); box-shadow: var(--sh-soft); }
.coursecard-media { position: relative; aspect-ratio: 16 / 10; background: var(--surface); }
.coursecard-media .ph { width: 100%; height: 100%; border-radius: 0; }
/* La maquette n'avait qu'un bloc gris à cet endroit : ici c'est une vraie
   vignette de cours, qui doit remplir la boîte sans se déformer. */
.coursecard-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.coursecard-play { position: absolute; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .88); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.coursecard-off { position: absolute; left: 0; top: 16px; padding: 6px 12px 6px 14px; border-radius: 0 var(--pill) var(--pill) 0; background: var(--brand); color: #fff; font-size: 13px; font-weight: 800; }
.coursecard-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 4px; }
.coursecard-by { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; color: var(--muted-2); }
.coursecard-by .avatar { width: 30px; height: 30px; flex-shrink: 0; }
.coursecard-fav { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted-5); cursor: pointer; transition: background .15s ease, color .15s ease; }
.coursecard-fav:hover { background: var(--brand-tint); color: var(--brand); }
.coursecard-fav.is-on { color: var(--brand); }
.coursecard-title { font-size: 18px; font-weight: 800; line-height: 1.32; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
a.coursecard-title:hover { color: var(--brand); }
.coursecard-cat { font-size: 14px; font-weight: 700; color: var(--brand); }
.coursecard-note { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--muted-4); }
.coursecard-note .badge { background: var(--green); color: #fff; }
.coursecard .meta-list { margin: 0; gap: 6px 16px; }
.coursecard-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 18px; border-top: 1.5px solid var(--line); }
.coursecard-price { display: flex; align-items: baseline; gap: 7px; }
.coursecard-price b { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.coursecard-price s { font-size: 15px; font-weight: 700; color: var(--muted-5); }
.coursecard-dur { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--muted-4); }

.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 34px; }
.pager a, .pager span { min-width: 42px; height: 42px; padding: 0 14px; border-radius: var(--r-xs); display: inline-flex; align-items: center; justify-content: center; font-size: 15.5px; font-weight: 800; color: var(--muted-2); background: #fff; border: 1.5px solid var(--line); }
.pager a:hover { border-color: var(--brand-line); color: var(--ink); }
.pager .is-current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager .is-off { opacity: .4; pointer-events: none; }

/* 32. FICHE DE COURS ------------------------------------------ */
.course-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; align-items: start; }
.course-grid > * { min-width: 0; }
.course-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }

.course-facts { display: flex; flex-wrap: wrap; gap: 14px 44px; padding: 18px 0; margin: 20px 0 0; border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); }
.course-fact { display: flex; flex-direction: column; gap: 3px; }
.course-fact span { font-size: 13.5px; font-weight: 700; color: var(--muted-5); }
.course-fact b { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 800; }
.course-fact b .ico { font-size: 19px; color: var(--muted-4); }

.anchors { display: flex; gap: 4px; overflow-x: auto; margin: 26px 0 34px; border-bottom: 1.5px solid var(--line); }
.anchors a { padding: 14px 18px; font-size: 15.5px; font-weight: 800; color: var(--muted-4); border-bottom: 3px solid transparent; white-space: nowrap; }
.anchors a:hover { color: var(--ink); }
.anchors a.is-current { color: var(--brand); border-bottom-color: var(--brand); }

.learnlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 32px; }
.learnrow { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--muted-2); }
.learnrow .ico { flex-shrink: 0; font-size: 20px; color: var(--green); margin-top: 1px; }

.curric { display: flex; flex-direction: column; gap: 10px; }
.curric-mod { border: 1.5px solid var(--line); border-radius: var(--r-xs); background: #fff; overflow: hidden; }
.curric-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 17px 20px; border: none; background: none; font-family: inherit; text-align: left; cursor: pointer; }
.curric-head > .ico:first-child { font-size: 20px; color: var(--muted-4); transition: transform .22s ease; }
.curric-mod.is-open .curric-head > .ico:first-child { transform: rotate(90deg); }
.curric-name { flex: 1; min-width: 0; font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.curric-count { font-size: 14px; font-weight: 700; color: var(--muted-4); white-space: nowrap; }
.curric-body { padding: 0 20px 16px; }
.curric-mod:not(.is-open) .curric-body { display: none; }
.curric-mod.is-open { background: var(--surface); }
.curric-intro { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--muted-3); }
.curric-lesson { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-xs); background: #fff; margin-bottom: 8px; }
.curric-lesson:last-child { margin-bottom: 0; }
.curric-lesson > .ico { font-size: 19px; color: var(--muted-4); margin-top: 1px; flex-shrink: 0; }
.curric-lesson .grow { min-width: 0; }
.curric-lesson b { display: block; font-size: 15.5px; font-weight: 700; }
.curric-lesson small { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--muted-4); }
.curric-time { font-size: 14px; font-weight: 700; color: var(--muted-4); white-space: nowrap; }

.buycard { border: 1.5px solid var(--line); border-radius: var(--r-card); background: #fff; overflow: hidden; }
.buycard-media { position: relative; aspect-ratio: 16 / 10; background: var(--surface); }
.buycard-media .ph { width: 100%; height: 100%; border-radius: 0; }
.buycard-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.buycard-price { display: flex; align-items: baseline; gap: 9px; }
.buycard-price b { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.buycard-price s { font-size: 17px; font-weight: 700; color: var(--muted-5); }
.buycard-list { display: flex; flex-direction: column; gap: 11px; }
.buycard-list span { display: flex; align-items: center; gap: 11px; font-size: 15.5px; font-weight: 700; color: var(--muted-2); }
.buycard-list .ico { font-size: 20px; color: var(--muted-4); }

.mentorcard { border: 1.5px solid var(--line); border-radius: var(--r-card); background: #fff; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
.mentorcard-top { display: flex; gap: 13px; align-items: center; }
.mentorcard-top .avatar { width: 52px; height: 52px; flex-shrink: 0; }
.mentorcard-name { display: flex; align-items: center; gap: 7px; font-size: 17.5px; font-weight: 800; letter-spacing: -.01em; }
.mentorcard-name .ico { font-size: 17px; color: var(--brand); }
.mentorcard-role { display: block; margin-top: 1px; font-size: 14px; font-weight: 600; color: var(--muted-4); }
.mentorcard-bio { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted-3); }
.langpills { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.langpill { padding: 5px 11px; border-radius: var(--pill); background: var(--surface); font-size: 13.5px; font-weight: 700; color: var(--muted-2); }
.langpill.is-native { background: var(--brand-tint); color: var(--brand); }

/* 33. LECTEUR DE COURS ---------------------------------------
   Page pleine, thème sombre : sommaire à gauche, vidéo au
   centre, informations à droite.
------------------------------------------------------------- */
.player { position: fixed; inset: 0; display: grid; grid-template-columns: 330px minmax(0, 1fr); background: #181614; color: #fff; overflow: hidden; }
.player-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid rgba(255, 255, 255, .1); }
.player-brand { display: flex; align-items: center; gap: 12px; padding: 18px 22px; }
.player-brand .brand-name { color: #fff; }
.player-brand .brand-mark { background: var(--brand); }
.player-back { display: flex; align-items: center; gap: 10px; margin: 0 18px 18px; padding: 13px 16px; border-radius: var(--r-xs); background: rgba(255, 255, 255, .07); font-size: 15.5px; font-weight: 800; color: #fff; }
.player-back:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.player-outline { flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px 24px; }
.player-label { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }
.player-course { display: block; margin: 6px 0 18px; font-size: 18px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; }

.pmod { border-radius: var(--r-xs); margin-bottom: 4px; }
.pmod-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: none; background: none; font-family: inherit; text-align: left; color: #fff; cursor: pointer; border-radius: var(--r-xs); }
.pmod-head:hover { background: rgba(255, 255, 255, .06); }
.pmod-head .grow { min-width: 0; }
.pmod-head b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.pmod-head small { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .5); }
.pmod-head > .ico { font-size: 20px; color: rgba(255, 255, 255, .5); flex-shrink: 0; transition: transform .22s ease; }
.pmod.is-open { background: rgba(255, 255, 255, .07); }
.pmod.is-open .pmod-head > .ico { transform: rotate(90deg); }
.pmod.is-open .pmod-head b { font-weight: 800; }
.pmod:not(.is-open) .pmod-body { display: none; }
.pmod-body { padding: 2px 14px 12px 26px; border-left: 1px solid rgba(255, 255, 255, .14); margin-left: 14px; }
.plesson { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: rgba(255, 255, 255, .82); }
.plesson:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.plesson.is-current { background: rgba(255, 99, 99, .16); color: #fff; }
.plesson .grow { min-width: 0; }
.plesson b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.plesson small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .5); }
.plesson > .ico { font-size: 19px; color: rgba(255, 255, 255, .45); flex-shrink: 0; }
.plesson.is-done > .ico { color: var(--green); }
.plesson.is-current > .ico { color: var(--brand); }

.player-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #F7F5F3; }
.player-bar { display: flex; align-items: center; gap: 14px; padding: 12px 26px; background: #181614; flex-wrap: wrap; }
.player-bar .grow { min-width: 0; }
.player-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.player-stage { position: relative; aspect-ratio: 16 / 8; background: #100F0E; }
.player-stage .ph { width: 100%; height: 100%; border-radius: 0; }
.player-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, .82); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.player-play .ico { font-size: 38px; }
.player-by { position: absolute; left: 24px; bottom: 20px; display: flex; align-items: center; gap: 11px; padding: 8px 16px 8px 8px; border-radius: var(--pill); background: rgba(24, 22, 20, .62); backdrop-filter: blur(6px); color: #fff; }
.player-by .avatar { width: 36px; height: 36px; }
.player-by b { display: block; font-size: 15px; font-weight: 800; }
.player-by small { display: block; font-size: 13px; color: rgba(255, 255, 255, .68); }

.player-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0; background: #fff; min-height: 400px; }
.player-cols > * { min-width: 0; }
.player-doc { padding: 0 30px 40px; border-right: 1.5px solid var(--line); }
.player-info { padding: 26px; display: flex; flex-direction: column; gap: 22px; background: var(--surface); }

/* barre publique : entrées de navigation au centre */
/* barre publique seulement : le dashboard garde sa répartition */
.navbar:has(.nav-links) .nav-links { flex: 1; justify-content: center; }
.navbar:has(.nav-links) .nav-actions { margin-left: auto; }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { padding: 9px 14px; border-radius: var(--pill); font-size: 15.5px; font-weight: 700; color: var(--muted-2); white-space: nowrap; }
.nav-links a:hover { background: var(--surface); color: var(--ink); }
.nav-links a.is-current { background: var(--brand-tint); color: var(--brand); }
/* .nav-group 236 + .nav-links 463 + .nav-actions 268 + gaps 36
   = 1003, sous les 1146 px utiles de .wrap. En dessous du seuil,
   le burger et #menu-lateral portent les mêmes entrées. */
@media (max-width: 1040px) {
  .nav-links { display: none; }
}

.player-menu { display: none; }
.sheet--dark .sheet-side { background: #181614; color: #fff; }
.sheet--dark .sheet-side .player-course { color: #fff; }
.sheet--dark .iconbtn--plain { background: rgba(255, 255, 255, .1); color: #fff; }
.sheet--dark .iconbtn--plain:hover { background: rgba(255, 255, 255, .18); }

@media (max-width: 1240px) {
  .catalog { grid-template-columns: 260px minmax(0, 1fr); }
  .course-grid, .player-cols { grid-template-columns: 1fr; }
  .course-side { position: static; }
  .player-doc { border-right: none; border-bottom: 1.5px solid var(--line); }
}
@media (max-width: 1040px) {
  .catalog { grid-template-columns: 1fr; }
  .catalog-filtres { display: inline-flex; }
  .catalog-side { display: none; }
  #filtres .sheet-side { width: min(380px, 92vw); }
  #filtres .facets { border: none; padding: 0; }
  /* le pied collant s'ancre sur la padding box du scrollport :
     on retire le padding bas et on le reporte sur le pied */
  #filtres .sheet-side { padding-bottom: 0; }
  #filtres .sheet-foot { margin: 0 -22px; padding: 14px 22px 22px; border-top: none; gap: 10px; }
  .player { grid-template-columns: 1fr; }
  .player-side { display: none; }
  .player-menu { display: inline-flex; }
}
@media (max-width: 640px) {
  .coursegrid { grid-template-columns: 1fr; }
  .course-facts { gap: 14px 28px; }
  .player-doc { padding: 0 20px 30px; }
  .player-bar { padding: 10px 14px; gap: 10px; }
  /* la barre du lecteur se réduit à l'essentiel : sommaire, avancement, compte */
  .player-bar .btn--white,
  .player-bar .progress-value { display: none; }
  .player-bar .row { max-width: none; }
  .player-stage { aspect-ratio: 16 / 10; }
  .player-play { width: 58px; height: 58px; }
  .player-play .ico { font-size: 30px; }
  .player-by { left: 14px; bottom: 14px; padding: 6px 13px 6px 6px; }
  .player-info { padding: 20px; }
  .player-info .row--wrap .btn { flex: 1 1 100%; }
}

/* --- Compléments propres à l'intégration ---------------------- */

/* La ligne « mentor » de la fiche : la maquette la compose à la main,
   ici c'est un lien cliquable vers sa page. */
.cours-page .cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
}
.cours-page .cell:hover .cell-name { color: var(--brand); }

/* Pastille du mentor, plus petite que le .avatar par défaut (46px). */
.avatar--44 { width: 44px; height: 44px; }

/* Corps de texte riche venu de l'éditeur (description, leçons). */
.cours-page .prose { font-size: 16.5px; line-height: 1.7; color: var(--muted-2); }
.cours-page .prose p { margin: 0 0 14px; }
.cours-page .prose ul, .cours-page .prose ol { margin: 0 0 14px; padding-left: 20px; }
.cours-page .prose img { max-width: 100%; height: auto; border-radius: var(--r-xs); }

/* La vignette de la carte d'inscription : image réelle, pas un aplat. */
.buycard-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Le fil d'Ariane passait à 20 px sous la barre de navigation flottante :
   les deux se touchaient presque. */
.cours-page .crumbs { padding-top: 48px; }

/* `.h2` du système n'a aucune marge — sur cette page le titre de section
   collait au texte, au programme ou à la FAQ qui le suit. */
.cours-page .section > .h2 { margin-bottom: 30px; }
/* Sauf l'accroche qui commente le titre (« 3 sections · 9 leçons ») :
   elle appartient au titre et reste juste dessous. */
.cours-page .section > .h2 + .hint { margin: -22px 0 30px; }

/* --- Aperçu vidéo -------------------------------------------
   Deux gestes distincts :
     - la carte d'inscription joue la vidéo de présentation SUR
       PLACE, la vignette lui servant d'affiche ;
     - la pastille « Aperçu » d'une leçon gratuite ouvre la fenêtre
       `.vmodal`, alimentée par les data-video* du déclencheur.
   Les deux sont câblés dans cours-page.js.
------------------------------------------------------------- */
.buycard-media { display: block; }
.buycard-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
/* L'affiche entière démarre la lecture (voir cours-page.js). */
.buycard-media:has(video):not(.is-playing) { cursor: pointer; }
/* Une fois la lecture lancée, les commandes natives prennent la main :
   le rond dessiné n'a plus lieu d'être. */
.buycard-media.is-playing .buycard-play { display: none; }
.buycard-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(4px);
  box-shadow: 0 10px 26px -10px rgba(24, 22, 20, .5);
  transition: background .18s ease, transform .18s ease;
}
.buycard-play:hover { background: #fff; transform: translate(-50%, -50%) scale(1.07); }

/* La pastille « Aperçu » devient un bouton : même dessin, plus le
   curseur et l'état survolé qui disent qu'on peut cliquer. */
button.badge { font-family: inherit; border: none; cursor: pointer; }
.curric-preview { display: inline-flex; align-items: center; gap: 5px; transition: background .15s ease, color .15s ease; }
.curric-preview .ico { font-size: 15px; }
.curric-preview:hover { background: var(--brand); color: #fff; }

.vmodal {
  position: fixed; inset: 0; z-index: 80; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(24, 22, 20, .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.vmodal.is-open { display: flex; animation: popScrim .24s ease both; }
.vmodal-card {
  position: relative; width: min(980px, 100%); background: #100F0E;
  border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 44px 90px -28px rgba(0, 0, 0, .6);
  animation: paneIn .3s cubic-bezier(.22, .8, .28, 1) both;
}
.vmodal-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 20px; color: #fff; }
.vmodal-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmodal-close {
  flex: none; width: 38px; height: 38px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease;
}
.vmodal-close:hover { background: rgba(255, 255, 255, .24); }
.vmodal-stage { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vmodal-stage video, .vmodal-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 640px) {
  .vmodal { padding: 14px; }
  .vmodal-head { padding: 12px 12px 12px 16px; }
}

/* Alpine n'est prêt qu'après le premier rendu : sans cette règle le
   « voir plus » d'un avis long montre brièvement les deux versions du
   commentaire. */
.cours-page [x-cloak] { display: none !important; }