/* ============================================
   Radio MLK — App CSS  (page /app/)
   Calqué sur app-mockup — sans cadre téléphone
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@400&display=swap');

/* ── Reset page ── */
body.mlk-app-page {
  background: #111111;
  overflow: hidden;
  height: 100dvh;
  margin-top: 0 !important;
}

/* Supprime le cadre vert (tap-highlight) et l'outline focus sur tous les éléments interactifs */
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; }
/* La barre admin reste en position fixe au-dessus, pas de déplacement du body */
body.admin-bar.mlk-app-page #wpadminbar { position: fixed; }

/* ── Header app — compact, colonnes figées en une ligne ── */
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;
}
/* Section intérieure du header : centre tout verticalement */
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;
}
/* Empêche le logo de rétrécir sous la pression des autres colonnes */
body.mlk-app-page #brx-header img { flex-shrink: 0 !important; }

/* Cache le bouton LE DIRECT du header dans l'app
   (ciblage par .mlk-live-btn, la class réelle du bouton Bricks) */
body.mlk-app-page #brx-header .mlk-live-btn { display: none !important; }
/* Affiche-le seulement sur agenda/émissions/ep-mode — à droite, sans text */
body.mlk-app-page.app-on-agenda #brx-header .mlk-live-btn,
body.mlk-app-page.app-on-emissions #brx-header .mlk-live-btn,
body.mlk-app-page.app-ep-mode #brx-header .mlk-live-btn {
  display: flex !important;
}
body.mlk-app-page #brx-header .mlk-live-btn__label-d,
body.mlk-app-page #brx-header .mlk-live-btn__label-m { display: none !important; }

/* ── LE DIRECT header — masqué sur tous les écrans app ── */
body.mlk-app-page .mlk-header-live-wrap { display: none !important; }
/* Logo — taille */
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;
}

/* ── LE DIRECT header — masqué sur tous les écrans app
   (home = grand bouton central, autres écrans = nav bar "Le direct radio") ── */
