/* ============================================
   Radio MLK — feuille de l'appli (page /app/), dans l'extension (assets/appli/appli.css).
   Reprise de bricks-child/app/mlk-app.css le 20/10/2026 pour la nouvelle appli
   (maquette specs/maquette-appli-accueil.html validée par Emmanuel) :
   3 écrans (agenda ← accueil → émissions), lecteur toujours en bas au-dessus du menu et déplié en
   pleine page, bannière pub en haut de l'écran qui fait rétrécir le reste (rien ne défile sur
   l'accueil ni sur la grille, sauf plus de 12 émissions).
   Plus d'appel à Google Fonts (l'ancienne feuille importait Londrina sans s'en servir).
   ============================================ */

/* ── Page ── */
body.mlk-app-page {
  background: #000;
  overflow: hidden;
  height: 100dvh;
  margin-top: 0 !important;
}
body.mlk-app-page *                   { -webkit-tap-highlight-color: transparent !important; }
body.mlk-app-page button:focus,
body.mlk-app-page button:focus-visible,
body.mlk-app-page a:focus,
body.mlk-app-page a:focus-visible     { outline: none !important; box-shadow: none !important; }
body.admin-bar.mlk-app-page #wpadminbar { position: fixed; }
/* L'appli est une navigation gauche-droite sans défilement. Seule exception (Emmanuel, 24/10/2026) : l'espace Team,
   ouvert par l'icône compte sans rechargement (mlk-nav.js, la page garde la classe mlk-app-page) : lui seul défile */
body.mlk-app-page:not(:has(.mlk-app-screens)):has(.mlk-esp) { overflow: auto; height: auto; }

/* ── En-tête : compact, sur une ligne ; le bouton « Le direct » du site n'y est pas (le lecteur
      du bas et l'accueil le proposent) ── */
body.mlk-app-page #brx-header,
body.mlk-app-page header.brxe-header {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: unset !important;
  flex-wrap: nowrap !important;
}
body.mlk-app-page #brx-header section,
body.mlk-app-page #brx-header .brxe-section {
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
body.mlk-app-page #brx-header img { flex-shrink: 0 !important; }
/* « LE DIRECT ▶ » de l'en-tête, entre le logo et le bouton compte (20/10/2026) : remplace la ligne
   « Le direct » de l'accueil ; appli.js le branche sur appStartLive() (lecture / pause) sous l'id appLiveBtn */
