/* Radio Web El Yassamine — Maison des Jeunes Bouficha
   Mise en page calquée sur la maquette 1080 × 1920 : 1 unité de maquette = var(--u). */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:#f2a516;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#fff;-webkit-tap-highlight-color:transparent;
  display:flex;justify-content:center;align-items:flex-start;min-height:100dvh;
  overflow-x:hidden;
}
.backdrop{position:fixed;inset:0;z-index:0;
  background:url(img/header.jpg) center/cover no-repeat;filter:blur(28px) saturate(1.2);transform:scale(1.2);opacity:.85}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.stage{
  position:relative;z-index:1;
  width:min(100vw, 560px);
  /* hauteur de la maquette ; sur téléphone, l'espace en plus agrandit la zone médias */
  min-height:max(calc(min(100vw, 560px) * 1920 / 1080), 100dvh);
  display:flex;flex-direction:column;
  container-type:inline-size;
  --u:calc(100cqw / 1080);
  background:#f2a516;
  box-shadow:0 0 60px rgba(0,0,0,.35);
  overflow:hidden;
  user-select:none;
}
@media (min-width:561px){
  body{padding:24px 0;align-items:flex-start}
  .stage{margin:auto;border-radius:22px;
    width:min(560px, calc((100dvh - 48px) * 1080 / 1920));
    min-height:calc(min(560px, calc((100dvh - 48px) * 1080 / 1920)) * 1920 / 1080)}
}
[hidden]{display:none!important}

.layer{display:block;width:100%;height:auto;pointer-events:none;flex:none}
.lower{position:relative;flex:none;height:calc(736 * var(--u))}
.layer.bottom{position:absolute;left:0;top:0}

