:root{
  --bg:#070a0f;
  --panel:#0d121a;
  --panel2:#111925;
  --text:#f4f7fb;
  --muted:#8d99a8;
  --line:rgba(255,255,255,.10);
  --live:#ff2e2e;
  --accent:#55c8ff;
  --max:1440px;
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 80% -10%,rgba(53,142,196,.13),transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.topbar{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(18px,4vw,58px);
  border-bottom:1px solid var(--line);
  background:rgba(7,10,15,.88);
  backdrop-filter:blur(18px);
  position:sticky;
  top:0;
  z-index:30;
}
.brand{
  display:flex;
  align-items:baseline;
  letter-spacing:-.055em;
  font-weight:900;
  font-style:italic;
  transform:skew(-4deg);
}
.brand-easy{font-size:clamp(25px,3vw,34px)}
.brand-tv{
  font-size:14px;
  letter-spacing:.04em;
  margin-left:8px;
  padding:4px 6px;
  background:var(--live);
  color:#fff;
  border-radius:3px;
  transform:skew(4deg);
}
.topbar-right{display:flex;gap:18px;align-items:center}
.live-pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size:12px;
  font-weight:850;
  letter-spacing:.12em;
}
.live-pill i,.onair-live i{
  width:8px;height:8px;border-radius:50%;
  background:var(--live);
  box-shadow:0 0 0 0 rgba(255,46,46,.6);
  animation:pulse 1.7s infinite;
}
.clock{font-variant-numeric:tabular-nums;color:#c7d0dc;font-size:14px}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,46,46,.55)}
  70%{box-shadow:0 0 0 7px rgba(255,46,46,0)}
  100%{box-shadow:0 0 0 0 rgba(255,46,46,0)}
}
.hero{
  width:min(var(--max),100%);
  margin:0 auto;
  padding:clamp(14px,2.5vw,32px) clamp(12px,3vw,40px) 0;
}
.video-shell{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:clamp(10px,1.5vw,18px);
  background:#000;
  box-shadow:0 22px 70px rgba(0,0,0,.42);
}
#player,#player iframe{width:100%;height:100%}
.video-shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.28),transparent 26%),
    linear-gradient(0deg,rgba(0,0,0,.74),transparent 35%);
}
.onair{
  position:absolute;left:clamp(14px,2.2vw,30px);top:clamp(14px,2.2vw,28px);
  display:flex;gap:10px;align-items:center;
}
.onair-live,.onair-category{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:5px;padding:7px 9px;
  font-size:11px;font-weight:850;letter-spacing:.10em;
  backdrop-filter:blur(8px);
}
.onair-live{background:var(--live);color:#fff}
.onair-live i{background:#fff;animation:none}
.onair-category{background:rgba(0,0,0,.55);color:#e7edf5}
.lower-third{
  position:absolute;
  left:clamp(16px,3vw,42px);
  right:clamp(16px,3vw,42px);
  bottom:clamp(16px,3vw,34px);
  pointer-events:none;
}
.eyebrow,.section-label{
  color:var(--accent);
  letter-spacing:.16em;
  font-size:11px;
  font-weight:900;
}
.lower-third h1{
  max-width:900px;
  margin:7px 0 16px;
  font-size:clamp(23px,4vw,50px);
  line-height:1.02;
  letter-spacing:-.035em;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.progress-wrap{
  height:3px;border-radius:999px;
  background:rgba(255,255,255,.26);overflow:hidden;
}
.progress-bar{
  width:0%;height:100%;
  background:#fff;border-radius:inherit;
  transition:width .3s linear;
}
.time-row{
  display:flex;justify-content:space-between;margin-top:7px;
  color:rgba(255,255,255,.7);
  font-size:11px;font-variant-numeric:tabular-nums;
}
.start-overlay{
  position:absolute;inset:0;border:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;color:#fff;
  background:rgba(3,5,8,.72);
  backdrop-filter:blur(5px);
  cursor:pointer;z-index:12;
  transition:opacity .25s ease,visibility .25s ease;
}
.start-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.start-overlay strong{font-size:clamp(18px,3vw,30px);letter-spacing:.05em}
.start-overlay small{color:#b7c2cf}
.play-disc{
  width:70px;height:70px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;color:#05070b;font-size:26px;
  padding-left:4px;
  box-shadow:0 12px 38px rgba(0,0,0,.35);
}
.sound-button{
  position:absolute;right:clamp(14px,2vw,26px);top:clamp(14px,2vw,26px);
  z-index:10;border:1px solid rgba(255,255,255,.24);
  background:rgba(0,0,0,.52);color:#fff;
  border-radius:999px;padding:9px 13px;cursor:pointer;
  backdrop-filter:blur(8px);
  font-size:12px;
}
.playback-controls{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:15px 4px 2px;
}
.playback-status{
  display:flex;align-items:center;gap:9px;
  color:#b9c4d1;font-size:13px;font-weight:700;
}
.status-dot{
  width:8px;height:8px;border-radius:50%;background:var(--live);
  box-shadow:0 0 0 4px rgba(255,46,46,.12);
}
.playback-status.is-deferred .status-dot{
  background:var(--accent);box-shadow:0 0 0 4px rgba(85,200,255,.12);
}
.playback-actions{display:flex;gap:10px;align-items:center}
.control-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;border:1px solid var(--line);border-radius:999px;
  padding:10px 16px;background:rgba(255,255,255,.045);color:#eef3f8;
  cursor:pointer;font-size:13px;font-weight:800;transition:.2s ease;
}
.control-button:hover{background:#fff;color:#070a0f;transform:translateY(-1px)}
.control-button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.live-button:not(.is-live){
  border-color:rgba(255,46,46,.55);background:var(--live);color:#fff;
  box-shadow:0 8px 28px rgba(255,46,46,.20);
}
.live-button:not(.is-live):hover{background:#fff;color:#070a0f;border-color:#fff}
.live-button.is-live{opacity:.48;cursor:default}
.live-button.is-live:hover{background:rgba(255,255,255,.045);color:#eef3f8;transform:none}
.onair-live.is-deferred{background:rgba(4,9,14,.78);border:1px solid rgba(85,200,255,.48)}
.onair-live.is-deferred i{background:var(--accent)}
.content{
  width:min(1280px,calc(100% - 32px));
  margin:0 auto;
  padding:28px 0 60px;
}
.now-next{
  display:flex;justify-content:space-between;align-items:end;gap:20px;
  padding:12px 2px 30px;border-bottom:1px solid var(--line);
}
.now-next h2{margin:7px 0 3px;font-size:clamp(22px,3vw,34px);letter-spacing:-.025em}
.muted{margin:0;color:var(--muted)}
.youtube-link{
  border:1px solid var(--line);
  border-radius:999px;padding:10px 14px;
  color:#dbe3ec;white-space:nowrap;
  transition:.2s ease;
}
.youtube-link:hover{background:#fff;color:#06080c}
.schedule-section{padding:34px 0 42px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:18px}
.section-head h2{margin:5px 0 0;font-size:clamp(26px,3.5vw,40px);letter-spacing:-.035em}
.program-note{font-size:12px;color:var(--muted)}
.schedule-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
}
.program-card{
  position:relative;overflow:hidden;
  min-height:230px;border-radius:14px;
  background:var(--panel);
  border:1px solid var(--line);
}
.program-thumb{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  filter:saturate(.88);
  transition:transform .25s ease;
}
.program-card:hover .program-thumb{transform:scale(1.025)}
.program-body{padding:14px}
.program-time{
  color:var(--accent);font-weight:850;font-size:12px;letter-spacing:.05em
}
.program-title{
  margin:7px 0 8px;font-size:16px;line-height:1.18;font-weight:760
}
.program-category{color:var(--muted);font-size:12px}
.about-strip{
  margin-top:10px;
  display:grid;grid-template-columns:1fr 1fr;gap:30px;
  border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,4vw,46px);
  background:linear-gradient(135deg,var(--panel2),#0a0f16);
}
.about-strip h2{font-size:clamp(27px,4vw,46px);line-height:1;margin:8px 0 0;letter-spacing:-.045em}
.about-strip p{color:#aeb9c7;line-height:1.6;margin:0;align-self:end;max-width:600px}
footer{
  width:min(1280px,calc(100% - 32px));
  margin:0 auto;padding:0 0 28px;
  display:flex;justify-content:space-between;
  color:#667383;font-size:11px;
}
@media(max-width:900px){
  .schedule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-strip{grid-template-columns:1fr}
}
@media(max-width:620px){
  .topbar{height:60px}
  .live-pill{display:none}
  .video-shell{border-radius:9px}
  .sound-button span{display:none}
  .lower-third h1{margin-bottom:10px}
  .time-row{display:none}
  .now-next{align-items:start;flex-direction:column}
  .schedule-grid{grid-template-columns:1fr}
  .section-head{align-items:start;flex-direction:column}
  .about-strip{padding:26px 22px}
  .playback-controls{align-items:stretch;flex-direction:column;padding-top:12px}
  .playback-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .control-button{padding:10px 12px;font-size:12px}
}


/* GOOGLE CAST - bouton discret dans la barre superieure */
.cast-button{
  width:24px;
  height:24px;
  display:inline-block;
  --disconnected-color:#aab0b8;
  --connected-color:#ffffff;
  opacity:.78;
  transition:opacity .15s ease;
}
.cast-button:hover{opacity:1}
@media(max-width:640px){
  .cast-button{width:22px;height:22px}
}