:root{
  --bg:#020407;
  --panel: rgba(10,12,16,.82);
  --panel2: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.12);
  --text:#eef3fb;
  --muted:#a8b5c8;
  --lime:#b7ff2a;
  --lime2:#72ff00;
  --glow: 0 0 22px rgba(183,255,42,.35), 0 0 56px rgba(114,255,0,.20);
  --shadow: 0 18px 46px rgba(0,0,0,.62);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  line-height:1.55;
  background: radial-gradient(900px 520px at 25% 12%, rgba(183,255,42,.12), transparent 60%), linear-gradient(180deg,#020407,#030812 45%,#020407);
}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,92%); margin:0 auto}
img{max-width:100%;height:auto;display:block}

.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(3,6,10,.58);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(183,255,42,.12);
}
.header-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; gap:14px;
}
.brand{display:flex; align-items:center; gap:12px; min-width:240px}
.brand img{height:60px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.brand .txt{line-height:1.05}
.brand .txt strong{display:block; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); font-size:14px}
.brand .txt span{display:block; color:var(--muted); font-size:12px}

.header-meta{display:flex; align-items:center; gap:14px; color:rgba(255,255,255,.78); font-weight:800; font-size:12px}
.header-meta .freq{padding:8px 12px; border:1px solid rgba(255,255,255,.10); border-radius:999px; background: rgba(0,0,0,.20)}
.header-meta .social a{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04)}
.header-meta .social a:hover{transform: translateY(-1px); border-color: rgba(183,255,42,.25); box-shadow: var(--glow)}

.navbar{display:flex; align-items:center; justify-content:space-between; padding:10px 0 14px; gap:14px}
.main-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:10px; flex-wrap:wrap}
.main-nav a{display:inline-block; padding:10px 12px; border-radius:14px; color:rgba(255,255,255,.78); border:1px solid transparent; font-weight:900}
.main-nav a:hover{border-color: rgba(183,255,42,.22); background: rgba(183,255,42,.08); box-shadow: var(--glow)}
.main-nav .current-menu-item a{border-color: rgba(183,255,42,.35); background: rgba(183,255,42,.10)}

.card{background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12); border-radius: var(--radius); box-shadow: var(--shadow)}
.card:hover{border-color: rgba(183,255,42,.18)}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px; border-radius:14px;
  border:1px solid rgba(183,255,42,.38);
  background: linear-gradient(90deg, rgba(183,255,42,.22), rgba(114,255,0,.12));
  color:var(--text); font-weight:900; cursor:pointer; box-shadow: var(--glow)
}
.btn:hover{transform: translateY(-1px)}
.tag{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background: rgba(183,255,42,.10); border:1px solid rgba(183,255,42,.22);
  color:var(--lime); font-weight:900; letter-spacing:.10em; text-transform:uppercase; font-size:12px
}
.badge{display:inline-block; padding:5px 10px; border-radius:999px; border:1px solid rgba(183,255,42,.25); background: rgba(183,255,42,.10); color:var(--lime); font-weight:900; font-size:12px}
small.muted{color:var(--muted)}

.hero-v2{
  position:relative;
  padding:26px 0 0;
  overflow:hidden;
}
.hero-v2 .hero-bg{
  position:absolute; inset:0;
  background-image: url('../images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: saturate(1.1) contrast(1.05);
}
.hero-v2 .hero-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(2,4,7,.92) 0%, rgba(2,4,7,.70) 45%, rgba(2,4,7,.92) 100%);
}
.hero-v2 .hero-inner{position:relative; padding:26px 0 22px}
.hero-v2 .topline{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:14px;
}
.hero-v2 h1{
  margin:10px 0 6px;
  font-size:58px; line-height:1.0; letter-spacing:-.02em;
  text-shadow: 0 10px 26px rgba(0,0,0,.65);
}
.hero-v2 h1 span{color:var(--lime)}
.hero-v2 .sub{margin:0 0 14px; color:rgba(255,255,255,.82); font-size:18px; font-weight:800}

.hero-layout{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  align-items:stretch;
}
.player-card{padding:18px}
.player-card .row{display:grid; grid-template-columns: 1fr 160px; gap:10px; margin-top:10px}
select,button,input,textarea{font:inherit}
select{
  width:100%; padding:12px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.45); color:var(--text)
}
.audio{width:100%; border-radius:14px; margin-top:10px}

.announcers-card{padding:18px; position:relative; overflow:hidden}
.announcers-card::before{
  content:""; position:absolute; inset:-40%;
  background: radial-gradient(closest-side at 40% 40%, rgba(183,255,42,.22), transparent 70%);
  transform: rotate(-12deg);
  pointer-events:none;
}
.announcers-card h2{margin:0 0 10px; color:var(--lime); letter-spacing:.02em}
.portraits{
  display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
}
.portrait{
  width:92px; height:92px; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
  box-shadow: 0 14px 28px rgba(0,0,0,.55);
}
.portrait img{width:100%; height:100%; object-fit:cover}
.announcers-cta{margin-top:12px; display:flex; justify-content:flex-end}