/* ---------- Zone médias ---------- */
.media{position:relative;flex:1 0 auto;width:100%;min-height:calc(621 * var(--u));
  background:#fff;overflow:hidden}
.media-track{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 900ms ease}
.slide.on{opacity:1}
.slide img,.slide video,.slide iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:#111}
.slide.fit-contain img,.slide.fit-contain video{object-fit:contain;background:transparent}
.slide img.fill{object-fit:cover!important;filter:blur(24px) brightness(.75);transform:scale(1.15);animation:none!important}
.slide.fit-contain video{background:#111}
.slide.photo.on img{animation:kenburns var(--dur,7s) ease-out both}
.slide:nth-child(even).photo.on img{animation-name:kenburns2}
@keyframes kenburns{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-2%,-1.5%)}}
@keyframes kenburns2{from{transform:scale(1.14) translate(2%,1%)}to{transform:scale(1.02) translate(0,0)}}
.media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(to top,rgba(20,24,48,.72),rgba(20,24,48,0));pointer-events:none;opacity:var(--shade,1);transition:opacity .5s}
.media.empty::after{opacity:0}
.media-caption{position:absolute;z-index:3;left:calc(34 * var(--u));right:calc(230 * var(--u));bottom:calc(46 * var(--u));
  font-weight:600;font-size:calc(34 * var(--u));line-height:1.25;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.media-caption small{display:block;font-weight:400;font-size:.72em;opacity:.85;margin-top:.15em}
.media-dots{position:absolute;z-index:3;left:calc(34 * var(--u));bottom:calc(18 * var(--u));display:flex;gap:calc(10 * var(--u))}
.media-dots i{width:calc(14 * var(--u));height:calc(14 * var(--u));border-radius:50%;background:rgba(255,255,255,.5);transition:all .3s}
.media-dots i.on{background:#e8f23a;width:calc(34 * var(--u));border-radius:calc(8 * var(--u))}
.media-nav{position:absolute;z-index:4;top:50%;transform:translateY(-50%);
  width:calc(84 * var(--u));height:calc(84 * var(--u));border-radius:50%;border:0;
  background:rgba(255,255,255,.18);color:#fff;font-size:calc(58 * var(--u));line-height:1;
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .3s;backdrop-filter:blur(6px)}
.media-nav.prev{left:calc(18 * var(--u))}.media-nav.next{right:calc(18 * var(--u))}
.media:hover .media-nav,.media.touched .media-nav{opacity:1}
.media.single .media-nav,.media.single .media-dots{display:none}
.mjb-badge{position:absolute;z-index:5;left:calc(886 * var(--u));bottom:calc(10 * var(--u));
  width:calc(178 * var(--u));height:auto;padding:calc(6 * var(--u)) calc(8 * var(--u));
  background:rgba(255,255,255,.88);border-radius:calc(18 * var(--u));box-shadow:0 4px 14px rgba(0,0,0,.18)}
.media.empty .mjb-badge{background:transparent;box-shadow:none}

/* ---------- Onde audio ---------- */
.wave{position:absolute;left:0;top:calc(209 * var(--u));width:100%;height:calc(200 * var(--u));pointer-events:none}

/* ---------- Boutons (zones actives posées sur la maquette) ---------- */
.hot{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;outline:none}
.hot:focus-visible{box-shadow:0 0 0 calc(5 * var(--u)) #fff}
.listen{left:calc(686 * var(--u));top:calc(121 * var(--u));width:calc(246 * var(--u));height:calc(58 * var(--u));border-radius:calc(30 * var(--u))}
.listen:active{background:rgba(0,0,0,.08)}
.listen.on{animation:listenPulse 1.6s ease-in-out infinite}
@keyframes listenPulse{0%,100%{box-shadow:0 0 0 0 rgba(28,28,28,.0)}50%{box-shadow:0 0 0 calc(8 * var(--u)) rgba(28,28,28,.18)}}
.round{width:calc(122 * var(--u));height:calc(122 * var(--u));border-radius:50%;top:calc(392 * var(--u));transition:transform .15s}
.pause{left:calc(429 * var(--u))}
.play{left:calc(582 * var(--u))}
.round:active{transform:scale(.92)}
.round.on::after{content:"";position:absolute;inset:calc(-10 * var(--u));border-radius:50%;
  border:calc(5 * var(--u)) solid #e8f23a;animation:ring 1.5s ease-out infinite}
.pause.on::after{border-color:#ffd23f}
@keyframes ring{from{transform:scale(.92);opacity:1}to{transform:scale(1.3);opacity:0}}
.play.loading::after{content:"";position:absolute;inset:calc(-8 * var(--u));border-radius:50%;
  border:calc(6 * var(--u)) solid transparent;border-top-color:#e8f23a;border-right-color:#e8f23a;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Statut & émission ---------- */
.status,.onair{position:absolute;left:calc(26 * var(--u));display:flex;align-items:center;gap:calc(12 * var(--u));
  max-width:calc(380 * var(--u));padding:calc(8 * var(--u)) calc(20 * var(--u));border-radius:calc(30 * var(--u));
  background:rgba(18,22,44,.62);backdrop-filter:blur(6px);font-size:calc(24 * var(--u));font-weight:600;letter-spacing:.02em;white-space:nowrap}
.status{top:calc(222 * var(--u))}
.onair{top:calc(416 * var(--u));font-weight:400;max-width:calc(325 * var(--u));font-size:calc(22 * var(--u))}
.onair b{color:#e8f23a;font-weight:600}
.onair span{overflow:hidden;text-overflow:ellipsis}
.status .dot{width:calc(16 * var(--u));height:calc(16 * var(--u));border-radius:50%;background:#aaa;flex:none}
.status.live .dot{background:#ff3b3b;box-shadow:0 0 0 0 rgba(255,59,59,.7);animation:live 1.4s infinite}
.status.wait .dot{background:#ffd23f}
.status.err .dot{background:#ff8a00}
@keyframes live{70%{box-shadow:0 0 0 calc(12 * var(--u)) rgba(255,59,59,0)}100%{box-shadow:0 0 0 0 rgba(255,59,59,0)}}
.status-text{overflow:hidden;text-overflow:ellipsis}

/* ---------- Flash news (à la place du bandeau du gabarit) ---------- */
.flash{position:absolute;left:calc(190 * var(--u));top:calc(578 * var(--u));width:calc(740 * var(--u));height:calc(104 * var(--u));
  display:flex;align-items:stretch;background:rgba(60,60,64,.9);border:calc(3 * var(--u)) solid #e8f23a;
  border-radius:calc(6 * var(--u));overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.flash-label{flex:none;display:grid;place-items:center;padding:0 calc(22 * var(--u));background:#e8f23a;color:#1d1d1f;
  font-weight:800;font-size:calc(28 * var(--u));letter-spacing:.08em}
.flash-window{position:relative;flex:1;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 4%,#000 94%,transparent)}
.flash-track{position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;white-space:nowrap;will-change:transform;
  font-size:calc(30 * var(--u));font-weight:600;color:#fff}
.flash-track .item{padding:0 calc(26 * var(--u))}
.flash-track .item time{color:#e8f23a;font-weight:400;margin-right:calc(10 * var(--u));font-size:.85em}
.flash-track .sep{color:#e8f23a;opacity:.9}
.flash:hover .flash-track{animation-play-state:paused}

.noscript{position:fixed;bottom:0;left:0;right:0;margin:0;padding:12px;background:#222;text-align:center;z-index:9}
@media (prefers-reduced-motion:reduce){
  .slide.photo.on img,.listen.on,.round.on::after,.status.live .dot{animation:none}
}