/*/////////////////////////////////////////////////////////////////
///////////////////   C8H11N PLAYER — STYLESHEET   ////////////////
/////////////////////////////////////////////////////////////////

  Convention rem : html = 10px, donc 1rem = 10px, 1.6rem = 16px.
  Toutes les tailles sont en rem (sauf 1px de bordure et les %).

  Sommaire
    01. RESET & BASE
    02. TOKENS (couleurs, espacements, typo)
    03. ANIMATIONS
    04. SHELL / FONDS
    05. BLOCS PARTAGÉS (boutons, langue, transport, volume)
    06. MOBILE — ENVELOPPE & ONGLETS
    07. MOBILE — ÉCRAN NOW
    08. TRACKLIST
    09. PAROLES (bandes compacte & large)
    10. DESKTOP — PANNEAUX
    11. MODALE DÉFINITION
/////////////////////////////////////////////////////////////////*/


/*/////////////////////////////////////////////////////////////////
////////////////////////   01. RESET & BASE   /////////////////////
/////////////////////////////////////////////////////////////////*/

html {
  font-size: 10px;                 /* 1rem = 10px */
  background: #000;
}

body {
  margin: 0;
  height: 100%;
  background: #000;
  font-family: Archivo, system-ui, sans-serif;
  font-size: 1.4rem;
  -webkit-font-smoothing: antialiased;
}

a         { color: #f2f2f2; }
a:hover   { color: #fff; }

*::-webkit-scrollbar        { width: .6rem; height: .6rem; }
*::-webkit-scrollbar-thumb  { background: rgba(255, 255, 255, .18); border-radius: .3rem; }
*::-webkit-scrollbar-track  { background: transparent; }


/*/////////////////////////////////////////////////////////////////
///////////////////////////   02. TOKENS   ///////////////////////
/////   Les 3 variables --pl-accent / --pl-sung / --pl-scrim   ////
/////   sont injectées par le composant (thème de l'EP).       ////
/////////////////////////////////////////////////////////////////*/

.pl {
  /* fallbacks si le thème n'est pas injecté */
  --pl-accent:      #3fe8bd;
  --pl-sung:        #a97cff;
  --pl-scrim:       rgba(0, 0, 0, .66);

  /* neutres */
  --pl-ink:         #f2f2f2;
  --pl-ink-strong:  #fff;
  --pl-ink-soft:    rgba(255, 255, 255, .72);
  --pl-ink-mute:    rgba(255, 255, 255, .45);
  --pl-ink-faint:   rgba(255, 255, 255, .4);
  --pl-line:        rgba(255, 255, 255, .1);
  --pl-line-soft:   rgba(255, 255, 255, .16);
  --pl-panel:       rgba(0, 0, 0, .66);
  --pl-hover:       rgba(255, 255, 255, .06);
  --pl-active:      rgba(255, 255, 255, .1);

  /* typo */
  --pl-mono:        'IBM Plex Mono', monospace;
  --pl-display:     Anton, Impact, sans-serif;
  --pl-body:        Archivo, sans-serif;

  /* rythme */
  --pl-gutter:      2rem;
  --pl-gutter-lg:   3.4rem;
  --pl-radius-pill: 99.9rem;
}


/*/////////////////////////////////////////////////////////////////
/////////////////////////   03. ANIMATIONS   /////////////////////
/////////////////////////////////////////////////////////////////*/

@keyframes pl-scan {
  0%   { transform: translateY(0); }
  100% { transform: translateY(.6rem); }
}

@keyframes pl-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-.15rem, .1rem); }
  50%  { transform: translate(.1rem, -.1rem); }
  75%  { transform: translate(-.1rem, -.15rem); }
  100% { transform: translate(0, 0); }
}


/*/////////////////////////////////////////////////////////////////
///////////////////////   04. SHELL / FONDS   ////////////////////
/////////////////////////////////////////////////////////////////*/

.pl {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  background: #000;
  color: var(--pl-ink);
}