.section{padding:22px 0 46px}
.section h2{margin:0 0 12px; font-size:30px; letter-spacing:-.01em}
.section p.lead{margin:-6px 0 16px; color:var(--muted)}
.grid3{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px}
.tile{padding:16px}
.tile h3{margin:10px 0 8px}
.tile p{margin:0; color:var(--muted)}
.split{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:16px;
  align-items:start;
}
.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:16px; border:1px solid rgba(255,255,255,.12)}
.table th,.table td{padding:10px 10px; border-bottom:1px solid rgba(255,255,255,.10); text-align:left}
.table th{background: rgba(255,255,255,.05); color:var(--muted); font-size:12px; letter-spacing:.10em; text-transform:uppercase}
.table tr:last-child td{border-bottom:none}

.top30-widget{padding:16px}
.top30-widget table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:16px; border:1px solid rgba(255,255,255,.12)}
.top30-widget th,.top30-widget td{padding:10px 10px; border-bottom:1px solid rgba(255,255,255,.10); text-align:left}
.top30-widget th{background: rgba(255,255,255,.05); color:var(--muted); font-size:12px; letter-spacing:.10em; text-transform:uppercase}
.top30-widget tr:last-child td{border-bottom:none}

.site-footer{border-top:1px solid rgba(183,255,42,.10); padding:22px 0; color:var(--muted); font-size:13px}
.content{padding:24px 0 56px}
.page-title{margin:0 0 14px; font-size:34px}

@media (max-width: 980px){
  .header-top{flex-direction:column; align-items:flex-start}
  .hero-layout{grid-template-columns: 1fr}
  .grid3{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .player-card .row{grid-template-columns:1fr}
  .hero-v2 h1{font-size:44px}
}

/* v2.1 Top 30 */
.top30-week{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:0 0 12px;flex-wrap:wrap}
.top30-week .week-title{font-weight:900;color:var(--lime)}
.top30-cover{width:40px;height:40px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.top30-cover img{width:100%;height:100%;object-fit:cover}
.top30-pos{width:46px}


/* v2.2 logo bigger + header tweaks */
.brand img{height:86px;}
@media (max-width:980px){.brand img{height:68px;}}
.header-top{padding:14px 0;}
.brand .txt strong{font-size:15px;}
.brand .txt span{font-size:13px;}


/* v2.2.2 Top #1 callout */
.top1-callout{padding:16px; border-radius:18px; border:1px solid rgba(183,255,42,.22); background: rgba(183,255,42,.10); box-shadow: var(--glow); margin:12px 0 14px;}
.top1-callout .k{display:inline-block; padding:6px 10px; border-radius:999px; background: rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.14); font-weight:900; letter-spacing:.10em; text-transform:uppercase; font-size:12px;}
.top1-callout .t{font-size:26px; font-weight:1000; margin:10px 0 4px; letter-spacing:-.01em;}
.top1-callout .a{color:var(--muted); font-weight:800; margin:0;}
.top1-callout .row{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;}


/* v2.2.3 Home banner under menu */
.home-banner{margin:0; padding:0;}
.home-banner .wrap{max-width:1200px; margin:0 auto; padding:0 16px;}
.home-banner img{width:100%; height:auto; display:block; border-radius:18px; border:1px solid rgba(255,255,255,.10); box-shadow: var(--shadow);}
@media (max-width:700px){.home-banner img{border-radius:14px;}}


/* v2.2.4 À la une layout */
.home-feature-grid{display:grid;grid-template-columns: 1.2fr .8fr; gap:14px; align-items:start;}
@media (max-width:980px){.home-feature-grid{grid-template-columns:1fr;}}
.top30-widget.small table td, .top30-widget.small table th{padding:10px 10px;}
.top30-widget.small .top30-cover{width:34px;height:34px;border-radius:10px;}


/* v2.3.4 Programmation grid with host images */
.prog-grid{display:grid; gap:10px;}
.prog-row{display:grid; grid-template-columns: 160px 1fr 240px; gap:12px; align-items:center; padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04);}
@media (max-width:980px){.prog-row{grid-template-columns: 130px 1fr;}.prog-host{grid-column:1/-1;}}
.prog-time{font-weight:1000;}
.prog-show{font-weight:1000;}
.prog-day{display:inline-block; margin-bottom:4px; color:var(--muted); font-weight:800;}
.prog-host{display:flex; align-items:center; gap:10px; justify-content:flex-end;}
@media (max-width:980px){.prog-host{justify-content:flex-start;}}
.prog-host .ph{width:46px; height:46px; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.25);}
.prog-host .ph img{width:100%; height:100%; object-fit:cover;}
.prog-host .nm{font-weight:900;}


