/* ============================================================
   FM PULSE – LAYOUT GLOBAL (nettoyé 2025‑11‑10)
   Compatibilité : header/footer en partials + partials.js
   Auteur : Mister Oliv’ + copilote (refonte plateformes consolidée)
   ============================================================ */

/* ------------------------------
   0) Variables & Reset minimal
   ------------------------------ */

:root{
  /* Couleurs */
  --bg: #0b0b0d;                  /* fond principal (charcoal) */
  --panel: #111216;               /* panneaux/cartes */
  --panel-2: #0f1013;             /* variante */
  --text: #e8ebf0;                /* texte principal */
  --muted: #b5bac5;               /* texte atténué */
  --gold: #FFC938;                /* or FM Pulse (accent canonisé) */
  --gold-weak: rgba(255,201,56,.30);
  --accent: #82a0ff;              /* détail secondaire */
  --line: rgba(255,255,255,.08);

  /* Surfaces */
  --radius: 14px;
  --shadow: 0 10px 22px rgba(0,0,0,.35);

  /* Typo */
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img{max-width:100%; height:auto; display:block}
 a{color:var(--gold); text-underline-offset: 2px}
a:hover{opacity:.96}
hr{border:0; border-top:1px solid var(--line); margin:24px 0}

/* Utilitaires courts */
.container{width:min(1120px, 92vw); margin-inline:auto; padding:16px}
.block{display:block}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.hidden, [hidden]{display:none !important}

/* Titres/texte */
.title-md{font-size: clamp(28px, 2.8vw, 36px); margin:0 0 6px}
.subtitle{color:var(--muted); margin:6px 0 12px}
.kicker{letter-spacing:.04em; color:var(--muted); margin:0 0 4px; font-size:.95rem}

/* ------------------------------
   1) Header (logo + nav + burger)
   ------------------------------ */

/* --- Branding (texte au lieu du SVG) --- */
.brand{display:flex; align-items:center; gap:10px}

.mo-logo{display:inline-block; text-decoration:none}
.mo-logo:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

.brand-mo{
  font-family: "Handel Gothic BT", var(--font-sans);
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing:.04em;
  text-transform: uppercase;          /* MISTER OLIV’ */
  line-height:1;
  color: var(--gold);
  text-decoration: none !important;   /* jamais souligné */
  display:inline-block;
  transform: translateY(1px);         /* micro-alignement optique */
}

.brand-badge{
  font: 700 .90rem/1 var(--font-sans);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--gold-weak);
  box-shadow: 0 2px 6px rgba(0,0,0,.25) inset;
  white-space: nowrap;
}

@media (min-width:900px){
  .brand-mo{font-size: clamp(22px, 2.3vw, 30px);}
}

.mo-header{position:sticky; top:0; z-index:50; background:linear-gradient(180deg, rgba(10,10,12,.9), rgba(10,10,12,.65)); backdrop-filter: blur(6px); border-bottom:1px solid var(--line)}
.mo-header .mo-wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; width:min(1120px,92vw); margin-inline:auto; padding:12px 16px}
.mo-logo img{height:auto; width:auto; max-height:36px}