/* couches empilées derrière l'interface */
.pl-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pl-layer--field  { z-index: 0; }
.pl-layer--scrim  { z-index: 0; background: var(--pl-scrim); }
.pl-layer--scan   {
  z-index: 9;
  opacity: var(--pl-scan, .5);
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px);
  animation: pl-scan 1.6s steps(3) infinite;
}

/* voile local d'un panneau (paroles, colonnes desktop) */
.pl-veil {
  position: absolute;
  inset: 0;
  background: var(--pl-scrim);
}

/* titre H1 caché, conservé pour le référencement */
.pl-seo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}


/*/////////////////////////////////////////////////////////////////
/////////////////////   05. BLOCS PARTAGÉS   /////////////////////
/////////////////////////////////////////////////////////////////*/

/* --- étiquette mono commune (num · type, tracklist, onglets) --- */
.pl-meta {
  font: 400 .95rem/1 var(--pl-mono);
  letter-spacing: .22em;
  color: var(--pl-ink-faint);
}

.pl-wordmark {
  font: 400 .95rem/1 var(--pl-mono);
  letter-spacing: .22em;
  color: var(--pl-ink-strong);
}

.pl-eyebrow {
  font: 500 1rem/1 var(--pl-mono);
  letter-spacing: .18em;
  color: var(--pl-accent);
}

/* --- flèche retour --- */
.pl-back {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--pl-line-soft);
  border-radius: var(--pl-radius-pill);
  color: var(--pl-ink-soft);
  font: 400 1.3rem/1 var(--pl-mono);
  text-decoration: none;
}
.pl-back:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }
.pl-back--sm   { width: 2.8rem; height: 2.8rem; }

/* --- sélecteur de langue --- */
.pl-lang {
  display: flex;
  flex: none;
  gap: .4rem;
  padding: .3rem;
  border-radius: var(--pl-radius-pill);
  background: rgba(255, 255, 255, .07);
}
.pl-lang__btn {
  border: 0;
  padding: .7rem 1.1rem;
  border-radius: var(--pl-radius-pill);
  background: transparent;
  color: rgba(255, 255, 255, .6);
  font: 600 .95rem/1 var(--pl-mono);
  letter-spacing: .1em;
  cursor: pointer;
}
.pl-lang__btn.is-active { background: #fff; color: #000; }
.pl-lang--wide          { background: rgba(255, 255, 255, .08); }
.pl-lang--wide .pl-lang__btn { padding: .8rem 1.3rem; font-size: 1rem; }

/* --- barre de progression --- */
.pl-seek        { padding: .8rem 0; cursor: pointer; }
.pl-seek--wide  { padding: .6rem 0; }
.pl-progress {
  position: relative;
  height: .2rem;
  background: var(--pl-line-soft);
}
.pl-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: #fff;
}
.pl-progress__head {
  position: absolute;
  top: -.3rem;
  width: .2rem;
  height: .8rem;
  background: #fff;
}

/* --- transport --- */
.pl-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
}
.pl-skip {
  border: 0;
  background: none;
  color: var(--pl-ink);
  font-size: 1.6rem;
  padding: .8rem 1.2rem;
  cursor: pointer;
}
.pl-play {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(5.2rem, 11vh, 6.6rem);
  height: clamp(5.2rem, 11vh, 6.6rem);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 2rem;
  cursor: pointer;
}
.pl-play--wide {
  width: 6rem;
  height: 6rem;
  border: 0;
  font-size: 1.9rem;
}

/* --- volume --- */
.pl-volume {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.pl-volume__btn {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--pl-line-soft);
  border-radius: var(--pl-radius-pill);
  background: none;
  color: var(--pl-ink-strong);
  font: 400 1rem/1 var(--pl-mono);
  cursor: pointer;
}
.pl-volume__btn.is-muted { color: var(--pl-ink-faint); }
.pl-volume__range {
  width: 10.4rem;
  height: .3rem;
  border-radius: .2rem;
  background: var(--pl-line-soft);
  accent-color: #fff;
  cursor: pointer;
}
.pl-volume__range--sm { width: 7rem; }

/* --- horloge --- */
.pl-time {
  font: 400 1rem/1 var(--pl-mono);
  color: var(--pl-ink-mute);
}