body.mlk-app-page #brx-header .mlk-et-s { justify-content: space-between !important; }
body.mlk-app-page #brx-header .mlk-et-logo-bloc { flex: none; width: auto !important; }
body.mlk-app-page #brx-header .mlk-et-compte { position: static !important; right: auto !important; flex: none; margin-right: 14px; }
body.mlk-app-page #brx-header .mlk-et-s { position: relative; }
body.mlk-app-page #brx-header .mlk-et-direct-bloc {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: auto !important; margin: 0 !important; align-items: center; justify-content: center; z-index: 1;
}
body.mlk-app-page #brx-header .mlk-et-direct { display: flex; justify-content: center; margin: 0; }
body.mlk-app-page .mlk-header-live-wrap { display: flex !important; align-items: center; gap: 10px; }
body.mlk-app-page .mlk-header-live-text {
  display: inline !important; color: var(--th-a, #D20658); font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 600; font-size: clamp(14px, 2.2dvh, 17px); letter-spacing: .02em; text-transform: none; white-space: nowrap;
}
body.mlk-app-page #brx-header .mlk-header-live-btn {
  --btn-size: 34px; --btn-size-m: 34px;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  background: var(--th-a, #D20658); border: 2px solid #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--th-a, #D20658) 45%, transparent);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
body.mlk-app-page #brx-header .mlk-header-live-btn svg { width: 50%; height: 50%; margin: 0; fill: #fff; }
body.mlk-app-page #brx-header .mlk-header-live-btn.is-playing svg { animation: mlk-cassette 8s linear infinite; transform-origin: center; transform-box: fill-box; }
body.mlk-app-page #brx-header .mlk-header-live-btn.fired { animation: app-live-ripple .6s ease-out; }
body.mlk-app-page #brx-header img,
body.mlk-app-page #brx-header .brxe-logo img,
body.mlk-app-page #brx-header .brxe-image img,
body.mlk-app-page header .brxe-logo img {
  height: 50px !important;
  width:  auto !important;
  max-width: none !important;
  display: block !important;
  object-fit: contain !important;
}
body.mlk-app-page footer,
body.mlk-app-page #footer,
body.mlk-app-page [data-element-type="footer"],
body.mlk-app-page .site-footer,
body.mlk-app-page #mlk-ticker-wrap-m { display: none !important; }

/* La barre du player du site est remplacée par le lecteur de l'appli */
body.mlk-app-page #mlk-player                { display: none !important; }
body.mlk-app-page,
body.mlk-app-page.mlk-active                 { padding-bottom: 0 !important; }

/* ── Cadre de l'appli : sous l'en-tête, jusqu'en bas ── */
.mlk-app-wrap {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: var(--mlk-app-header-h, 72px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000;
  z-index: 50;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
}
/* Écrans + lecteur ; le lecteur pleine page et la fenêtre des épisodes s'y posent par-dessus */
.app-zone { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; }

.mlk-app-screens { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; }
.mlk-app-screen  {
  position: absolute; top: 0; bottom: 0; width: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: #000;
  transition: transform 0.32s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
#app-screen-agenda    { transform: translateX(-100%); background: #111; }
#app-screen-home      { transform: translateX(0); }
#app-screen-emissions { transform: translateX(100%); }
.app-defile { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.app-defile::-webkit-scrollbar { display: none; }
.app-attente { padding: 14px; color: #888; font-size: 13px; margin: 0; }

/* Titres de section, comme sur l'accueil du site (rose, capitales) */
.app-titre {
  margin: 0; padding: 0;
  color: var(--th-a, #D20658); font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1;
  font-size: clamp(15px, 2.5dvh, 19px);
}

/* ══════════════════════════════════════
   ACCUEIL : le direct, À la une, mégaphone
══════════════════════════════════════ */
.app-acc { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* Le direct : sur fond noir comme « À la une » (demande d'Emmanuel du 20/10/2026) */
/* Blocs en bandes pleine largeur (comme le site, sans coins arrondis) sur un gris un peu plus sombre que celui
   de l'en-tête (#212121) ; un filet noir les sépare. Le noir teinté de framboise de la 0.22.1 est abandonné
   (Emmanuel, 20/10/2026 : « revenir au gris d'avant, un chouilla moins clair ») */
.app-acc { gap: 6px; padding-top: 6px; }
.app-direct, .app-une { background: #1a1a1a; }
.app-direct { flex: none; padding: clamp(6px, 1.4dvh, 12px) 10px clamp(6px, 1.2dvh, 10px); }
.app-direct-haut { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(4px, 1dvh, 10px); }
.app-direct-haut .app-direct-play {
  width: clamp(28px, 4.4dvh, 36px); height: clamp(28px, 4.4dvh, 36px);
  border-radius: 50%; background: var(--th-a, #D20658); border: 2px solid #fff; flex-shrink: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--th-a, #D20658) 45%, transparent);
}
.app-direct-haut .app-direct-play svg { width: 50%; height: 50%; margin: 0; pointer-events: none; }
.app-direct-play.is-playing svg { animation: mlk-cassette 8s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes app-live-ripple {
  0%   { box-shadow: 0 4px 18px color-mix(in srgb, var(--th-a, #D20658) 45%, transparent), 0 0 0 0 rgba(255,255,255,.8); }
  100% { box-shadow: 0 4px 18px color-mix(in srgb, var(--th-a, #D20658) 45%, transparent), 0 0 0 20px rgba(255,255,255,0); }
}
.app-direct-play.fired { animation: app-live-ripple .6s ease-out; }

.app-direct-corps { display: flex; align-items: center; gap: 12px; }
/* Vignette 16/9 : la moitié de la largeur, moins si la hauteur manque (bannière, petit téléphone) */
.app-direct-vig { flex: none; width: min(50%, calc(20dvh * 16 / 9)); cursor: pointer; }
.app-direct-vig .mlk-oa-media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #1a1a1a; }
.app-direct-vig #mlk-oa-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-direct-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: clamp(4px, 1.2dvh, 12px); }
.app-direct-bloc { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.app-direct-bloc > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-direct-lab { font-size: clamp(10px, 1.6dvh, 12px); color: var(--th-a, #D20658); text-transform: uppercase; }
.app-direct-l1  { font-size: clamp(13px, 2.2dvh, 17px); color: #f6f6f6; line-height: 1.1; }
.app-direct-l2  { font-size: clamp(11px, 1.7dvh, 13px); color: #f6f6f6; line-height: 1.1; }
.app-direct-l3  { font-size: clamp(11px, 1.6dvh, 13px); color: #aaa; line-height: 1.1; }
.app-direct-l4  { font-size: clamp(9px, 1.4dvh, 11px); color: #aaa; line-height: 1.2; }
/* Écran court : « À suivre » s'efface pour laisser la place à « À la une » */
@media (max-height: 700px) {
  .app-direct-suite { display: none; }
  .app-direct-vig { width: min(44%, calc(13dvh * 16 / 9)); }
  .app-direct-haut { margin-bottom: 4px; }
  .app-direct { padding-top: 4px; padding-bottom: 2px; }
  .app-une { padding-top: 2px; }
}

/* Vignette qui suit l'antenne (direct.js) : mêmes règles que l'accueil du site (accueil.css) */
#mlk-oa-img { transition: opacity .45s; }
#mlk-oa-img.mlk-oa-fondu { opacity: 0; }
#mlk-onair.mlk-oa-emission .mlk-oa-media::before { content: ""; position: absolute; inset: -20px; background: var(--mlk-oa-flou) center / cover no-repeat; filter: blur(18px) brightness(.55); transform: scale(1.1); }
#mlk-onair.mlk-oa-emission #mlk-oa-img { position: relative; z-index: 1; object-fit: contain; }
#mlk-onair .mlk-oa-badge { position: absolute; left: 5px; top: 5px; z-index: 2; display: flex; align-items: center; gap: 5px; background: rgba(0,0,0,.72); color: #fff; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; line-height: 1.4; border-radius: 6px; padding: 1px 5px; pointer-events: none; }
#mlk-onair .mlk-oa-badge i { width: 7px; height: 7px; border-radius: 50%; background: #ff2e6f; animation: mlk-oa-pulse 1.4s infinite; }
@keyframes mlk-oa-pulse { 50% { opacity: .25; } }
/* Dans l'appli, la vignette ouvre le lecteur du direct (pas la page de l'émission) ; rien posé sur l'image,
   pas même le repère « À L'ANTENNE » (Emmanuel, 20/10/2026 : « pas de bouton sur l'image ») */
#mlk-onair .mlk-oa-lien, #mlk-onair .mlk-oa-badge { display: none !important; }
/* Pas de texte qui défile : mlk-nowplaying.js fait glisser les lignes trop longues (.mlk-np-scroll), et le texte
   passait sur l'image. Ici une ligne trop longue est simplement coupée par « … » (Emmanuel, 20/10/2026) */
.app-direct-info { overflow: hidden; }
.app-direct .mlk-np-scroll { animation: none !important; transform: none !important; }
#mlk-nowplaying.mlk-np-emission #mlk-np-artist, #mlk-nowplaying.mlk-np-emission #mlk-np-title { display: none !important; }
#mlk-nowplaying .mlk-np-em { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#mlk-nowplaying .mlk-np-em > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mlk-nowplaying .mlk-np-em-nom { font-size: clamp(13px, 2.2dvh, 17px); color: #f6f6f6; line-height: 1.1; }
#mlk-nowplaying .mlk-np-em-ep  { font-size: clamp(11px, 1.7dvh, 13px); color: #f6f6f6; line-height: 1.1; }
#mlk-nowplaying .mlk-np-em-prog { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; color: #bbb; line-height: 1.1; }
#mlk-nowplaying .mlk-np-em-barre { flex: 0 0 60px; height: 3px; background: #444; border-radius: 2px; overflow: hidden; }
#mlk-nowplaying .mlk-np-em-barre b { display: block; height: 100%; width: 0; background: var(--th-a, #D20658); transition: width .6s; }
#mlk-nowplaying .mlk-np-em-lien { display: none !important; }

/* À la une : prend toute la hauteur qui reste ; largeur des vignettes calculée par tailleUne() */
.app-une { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: clamp(6px, 1.2dvh, 10px); overflow: hidden; }
.app-une > .app-titre { padding: 0 10px !important; }
.app-une #mlk-une .mlk-une-meta { background: #0e0e0e; } /* plus sombre que la bande (21/10/2026) */
.app-une > .app-titre { padding: 0 12px; margin-bottom: clamp(3px, .6dvh, 6px); }
.app-une-piste { flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* Mégaphone (mlk-ticker.js), juste au-dessus du lecteur */
body.mlk-app-page #mlk-ticker.app-mega {
  flex: none;
  --mlk-ticker-bg: #000;
  --mlk-ticker-h: clamp(22px, 3.6dvh, 30px);
  --mlk-ticker-fs: clamp(13px, 2dvh, 15px);
  --mlk-ticker-pad: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ══════════════════════════════════════
   LES ÉMISSIONS : pages de 3 × 3 vignettes carrées (21/10/2026 ; 3 × 4 avant), on glisse entre les pages
══════════════════════════════════════ */
.app-ems { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 6px; background: #1a1a1a; padding: clamp(8px, 1.6dvh, 14px) 10px clamp(8px, 1.4dvh, 12px); }
.app-ems > .app-titre { margin-bottom: clamp(6px, 1.4dvh, 12px); }
.app-grille-z { flex: 1 1 auto; min-height: 0; container-type: size; overflow: hidden; }
.app-grille-piste { display: flex; width: 100%; height: 100%; transition: transform .32s ease; }
.app-grille-page { flex: 0 0 100%; min-width: 0; display: flex; justify-content: center; align-items: flex-start; }
.app-grille {
  --g: 8px;
  --t: min(calc((100cqw - 2 * var(--g)) / 3), calc((100cqh - 2 * var(--g)) / 3));
  display: grid; grid-template-columns: repeat(3, var(--t)); grid-auto-rows: var(--t); gap: var(--g);
}
.app-grille-z > #appGrille:not(.app-grille-piste) { display: flex; justify-content: center; }
.app-grille-pts { flex: none; display: flex; justify-content: center; gap: 8px; padding-top: 8px; }
.app-grille-pts[hidden] { display: none; }
.app-grille-pts button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.28); cursor: pointer; }
.app-grille-pts button.on { background: var(--th-a, #D20658); }
.app-tuile {
  position: relative; display: block; padding: 0; margin: 0; border: 0; border-radius: 8px; overflow: hidden;
  background: #1c1c1c; cursor: pointer; width: 100%; height: 100%;
}
.app-tuile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-tuile-nom { display: flex; align-items: center; justify-content: center; height: 100%; padding: 6px; color: #f6f6f6; font-size: 12px; text-align: center; }
.app-tuile-arch { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; background: #000; }
.app-tuile-arch img { border-radius: 0; }
.app-tuile-arch > span:not(.app-tuile-etq) { background: #222; }
.app-tuile-etq {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 4px 4px; text-align: center;
  font-size: 11px; color: #fff; line-height: 1.1; background: linear-gradient(transparent, rgba(0,0,0,.85));
}
.app-tuile-vide { background: transparent; border: 1.5px dashed #2c2c2c; cursor: default; }

/* ══════════════════════════════════════
   LECTEUR — toujours en bas, au-dessus du menu
══════════════════════════════════════ */
.app-mini-player {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: #161616;
  border-top: 1px solid rgba(255,255,255,.09);
  position: relative; overflow: hidden;
}
.app-mini-prog-bar  { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.08); }
.app-mini-prog-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: var(--th-a, #D20658); transition: width .5s linear; }
.app-mini-left { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.app-mini-art { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #2a2a2a; }
/* Le direct : vignette 16/9 comme dans le player du site (épisode : carré) */
.app-mini-art.app-mini-art-direct { width: 75px; height: 42px; border-radius: 5px; }
.app-mini-info { min-width: 0; }
.app-mini-title { font-size: 14px; font-weight: 600; color: #f6f6f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-mini-live { display: inline-block; background: var(--th-a, #D20658); color: #fff; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 0 5px; border-radius: 3px; margin-right: 6px; vertical-align: 2px; }
.app-mini-artist { font-size: 12px; color: #888; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-mini-play {
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  background: var(--th-a, #D20658) !important; border: 2px solid #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 4px 18px color-mix(in srgb, var(--th-a, #D20658) 45%, transparent);
}
.app-mini-play svg { width: 18px; height: 18px; margin: 0; }
/* Plus d'air entre le play et la flèche ⌃ (Emmanuel, 20/10/2026 : « légèrement trop à droite », puis
   « encore trop collé à l'autre bouton ») */
.app-mini-play { margin-right: 24px; }
.app-mini-play.is-playing svg { animation: mlk-cassette 8s linear infinite; transform-origin: center; transform-box: fill-box; }
.app-mini-up {
  width: 32px; height: 32px; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #aaa;
}
.app-mini-up svg { width: 14px; height: 14px; }

/* ── Lecteur pleine page : se déplie depuis le bas, couvre les écrans et le lecteur ── */
.app-full {
  position: absolute; inset: 0; z-index: 120;
  background: #111;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(100%); visibility: hidden;
  transition: transform .34s cubic-bezier(.4,0,.2,1), visibility 0s linear .34s;
}
.app-full.open { transform: none; visibility: visible; transition: transform .34s cubic-bezier(.4,0,.2,1), visibility 0s; }
.app-full-fermer {
  position: absolute; top: 8px; right: 10px; z-index: 10;
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.app-full-fermer svg { width: 20px; height: 20px; stroke: #f6f6f6; }
.app-em-episode, .app-live { display: none; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.app-full.mode-ep   .app-em-episode { display: flex; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.app-full.mode-live .app-live       { display: flex; }
.app-full .app-ep-art { flex: none; align-self: center; margin: 12px auto 0; }
.app-live .app-direct-section { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: clamp(4px, 1.5dvh, 12px) 0; border-top: 1px solid rgba(255,255,255,.08); }
.app-live .app-ep-play.is-playing svg { animation: mlk-cassette 8s linear infinite; }

/* Fenêtre des épisodes : flèche « retour aux archives » et liste des archives */
.app-ep-modal-retour {
  width: 30px; height: 30px; border-radius: 50%; padding: 0; flex-shrink: 0;
  background: #2a2a2a; border: 1px solid rgba(255,255,255,.1); color: #bbb;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.app-ep-modal-retour svg { width: 16px; height: 16px; }
.app-arch-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 14px; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.06);
  color: #f6f6f6; cursor: pointer; font: inherit;
}
.app-arch-item svg { width: 16px; height: 16px; color: #888; flex-shrink: 0; margin-left: auto; }
.app-arch-nom { font-size: 14px; font-weight: 600; }

/* ── Bannière : au-dessus de tout le reste de l'écran, jamais recoupée ── */
.mlk-app-screen > .mlk-app-banner-wrap { flex: none; }

/* ══════════════════════════════════════════════════════════════
   Repris tels quels de mlk-app.css : volume, bannière, démarrage, menu, lecteur du direct
   (#app-live, ex écran « Le direct radio »), lecteur d'épisode, agenda, « À la une », fenêtre des épisodes
   ══════════════════════════════════════════════════════════════ */

/* ── Popup volume app — vertical, de bas (0) en haut (100) ── */
.app-vol-popup {
  position: fixed; z-index: 10000;
  display: none; flex-direction: column; align-items: center; gap: 12px;
  background: #1e1e1e; border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 14px 14px 12px;
  box-shadow: 0 6px 28px rgba(0,0,0,.7);
}
.app-vol-popup.open { display: flex; }
.app-vol-icon { width:18px; height:18px; color:#888; flex-shrink:0; }
/* Slider vertical : bottom = 0 (muet), top = 100 (max) */
.app-vol-slider {
  writing-mode: vertical-lr;
  direction: rtl;          /* retourne l'axe → 0 en bas, 100 en haut */
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  width: 4px; height: 120px;
  background: rgba(255,255,255,.2); border-radius: 2px;
  outline: none; cursor: pointer;
  padding: 0;
}
.app-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--th-a, #D20658); cursor: pointer;
  margin-left: -7px;
}
.app-vol-slider::-webkit-slider-runnable-track {
  width: 4px; background: rgba(255,255,255,.2); border-radius: 2px;
}
.app-vol-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--th-a, #D20658); border: none; cursor: pointer;
}

/* ── Banner pub — dans chaque écran, slide naturellement avec le contenu ── */
.mlk-app-banner-wrap {
  flex-shrink: 0; position: relative; line-height: 0;
}
.mlk-app-banner-wrap.hidden { display: none; }
.mlk-app-banner-link  { display:block; line-height:0; }
.mlk-app-banner-media { display:block; width:100%; line-height:0; }
.mlk-app-banner-media img  { display:block; width:100%; height:auto; }
.mlk-app-banner-media video { display:block; width:100%; height:auto; }
.mlk-app-banner-dots  { position:absolute; bottom:5px; left:50%; transform:translateX(-50%); display:flex; gap:4px; pointer-events:none; }
.mlk-app-bdot         { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.35); pointer-events:all; cursor:pointer; transition:width .25s,background .25s; }
.mlk-app-bdot.active  { width:14px; border-radius:2px; background:rgba(255,255,255,.9); }

/* Laptop/desktop (fenêtre large, ex. /app/ ouvert dans un navigateur PC/Mac) : les écrans
   de l'app restent plein viewport (pas de colonne centrée comme le slider "À la une"), donc
   sans plafond la bannière s'étirerait sur toute la largeur de la fenêtre. Même traitement
   que [mlk_pub] sur le site web : hauteur plafonnée à la hauteur native des banners
   (1250×280), image centrée, letterbox noir si la fenêtre est plus large que l'image. */
@media (min-width: 768px) {
  .mlk-app-banner-wrap {
    --mlk-app-pub-h: 280px;
    height: var(--mlk-app-pub-h);
    display: flex; align-items: center; justify-content: flex-start;
    background: #000; overflow: hidden;
  }
  .mlk-app-banner-link  { display: flex; height: 100%; }
  .mlk-app-banner-media { width: auto; height: 100%; }
  .mlk-app-banner-media img,
  .mlk-app-banner-media video {
    width: auto; height: 100%; max-width: 100%;
    object-fit: contain; display: block;
  }
}

/* ── Splash screen ── */
.app-splash {
  position: fixed; /* par-dessus tout l'écran, en-tête compris (21/10/2026) */
  inset: 0;
  background: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  transition: opacity 0.45s ease;
}
.app-splash.out { opacity: 0; pointer-events: none; }
.app-splash-inner { text-align: center; padding: 0 24px; }
.app-splash-logo {
  width: 220px; height: auto; display: block; margin: 0 auto 36px;
}
.app-splash-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 72px; letter-spacing: 4px;
  color: #f6f6f6; line-height: 1;
}
.app-splash-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; color: #666; margin-top: 8px;
}
.app-splash-bars {
  display: flex; align-items: flex-end;
  justify-content: space-between; /* aussi large que le logo (220 px), 21/10/2026 */
  width: 220px; max-width: 100%; margin: 44px auto 0; height: 48px;
}
.app-splash-bars span {
  width: 6px; border-radius: 3px;
  background: var(--th-a, #D20658);
  animation: splash-bar 0.75s ease-in-out infinite alternate;
}
@keyframes splash-bar { from { height: 5px; } to { height: 46px; } }

/* ── Pull-to-refresh indicator ── */
.app-ptr {
  height: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: height 0.18s ease;
}
.app-ptr-ring {
  width: 26px; height: 26px;
  border: 3px solid color-mix(in srgb, var(--th-a, #D20658) 25%, transparent);
  border-top-color: var(--th-a, #D20658);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s;
}
.app-ptr.ptr-visible .app-ptr-ring  { opacity: 1; }
.app-ptr.ptr-spinning .app-ptr-ring { animation: app-ptr-spin 0.7s linear infinite; }
@keyframes app-ptr-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════
   NAVIGATION 3 BOUTONS (bas de l'app)
   Inactif = sombre    Actif = rose plein
══════════════════════════════════════ */
.app-nav-3 {
  display: flex; gap: 6px;
  padding: 6px 14px 8px;
  background: #111; flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.app-nav3-btn {
  flex: 1; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
  padding: 9px 4px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.app-nav3-btn svg   { width: 18px; height: 18px; color: #555; }
.app-nav3-btn span  {
  font-size: 9px; font-weight: 600; color: #555;
  letter-spacing: .5px; font-family: 'DM Sans', sans-serif;
  text-align: center; line-height: 1.2;
}
/* État ACTIF — rose plein */
.app-nav3-btn.active            { background: var(--th-a, #D20658); border-color: transparent; }
.app-nav3-btn.active svg        { color: white; }
.app-nav3-btn.active span       { color: white; font-weight: 800; }
/* Bouton central légèrement plus grand */
.app-nav3-btn--center           { flex: 1.1; }

/* ── Artwork : hauteur flex:1, largeur dérivée du ratio 16/9 ── */
.app-now-art {
  flex: 1;
  min-height: 0;
  width: auto;                        /* largeur = hauteur × 16/9         */
  max-width: 100%;                    /* jamais plus large que l'écran     */
  aspect-ratio: 16/9;                 /* ratio toujours respecté           */
  max-height: calc(100vw * 9 / 16);  /* plafond : 16/9 pleine largeur     */
  align-self: center;                 /* centré si plus étroit que l'écran */
  position: relative;
  background: linear-gradient(145deg,#0c1824,#192d45 45%,#111e2e);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.app-now-art-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.app-now-art-label {
  position:relative; z-index:2;
  font-size:36px; font-weight:800; color:white; letter-spacing:3px;
  text-transform:uppercase; font-family:'DM Sans',sans-serif;
}

/* ── Barre de progression du titre en cours ── */
.app-now-progress { padding: 8px 14px 2px; flex-shrink: 0; }
.app-now-prog-bar  { height: 3px; background: rgba(255,255,255,.12); border-radius: 3px; position: relative; overflow: hidden; }
.app-now-prog-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--th-a, #D20658); border-radius: 3px; transition: width 1s linear; }
.app-now-prog-times { display: flex; justify-content: space-between; margin-top: 5px; }
.app-now-prog-times span { font-size: 10px; color: #888; font-family: 'DM Sans', sans-serif; }

/* ── Titre + artiste ── */
.app-now-head   { padding: 6px 14px 6px; flex-shrink: 0; }
.app-now-title  { font-size:18px; font-weight:700; color:#f6f6f6; line-height:1.25; font-family:'DM Sans',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-now-artist { font-size:12px; color:#888; margin-top:3px; font-family:'DM Sans',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── 10 titres passés ── */
.app-now-hist {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; cursor: pointer; flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.app-now-hist svg { width:14px; height:14px; fill:none; stroke:#666; stroke-width:2; transition:transform .22s; flex-shrink:0; }
.app-now-hist span { font-size:11px; color:#666; font-family:'DM Sans',sans-serif; }
#app-live.hist-open .app-now-hist-arrow { transform: rotate(90deg); }

/* ── À SUIVRE — ligne horizontale dépliable ── */
.app-now-next        { flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.app-now-next-main   { display:flex; align-items:center; gap:10px; padding:9px 14px; cursor:pointer; user-select:none; }
.app-now-next-label  { font-size:8px; font-weight:700; color:var(--th-a, #D20658); letter-spacing:1.5px; text-transform:uppercase; font-family:'DM Sans',sans-serif; flex-shrink:0; width:50px; }
.app-now-next-info   { flex:1; min-width:0; padding-left:10px; }
.app-now-next-artist { font-size:13px; font-weight:600; color:rgba(246,246,246,.85); font-family:'DM Sans',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
.app-now-next-song   { font-size:10px; color:#888; font-family:'DM Sans',sans-serif; font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; line-height:1.2; }
.app-now-next-chev   { width:14px; height:14px; flex-shrink:0; stroke:#666; transition:transform .22s; }
.app-now-next.open .app-now-next-chev { transform:rotate(90deg); }
.app-now-next-panel  {
  max-height: 0; overflow: hidden;
  transition: max-height .32s ease;
  padding: 0 14px 0 108px; /* 14(pad)+14(chev)+10(gap)+50(label)+10(gap)+10(info-pad) */
}
.app-now-next.open .app-now-next-panel { max-height: 120px; padding-bottom: 8px; }
.app-now-next-extra  { padding:5px 0; border-top:1px solid rgba(255,255,255,.06); }
.app-now-next-extra:first-child { border-top:none; }


/* ── LE DIRECT — absorbe l'espace restant, rétrécit proprement ── */
.app-direct-section {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; min-height: 0; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: clamp(4px, 1.5vh, 12px) 0;
}
.app-direct-label {
  font-size: clamp(7px, 1.5vh, 10px); font-weight: 700; color: #888;
  letter-spacing: 2px; text-transform: uppercase;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: clamp(4px, 1.2vh, 10px);
}
.app-direct-play {
  /* rétrécit avec la hauteur disponible, min 40px, max 68px */
  width: clamp(40px, 8vh, 68px); height: clamp(40px, 8vh, 68px);
  border-radius: 50%; background: var(--th-a, #D20658); flex-shrink: 0;
  border: 3px solid white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 28px color-mix(in srgb, var(--th-a, #D20658) 55%, transparent);
  transition: box-shadow .2s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.app-direct-play:focus { outline: none; }
.app-direct-play svg {
  width: clamp(16px, 3.5vh, 26px); height: clamp(16px, 3.5vh, 26px);
  fill: white; margin-left: 2px; pointer-events: none;
}

/* Ripple au clic — inclut le box-shadow de base pour éviter le flash */
@keyframes app-live-ripple {
  0%   { box-shadow: 0 6px 28px color-mix(in srgb, var(--th-a, #D20658) 55%, transparent), 0 0 0 0px rgba(255,255,255,.8); }
  100% { box-shadow: 0 6px 28px color-mix(in srgb, var(--th-a, #D20658) 55%, transparent), 0 0 0 24px rgba(255,255,255,0); }
}
.app-direct-play.fired { animation: app-live-ripple .6s ease-out; }

/* Animation cassette pendant la lecture — même rotation que mlk-live-btn--round */
.app-direct-play.is-playing svg {
  animation: mlk-cassette 8s linear infinite; /* keyframe défini dans mlk-player.css */
  transform-origin: center;
  transform-box: fill-box;
}

/* ── Barre d'actions (home + épisode) ── */
.app-action-bar {
  display: flex; align-items: center; justify-content: space-around;
  background: #1a1a1a;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 10px 14px;
  flex-shrink: 0;
}
.app-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; flex: 1;
}
.app-action-btn svg { width: 20px; height: 20px; stroke: #888; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-action-btn span { font-size: 11px; color: #888; font-family: 'DM Sans', sans-serif; letter-spacing: .3px; }
.app-action-btn.active { background: color-mix(in srgb, var(--th-a, #D20658) 12%, transparent); border-radius: 8px; }
.app-action-btn.active svg { stroke: var(--th-a, #D20658); }
.app-action-btn.active span { color: var(--th-a, #D20658); }

/* ── Nous suivre ── */
.app-social-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  flex-shrink: 0;
}
.app-social-label {
  font-size: 11px; font-weight: 800; color: var(--th-a, #D20658);
  letter-spacing: 1.5px; text-transform: uppercase;
  font-family: 'DM Sans', sans-serif; flex: 1;
}
.app-social-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; flex-shrink: 0;
}
.app-social-icon svg { width: 18px; height: 18px; color: #f6f6f6; }

/* Panneau historique — glisse sous l'artwork */
.app-hist-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .32s ease;
  background: #161616; flex-shrink: 0;
}
#app-live.hist-open .app-hist-panel { max-height: 220px; overflow-y: auto; }
.app-hist-track { padding: 7px 14px 7px 108px; border-bottom: 1px solid rgba(255,255,255,.06); }
.app-hist-track:last-child { border-bottom: none; }
.app-hist-title { font-size: 12px; font-weight: 600; color: rgba(246,246,246,.8); font-family: 'DM Sans', sans-serif; }
.app-hist-sub   { font-size: 10px; color: #888; margin-top: 1px; font-family: 'DM Sans', sans-serif; font-style: italic; }
.app-hist-empty { padding: 10px 14px; color: #666; font-size: 11px; font-family: 'DM Sans', sans-serif; }

/* Les accordéons réduisent naturellement l'artwork via flex:1 — pas de transform */

/* ══════════════════════════════════════
   ÉPISODE MODE
══════════════════════════════════════ */

/* flex + min-height sur le conteneur épisode (le display:none/flex est géré plus haut) */

/* Artwork carré — flex:1 s'adapte à l'espace disponible, reste carré */
.app-ep-art {
  flex: 1;
  min-height: 40px;
  max-height: calc(100vw - 28px); /* max = pleine largeur (carré) */
  aspect-ratio: 1;
  align-self: center;
  margin: 10px 0 0;
  border-radius:12px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:60px; position:relative;
  background:linear-gradient(135deg,#1a1a2e,#2d2d5e);
}
/* contain : la pochette est toujours entière, jamais recadrée — le cadre est
   dimensionné en JS au ratio exact de l'image (voir updateEpArtSize) */
.app-ep-art img    { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
#appEpArtEmoji     { display:none; } /* caché par défaut, fallback uniquement */

/* Descriptif accordion */
.app-ep-desc-row {
  margin:10px 20px 0; background:#1c1c1c;
  border-radius:8px; padding:9px 14px;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; border:1px solid rgba(255,255,255,.08);
}
.app-ep-desc-label { font-size:13px; color:#888; font-family:'DM Sans',sans-serif; }
.app-ep-desc-chev  { width:16px; height:16px; fill:none; stroke:#888; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; transition:transform .2s; }
.app-ep-desc-row.open .app-ep-desc-chev { transform:rotate(180deg); }
.app-ep-desc-content {
  max-height: 0; overflow: hidden;
  transition: max-height .32s ease, padding .32s ease;
  margin:0 20px; padding:0 14px;
  background:#1c1c1c; border-radius:0 0 8px 8px;
  border:1px solid rgba(255,255,255,.08); border-top:none;
  font-size:12px; color:#888; line-height:1.6;
  font-family:'DM Sans',sans-serif;
}
/* L'artwork (flex:1) se réduit automatiquement quand le contenu s'étend */
.app-ep-desc-row.open + .app-ep-desc-content {
  max-height: 220px;
  padding: 10px 14px;
}

/* Info */
.app-ep-info { padding:10px 20px 2px; }
.app-ep-title  { font-size:20px; font-weight:700; color:#f6f6f6; line-height:1.2; font-family:'DM Sans',sans-serif; }
.app-ep-artist { font-size:13px; color:#888; margin-top:3px; font-family:'DM Sans',sans-serif; }

/* Progress */
.app-ep-progress { padding:8px 20px 4px; }
/* Barre : zone tactile haute (26px) — le visuel (3px) est centré via ::before */
.app-ep-prog-bar {
  height:26px; position:relative; cursor:pointer; touch-action:none;
}
.app-ep-prog-bar::before {
  content:''; position:absolute;
  left:0; right:0; top:50%; transform:translateY(-50%);
  height:3px; border-radius:3px;
  background:rgba(255,255,255,.14);
}
.app-ep-prog-fill {
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  height:3px; border-radius:3px; background:var(--th-a, #D20658);
}
.app-ep-prog-handle {
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:12px; height:12px; border-radius:50%; background:var(--th-a, #D20658);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--th-a, #D20658) 25%, transparent);
}
.app-ep-times { display:flex; justify-content:space-between; margin-top:4px; }
.app-ep-times span { font-size:13px; color:#888; font-family:'DM Sans',sans-serif; }

/* Contrôles */
.app-ep-controls { display:flex; align-items:center; justify-content:center; gap:36px; padding:8px 20px 10px; }
.app-ep-ctrl-btn { display:flex; flex-direction:column; align-items:center; gap:5px; background:none; border:none; cursor:pointer; flex-shrink:0; }
.app-ep-ctrl-icon { width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; }
.app-ep-ctrl-icon svg { width:15px; height:15px; fill:none; stroke:rgba(246,246,246,.8); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.app-ep-ctrl-label { font-size:11px; color:#888; font-family:'DM Sans',sans-serif; }
.app-ep-skip-wrap { width:38px; height:38px; position:relative; display:flex; align-items:center; justify-content:center; }
/* Les deux SVGs ont leurs propres paths corrects (svgSkipBack/svgSkipFwd) — aucun transform */
.app-ep-skip-arrow { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:rgba(246,246,246,.75); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.app-ep-skip-num { position:relative; z-index:1; font-size:10px; font-weight:700; color:rgba(246,246,246,.9); font-family:'DM Sans',sans-serif; }
.app-ep-play {
  width:68px; height:68px; border-radius:50%;
  background:var(--th-a, #D20658) !important; border:3px solid white;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 28px color-mix(in srgb, var(--th-a, #D20658) 55%, transparent); flex-shrink:0;
}
.app-ep-play svg { width:28px; height:28px; margin:0; }
/* Même comportement que .app-direct-play : triangle qui tourne (cassette) en lecture */
.app-ep-play.is-playing svg {
  animation: mlk-cassette 8s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* ══════════════════════════════════════
   AGENDA
══════════════════════════════════════ */
.app-ag-hdr { display:block; width:100%; margin-top:10px; line-height:0; flex-shrink:0; }
.app-ag-hdr-img { display:block; width:100%; height:auto; }

/* Bannière promo Radio MLK (haut de l'agenda) */
.app-ag-promo {
  background: var(--th-a, #D20658);
  padding: 22px 14px 14px;
  text-align: center;
  flex-shrink: 0;
  position: relative;
}
.app-ag-promo-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38px; letter-spacing: 3px; color: white; line-height: 1;
}
.app-ag-promo-sub {
  font-size: 13px; color: rgba(255,255,255,.85);
  margin-top: 6px; font-family: 'DM Sans', sans-serif;
}
.app-ag-promo-url {
  font-size: 11px; color: rgba(255,255,255,.6);
  margin-top: 4px; font-family: 'DM Sans', sans-serif;
}
.app-ag-promo-dots {
  display: flex; justify-content: center; gap: 5px; margin-top: 10px;
}

/* Cartouche date — arrondie, inline */
.app-ag-day {
  display: inline-block;
  margin: 12px 14px 0;
  padding: 5px 14px;
  background: var(--th-a, #D20658); color: #f6f6f6;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.4;
}

/* Événement */
.app-ag-event { padding:14px 14px 12px; border-bottom:1px solid rgba(255,255,255,.08); }
.app-ag-event:last-child { border-bottom:none; }
/* Visuel (ev.image) : vignette à gauche, texte à droite */
.app-ag-event.app-ag-has-img { display:flex; gap:12px; align-items:flex-start; }
.app-ag-event-body { flex:1 1 auto; min-width:0; }
.app-ag-event-img { flex:0 0 104px; width:104px; height:auto; max-height:150px; object-fit:cover; object-position:top; border-radius:8px; background:#111; display:block; }

.app-ag-event-title {
  font-size:19px; font-weight:700; color:#f6f6f6;
  line-height:1.25; margin-bottom:6px;
  font-family:'DM Sans',sans-serif;
}
.app-ag-event-time {
  font-size:17px; font-weight:700; color:var(--th-a, #D20658);
  margin-bottom:4px; font-family:'DM Sans',sans-serif;
}
.app-ag-event-loc {
  font-size:12px; color:#888; margin-bottom:10px;
  display:flex; align-items:flex-start; gap:4px;
  font-family:'DM Sans',sans-serif;
}
.app-ag-event-loc svg { width:12px; height:12px; fill:none; stroke:#888; stroke-width:2; flex-shrink:0; margin-top:2px; }

/* Description */
.app-ag-event-desc {
  font-size:13px; color:#f0f0f0; line-height:1.6;
  font-family:'DM Sans',sans-serif; font-weight:400;
}
/* Neutralise les <b>/<strong>/<em> injectés par Google Calendar */
.app-ag-event-desc b,
.app-ag-event-desc strong { font-weight:400; color:inherit; }
.app-ag-event-desc em,
.app-ag-event-desc i      { font-style:italic; color:inherit; }
/* "Proposé par" — toujours en pied d'événement */
.app-ag-event-proposed {
  margin-top:10px; font-size:13px; font-weight:700;
  color:#f6f6f6; font-family:'DM Sans',sans-serif;
}
.app-ag-event-proposed a { color:var(--th-a, #D20658); text-decoration:underline; font-weight:400; }
.app-ag-event-desc br   { display:block; margin:4px 0; content:""; }
.app-ag-event-desc a    { color:var(--th-a, #D20658); text-decoration:none; font-weight:600; }
.app-ag-event-desc b,
.app-ag-event-desc strong { color:#f6f6f6; }
.app-ag-event-desc em,
.app-ag-event-desc i    { color:#888; }

/* ── « À la une » [mlk_alaune] de l'extension (#mlk-une, depuis le 20/10/2026) ──
   Mêmes réglages que l'ancien slider ci-dessus (#mlk-replay-slider, à retirer au ménage) :
   largeur des vignettes (--rs-slide-w) et aperçu symétrique (--rs-peek-calc) calculés par
   updateReplaySlideWidth() de mlk-app.js ; image 4/5 entière (aspect-ratio d'alaune.css) ;
   « Les émissions » deux fois plus petit (--mlk-une-scale: 2). alaune.css est chargée après
   cette feuille : body.mlk-app-page donne la priorité à ces règles. */
body.mlk-app-page #mlk-une {
  --gap: 10px;
  --peek: var(--rs-peek-calc, 16px);
  --mlk-une-ratio: 4 / 5;
  --mlk-une-w: var(--rs-slide-w, calc((100% - 10px - 16px) / 2));
  /* Boutons proportionnés à la vignette, qui rétrécit avec une bannière ou sur un petit téléphone */
  --mlk-une-btn: clamp(36px, calc(var(--rs-slide-w, 260px) * .21), 50px); --mlk-une-btn-m: var(--mlk-une-btn);
  --une-sh-size: clamp(26px, calc(var(--rs-slide-w, 260px) * .14), 34px);
  --une-sh-gap: clamp(6px, calc(var(--rs-slide-w, 260px) * .08), 22px);
  --mlk-une-btn-b: clamp(6px, calc(var(--rs-slide-w, 260px) * .05), 14px);
  --mlk-une-meta-h: 46px;
  --mlk-une-scale: 2;
}
body.mlk-app-page #mlk-une .mlk-une-dots { margin-top: 6px; padding-bottom: 2px; min-height: 15px; }
body.mlk-app-page .mlk-une-share i,
body.mlk-app-page .mlk-une-plus i { font-size: 13px; }
body.mlk-app-page .mlk-une-get { --une-sh-size: 26px; }
body.mlk-app-page .mlk-une-get i { font-size: 12px; }

@media (min-width: 480px) {
  body.mlk-app-page #mlk-une .mlk-une-nav-wrap { display: block; }
  body.mlk-app-page #mlk-une.mlk-une--seul .mlk-une-nav-wrap { display: none; }
  body.mlk-app-page #mlk-une .mlk-une-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0,0,0,.7); border: 1.5px solid rgba(255,255,255,.3);
    color: #f6f6f6; font-size: 14px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s, border-color .15s;
  }
  body.mlk-app-page #mlk-une .mlk-une-nav:hover { background: var(--th-a, #D20658); border-color: var(--th-a, #D20658); }
  body.mlk-app-page #mlk-une .mlk-une-nav.prev { left: 6px; }
  body.mlk-app-page #mlk-une .mlk-une-nav.next { right: 6px; }
}

/* ══════════════════════════════════════
   MODAL ÉPISODES — slide-up
══════════════════════════════════════ */
.app-ep-modal {
  position: absolute; inset: 0; z-index: 200;
  background: rgba(0,0,0,.65);
  display: flex; align-items: flex-end;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.app-ep-modal.open {
  visibility: visible; opacity: 1; pointer-events: all;
}
.app-ep-modal-panel {
  width: 100%; background: #1e1e1e;
  border-radius: 20px 20px 0 0;
  max-height: 78%;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.app-ep-modal.open .app-ep-modal-panel { transform: translateY(0); }

.app-ep-modal-drag {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.15);
  margin: 10px auto 0; flex-shrink: 0;
}
.app-ep-modal-hdr {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.app-ep-modal-art {
  width: 46px; height: 46px; border-radius: 9px; flex-shrink: 0;
  object-fit: cover; background: #333;
}
.app-ep-modal-meta { flex: 1; min-width: 0; }
.app-ep-modal-title {
  font-size: 16px; font-weight: 700; color: #f6f6f6;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-ep-modal-count { font-size: 11px; color: #888; margin-top: 2px; font-family: 'DM Sans', sans-serif; }
.app-ep-modal-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: #2a2a2a; border: 1px solid rgba(255,255,255,.1);
  cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.app-ep-modal-close svg { width: 14px; height: 14px; stroke: #888; }
.app-ep-modal-body { overflow-y: auto; flex: 1; }
.app-ep-modal-body::-webkit-scrollbar { display: none; }

/* Liste d'épisodes dans le modal */
.app-ep-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer;
}
.app-ep-item:last-child { border-bottom: none; }
.app-ep-thumb {
  width: 50px; height: 50px; border-radius: 8px; flex-shrink: 0;
  object-fit: cover; background: #333;
}
.app-ep-body { flex: 1; min-width: 0; }
.app-ep-series { font-size: 9px; font-weight: 700; color: var(--th-a, #D20658); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 2px; font-family: 'DM Sans', sans-serif; }
.app-ep-ititle { font-size: 13px; font-weight: 700; color: #f6f6f6; line-height: 1.25; font-family: 'DM Sans', sans-serif; }
.app-ep-idesc {
  font-size: 10px; color: #888; margin-top: 3px; line-height: 1.4; font-family: 'DM Sans', sans-serif;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.app-ep-idate { font-size: 9px; color: #666; margin-top: 4px; font-family: 'DM Sans', sans-serif; }
.app-ep-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.app-ep-idur  { font-size: 10px; color: #888; font-weight: 600; font-family: 'DM Sans', sans-serif; white-space: nowrap; }
.app-ep-ibtns { display: flex; gap: 6px; align-items: center; }
.app-ep-iplay {
  width: 32px; height: 32px; border-radius: 50%; background: var(--th-a, #D20658);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 2px 8px color-mix(in srgb, var(--th-a, #D20658) 40%, transparent);
}
.app-ep-iplay svg { width: 12px; height: 12px; fill: white; margin-left: 2px; }
.app-ep-idl {
  width: 28px; height: 28px; border-radius: 50%;
  background: #242424; border: 1px solid rgba(255,255,255,.1);
  cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.app-ep-idl svg { width: 12px; height: 12px; fill: none; stroke: #888; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-ep-ishare {
  width: 28px; height: 28px; border-radius: 50%;
  background: #242424; border: 1px solid rgba(255,255,255,.1);
  cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.app-ep-ishare svg { width: 12px; height: 12px; fill: none; stroke: #888; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-ep-ishare.is-copied { border-color: var(--th-a, #D20658); }
.app-ep-ishare.is-copied svg { stroke: var(--th-a, #D20658); }

/* Surbrillance temporaire de l'épisode ciblé par un lien de partage (?podcast=&ep=) */
.app-ep-item--shared { animation: appEpSharedPulse 1.5s ease-in-out 2; }
@keyframes appEpSharedPulse {
  0%, 100% { background: transparent; }
  50%      { background: color-mix(in srgb, var(--th-a, #D20658) 18%, transparent); }
}

/* Logo de l'en-tête aligné sur les titres de l'appli (texte à 14 px), à toutes les largeurs (Emmanuel, 21/10/2026) */
body.mlk-app-page #brx-header .mlk-et-logo { margin-left: 14px !important; }