/* v2.4 Home sections */
.hosts-banner{margin:18px 0;}
.hosts-banner .banner{position:relative; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04);}
.hosts-banner img{width:100%; height:auto; display:block;}
.hosts-banner .overlay{position:absolute; inset:0; display:flex; align-items:flex-end; padding:16px; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%);}
.hosts-banner .overlay .btn{margin-left:auto;}
.weather-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px;}
@media (max-width:1100px){.weather-grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width:560px){.weather-grid{grid-template-columns: 1fr;} }
.weather-card{padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04);}
.weather-card .r{font-weight:1000; font-size:16px;}
.weather-card .t{font-size:34px; font-weight:1100; letter-spacing:-.02em; margin:6px 0;}
.weather-card .d{color:var(--muted); font-weight:800; line-height:1.35;}
.weather-card .ic{width:44px;height:44px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center;}
.weather-card .ic img{width:100%;height:100%;object-fit:cover;}
.weather-card .top{display:flex; align-items:center; justify-content:space-between; gap:10px;}

/* Bloc image sous la météo (remplace le bouton "Voir la météo") */
.ll-weather-fill{margin-top:auto;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.10);background: rgba(255,255,255,.04);}
.ll-weather-fill img{width:100%;height:140px;object-fit:cover;display:block;}
/* v2.4 Animateurs: force featured image usage */
.host-card .thumb img{object-fit:cover;}
/* v2.4 Programmation: more dynamic */
.prog-row{transition: transform .12s ease, border-color .12s ease;}
.prog-row:hover{transform: translateY(-2px); border-color: rgba(183,255,42,.35);}


/* v2.4.1 Listen live bar */
.listen-bar{margin:18px 0;}
.listen-bar .grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; align-items:start;}
@media (max-width:980px){.listen-bar .grid{grid-template-columns:1fr;}}
.listen-bar h3{margin:0 0 8px;}


/* v2.4.2 Studio image beside player */
.studio-card{position:relative; overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); min-height:220px;}
.studio-card img{width:100%; height:100%; object-fit:cover; display:block;}
.studio-card .ov{position:absolute; inset:0; display:flex; align-items:flex-end; padding:16px; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.70) 100%);} 
.studio-card .ov .btn{margin-left:auto;}


/* v2.4.4 Uniform heights in listen-bar */
.listen-bar .grid{align-items:stretch;}
.listen-bar .grid > *{height:100%;}
.listen-bar .card.tile, .listen-bar .card.tile *{box-sizing:border-box;}
.listen-bar .card.tile{min-height:260px; display:flex; flex-direction:column;}
.listen-bar .card.tile .btn{margin-top:auto;}


/* v2.4.5 Modern Player + Auto Weather */
.ll-player{padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.ll-player .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ll-player select{width:100%;max-width:520px;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid rgba(183,255,42,.25);color:#fff;font-weight:900}
.ll-player .btnp{width:52px;height:52px;border-radius:18px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(183,255,42,.35);background:rgba(183,255,42,.10);cursor:pointer}
.ll-player .btnp:hover{background:rgba(183,255,42,.16)}
.ll-player .meta{margin-top:12px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ll-player .np{font-weight:1000}
.ll-player .bar{position:relative;height:8px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;flex:1;min-width:160px}
.ll-player .bar>i{position:absolute;left:0;top:0;bottom:0;width:0%;background:rgba(183,255,42,.8)}
.ll-player input[type=range]{accent-color:#b7ff2a}
.ll-weather-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:980px){.ll-weather-grid{grid-template-columns:1fr}}
.ll-wc{padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.ll-wc .r{font-weight:1000}
.ll-wc .t{font-size:30px;font-weight:1100;margin-top:6px}
.ll-wc .d{color:var(--muted);font-weight:800;line-height:1.35;margin-top:2px}


.ll-wc .t{font-size:28px}


/* v2.4.9 Weather meta */
.ll-wmeta{margin-top:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ll-wmeta span{display:block;color:var(--muted);font-weight:800;font-size:12px}
.ll-wmeta b{display:block;font-weight:1000}


/* v2.4.9.2 Top1 big cover */
.ll-top1{margin-top:14px;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22)}
.ll-top1 .tag{display:inline-block;margin-bottom:10px}
.ll-top1 .bigcov{width:100%;aspect-ratio:1/1;border-radius:16px;overflow:hidden;border:1px solid rgba(183,255,42,.20);background:rgba(255,255,255,.06)}
.ll-top1 .bigcov img{width:100%;height:100%;object-fit:cover;display:block}
.ll-top1 .meta{margin-top:12px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ll-top1.no-btn .meta{justify-content:flex-start}
.ll-top1 .ttl{font-weight:1100;font-size:18px;line-height:1.1}
.ll-top1 .art{color:var(--muted);font-weight:900;margin-top:4px}