/*/////////////////////////////////////////////////////////////////
//////////////   06. MOBILE — ENVELOPPE & ONGLETS   //////////////
/////////////////////////////////////////////////////////////////*/

.pl-mobile {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 52rem;
  margin: 0 auto;
}

.pl-mobile__top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.6rem var(--pl-gutter) 1rem;
}
.pl-mobile__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.pl-mobile__body {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.pl-tabs {
  position: relative;
  z-index: 5;
  flex: none;
  display: flex;
  border-top: 1px solid var(--pl-line);
  background: rgba(0, 0, 0, .4);
}
.pl-tabs__btn {
  flex: 1;
  border: 0;
  background: none;
  padding: 1.7rem 0 2.4rem;
  font: 600 .95rem/1 var(--pl-mono);
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .42);
  cursor: pointer;
}
.pl-tabs__btn.is-active { color: #fff; }


/*/////////////////////////////////////////////////////////////////
///////////////////   07. MOBILE — ÉCRAN NOW   ///////////////////
/////////////////////////////////////////////////////////////////*/

.pl-now {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0 var(--pl-gutter) .4rem;
  overflow: hidden;
}

/* pochette : carrée, se réduit avant tout le reste */
/* Le carré est ancré par la HAUTEUR (le div n'a pas de contenu en flux :
   avec height:auto un item flex se réduirait à 0). La largeur suit
   l'aspect-ratio, et flex-shrink laisse la pochette céder en premier. */
.pl-cover {
  position: relative;
  flex: 0 1 auto;
  width: auto;
  max-width: 90%;
  height: min(52vh, 37.5rem);
  min-height: 0;
  margin: 0 auto;
  aspect-ratio: 1;
  border-radius: .4rem;
  overflow: hidden;
  cursor: pointer;
  animation: pl-drift 5s ease-in-out infinite;
}
/* pochette en fond : le chemin vient du slug de l'URL, aucune
   requête n'est lancée avant que la valeur soit résolue */
.pl-cover { background: #0b0b0b center / cover no-repeat; }
/* dédoublement chromatique piloté par le réglage "glitch" */
.pl-cover__ghost {
  position: absolute;
  inset: 0;
  background: #ff0080;
  mix-blend-mode: screen;
  opacity: var(--pl-ab, 0);
  transform: translateX(-.2rem);
}
/* Colonne desktop : ici c'est la LARGEUR qui est définie,
   la hauteur se déduit de l'aspect-ratio. */
.pl-cover--wide {
  flex: none;
  width: 100%;
  max-width: none;
  height: auto;
  border-radius: .3rem;
  animation: none;
}

.pl-now__title {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: 1.2rem;
}
.pl-track-title {
  font-family: var(--pl-display);
  font-size: clamp(2.8rem, 7vw, 4rem);
  line-height: .92;
  text-transform: uppercase;
  text-shadow: var(--pl-glitch, none);
}

/* bloc bas : karaoké + seek + transport, hauteur réelle réservée */
.pl-now__foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: auto;
  padding-bottom: .2rem;
}

.pl-now__row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: -.8rem;
  font: 400 .95rem/1 var(--pl-mono);
  color: var(--pl-ink-mute);
}
.pl-now__row-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .8rem;
}


/*/////////////////////////////////////////////////////////////////
//////////////////////////  08. TRACKLIST  ///////////////////////
/////////////////////////////////////////////////////////////////*/

.pl-ep {
  height: 100%;
  padding: .4rem 0 2rem;
  overflow-y: auto;
}
.pl-ep__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 var(--pl-gutter);
  font-family: var(--pl-display);
  font-size: 4rem;
  line-height: 1;
  text-transform: uppercase;
}
.pl-ep__meta {
  margin: .6rem var(--pl-gutter) 1.8rem;
  font: 400 .95rem/1 var(--pl-mono);
  letter-spacing: .2em;
  color: var(--pl-ink-faint);
}

.pl-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0 2.4rem 1.4rem;
}
.pl-list__head .pl-list__label { padding: 0; }
.pl-list__head--ep { padding: 0 0 1.4rem; justify-content: flex-start; }