body.mlk-app-page .mlk-header-live-wrap { display: none !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,
body.mlk-app-page #mlk-ticker-wrap-m { display:none !important; }

/* ── LE DIRECT header — caché sur home, visible sur agenda/émissions/ep-mode ── */
body.mlk-app-page .mlk-header-live-wrap                  { display:none !important; }
body.mlk-app-page.app-on-agenda .mlk-header-live-wrap    { display:flex !important; }
body.mlk-app-page.app-on-emissions .mlk-header-live-wrap { display:flex !important; }
body.mlk-app-page.app-ep-mode .mlk-header-live-wrap      { display:flex !important; }

/* ── Wrap principal — position fixed, s'adapte au header Bricks ── */
.mlk-app-wrap {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: var(--mlk-app-header-h, 72px);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #111111;
  z-index: 50;
}

/* ── Cacher la barre player compacte sur la page app ── */
body.mlk-app-page #mlk-player                { display: none !important; }
body.mlk-app-page,
body.mlk-app-page.mlk-active                 { padding-bottom: 0 !important; }

/* ── 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: #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: #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); }

/* ── Conteneur écrans — navigation horizontale (swipe) ── */
/* ── Splash screen ── */
.app-splash {
  position: absolute;
  inset: 0;
  background: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  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: center; gap: 8px;
  margin-top: 44px; height: 48px;
}
.app-splash-bars span {
  width: 6px; border-radius: 3px;
  background: #D20658;
  animation: splash-bar 0.75s ease-in-out infinite alternate;
}
.app-splash-bars span:nth-child(1) { animation-delay: 0s;     animation-duration: 0.70s; }
.app-splash-bars span:nth-child(2) { animation-delay: 0.12s;  animation-duration: 0.60s; }
.app-splash-bars span:nth-child(3) { animation-delay: 0.28s;  animation-duration: 0.80s; }
.app-splash-bars span:nth-child(4) { animation-delay: 0.08s;  animation-duration: 0.65s; }
.app-splash-bars span:nth-child(5) { animation-delay: 0.20s;  animation-duration: 0.72s; }
@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 rgba(210,6,88,0.25);
  border-top-color: #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); } }

.mlk-app-screens { flex:1; position:relative; overflow:hidden; }
.mlk-app-screen  {
  position:absolute; top:0; bottom:0; width:100%;
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
  background:#111111;
  -webkit-overflow-scrolling:touch;
  transition: transform 0.32s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.mlk-app-screen::-webkit-scrollbar { display:none; }

/* Positions initiales : agenda gauche, home centre, emissions droite */
#app-screen-agenda    { transform: translateX(-100%); }
#app-screen-home      { transform: translateX(0);     }
#app-screen-emissions { transform: translateX(100%);  }

/* Page Radio — scroll si contenu dépasse */
#app-screen-home { overflow-y: auto; }

/* ══════════════════════════════════════
   ÉCRAN ÉMISSIONS — browse ↔ épisode
══════════════════════════════════════ */
.app-em-browse  { display:flex; flex-direction:column; flex:1; overflow-y:auto; }
.app-em-episode { display:none; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
#app-screen-emissions.ep-mode .app-em-browse  { display:none; }
#app-screen-emissions.ep-mode .app-em-episode { display:flex; }

/* ══════════════════════════════════════
   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: #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; }

/* En mode épisode : cacher la barre compacte MLK (player inline visible) */
body.mlk-app-page.app-ep-mode #mlk-player      { display: none !important; }
body.mlk-app-page.app-ep-mode.mlk-active       { padding-bottom: 0 !important; }
body.mlk-app-page.app-ep-mode .mlk-app-wrap    { padding-bottom: 0 !important; }

/* Section label */
.app-sec {
  font-size:13px; font-weight:700; color:#f6f6f6;
  letter-spacing:1.6px; text-transform:uppercase;
  padding:6px 14px 4px; display:flex; align-items:center; gap:8px;
  font-family:'IBM Plex Sans Condensed',sans-serif;
}
.app-sec::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.08); }

/* Page Radio : pas de scroll — tout doit tenir dans l'écran */
#app-screen-home { overflow: hidden !important; }

/* Ferrer "Les Émissions" + slider en bas de la zone épisode */
.app-now-episode .app-sec { margin-top: auto; }

/* ══════════════════════════════════════
   LIVE MODE — now-block
══════════════════════════════════════ */

/* ── 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: #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-screen-home.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:#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: #D20658; flex-shrink: 0;
  border: 3px solid white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 28px rgba(210,6,88,.55);
  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 rgba(210,6,88,.55), 0 0 0 0px rgba(255,255,255,.8); }
  100% { box-shadow: 0 6px 28px rgba(210,6,88,.55), 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: rgba(210,6,88,.12); border-radius: 8px; }
.app-action-btn.active svg { stroke: #D20658; }
.app-action-btn.active span { color: #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: #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-screen-home.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);
}
.app-ep-art img    { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#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:#D20658;
}
.app-ep-prog-handle {
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:12px; height:12px; border-radius:50%; background:#D20658;
  box-shadow:0 0 0 3px rgba(210,6,88,.25);
}
.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:#D20658 !important; border:3px solid white;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 28px rgba(210,6,88,.55); flex-shrink:0;
}
.app-ep-play svg { width:26px; height:26px; margin-left:2px; }
/* 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%; padding:16px 14px 14px; margin-top:10px; background:#D20658; text-align:center; flex-shrink:0; }
.app-ag-hdr .s-main { font-size:26px; font-weight:400; color:#fff; letter-spacing:1.5px; text-transform:uppercase; display:block; line-height:1.1; font-family:'Londrina Solid',sans-serif; }
.app-ag-hdr .s-sub  { font-size:13px; color:rgba(255,255,255,.85); display:block; margin-top:4px; font-style:italic; font-family:'DM Sans',sans-serif; }

/* Bannière promo Radio MLK (haut de l'agenda) */
.app-ag-promo {
  background: #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: #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; }

.app-ag-event-title {
  font-size:19px; font-weight:700; color:#D20658;
  line-height:1.25; margin-bottom:6px;
  font-family:'DM Sans',sans-serif;
}
.app-ag-event-time {
  font-size:17px; font-weight:700; color:#f6f6f6;
  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:#D20658; text-decoration:underline; font-weight:400; }
.app-ag-event-desc br   { display:block; margin:4px 0; content:""; }
.app-ag-event-desc a    { color:#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; }

/* ══════════════════════════════════════
   ÉCRAN ÉMISSIONS — layout
══════════════════════════════════════ */

/* Écran : flex colonne, podcast slider toujours en bas */
#app-screen-emissions { overflow: hidden; }

/* Section haute : flex:1, contient browse OU épisode en absolute */
.app-em-top {
  flex: 1; min-height: 0;
  position: relative; overflow: hidden;
}

/* Browse et épisode : absolute, inset:0 → même taille que .app-em-top */
.app-em-browse,
.app-em-episode {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
}
.app-em-browse  { overflow: hidden; }
/* position:absolute hérité de la règle combinée → remplit .app-em-top, pas de gap */
.app-em-episode { overflow: hidden; display: none; }

/* ep-mode : épisode visible, browse masqué */
#app-screen-emissions.ep-mode .app-em-browse  { display: none; }
#app-screen-emissions.ep-mode .app-em-episode {
  display: flex;
  overflow-y: auto;              /* scroll si le contenu dépasse sur petits écrans */
  -webkit-overflow-scrolling: touch;
}
/* Artwork : taille réduite pour laisser la place aux contrôles sans overflow */
#app-screen-emissions.ep-mode .app-ep-art {
  flex: none;
  height: clamp(80px, 22dvh, 260px);
  align-self: center;
  width: clamp(80px, 22dvh, 260px); /* carré */
  margin: 8px auto 0;
}

/* ── Mini player — bande compacte entre browse et "Les Émissions" ── */
.app-mini-player {
  display: none;
  align-items: center;
  padding: 12px 14px;
  background: #1c1c1c;
  border-bottom: 1px solid rgba(255,255,255,.09);
  flex-shrink: 0;
  position: relative; overflow: hidden;
}
/* Barre de progression fine en haut */
.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%;
  background: #D20658; transition: width .5s linear;
}
/* Layout 3 colonnes symétriques : info | bouton | flèche */
.app-mini-left {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0; cursor: pointer;
}
.app-mini-right {
  display: flex; align-items: center; justify-content: flex-end;
  flex: 1;
}
.app-mini-art {
  width: 50px; height: 50px; border-radius: 8px;
  object-fit: cover; flex-shrink: 0; background: #2a2a2a;
}
.app-mini-info { min-width: 0; }
.app-mini-title {
  font-size: 13px; font-weight: 700; color: #f6f6f6;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-mini-artist {
  font-size: 11px; color: #888; margin-top: 2px;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Bouton central — même style que .app-ep-play */
.app-mini-play {
  width: 58px; height: 58px; border-radius: 50%;
  background: #D20658 !important; border: 3px solid white;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 6px 24px rgba(210,6,88,.5);
}
.app-mini-play svg { width: 22px; height: 22px; margin-left: 2px; }
.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%;
  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; }

/* Visible quand un épisode joue ET que ep-mode est fermé */
body.app-ep-playing #appMiniPlayer                   { display: flex; }
body.app-ep-playing.app-ep-mode #appMiniPlayer       { display: none; }

/* Bouton × pour fermer le player et revenir au browse */
.app-em-close {
  position: absolute; top: 10px; right: 10px; z-index: 10;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.app-em-close svg { width: 20px; height: 20px; stroke: #f6f6f6; }

/* Label "Les Émissions" et podcast slider : taille fixe, toujours en bas */
.app-em-ps-label { flex-shrink: 0; }
body.mlk-app-page .app-em-ps-label.app-sec {
  font-size: 17px; letter-spacing: 2px; padding: 10px 14px 6px;
}
#app-screen-emissions > #mlk-podcast-slider { flex-shrink: 0; }

/* Replay — 2 cartes 4/5 avec peek du 3e
   max-height calculée en JS (var --rs-slide-max-h) → aucun crop, aucun espace vide */
body.mlk-app-page #mlk-replay-slider { --gap:10px; --peek:16px; --mlk-rs-ratio:4/5; }
body.mlk-app-page #mlk-rs-outer      { padding:0 !important; }
body.mlk-app-page .mlk-rs-slide      {
  width:  var(--rs-slide-w, calc((100% - 10px - 16px)/2)) !important;
  height: auto !important;
}
/* ── Flèches de navigation — visibles sur desktop/tablet (≥480px) ── */
@media (min-width: 480px) {
  body.mlk-app-page .mlk-rs-nav-wrap,
  body.mlk-app-page .mlk-ps-nav-wrap { display: block; }

  body.mlk-app-page .mlk-rs-nav,
  body.mlk-app-page .mlk-ps-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;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s, border-color .15s;
  }
  body.mlk-app-page .mlk-rs-nav:hover,
  body.mlk-app-page .mlk-ps-nav:hover {
    background: #D20658; border-color: #D20658;
  }
  body.mlk-app-page .mlk-rs-nav.prev,
  body.mlk-app-page .mlk-ps-nav.prev { left:  6px; }
  body.mlk-app-page .mlk-rs-nav.next,
  body.mlk-app-page .mlk-ps-nav.next { right: 6px; }
}

/* Barre rose : hauteur fixe uniforme → tous les cadres à la même hauteur.
   Titre déjà limité à 2 lignes via -webkit-line-clamp:2 dans mlk-player.css */
body.mlk-app-page .mlk-rs-bar {
  height: 70px;
  min-height: 0;          /* écrase le min-height:56px de mlk-player.css */
  align-items: flex-start; /* titre aligné en haut, pas centré verticalement */
}

/* Podcast — se réduit en premier (dvh% plus faible = shrinks plus tôt)
   clamp(min, 24dvh, max) : à 650px → 156px, à 500px → 120px */
body.mlk-app-page #mlk-podcast-slider {
  --mlk-ps-h:    clamp(100px, 20dvh, 240px);
  --mlk-ps-h-m:  clamp(100px, 20dvh, 240px);
  --gap:10px; --peek:12px;
}
body.mlk-app-page #mlk-ps-outer  { padding:0 !important; }
body.mlk-app-page .mlk-ps-slide  { width: clamp(100px, 20dvh, 240px) !important; }

/* ══════════════════════════════════════
   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: #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: #D20658;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 2px 8px rgba(210,6,88,.4);
}
.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; }