/*
Theme Name: TOP 80 Radio Modern
Theme URI: https://www.top80radio.com/
Author: TOP 80 Radio
Description: Thème WordPress moderne et sobre pour TOP 80 Radio.
Version: 1.40.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: top80-modern
*/

:root{
  --top80-bg:#090b0f;
  --top80-bg-soft:#0d1015;
  --top80-panel:#11151b;
  --top80-panel-2:#151a21;
  --top80-border:#272d35;
  --top80-text:#f4f5f7;
  --top80-muted:#949ba5;
  --top80-accent:#ff2f91;
  --top80-accent-soft:#ff5eaa;
  --top80-max:1400px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:radial-gradient(circle at 70% 0%,rgba(255,47,145,.07),transparent 32%),var(--top80-bg);
  color:var(--top80-text);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.45;
  padding-bottom:100px;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.top80-header{
  height:96px;
  background:rgba(7,9,12,.96);
  border-bottom:1px solid var(--top80-border);
  display:flex;
  align-items:center;
  position:relative;
  z-index:20;
}
.top80-header-inner{
  width:min(var(--top80-max),calc(100% - 70px));
  margin:auto;
  display:flex;
  align-items:center;
  gap:42px;
}
.top80-logo{width:145px;flex:none}
.top80-logo img{width:100%;height:auto}
.top80-nav{
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto;
}
.top80-nav a{
  color:#bfc4cb;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.35px;
  padding:38px 0 34px;
  border-bottom:2px solid transparent;
}
.top80-nav a:hover,.top80-nav a.active{
  color:#fff;
  border-color:var(--top80-accent);
}
.top80-head-actions{display:flex;align-items:center;gap:12px;margin-left:12px}
.search-btn,.listen-btn{
  height:46px;
  border:1px solid #363d46;
  background:transparent;
  color:#fff;
  border-radius:24px;
}
.search-btn{width:46px;cursor:pointer}
.listen-btn{
  padding:0 8px 0 19px;
  border-color:var(--top80-accent);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.listen-btn span{
  display:inline-flex;
  width:30px;height:30px;
  margin-left:9px;
  border-radius:50%;
  align-items:center;justify-content:center;
  background:var(--top80-accent);
}
.mobile-menu{display:none;font-size:25px}
.top80-main{width:min(var(--top80-max),calc(100% - 70px));margin:auto}
.top80-hero{
  min-height:350px;
  display:grid;
  grid-template-columns:330px 1fr;
  gap:62px;
  align-items:center;
  padding:42px 25px 35px;
}
.hero-cover{position:relative}
.hero-cover img{
  width:300px;height:300px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid #303640;
  box-shadow:0 25px 65px rgba(0,0,0,.45);
}
.hero-cover:after{
  content:"";
  position:absolute;
  width:282px;
  height:282px;
  right:-48px;
  top:9px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      #d5d8dc 0 1.2%,
      #171a1f 1.5% 3.4%,
      #050609 3.7% 6.2%,
      transparent 6.5%),
    radial-gradient(circle at 50% 50%,
      transparent 0 7.2%,
      #252a30 7.4% 7.8%,
      transparent 8% 100%),
    repeating-radial-gradient(circle at 50% 50%,
      #07090c 0 1.3px,
      #1e2227 1.5px 2.2px,
      #090b0e 2.4px 3.8px);
  border:1px solid #454a50;
  box-shadow:
    0 20px 42px rgba(0,0,0,.58),
    inset 0 0 0 5px #090b0e,
    inset 0 0 0 6px #30353b;
  z-index:-1;
}
.live-badge{
  display:inline-block;
  padding:6px 13px;
  border-radius:20px;
  background:var(--top80-accent);
  color:#fff;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.hero h1{font-size:39px;line-height:1.05;margin:18px 0 6px}
.hero .track{font-size:27px;color:var(--top80-accent-soft);font-weight:700}
.hero .station{color:var(--top80-muted);font-size:14px;margin-top:7px;text-transform:uppercase;letter-spacing:1px}
.hero-actions{display:flex;align-items:center;gap:16px;margin-top:24px}
.play-main{
  width:62px;height:62px;
  border:0;border-radius:50%;
  background:var(--top80-accent);
  color:transparent;font-size:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.play-main::before{
  content:"▶";
  color:#fff;
  font-size:23px;
  line-height:1;
  display:block;
  transform:translateX(2px);
}
.listen-large{
  border:1px solid #3b424c;
  border-radius:28px;
  padding:15px 24px;
  font-size:12px;
  font-weight:800;
}
.waveform{
  grid-column:1/-1;
  height:70px;
  margin-top:-80px;
  opacity:.25;
  background:repeating-linear-gradient(90deg,transparent 0 6px,#7a8089 7px 9px);
  mask-image:linear-gradient(90deg,transparent,#fff 12%,#fff 88%,transparent);
}
.quick-links{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  overflow:hidden;
  border:1px solid var(--top80-border);
  border-radius:11px;
  background:linear-gradient(180deg,#12161c,#0f1318);
}
.quick-link{
  min-height:80px;
  padding:17px 22px;
  display:flex;
  align-items:center;
  gap:14px;
  border-right:1px solid var(--top80-border);
}
.quick-link:last-child{border-right:0}
.quick-icon{font-size:23px;color:var(--top80-accent)}
.quick-link strong{display:block;font-size:12px;text-transform:uppercase}
.quick-link small{display:block;color:var(--top80-muted);font-size:11px;margin-top:4px}
.content-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:17px;
  margin-top:17px;
}
.card{
  position:relative;
  min-height:350px;
  padding:24px;
  overflow:hidden;
  border:1px solid var(--top80-border);
  border-radius:10px;
  background:linear-gradient(180deg,#12161c,#101419);
}
.card h2{
  margin:0 0 20px;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.2px;
}
.card h2:after{
  content:"";
  display:block;
  width:29px;height:2px;
  margin-top:10px;
  background:var(--top80-accent);
}
.track-row,.program-row,.rank-row{
  border-top:1px solid #20262d;
  padding:12px 0;
}
.track-row{
  display:grid;
  grid-template-columns:43px 40px 1fr;
  align-items:center;
  gap:9px;
}
.track-row img{width:40px;height:40px;border-radius:5px;object-fit:cover}
.track-time,.muted{color:var(--top80-muted);font-size:11px}
.track-name{font-size:12px;font-weight:800}
.track-title{font-size:11px;color:var(--top80-muted);margin-top:2px}
.program-row{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:10px;
}
.program-row strong{font-size:11px}
.program-row small{display:block;color:var(--top80-muted);font-size:11px;margin-top:3px}
.rank-row{
  display:grid;
  grid-template-columns:38px 1fr auto;
  align-items:center;
  gap:8px;
}
.rank-number{color:var(--top80-accent);font-size:17px;font-weight:800}
.rank-row strong{font-size:12px;display:block}
.rank-track small{display:block;color:var(--top80-muted);font-size:11px;margin-top:2px}
.card-button{
  position:absolute;
  bottom:19px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  border:1px solid #3c434d;
  border-radius:22px;
  padding:10px 20px;
  color:var(--top80-accent-soft);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
.top50{text-align:center}
.top50 h2{text-align:left}
.top50-logo{
  margin:34px 0 21px;
  font-size:63px;
  font-weight:900;
  line-height:.78;
  font-style:italic;
}
.top50-logo span{display:block;color:var(--top80-accent)}
.top50 p{color:var(--top80-muted);font-size:11px;line-height:1.6}
.sticky-player{
  position:fixed;
  left:0;right:0;bottom:0;
  height:92px;
  z-index:100;
  background:rgba(9,12,16,.98);
  border-top:1px solid #303740;
  backdrop-filter:blur(12px);
}
.player-inner{
  width:min(var(--top80-max),calc(100% - 70px));
  height:100%;
  margin:auto;
  display:grid;
  grid-template-columns:330px 1fr 330px;
  gap:20px;
  align-items:center;
}
.player-track{display:flex;align-items:center;gap:13px}
.player-track img{width:65px;height:65px;border-radius:7px;object-fit:cover}
.player-track small{
  display:block;color:var(--top80-accent);
  font-size:9px;font-weight:800;text-transform:uppercase;
  margin-bottom:5px;
}
.player-track strong{display:block;font-size:13px}
.player-track span{display:block;color:var(--top80-muted);font-size:11px;margin-top:2px}
.player-controls{display:flex;justify-content:center;align-items:center;gap:26px}
.player-btn{border:0;background:none;color:#fff;font-size:19px;cursor:pointer}
.player-play{
  width:58px;height:58px;
  border:1px solid var(--top80-accent);
  border-radius:50%;
  background:transparent;color:#fff;
  cursor:pointer;
}
.player-right{display:flex;justify-content:flex-end;align-items:center;gap:18px}
.volume{width:135px;color:#aeb3bb;font-size:12px}
.volume input{width:100%;accent-color:var(--top80-accent)}
.webtv{
  border:1px solid #3b424b;
  border-radius:22px;
  padding:10px 16px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
.social{color:#9da3ab;font-size:13px}
@media(max-width:1120px){
  .top80-nav{gap:17px}
  .top80-nav a{font-size:11px}
  .content-grid{grid-template-columns:1fr 1fr}
  .quick-links{grid-template-columns:repeat(3,1fr)}
  .quick-link:nth-child(3){border-right:0}
  .player-inner{grid-template-columns:280px 1fr 270px}
}
@media(max-width:760px){
  body{padding-bottom:142px}
  .top80-header{height:75px}
  .top80-header-inner{width:calc(100% - 28px);justify-content:space-between}
  .top80-logo{width:125px}
  .top80-nav,.top80-head-actions{display:none}
  .mobile-menu{display:block}
  .top80-main{width:calc(100% - 22px)}
  .top80-hero{
    grid-template-columns:1fr;
    gap:24px;
    padding:25px 7px;
  }
  .hero-cover img{width:245px;height:245px;margin:auto}
  .hero-cover:after{display:none}
  .hero h1{font-size:30px}
  .hero .track{font-size:22px}
  .waveform{display:none}
  .quick-links{grid-template-columns:1fr 1fr}
  .quick-link{padding:15px 13px}
  .quick-link:nth-child(3){border-right:1px solid var(--top80-border)}
  .quick-link:nth-child(even){border-right:0}
  .content-grid{grid-template-columns:1fr}
  .card{min-height:315px}
  .sticky-player{height:132px}
  .player-inner{
    width:calc(100% - 18px);
    grid-template-columns:1fr;
    gap:6px;
    padding:8px 0;
  }
  .player-track img{width:52px;height:52px}
  .player-controls{
    position:absolute;
    right:8px;
    top:11px;
    gap:9px;
  }
  .player-play{width:50px;height:50px}
  .player-right{justify-content:flex-start;padding-left:65px}
  .volume{width:120px}
  .social{display:none}
}

/* Frontend live player states */
#top80-site-player .player-play{transition:transform .15s ease,background .15s ease}
body.top80-playing #top80-site-player .player-play{background:var(--top80-accent);transform:scale(1.04)}
body.top80-loading #top80-site-player .player-play{border-color:#d6aa56}
body.top80-error #top80-site-player .player-play{border-color:#d65b72}

#top80-site-player .player-track img{transition:opacity .18s ease}

/* TOP 80 Radio — actualité radio */
.radio-news{
  margin:30px 0 28px;
}
.radio-news-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin:0 0 14px;
}
.radio-news-heading h2{
  margin:5px 0 0;
  font-size:20px;
}
.section-kicker{
  color:var(--top80-accent,#ff2f91);
  font-size:10px;
  font-weight:800;
  letter-spacing:1.2px;
}
.radio-news-more{
  color:#aeb5bd;
  font-size:11px;
  text-decoration:none;
}
.radio-news-more:hover{color:#fff}
.radio-news-feature{
  display:grid;
  grid-template-columns:40% 60%;
  min-height:245px;
  overflow:hidden;
  border:1px solid #262d35;
  border-radius:12px;
  background:linear-gradient(110deg,#11161c,#0d1116);
}
.radio-news-image{
  position:relative;
  min-height:245px;
  overflow:hidden;
  background:#0b0e12;
}
.radio-news-image img{
  width:100%;
  height:100%;
  min-height:245px;
  object-fit:cover;
  object-position:center;
  display:block;
}
.radio-news-tag{
  position:absolute;
  left:18px;
  bottom:18px;
  padding:7px 10px;
  border-radius:5px;
  background:var(--top80-accent);
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.5px;
}
.radio-news-content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:30px 38px;
}
.radio-news-date{
  color:#777f89;
  font-size:10px;
  margin-bottom:8px;
}
.radio-news-content h3{
  max-width:650px;
  margin:0 0 10px;
  color:#fff;
  font-size:24px;
  line-height:1.18;
}
.radio-news-content p{
  max-width:680px;
  margin:0 0 20px;
  color:#969ea8;
  font-size:12px;
  line-height:1.65;
}
.radio-news-button{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 15px;
  border:1px solid #343b44;
  border-radius:7px;
  color:#fff;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  background:#14191f;
}
.radio-news-button:hover{
  border-color:rgba(255,47,145,.55);
  background:#191e25;
}
.radio-news-button span{
  color:#ff2f91;
  font-size:15px;
}
@media(max-width:700px){
  .radio-news-feature{grid-template-columns:1fr}
  .radio-news-image{min-height:190px}
  .radio-news-image img{min-height:190px}
  .radio-news-content{padding:25px}
  .radio-news-content h3{font-size:20px}
}

/* V22 — vrai disque vinyle : sillons, reflet, centre et étiquette */
.hero-cover:before{
  content:"";
  position:absolute;
  width:282px;
  height:282px;
  right:-48px;
  top:9px;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 15%,
      rgba(255,255,255,.16) 15.2% 15.5%,
      transparent 15.8% 100%),
    radial-gradient(circle at 50% 50%,
      transparent 0 18%,
      rgba(255,255,255,.055) 18.2% 18.5%,
      transparent 18.8% 100%),
    conic-gradient(from 225deg at 50% 50%,
      transparent 0deg 32deg,
      rgba(255,255,255,.13) 48deg,
      rgba(255,255,255,.025) 70deg,
      transparent 104deg 360deg);
  transform:rotate(-12deg);
  mix-blend-mode:screen;
}
@media(max-width:800px){
  .hero-cover:after,.hero-cover:before{
    width:250px;height:250px;
    right:-38px;top:25px;
  }
}

/* V27 — actualité : infos en haut, bouton ancré en bas */
.radio-news-content{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
}
.radio-news-top{
  display:block;
}
.radio-news-bottom{
  margin-top:auto;
  padding-top:24px;
}
@media(max-width:700px){
  .radio-news-content{
    height:auto;
  }
  .radio-news-bottom{
    margin-top:0;
    padding-top:20px;
  }
}

/* V28 — accent discret sur le titre de l'actualité */
.radio-news-content .radio-news-top h3{
  position:relative;
  padding-bottom:10px;
  margin-bottom:12px;
}
.radio-news-content .radio-news-top h3:after{
  content:"";
  display:block;
  width:34px;
  height:2px;
  margin-top:10px;
  border-radius:2px;
  background:var(--top80-accent);
}

/* V36 — trois cartes horizontales programme */
.programme-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:30px 0 28px;
}
.programme-card{
  position:relative;
  min-height:88px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px 48px 18px 20px;
  border:1px solid #262d35;
  border-radius:10px;
  background:#0d1116;
  text-decoration:none;
  overflow:hidden;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.programme-card:hover{
  border-color:#3b444e;
  background:#11161c;
  transform:translateY(-1px);
}
.programme-card-kicker{
  margin-bottom:7px;
  color:#727b85;
  font-size:9px;
  font-weight:800;
  letter-spacing:1px;
}
.programme-card strong{
  color:#fff;
  font-size:14px;
  line-height:1.2;
}
.programme-card-live .programme-card-kicker{
  color:var(--top80-accent);
}
.programme-card-arrow{
  position:absolute;
  right:19px;
  top:50%;
  transform:translateY(-50%);
  color:var(--top80-accent);
  font-size:19px;
}
@media(max-width:700px){
  .programme-cards{
    grid-template-columns:1fr;
    gap:9px;
  }
  .programme-card{
    min-height:72px;
  }
}

.top80-single-profile{max-width:1180px;margin:60px auto 140px;padding:0 24px}.top80-single-profile article{display:grid;grid-template-columns:360px 1fr;gap:42px}.top80-profile-media img{width:100%;border-radius:12px;display:block}.top80-profile-kicker{font-size:9px;letter-spacing:1.5px;color:var(--top80-accent);font-weight:800}.top80-profile-content h1{color:#fff}.top80-profile-text{color:#a2a9b1;line-height:1.7}.top80-profile-content h2{color:#fff;font-size:18px;margin-top:28px}.top80-profile-shows{list-style:none;padding:0}.top80-profile-shows a{color:#fff;text-decoration:none}.top80-profile-shows a:hover{color:var(--top80-accent)}@media(max-width:760px){.top80-single-profile article{grid-template-columns:1fr}}


/* V49 — les 3 cases utilisent maintenant la vraie grille des émissions */
.programme-card-show{display:flex;align-items:center;gap:11px;min-width:0;padding-right:10px}
.programme-card-show img{width:52px;height:52px;object-fit:cover;border-radius:7px;flex:0 0 52px;display:block}
.programme-card-info{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.programme-card-info strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.programme-card-info small{margin-top:4px;color:#858d96;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.programme-card-info em{margin-top:4px;color:var(--top80-accent);font-size:9px;font-style:normal;font-weight:700}
.programme-card-empty{display:block;margin-top:5px;color:#737c86;font-size:10px;line-height:1.3}
.programme-card-next-list{display:flex;flex-direction:column;gap:7px;padding-right:8px}
.programme-card-show-next img{width:42px;height:42px;flex-basis:42px;border-radius:6px}
.programme-card-show-next .programme-card-info strong{font-size:11px}
.programme-card-show-next .programme-card-info small{font-size:9px;margin-top:2px}
.programme-card-show-next .programme-card-info em{font-size:8px;margin-top:2px}
@media(max-width:900px){.programme-card{min-height:100px}}


/* V50 — badge EN DIRECT / A SUIVRE aligné au-dessus du texte, jamais au-dessus de la pochette */
.programme-card-show{align-items:center}
.programme-card-info .programme-card-kicker{display:block;margin:0 0 6px;line-height:1}
.programme-card-next-list > .programme-card-kicker{display:block;margin:0 0 6px;line-height:1}
.programme-card-live .programme-card-show img{width:58px;height:58px;flex-basis:58px}
.programme-card-show-next img{width:42px;height:42px;flex-basis:42px}

/* V51 — trois cartes = direct, prochaine émission, émission suivante */
.programme-card-show{gap:13px}
.programme-card-show img{width:62px;height:62px;flex-basis:62px;border-radius:8px}
.programme-card-live .programme-card-show img,
.programme-card-next .programme-card-show img,
.programme-card-next-later .programme-card-show img{width:62px;height:62px;flex-basis:62px}
.programme-card-info .programme-card-kicker{display:block;margin:0 0 6px;line-height:1}
.programme-card-next-list > .programme-card-kicker{display:block;margin:0 0 6px;line-height:1}
.programme-card-show-next img{width:62px;height:62px;flex-basis:62px}
.programme-card-show-next .programme-card-info strong{font-size:12px}
.programme-card-show-next .programme-card-info small{font-size:9px;margin-top:3px}
.programme-card-show-next .programme-card-info em{font-size:8px;margin-top:3px}


/* V52 — vraies pochettes des fiches émissions, légèrement agrandies */
.programme-card-show img,
.programme-card-live .programme-card-show img,
.programme-card-next .programme-card-show img,
.programme-card-next-later .programme-card-show img {
  width: 72px;
  height: 72px;
  flex-basis: 72px;
  border-radius: 9px;
  object-fit: cover;
}


/* VOTE — ajouté sans modifier le design existant */
.top80-inline-vote{
  height:52px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0 9px 0 7px;
  border:1px solid #3b424c;
  border-radius:28px;
  background:rgba(9,11,15,.35);
}
.top80-inline-vote-btn{
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .15s ease,background .15s ease,opacity .15s ease;
}
.top80-inline-vote-btn:hover{transform:scale(1.12);background:rgba(255,255,255,.05)}
.top80-inline-vote-btn:disabled{cursor:not-allowed}
.top80-inline-vote-btn span{font-size:30px;line-height:1}
.top80-vote-plus span{color:#ff315f;text-shadow:0 0 12px rgba(255,49,95,.22)}
.top80-vote-minus span{color:#3498ff;text-shadow:0 0 12px rgba(52,152,255,.22)}
.top80-broken-heart{
  display:block;
  position:relative;
  width:30px;
  height:30px;
  color:#3498ff !important;
  font-size:30px !important;
  transform:scaleX(.92);
}
.top80-broken-heart:after{
  content:"";
  position:absolute;
  left:14px;
  top:-1px;
  width:3px;
  height:32px;
  background:var(--top80-bg);
  transform:rotate(17deg);
}
.top80-inline-vote-count{
  color:var(--top80-muted);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.35px;
  white-space:nowrap;
  padding-left:4px;
}
.top80-inline-vote-count strong{color:#fff;font-size:11px}
.top80-inline-vote-btn.voted{background:transparent;transform:none;box-shadow:none;outline:none}
.top80-inline-vote-btn:focus,.top80-inline-vote-btn:focus-visible,.top80-inline-vote-btn:active{outline:none;box-shadow:none}
.top80-inline-vote-btn.is-disabled{opacity:.55;cursor:not-allowed}
.top80-vote-notification{
  position:absolute;
  z-index:20;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(6px);
  opacity:0;
  pointer-events:none;
  padding:9px 13px;
  border-radius:12px;
  background:rgba(10,12,17,.96);
  border:1px solid #3b424c;
  color:#fff;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  transition:opacity .18s ease,transform .18s ease;
}
.top80-vote-notification.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:850px){
  .hero-actions{flex-wrap:wrap}
  .top80-inline-vote{height:48px}
}

/* V57 correction - tous les boutons des cartes sur la même ligne */
.content-grid .card-button {
  bottom: 8px;
}
#top80-recent-tracks #top80-recent-tracks-list {
  padding-bottom: 42px;
}


/* V58 - panier Amazon à droite des derniers titres */
#top80-recent-tracks .track-row {
  display:flex;
  align-items:center;
}
#top80-recent-tracks .track-row .track-info {
  min-width:0;
  flex:1;
}
#top80-recent-tracks .track-amazon {
  flex:0 0 34px;
  width:34px;
  height:34px;
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #303640;
  border-radius:50%;
  color:#ff2999;
  text-decoration:none;
  transition:border-color .18s ease, color .18s ease, transform .18s ease, background .18s ease;
}
#top80-recent-tracks .track-amazon svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#top80-recent-tracks .track-amazon:hover {
  border-color:#ff2999;
  background:rgba(255,41,153,.08);
  transform:translateY(-1px);
}

/* V60 - Derniers ajouts : même présentation générale que les titres */
.top80-recent-additions {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.top80-addition-row {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:64px;
}
.top80-addition-cover {
  width:54px;
  height:54px;
  flex:0 0 54px;
  overflow:hidden;
  border-radius:10px;
}
.top80-addition-cover img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.top80-addition-info {
  flex:1;
  min-width:0;
  text-align:left;
}
.top80-addition-artist,
.top80-addition-title,

.top80-addition-artist {
  font-weight:400;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.top80-addition-title {
  font-weight:400;
  opacity:.9;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


.top80-recent-additions-loading,
.top80-recent-additions-empty {
  text-align:left;
  opacity:.65;
}

.top80-addition-year {
  font-size:.8em;
  font-weight:400;
  opacity:.6;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* V67 - Derniers ajouts : aucun trait séparateur */
.top80-recent-additions .top80-addition-row {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Texte plus petit, comme dans Derniers titres */
.top80-recent-additions .top80-addition-artist,
.top80-recent-additions .top80-addition-title {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
}
.top80-recent-additions .top80-addition-year {
  font-size: 11px;
  font-weight: 400;
}



/* V70 - panier strictement identique à Derniers titres */
#top80-recent-additions .track-amazon {
  flex:0 0 34px;
  width:34px;
  height:34px;
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #303640;
  border-radius:50%;
  color:#ff2999;
  text-decoration:none;
  transition:border-color .18s ease, color .18s ease, transform .18s ease, background .18s ease;
}
#top80-recent-additions .track-amazon svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#top80-recent-additions .track-amazon:hover {
  border-color:#ff2999;
  background:rgba(255,41,153,.08);
  transform:translateY(-1px);
}



/* V73 - aucun ancien titre visible pendant le chargement */
.top80-hero-loading {
  visibility:hidden;
}

/* V74 - plus d'espace entre les derniers ajouts et le bouton */




/* Quand les boutons sont positionnés en bas de leur carte,
   on les descend tous ensemble de façon identique. */
.top80-card .card-button,
.top80-card 



/* espace supplémentaire entre le contenu et les boutons */
.content-grid > .card > .top80-recent-additions,
.content-grid > .card > #top80-recent-tracks-list {
  margin-bottom:0 !important;
}

/* V79 - même ligne exacte pour les boutons des 4 cases */
.content-grid > .card {
  position:relative !important;
  min-height:400px !important;
  padding-bottom:50px !important;
}

.content-grid > .card > .card-button,
.content-grid > .card > .top80-additions-more {
  position:absolute !important;
  top:auto !important;
  bottom:24px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  align-self:auto !important;
  z-index:10;
}

/* espace propre entre le dernier contenu et le bouton */
#top80-recent-tracks-list,
.top80-recent-additions {
  padding-bottom:12px !important;
}


/* Top 5 : position, pochette, puis informations */
.top80-top5-home-list .rank-row {
  display: grid;
  grid-template-columns: 34px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.top80-top5-home-list .rank-cover {
  width: 48px;
  height: 48px;
  display: block;
  overflow: hidden;
  border-radius: 8px;
}
.top80-top5-home-list .rank-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.top80-top5-home-list .rank-track { min-width: 0; }
@media (max-width: 600px) {
  .top80-top5-home-list .rank-row { grid-template-columns: 30px 44px minmax(0, 1fr) auto; gap: 9px; }
  .top80-top5-home-list .rank-cover { width: 44px; height: 44px; }
}


/* V83 - davantage de titres dans les deux cartes */
#top80-recent-tracks, #top80-recent-additions {
  min-height:400px !important;
}

/* V84 — espace réduit entre dernière donnée et bouton */
.top80-top5-more,
.top80-recent-more,
.top80-additions-more,
.top80-module-more {
    margin-top: 8px !important;
}

/* V86 — cartes plus compactes et boutons remontés */
.content-grid > .card {
  min-height:400px !important;
  padding-bottom:50px !important;
}
.content-grid > .card > .card-button,
.content-grid > .card > .top80-additions-more {
  bottom:24px !important;
}
#top80-recent-tracks,
#top80-recent-additions {
  min-height:400px !important;
}

/* V89 — boutons centrés dans l'espace restant sous les données */
.content-grid > .card > .card-button,
.content-grid > .card > .top80-additions-more {
  bottom:15px !important;
}


/* V90 — Applications : remplacement visuel de l'ancienne case Top 50 */
.content-grid > .top80-apps-card { overflow:hidden; }
.top80-apps-card .top80-apps-title {
  margin-top: 2px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .01em;
}
.top80-apps-card .top80-apps-subtitle {
  margin-top: 3px;
  margin-bottom: 16px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  opacity: .58;
}
.top80-apps-list { display:flex; flex-direction:column; gap:10px; }
.top80-app-item {
  min-height:62px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 18px;
  align-items:center;
  gap:11px;
  padding:7px 10px;
  border:1px solid #303640;
  border-radius:12px;
  background:rgba(255,255,255,.018);
  color:inherit;
  text-decoration:none;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.top80-app-item:hover {
  transform:translateY(-2px);
  border-color:#ff2999;
  background:rgba(255,41,153,.055);
}
.top80-app-image {
  width:46px;height:46px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(145deg,#202631,#101318);
  border:1px solid rgba(255,255,255,.10);
  color:#ff2999;
}
.top80-app-image svg { width:29px;height:29px;display:block;fill:currentColor; }
.top80-app-android svg,.top80-app-tv svg { fill:none; }
.top80-app-item strong { display:block; font-size:13px; line-height:1.15; }
.top80-app-item small { display:block; margin-top:3px; font-size:10px; opacity:.55; }
.top80-app-item b { color:#ff2999; font-size:22px; font-weight:400; text-align:right; }


/* V91 — boutons applications plus grands */
.top80-app-buttons {
    gap: 12px;
    margin-top: 6px;
}

.top80-app-button {
    min-height: 72px;
    padding: 11px 15px;
    gap: 15px;
    border-radius: 14px;
}

.top80-app-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 12px;
    font-size: 26px;
}

.top80-app-button strong {
    font-size: 15px;
}

.top80-app-button small {
    margin-top: 4px;
    font-size: 10px;
}

.top80-app-button::after {
    font-size: 20px;
}

/* V92 — réseaux sociaux sous les applications */
.top80-social-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.top80-social-mini {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 5px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.top80-social-mini:hover {
    transform: translateY(-2px);
    border-color: rgba(255,0,153,.7);
    background: rgba(255,0,153,.06);
}

.top80-social-mini svg {
    width: 24px;
    height: 24px;
    color: #ff0099;
    fill: currentColor;
    flex: 0 0 24px;
}

.top80-social-mini span {
    font-size: 10px;
    font-weight: 700;
}

@media (max-width: 700px) {
    .top80-social-mini span { display:none; }
}

/* V93 — agrandissement réel des boutons Applications et réseaux */
.top80-apps-card .top80-apps-list { gap: 12px; margin-top: 4px; }
.top80-apps-card .top80-app-item { min-height: 78px; padding: 10px 12px; grid-template-columns: 58px minmax(0,1fr) 20px; gap: 13px; border-radius: 14px; }
.top80-apps-card .top80-app-image { width: 58px; height: 58px; border-radius: 13px; }
.top80-apps-card .top80-app-image svg { width: 36px; height: 36px; }
.top80-apps-card .top80-app-item strong { font-size: 14px; }
.top80-apps-card .top80-app-item small { font-size: 10px; margin-top: 4px; }
.top80-apps-card .top80-app-item b { font-size: 25px; }
.top80-apps-card .top80-social-row { gap: 10px; margin-top: 14px; }
.top80-apps-card .top80-social-mini { min-height: 72px; border-radius: 13px; gap: 8px; padding: 10px 6px; }
.top80-apps-card .top80-social-mini svg { width: 30px; height: 30px; flex-basis: 30px; }
.top80-apps-card .top80-social-mini span { font-size: 11px; }


/* V94 — réseaux sociaux : logo au-dessus du texte, trois boutons strictement identiques */
.top80-apps-card .top80-social-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
}

.top80-apps-card .top80-social-mini {
    width: 100% !important;
    height: 108px !important;
    min-height: 108px !important;
    box-sizing: border-box !important;
    padding: 10px 5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.top80-apps-card .top80-social-mini svg {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    display: block !important;
    margin: 0 !important;
}

.top80-apps-card .top80-social-mini span {
    display: block !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* V95 — année du titre sous l'artiste, à la place de TOP 80 RADIO */
.top80-hero-year {
    font-style: italic !important;
}

/* V96 — seule l'année est en italique */
.top80-hero-year {
    font-style: italic !important;
}

/* V111 — Biographies : grande fiche sur 3 colonnes + précédentes dans la 4e */
.top80-bio-section{margin:30px 0 28px}
.top80-bio-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 14px}
.top80-bio-heading h2{margin:5px 0 0;font-size:20px;text-transform:uppercase}
.top80-bio-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,1fr);gap:17px;align-items:stretch}
.top80-bio-feature{min-height:400px}
.top80-bio-image img{width:100%;height:100%;min-height:100%;object-fit:cover;display:block}
.top80-bio-feature .radio-news-content{padding:30px 38px}
.top80-bio-feature .radio-news-content h3{font-size:26px}
.top80-bio-previous{min-height:400px;padding:24px}
.top80-bio-previous h2{font-size:16px}
.top80-bio-list{display:flex;flex-direction:column}
.top80-bio-item{display:grid;grid-template-columns:52px minmax(0,1fr) 16px;gap:12px;align-items:center;padding:12px 0;border-top:1px solid #20262d;transition:color .18s ease,transform .18s ease}
.top80-bio-item:first-child{border-top:1px solid #20262d}
.top80-bio-item:hover{color:#fff;transform:translateX(2px)}
.top80-bio-thumb{width:52px;height:52px;border-radius:8px;overflow:hidden;background:#0b0e12;border:1px solid #303640;display:block}
.top80-bio-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.top80-bio-item-info{min-width:0;display:flex;flex-direction:column}
.top80-bio-item-info strong{font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top80-bio-item-info small{margin-top:4px;color:#858d96;font-size:9px}
.top80-bio-item b{color:var(--top80-accent);font-size:20px;font-weight:400;text-align:right}
.top80-bio-empty{color:#858d96;font-size:11px;padding:14px 0}
@media(max-width:900px){
  .top80-bio-grid{grid-template-columns:1fr}
  .top80-bio-feature{min-height:350px}
}
@media(max-width:700px){
  .top80-bio-heading{align-items:flex-start;flex-direction:column}
  .top80-bio-feature{grid-template-columns:1fr}
  .top80-bio-image{min-height:190px}
  .top80-bio-image img{min-height:190px}
  .top80-bio-feature .radio-news-content{padding:25px}
}

/* V116 — Trois rendez-vous du jour */
.top80-daily-section{margin:30px 0 34px}
.top80-daily-heading{display:flex;align-items:flex-end;justify-content:space-between;margin:0 0 14px}
.top80-daily-heading h2{margin:5px 0 0;font-size:20px;text-transform:uppercase}
.top80-daily-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.top80-daily-card{padding:22px;min-height:330px;display:flex;flex-direction:column}
.top80-daily-card-head{display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid #20262d;margin-bottom:15px}
.top80-daily-icon{width:34px;height:34px;border:1px solid #303640;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--top80-accent);font-size:16px;flex:0 0 34px}
.top80-daily-kicker{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#f3f5f7}
.top80-daily-card-head small{display:block;margin-top:4px;color:#858d96;font-size:9px}
.top80-daily-image{height:105px;border-radius:10px;overflow:hidden;background:#0b0e12;border:1px solid #2b3139;margin-bottom:14px}
.top80-daily-image img{width:100%;height:100%;object-fit:cover;display:block}
.top80-daily-card h3{font-size:17px;line-height:1.2;margin:0 0 8px;text-transform:uppercase}
.top80-daily-card p{font-size:11px;line-height:1.55;color:#929aa4;margin:0 0 16px}
.top80-daily-link{margin-top:auto;align-self:flex-start;border:1px solid #303640;border-radius:20px;padding:9px 13px;color:#f5f7f9;font-size:10px;font-weight:800;text-decoration:none;transition:.18s ease}
.top80-daily-link span{color:var(--top80-accent);margin-left:7px}
.top80-daily-link:hover{border-color:var(--top80-accent);color:#fff}
.top80-daily-history-list{display:flex;flex-direction:column;margin-bottom:10px}
.top80-daily-history-item{padding:9px 0;border-bottom:1px solid #20262d}
.top80-daily-history-item:first-child{padding-top:0}
.top80-daily-history-item strong{display:block;font-size:12px;line-height:1.35;color:#f0f2f5}
@media(max-width:900px){
  .top80-daily-grid{grid-template-columns:1fr}
  .top80-daily-card{min-height:0}
}


/* TOP 80 — plateformes : tout en bas de l'accueil */
.top80-support-section{
    margin:42px 0 150px;
    padding:0 0 10px;
}
.top80-support-heading{
    margin-bottom:18px;
}
.top80-support-heading h2{
    margin:5px 0 0;
}
.top80-support-track-wrap{
    overflow:hidden;
    width:100%;
}
.top80-support-track{
    display:flex;
    gap:18px;
    width:max-content;
    animation:top80SupportScroll 32s linear infinite;
}
.top80-support-card{
    width:205px;
    min-height:155px;
    flex:0 0 205px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:20px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
    background:#fff;
    color:#151820;
    text-decoration:none;
    box-shadow:0 12px 30px rgba(0,0,0,.14);
    transition:transform .2s ease,box-shadow .2s ease;
}
.top80-support-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 34px rgba(0,0,0,.20);
}
.top80-support-logo{
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:20px;
    font-weight:900;
    letter-spacing:-.4px;
}
.top80-support-card strong{
    font-size:12px;
    font-weight:800;
}
@keyframes top80SupportScroll{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}
@media(max-width:700px){
    .top80-support-section{margin:30px 0 120px}
    .top80-support-card{width:170px;min-height:135px;flex-basis:170px}
}
@media(prefers-reduced-motion:reduce){
    .top80-support-track{animation:none}
}