/* bascule des interludes : texte + interrupteur ovale.
   Allumée = les interludes comptent dans l'enchaînement. */
.pl-int {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .4rem 0;
  min-height: 2.8rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.pl-int__label {
  font: 400 .95rem/1 var(--pl-mono);
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .4);
  transition: color .2s;
}
.pl-int:hover .pl-int__label { color: rgba(255, 255, 255, .75); }
.pl-int--on .pl-int__label { color: var(--pl-accent); }

.pl-int__track {
  position: relative;
  display: block;
  width: 3.6rem;
  height: 1.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .18);
  transition: background .22s, border-color .22s;
}
.pl-int__knob {
  position: absolute;
  top: 50%;
  left: .25rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transform: translateY(-50%);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), background .22s;
}
.pl-int--on .pl-int__track {
  background: color-mix(in oklch, var(--pl-accent) 26%, transparent);
  border-color: color-mix(in oklch, var(--pl-accent) 60%, transparent);
}
.pl-int--on .pl-int__knob {
  background: var(--pl-accent);
  transform: translate(1.65rem, -50%);
}

.pl-list__label {
  padding: 0 2.4rem 1.4rem;
  font: 400 .95rem/1 var(--pl-mono);
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .55);
}

/* ligne pleine largeur : le fond actif va bord à bord,
   les paddings internes font respirer numéro et durée */
.pl-track {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.3rem var(--pl-gutter);
  border-top: 1px solid rgba(255, 255, 255, .09);
  background: transparent;
  opacity: .82;
  cursor: pointer;
  transition: background .25s, text-shadow .25s, opacity .25s;
}
.pl-track:hover        { opacity: 1; text-shadow: 0 0 2rem rgba(255, 255, 255, .5); }
.pl-track--int         { opacity: .42; }
.pl-track.is-active {
  padding-left: 3rem;
  background: var(--pl-active);
  opacity: 1;
  text-shadow: 0 0 2.2rem rgba(255, 255, 255, .55);
}