/* Navigation (mobile par défaut) */
.mo-nav{position:fixed; inset:64px 0 auto 0; /* sous la barre */
  background:var(--panel); border-top:1px solid var(--line);
  transform: translateY(-8px); opacity:0; pointer-events:none;
  transition: transform .25s ease, opacity .25s ease;
  padding:10px 16px; box-shadow: var(--shadow)
}
.mo-nav a{display:block; padding:10px 6px; color:var(--text); text-decoration:none; border-radius:10px}
.mo-nav a:hover{background:rgba(255,255,255,.04)}
.mo-nav a.active{color:#111; background:var(--gold); font-weight:600}

/* Bouton burger */
.mo-burger{appearance:none; border:0; background:transparent; padding:8px; border-radius:10px; display:grid; gap:4px; cursor:pointer}
.mo-burger:focus-visible{outline:2px solid var(--gold)}
.mo-burger .bar{width:24px; height:2px; background:var(--text); display:block}

/* Etat ouvert (piloté par partials.js via [data-open]) */
#site-nav[data-open="1"]{transform: translateY(0); opacity:1; pointer-events:auto}

/* Desktop >= 721px : nav inline, burger caché */
@media (min-width:721px){
  .mo-burger{display:none}
  .mo-nav{
    position:static; transform:none; opacity:1; pointer-events:auto; background:transparent;
    box-shadow:none; border:0; padding:0; display:flex; gap:18px; align-items:center
  }
  .mo-nav a{padding:8px 10px; color:var(--text)}
  .mo-nav a.active{background:transparent; color:var(--gold); border-bottom:3px solid var(--gold); font-weight:700}
}

/* ------------------------------
   2) Footer
   ------------------------------ */

.mo-footer{background: #0e0e10; border-top:1px solid var(--line); padding:24px 16px}
.mo-footer .mo-wrap{width:min(1120px,92vw); margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:14px}
.mo-footnav{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px}
.mo-footnav a{color:var(--gold); text-decoration:none; white-space:nowrap; font-size:clamp(14px,3.4vw,16px)}
.mo-footnav a:hover{text-decoration:underline}
.mo-footnav a.active{font-weight:700}
.mo-legal{color:var(--muted); font-size:.95rem; text-align:center}

/* ------------------------------
   3) Composants UI (cartes, panneaux, grid, chip, badge, bouton)
   ------------------------------ */

/* Cartes/panneaux */
.card,.panel{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card{overflow:hidden}
.card-body{padding:14px 16px}
.card-title{margin:2px 0 6px; font-size: clamp(18px, 2.2vw, 22px)}
.card-text{color:var(--muted); margin:0}

/* Bannière (image + contenu) */
.banner{overflow:hidden}
.banner-grid{display:grid; gap:16px; grid-template-columns: 1fr; padding:12px}
.banner-grid > picture{border-radius: var(--radius); overflow:hidden}
@media (min-width:900px){
  .banner-grid{grid-template-columns: 1.15fr 1fr; align-items:center; padding:18px}
}

/* Panneaux simples */
.panel{padding:16px}

/* Grilles de cartes */
.grid-2{display:grid; gap:16px; grid-template-columns: 1fr}
@media (min-width:720px){ .grid-2{grid-template-columns: 1fr 1fr} }

/* Chips/badges */
.chip{display:inline-block; padding:6px 10px; border-radius:999px; font-weight:600; font-size:.9rem; letter-spacing:.02em}
.chip-neutral{background: rgba(255,255,255,.06); border:1px solid var(--line); color:var(--text)}
.badge{display:inline-block; padding:3px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:.85rem}

/* Boutons */
.btn{
  --btn-bg: var(--gold);
  display:inline-block; padding:10px 14px; border-radius:12px;
  color:#111; background: linear-gradient(#FFD356, var(--gold)); text-decoration:none; font-weight:700; border:1px solid #C99713;
  box-shadow: 0 4px 12px rgba(0,0,0,.28)
}
.btn:hover{transform: translateY(-1px); filter: brightness(1.02)}
.btn:active{transform: translateY(0)}
.btn[disabled]{opacity:.6; pointer-events:none}

/* Lien externe court */
.extlinks a{color:var(--accent)}

/* Séparateur titre dans hero */
.fp-hero-sep{display:flex; align-items:center; gap:10px; color:var(--muted); margin:12px 0 8px}
.fp-hero-sep::before, .fp-hero-sep::after{content:""; flex:1; height:1px; background:var(--line)}
.fp-hero-sep span{white-space:nowrap}

/* Module Top10 (index) */
.fp-top10{display:grid; grid-template-columns: 92px 1fr; gap:10px; align-items:center; margin:10px 0 12px}
.fp-top10__img{border-radius:10px; border:1px solid var(--line)}
.fp-top10__badge{display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; background:linear-gradient(#FFD356, var(--gold)); color:#111; font-weight:800; margin-right:8px; border:1px solid #C99713}
.fp-top10__text{color:var(--text)}
.fp-top10__thanks{color:var(--muted)}
.fp-top10__cta{margin-left:10px}
@media (min-width:840px){
  .fp-top10{grid-template-columns: 120px 1fr}
}

/* Variante "remerciements" : image carrée */
.fp-top10.fp-merci .fp-top10__img{ height:auto !important; aspect-ratio:1/1; object-fit:cover; border-radius:8px }

/* Thumb carré pour le bloc "remerciements" */
.fp-top10.fp-merci .fp-thumb{ width:100%; aspect-ratio:1/1; border-radius:10px; overflow:hidden; border:1px solid var(--line) }
.fp-top10.fp-merci .fp-thumb img{ width:100%; height:100%; display:block; object-fit:cover }

/* ------------------------------
   4) Spécifiques pages (countdown, player, tracklist)
   ------------------------------ */

/* Compte à rebours */
.countdown{color:var(--text); background:rgba(255,255,255,.03); border:1px dashed var(--line); padding:8px 10px; border-radius:10px}

/* Lecteur Mixcloud intégré */
.player-card{margin-top:18px}
.player-card .label{color:var(--muted); margin:8px 16px 0}

/* Tracklist ordonnée */
.tracklist{list-style:none; padding:0; margin:8px 0 0}
.trk{padding:8px 6px; border-bottom:1px solid var(--line)}
.trk:last-child{border-bottom:0}
.trk-num{color:var(--muted); width:28px; display:inline-block}
.trk-artist{font-weight:700}
.trk-title{}
.trk-meta{color:var(--muted)}
.trk-notes{color:var(--muted); font-size:.92rem; margin:4px 0 0 28px}

.player-hint{ margin:8px 0 6px; font-size:.95rem; color:#cfcfcf; opacity:.9 }
.mixcloud-external-wrap{ margin:8px 0 0; border-top:1px solid rgba(255,255,255,.12); padding-top:10px }
.mixcloud-external{ font-weight:600; text-decoration:underline; text-underline-offset:3px; color:#ffcc00 }
.mixcloud-external:hover{ opacity:.85 }

/* Mobile */
@media (max-width:768px){ .player-hint, .mixcloud-external-wrap{ text-align:center } }

/* ------------------------------
   5) Formulaires légers (select du /replay/)
   ------------------------------ */

.label{color:var(--muted)}
.select{ background:rgba(255,255,255,.04); color:var(--text); border:1px solid var(--line); padding:8px 10px; border-radius:10px }

/* ------------------------------
   6) Accessibilité & petites finitions
   ------------------------------ */

:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
::selection{background:rgba(242,212,107,.35)}
/* Anti-sauts d’alignement pour chiffres (countdown) */
.countdown, .badge{font-variant-numeric: tabular-nums}

/* ------------------------------
   7) Petits écrans & espacements
   ------------------------------ */
@media (max-width:480px){
  .container{padding:12px}
  .card-body{padding:12px}
  .panel{padding:12px}
  .mo-footer{padding:18px 12px}
  .fp-top10{grid-template-columns: 80px 1fr}
}

/* ========= Mixcloud hint (version unique) ========= */
.mixc-wrap{ position:relative; contain:paint }
.mixc-wrap iframe{ position:relative; z-index:1 }
.mixc-nudge{ position:absolute; z-index:9999; left:20px; top:14px; display:flex; align-items:center; gap:8px; color:#ffd159; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); pointer-events:none; opacity:0; transform:translateZ(0); will-change:transform,opacity; animation: mixc-pop .5s ease-out .4s forwards, mixc-wiggle 1.2s ease-in-out 1s 4, mixc-fade .5s ease-in 7s forwards }
.mixc-nudge-icon{ transform-origin:50% 50% }
.mixc-nudge-bubble{ background:rgba(0,0,0,.55); border:1px solid rgba(255,209,89,.5); border-radius:999px; padding:6px 10px; font-size:.85rem; line-height:1; white-space:nowrap }
@media (min-width:641px){ .mixc-nudge{ left:16px; top:10px } .mixc-nudge-bubble{ font-size:.9rem } }
@supports (-webkit-touch-callout: none){ .mixc-nudge{ left:22px; top:16px } }
@media (prefers-reduced-motion: reduce){ .mixc-nudge{ animation: mixc-pop .3s ease-out .4s forwards, mixc-fade .4s ease-in 6s forwards } }
@keyframes mixc-pop{ from{transform:scale(.8);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes mixc-wiggle{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }
@keyframes mixc-fade{ to{opacity:0} }

/* SHARE */
.fp-share{ position:relative; display:inline-block }
.fp-share__btn{ --btn-bg:var(--gold) }
.fp-share__menu{ position:absolute; inset:auto auto 0 0; transform:translateY(110%); min-width:220px; background:#121417; border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow:0 8px 30px rgba(0,0,0,.35); z-index:50 }
.fp-share__item{ display:block; width:100%; text-align:left; padding:8px 10px; border-radius:8px; background:transparent; color:#ddd; text-decoration:none; font-weight:600; cursor:pointer }
.fp-share__item:hover{ background:#1b1f24; color:#fff }
.fp-share__item:active{ transform:translateY(1px) }
@media (max-width:520px){ .fp-share{ width:100% } .fp-share__menu{ inset:auto 0 0 auto; transform:translateY(110%) } }
.btn-row .fp-share{ margin-left:8px }

/* Évite le masquage du menu de partage par les cartes */
.card, .banner, .card-body{ overflow:visible !important }

.trk-time{ color:var(--muted); margin:0 6px 0 8px }
.trk-timechip{ display:inline-block; min-width:54px; padding:2px 8px; margin:0 10px 0 12px; border-radius:999px; background:#1b1f24; border:1px solid var(--line); color:#fff; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2 }
@media (max-width:540px){ .trk-timechip{ min-width:48px; padding:2px 6px; margin:0 8px 0 8px } }

.next-episode { background:#0f1012; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:1.5rem; margin-bottom:2rem }
.next-episode__title { font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:#d2b21b; margin-bottom:1rem }
.next-episode__card { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap }
.next-episode__cover { width:240px; max-width:100%; border-radius:14px; box-shadow:0 12px 35px rgba(0,0,0,.35); display:block }
.next-episode__content h3 { margin:0 0 .5rem; font-size:1rem }
.next-episode__content p { margin:0 0 .75rem; color:rgba(255,255,255,.6) }
.next-episode__countdown { background:rgba(210,178,27,.08); border:1px solid rgba(210,178,27,.25); border-radius:999px; padding:.45rem 1rem .45rem .85rem; display:inline-flex; gap:.5rem; align-items:center; font-size:.85rem }
@media (max-width:700px){ .next-episode__card{ flex-direction:column; align-items:flex-start } .next-episode__cover{ width:100%; max-width:380px } }
.card + .grid-2 { margin-top:3rem }
@media (max-width:540px){ .next-episode__content h3{ font-size:.95rem; line-height:1.35 } .next-episode__content p{ font-size:.85rem } .countdown, .next-episode__countdown{ width:100%; justify-content:flex-start } }

/* HERO épisode : cover plus petite + layout propre */
.page-replay .episode-hero{ display:grid; grid-template-columns: clamp(220px, 28vw, 360px) 1fr; gap:20px; align-items:center }
.page-replay .episode-cover{ width:100%; height:auto; max-width:360px; border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.35) }
@media (max-width:992px){ .page-replay .episode-hero{ grid-template-columns: clamp(200px, 34vw, 320px) 1fr; gap:16px } .page-replay .episode-cover{ max-width:320px } }
@media (max-width:768px){ .page-replay .episode-hero{ grid-template-columns:1fr; gap:12px } .page-replay .episode-cover{ max-width:240px; margin:0 auto } }

/* HERO replay — réduction de la cover */
.banner-grid { display:grid; grid-template-columns: clamp(200px, 30vw, 360px) 1fr; gap:24px; align-items:center }
.banner-grid picture img { width:100%; height:auto; border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.35) }
@media (max-width:768px) { .banner-grid { grid-template-columns:1fr; text-align:center; gap:12px } .banner-grid picture img { max-width:240px; margin:0 auto } }

/* =========================
   FM Pulse – Replay (mobile)
   ========================= */
@media (max-width:768px){
  .banner.card{ padding:14px; border-radius:16px }
  .banner-grid{ grid-template-columns:1fr; gap:12px; text-align:center }
  .banner-grid picture img{ max-width:210px; width:72%; margin:4px auto 2px; border-radius:14px }
  .chip{ font-size:.82rem; padding:6px 10px }
  .hero-kicker{ font-size:.9rem; margin-left:6px }
  .banner .date, .banner time{ font-size:.95rem; opacity:.9 }
  .title-md{ font-size:1.6rem; line-height:1.2; margin:4px 0 6px }
  .subtitle{ font-size:.98rem; line-height:1.45; margin:6px auto 8px; max-width:34ch }
  .fp-share{ display:flex; justify-content:center }
  .fp-share__btn{ font-size: .95rem; padding:10px 14px; border-radius:12px }
  .player-card.card{ padding:12px 12px 14px; border-radius:14px }
  .player-card .label{ font-size:1rem }
  .player-hint{ font-size:.92rem; margin:4px 0 8px; text-align:center }
  .mixcloud-external-wrap{ text-align:center; margin-top:6px }
  .mixcloud-external{ font-size:.95rem }
  .panel{ padding:14px; border-radius:14px }
  .section-title{ font-size:1.25rem }
}

/* =========================
   FM Pulse — Replay : MOBILE (variante compacte)
   ========================= */
@media (max-width:768px){
  body.compact-mobile .banner.card{ padding:10px 12px; border-radius:12px }
  body.compact-mobile .banner-grid{ grid-template-columns:1fr; gap:8px; text-align:center }
  body.compact-mobile .banner-grid picture img{ max-width:170px; width:64%; margin:0 auto 2px; border-radius:12px }
  body.compact-mobile .chip{ font-size:.75rem; padding:4px 8px }
  body.compact-mobile .hero-kicker{ font-size:.82rem; margin-left:6px; opacity:.9 }
  body.compact-mobile .banner .date, body.compact-mobile .banner time{ font-size:.86rem; opacity:.8 }
  body.compact-mobile .title-md{ font-size:1.35rem; line-height:1.16; margin:2px 0 2px }
  body.compact-mobile .subtitle{ font-size:.9rem; line-height:1.34; margin:2px auto 6px; max-width:28ch }
  body.compact-mobile .fp-share{ display:flex; justify-content:center }
  body.compact-mobile .fp-share__btn{ font-size:.88rem; padding:7px 11px; border-radius:10px }
  body.compact-mobile .player-card.card, body.compact-mobile .panel{ padding:10px 12px; border-radius:12px }
  body.compact-mobile .player-card .label{ font-size:.96rem }
  body.compact-mobile .player-hint{ font-size:.88rem; margin:4px 0 6px }
  body.compact-mobile .mixcloud-external{ font-size:.9rem }
  body.compact-mobile .section-title{ font-size:1.15rem }
}
@media (max-width:390px){ .banner-grid picture img{ max-width:170px } .title-md{ font-size:1.35rem } .subtitle{ font-size:.9rem; max-width:28ch } body.compact-mobile .banner-grid picture img{ max-width:160px } body.compact-mobile .title-md{ font-size:1.25rem } body.compact-mobile .subtitle{ font-size:.88rem; max-width:26ch } }
@media (max-width:768px){ .chip{font-size:.8rem;padding:5px 9px} .hero-kicker{font-size:.85rem} .fp-share{margin-top:6px} }

/* Bloc présentation replié */
.ep-desc{ margin-top:16px }
.ep-desc > summary{ cursor:pointer; list-style:none; padding:12px 14px; font-weight:700 }
.ep-desc > summary::-webkit-details-marker{ display:none }
.ep-desc[open] > summary{ border-bottom:1px solid var(--line) }
.ep-desc__body{ padding:12px 14px 14px; color:var(--muted) }
@media (max-width:768px){ .ep-desc{ border-radius:12px } .ep-desc > summary{ padding:10px 12px } .ep-desc__body{ padding:10px 12px 12px } }

/* ============================================================
   FM PULSE — PLATEFORMES (consolidé, accessible, AA)
   Portée stricte : .fp-platforms-card
   ============================================================ */

/* Variables locales (évite les collisions et harmonise) */
.fp-platforms-card{
  --fp-gold: #ffc70f;                /* ou #ffd300 */
  --fp-gold-soft: rgba(255,199,15,.07);
  --fp-gold-border: rgba(255,199,15,.55);
  --fp-gold-outline: #ffd24d;        /* focus ring */
  --fp-text-soft: #e9ecef;           /* labels */
  --brand-spotify: #1db954;
  --brand-apple:   #d9dde1;          /* neutre clair (mode sombre ok) */
  --brand-deezer:  #ef5466;          /* alt: #cf3f61 */

  margin-top:12px; padding:12px 12px 14px;
  border:1px solid rgba(255,199,15,.25);
  border-radius:12px;
  background: var(--panel, #111518);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(0,0,0,.22);
}

/* Titre rouge discret */
.fp-platforms-card .section-title{
  margin:0 0 10px; font-size:1.05rem; color:#e96a6a; /* ou #ff6b6b */
}

/* Grille : 3 colonnes desktop, 1 col mobile */
.fp-platforms-card .platforms{ display:grid; gap:10px }
@media (min-width:780px){ .fp-platforms-card .platforms{ grid-template-columns:1fr 1fr 1fr } }

/* Pills ghost uniformes */
.fp-platforms-card .platforms .btn.platform{
  display:flex !important; align-items:center; gap:.6rem; justify-content:flex-start;
  min-height:44px; padding:10px 14px !important; border-radius:11px !important;
  background: rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color: var(--text, #e0e0e0) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.25);
}

/* Hover/Active unifiés (beurre doux) */
.fp-platforms-card .platforms .btn.platform:hover{
  border-color: var(--fp-gold-border) !important;
  background: var(--fp-gold-soft) !important;
}
.fp-platforms-card .platforms .btn.platform:active{ transform: translateY(1px); filter: brightness(0.98) }
@media (prefers-reduced-motion: reduce){ .fp-platforms-card .platforms .btn.platform:active{ transform:none } }

/* Focus clavier ultra-visible */
.fp-platforms-card .platforms .btn.platform:focus-visible,
.fp-platforms-card .platforms .btn.platform:focus{
  outline:2px solid var(--fp-gold-outline); outline-offset:2px;
  box-shadow: 0 0 0 3px rgba(255,210,77,.25);
}

/* Icônes (utilise <span class="icon">) */
.fp-platforms-card .platforms .btn.platform .icon{ position:static !important; display:inline-block !important; width:1.05rem; height:1.05rem; flex:0 0 1.05rem }

/* Libellé neutre + option dégradé Deezer (texte seul) */
.fp-platforms-card .platforms .btn.platform .label{ color:var(--fp-text-soft) }
.fp-platforms-card .platforms .btn.platform.is-deezer .label{ /* option dégradé : décommente pour tester */
  /* background: linear-gradient(90deg,#f037a5 0%,#f6d339 50%,#2bd1ff 100%); */
  /* -webkit-background-clip: text; background-clip: text; color: transparent; */
}

/* Couleurs d'icônes par service (si vos SVG suivent color/currentColor) */
.fp-platforms-card .platforms .btn.platform.is-spotify  .icon{ color:var(--brand-spotify) }
.fp-platforms-card .platforms .btn.platform.is-apple    .icon{ color:var(--brand-apple) }
.fp-platforms-card .platforms .btn.platform.is-deezer   .icon{ color:var(--brand-deezer) }

/* Sécurité : neutralise tout avant pseudo‑élément des .btn globaux */
.fp-platforms-card .platforms .btn.platform::before{ content:none !important }

/* =========================
   Grille Replays : 1 / 2 / 3 colonnes
   ========================= */
#grid, .grid-2{ display:grid; grid-template-columns:1fr; gap:16px }
@media (min-width:768px){ #grid, .grid-2{ grid-template-columns:repeat(2,1fr); gap:18px } }
@media (min-width:1200px){ #grid, .grid-2{ grid-template-columns:repeat(3,1fr); gap:20px } }

/* Cartes : visuels réguliers + CTA en bas */
.card{ display:flex; flex-direction:column }
.card .card-body{ display:flex; flex-direction:column; gap:10px; padding-top:10px }
.card .actions{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap }
.card .card-title{ line-height:1.2; margin:0 }

/* Wrapper visuel 16:9, sans rognage (covers non tronquées) */
.card .cover{ position:relative; aspect-ratio:16/9; background:#0e0f12; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center }
.card .cover img{ width:100%; height:100%; object-fit:contain; display:block }

/* Images sûres (évite les reflows) */
.banner img, .card img{ width:100%; height:auto; display:block }

/* === FM Pulse – Platforms : micro-patch premium (11/2025) === */

/* Titre un peu plus franc (rouge doux, léger tracking) */
.fp-platforms-card .section-title{
  color:#e96a6a; letter-spacing:.01em;
}

/* Pills : plus présentes (contraste/bordure/relief) */
.fp-platforms-card .platforms .btn.platform{
  min-height:44px;
  padding:12px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 0 rgba(0,0,0,.22);
  font-weight:700;
  letter-spacing:.015em;
}

/* Libellé vraiment lisible (blanc doux) */
.fp-platforms-card .platforms .btn.platform .label{
  color:#f1f3f5;
}

/* Hover/active harmonisés (“beurre doux”) */
.fp-platforms-card .platforms .btn.platform:hover{
  border-color: rgba(255,199,15,.55) !important;
  background: rgba(255,199,15,.07) !important;
}
.fp-platforms-card .platforms .btn.platform:active{ transform:translateY(1px); }

/* Focus clavier bien visible */
.fp-platforms-card .platforms .btn.platform:focus-visible{
  outline:2px solid #ffd24d; outline-offset:2px;
  box-shadow:0 0 0 3px rgba(255,210,77,.25);
}

/* Icônes : taille confortable + couleur par “brand” */
.fp-platforms-card .platforms .btn.platform .icon{
  width:20px; height:20px; flex:0 0 20px;
}
.fp-platforms-card .platforms .btn.platform.is-spotify  .icon{ color:#1db954; }
.fp-platforms-card .platforms .btn.platform.is-apple    .icon{ color:#d9dde1; }
.fp-platforms-card .platforms .btn.platform.is-deezer   .icon{ color:#ef5466; }

/* Si tes icônes n’apparaissent pas : masque SVG de secours */
.fp-platforms-card .platforms .btn.platform.is-deezer .icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='14' width='3' height='6' rx='1'/%3E%3Crect x='6.5' y='10' width='3' height='10' rx='1'/%3E%3Crect x='11' y='6' width='3' height='14' rx='1'/%3E%3Crect x='15.5' y='3' width='3' height='17' rx='1'/%3E%3Crect x='20' y='12' width='2' height='8' rx='1'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='14' width='3' height='6' rx='1'/%3E%3Crect x='6.5' y='10' width='3' height='10' rx='1'/%3E%3Crect x='11' y='6' width='3' height='14' rx='1'/%3E%3Crect x='15.5' y='3' width='3' height='17' rx='1'/%3E%3Crect x='20' y='12' width='2' height='8' rx='1'/%3E%3C/svg%3E");
  background: currentColor;
}
.fp-platforms-card .platforms .btn.platform.is-spotify .icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm4.53 14.43a.9.9 0 0 1-1.24.29c-3.4-2.08-7.69-1.26-9.62-.51a.9.9 0 0 1-.63-1.69c2.25-.84 7.05-1.73 11 0a.9.9 0 0 1 .49 1.91Zm1.13-3.2a1 1 0 0 1-1.37.32c-3.9-2.37-9.85-1.55-12.64-.63a1 1 0 0 1-.62-1.91c3.19-1.03 9.7-1.97 14.29.79a1 1 0 0 1 .34 1.43Zm.38-3.32a1.1 1.1 0 0 1-1.5.36c-4.48-2.73-11.33-1.79-14.46-.75a1.1 1.1 0 1 1-.72-2.08c3.64-1.26 10.26-2.34 15.43.82a1.1 1.1 0 0 1 .25 1.65Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm4.53 14.43a.9.9 0 0 1-1.24.29c-3.4-2.08-7.69-1.26-9.62-.51a.9.9 0 0 1-.63-1.69c2.25-.84 7.05-1.73 11 0a.9.9 0 0 1 .49 1.91Zm1.13-3.2a1 1 0 0 1-1.37.32c-3.9-2.37-9.85-1.55-12.64-.63a1 1 0 0 1-.62-1.91c3.19-1.03 9.7-1.97 14.29.79a1 1 0 0 1 .34 1.43Zm.38-3.32a1.1 1.1 0 0 1-1.5.36c-4.48-2.73-11.33-1.79-14.46-.75a1.1 1.1 0 1 1-.72-2.08c3.64-1.26 10.26-2.34 15.43.82a1.1 1.1 0 0 1 .25 1.65Z'/%3E%3C/svg%3E");
  background: currentColor;
}
.fp-platforms-card .platforms .btn.platform.is-apple .icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6 13.1c0 3.2 2.8 4.3 2.8 4.3s-1.9 5.3-4.6 5.3c-1 0-1.7-.7-3-.7s-2.1.7-3 .7c-2.7 0-5.1-5.1-5.1-8.5 0-3.7 2.4-5.7 4.6-5.7 1.2 0 2.2.8 3 .8s1.9-.8 3.2-.8c.6 0 2.9.1 4.3 2.2-2.3 1.3-1.9 4.1-1.9 4.1ZM14.8 3.2c.8-.9 1.3-2.1 1.2-3.2-1.2.1-2.5.7-3.3 1.6-.8.9-1.3 2.1-1.2 3.3 1.3.1 2.6-.7 3.3-1.7Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6 13.1c0 3.2 2.8 4.3 2.8 4.3s-1.9 5.3-4.6 5.3c-1 0-1.7-.7-3-.7s-2.1.7-3 .7c-2.7 0-5.1-5.1-5.1-8.5 0-3.7 2.4-5.7 4.6-5.7 1.2 0 2.2.8 3 .8s1.9-.8 3.2-.8c.6 0 2.9.1 4.3 2.2-2.3 1.3-1.9 4.1-1.9 4.1ZM14.8 3.2c.8-.9 1.3-2.1 1.2-3.2-1.2.1-2.5.7-3.3 1.6-.8.9-1.3 2.1-1.2 3.3 1.3.1 2.6-.7 3.3-1.7Z'/%3E%3C/svg%3E");
  background: currentColor;
}

/* =========================================
   PROCHAIN ÉPISODE – style vignettes (comme E#5)
   ========================================= */

.next-episode__card {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* IMPORTANT : on passe par .card .next-episode__cover
   pour battre .card img { width:100%; } */
.card .next-episode__cover {
  flex: 0 0 auto;
  width: 140px;
  height: 140px;
  max-width: none;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  margin: 0;
  display: block;
}

/* Zone texte à droite */
.next-episode__content {
  flex: 1 1 auto;
}

/* Compte à rebours sous le texte */
.countdown {
  margin-top: 6px;
}

/* Ajuste un peu sur très petit écran */
@media (max-width: 520px) {
  .next-episode__card {
    align-items: flex-start;
  }

  .card .next-episode__cover {
    width: 120px;
    height: 120px;
  }
}


/* ============================================================
   FIN – fichier nettoyé (plateformes consolidées, doublons retirés)
   ============================================================ */