.pl-track__num {
  flex: none;
  width: 2.6rem;
  font: 500 1rem/1 var(--pl-mono);
  color: var(--pl-ink-faint);
}
.pl-track__title {
  flex: 4;
  font-family: var(--pl-display);
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--pl-ink-soft);
}
.pl-track--int .pl-track__title {
  font-family: var(--pl-mono);
  font-size: 1.3rem;
  letter-spacing: .08em;
}
.pl-track__dur {
  font: 400 1rem/1 var(--pl-mono);
  color: rgba(255, 255, 255, .35);
}
.pl-track.is-active .pl-track__num,
.pl-track.is-active .pl-track__title { color: #fff; }

/* variante colonne desktop : gouttières et titres plus serrés */
.pl-track--wide             { padding: 1.2rem 2.4rem; border-top-color: rgba(255, 255, 255, .08); }
.pl-track--wide:hover       { background: var(--pl-hover); }
.pl-track--wide.is-active   { padding-left: 2.4rem; }
.pl-track--wide .pl-track__title      { font-size: 2.2rem; }
.pl-track--wide.pl-track--int .pl-track__title { font-size: 1.1rem; }
.pl-track--wide .pl-track__dur        { color: rgba(255, 255, 255, .32); }


/*/////////////////////////////////////////////////////////////////
///////////   09. PAROLES (bande compacte & large)   /////////////
/////////////////////////////////////////////////////////////////*/

/* --- karaoké 3 lignes de l'écran NOW --- */
.pl-mini {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .5rem;
  min-height: 0;
  max-height: 30vh;
  overflow-x: hidden;
  overflow-y: auto;
  cursor: pointer;
}
.pl-mini__line {
  font-family: var(--pl-body);
  line-height: 1.32;
  text-wrap: pretty;
  transition: opacity .35s, color .35s;
}
.pl-mini__line--prev   { font-size: 1.5rem;  font-weight: 400; color: rgba(255, 255, 255, .68); opacity: .7; }
.pl-mini__line--cur    { font-size: 2rem;    font-weight: 500; color: #fff; opacity: 1; }
.pl-mini__line--idle   { opacity: .45; }
.pl-mini__line--next   { font-size: 1.5rem;  font-weight: 400; color: rgba(255, 255, 255, .9); opacity: .35; }
.pl-mini__line--spoken { font-size: 1.55rem; font-weight: 400; color: rgba(255, 255, 255, .8); opacity: 1; }

/* --- onglet paroles plein écran --- */
.pl-lyrics-screen { position: relative; height: 100%; }
.pl-lyrics {
  position: relative;
  height: 100%;
  padding: 1rem 2.2rem 2.6rem;
  overflow-y: auto;
}
.pl-lyrics__head {
  margin-bottom: 1.6rem;
  font: 500 1rem/1 var(--pl-mono);
  letter-spacing: .2em;
  color: var(--pl-accent);
}
.pl-lyrics--wide {
  z-index: 2;
  flex: 1;
  min-width: 0;
  height: auto;
  padding: .6rem var(--pl-gutter-lg) 2rem;
}

/* une ligne de paroles */
.pl-lyric {
  font-family: var(--pl-body);
  line-height: 1.32;
  margin: 0 0 1.3rem;
  text-wrap: pretty;
  transition: opacity .35s, color .35s;
}
.pl-lyric--section {            /* VERSE / CHORUS / BRIDGE */
  font-family: var(--pl-mono);
  font-size: .95rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pl-accent);
  opacity: .75;
  margin: 2rem 0 .8rem;
}
.pl-lyric--now    { font-size: 2.2rem;  color: #fff; opacity: 1; }
.pl-lyric--sung   { font-size: 1.95rem; color: var(--pl-sung); opacity: .82; }
.pl-lyric--next   { font-size: 1.95rem; color: rgba(255, 255, 255, .9); opacity: .3; }
.pl-lyric--spoken { font-size: 2rem;    color: rgba(255, 255, 255, .86); opacity: 1; }
.pl-lyric--empty {
  font-family: var(--pl-mono);
  font-size: 1.2rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .55);
  margin: 1rem 0;
}

/* bande large : mêmes rôles, échelle desktop */
.pl-lyrics--wide .pl-lyric          { line-height: 1.3; margin-bottom: 1.2rem; }
.pl-lyrics--wide .pl-lyric--now     { font-size: 2.4rem; }
.pl-lyrics--wide .pl-lyric--sung,
.pl-lyrics--wide .pl-lyric--next    { font-size: 2.1rem; }
.pl-lyrics--wide .pl-lyric--spoken  { font-size: 2rem; }


/*/////////////////////////////////////////////////////////////////
///////////////////   10. DESKTOP — PANNEAUX   ///////////////////
/////////////////////////////////////////////////////////////////*/

.pl-desktop {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
}

/* colonne 1 — identité, pochette, définition */
.pl-aside {
  position: relative;
  flex: 0 1 34rem;
  min-width: 26rem;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  padding: 2.6rem 2.4rem;
  border-right: 1px solid var(--pl-line);
  background: var(--pl-panel);
  overflow-y: auto;
}
.pl-aside__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pl-aside__count {
  font: 400 .95rem/1.8 var(--pl-mono);
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .55);
}

/* définition (colonne 1 et modale) */
.pl-def {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.pl-def__word {
  font-family: var(--pl-display);
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: .01em;
}
.pl-def__pos {
  font-family: var(--pl-body);
  font-style: italic;
  font-weight: 400;
  font-size: 1.7rem;
  color: rgba(255, 255, 255, .55);
}
.pl-def__ipa {
  font: 400 1rem/1 var(--pl-mono);
  letter-spacing: .12em;
  color: var(--pl-accent);
  overflow-wrap: break-word;
}
.pl-def__rule {
  width: 12rem;
  height: 1px;
  background: rgba(255, 255, 255, .25);
}
.pl-def__body {
  font: 400 1.25rem/1.65 var(--pl-body);
  color: rgba(255, 255, 255, .75);
  text-wrap: pretty;
}

/* colonne 2 — tracklist */
.pl-list {
  flex: 0 1 33rem;
  min-width: 25rem;
  max-width: 33rem;
  padding: 2.6rem 0;
  border-right: 1px solid var(--pl-line);
  background: var(--pl-panel);
  overflow-y: auto;
}

/* colonne 3 — scène (titre, paroles, transport)
   flex-basis 0 + min-width 0 : sa largeur ne dépend pas du texte */
.pl-stage {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.pl-stage__head {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.6rem var(--pl-gutter-lg) 1.4rem;
}
.pl-stage__id {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.pl-stage__title {
  font-family: var(--pl-display);
  font-size: 4.6rem;
  line-height: .95;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.pl-stage__foot {
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.4rem var(--pl-gutter-lg) 2.4rem;
  border-top: 1px solid var(--pl-line);
}
.pl-stage__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pl-stage__controls .pl-time,
.pl-stage__controls .pl-volume { width: 11rem; }
.pl-stage__controls .pl-volume { justify-content: flex-end; }
.pl-stage__transport { gap: 2.6rem; }


/*/////////////////////////////////////////////////////////////////
//////////////////   11. MODALE DÉFINITION   /////////////////////
/////////////////////////////////////////////////////////////////*/

.pl-modal {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(1rem);
  overflow-y: auto;
  cursor: pointer;
}
.pl-modal__card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 48rem;
  max-height: 100%;
  padding: clamp(2.8rem, 6vw, 4.4rem) clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 4.6rem);
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 4rem 9rem rgba(0, 0, 0, .7);
  color: var(--pl-ink);
  overflow-y: auto;
  cursor: default;
}
.pl-modal__close {
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  border: 0;
  background: transparent;
  font: 400 1.8rem/1 var(--pl-mono);
  color: rgba(255, 255, 255, .45);
  cursor: pointer;
}
.pl-modal__close:hover { color: var(--pl-ink); }

/* la définition en modale : mêmes rôles, échelle fluide */
.pl-modal .pl-def        { gap: 0; padding-top: 0; border-top: 0; }
.pl-modal .pl-def__word  { font-size: clamp(2.6rem, 7vw, 3.4rem); line-height: 1.05; overflow-wrap: break-word; }
.pl-modal .pl-def__pos   { font-size: clamp(1.6rem, 4.5vw, 2rem); }
.pl-modal .pl-def__ipa   { margin-top: 1.4rem; font-size: clamp(1rem, 2.8vw, 1.1rem); line-height: 1.4; }
.pl-modal .pl-def__rule  { width: 14rem; margin: 2rem 0 2.2rem; }
.pl-modal .pl-def__body  { font-size: clamp(1.3rem, 3.5vw, 1.4rem); line-height: 1.68; color: rgba(255, 255, 255, .78); }


/* ========================== CLIP VIDÉO ==========================
   Un badge sur la ligne de tracklist des pistes qui ont un clip
   (ep.js : TRACKS[n].clip), et la vidéo en plein écran par-dessus. */
.pl-clip-badge {
  flex: 1;
  margin-left: 1.4rem;
  padding: .45rem .8rem;
  min-height: 2.6rem;
  font: 500 .95rem/1 var(--pl-mono);
  letter-spacing: .16em;
  color: var(--pl-accent);
  background: transparent;
  border: 1px solid color-mix(in oklch, var(--pl-accent) 55%, transparent);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.pl-clip-badge:hover { background: var(--pl-accent); color: #000; }

.pl-modal--clip { cursor: default; padding: 1.6rem; }
.pl-clip {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(112rem, 100%);
}
.pl-clip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.pl-clip__head .pl-modal__close { position: static; }
/* le cadre garde le format 16/9 et laisse la vidéo tenir dans l'écran */
.pl-clip__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .14);
}
.pl-clip__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #000;
}

.pl-clip__out {
  align-self: center;
  font: 400 .95rem/1 var(--pl-mono);
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .45);
  text-decoration: none;
  padding: .8rem;
  min-height: 2.6rem;
}
.pl-clip__out:hover { color: var(--pl-accent); }

@media (max-width: 820px) {
  .pl-clip-badge { margin-left: 1rem; padding: .4rem .6rem; font-size: 1.3rem; letter-spacing: .1em; }
}