:root {
  --bg: #080b0f;
  --surface: #10151c;
  --surface-2: #151c25;
  --text: #f5f7fa;
  --muted: #9ba7b5;
  --line: rgba(255,255,255,.09);
  --official: #54d2ff;
  --official-2: #1575ff;
  --techno: #c864ff;
  --techno-2: #6d28ff;
  --western: #d6a85f;
  --western-2: #78451f;
  --green: #78f5b4;
  --wrap: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
.wrap { width: min(calc(100% - 40px), var(--wrap)); margin: 0 auto; }
.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 99; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px max(20px, calc((100vw - var(--wrap))/2));
  background: rgba(8,11,15,.82); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 800 17px/1 "Barlow Condensed"; letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.28); background: linear-gradient(145deg,#1a2631,#0d1218);
  box-shadow: inset 0 0 18px rgba(84,210,255,.08);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong { font: 800 23px/1 "Barlow Condensed"; letter-spacing: .045em; }
.brand-copy small { margin-top: 5px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 13px; font-weight: 600; }
.nav a:not(.nav-cta) { color: #c8d0d9; }
.nav a:hover { color: #fff; }
.nav-cta { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.045); }
.nav-toggle { display: none; border: 0; background: transparent; font-size: 24px; }

.hero { position: relative; min-height: 710px; display: grid; align-items: center; overflow: hidden; }
.hero-backdrop { position: absolute; inset: 0; }
.hero-backdrop::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 74% 44%, rgba(84,210,255,.24), transparent 24%),
    radial-gradient(circle at 82% 54%, rgba(21,117,255,.2), transparent 34%),
    linear-gradient(90deg, rgba(8,11,15,.98) 0%, rgba(8,11,15,.78) 47%, rgba(8,11,15,.22) 78%, rgba(8,11,15,.55) 100%),
    linear-gradient(180deg, rgba(8,11,15,.08), var(--bg));
}
.hero-backdrop::after {
  content: "FM"; position: absolute; right: -2vw; top: 4%;
  font: 800 clamp(290px, 38vw, 580px)/.8 "Barlow Condensed";
  letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07);
  transform: rotate(-5deg);
}
.hero-content { position: relative; z-index: 2; padding: 100px 0 90px; }
.eyebrow { font: 700 12px/1.2 Inter; letter-spacing: .16em; text-transform: uppercase; color: #b7c4d2; display: flex; align-items: center; gap: 8px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.hero h1 { margin: 24px 0 20px; max-width: 770px; font: 800 clamp(64px, 8vw, 116px)/.82 "Barlow Condensed"; letter-spacing: -.035em; text-transform: uppercase; }
.hero h1 span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.65); }
.hero-lead { max-width: 680px; font-size: 18px; color: #b8c3cf; }
.hero-actions, .cta-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 10px; font-size: 13px; font-weight: 700; border: 1px solid var(--line); }
.btn.primary { background: #fff; color: #0b1016; border-color: #fff; }
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255,255,255,.12); }
.btn.ghost { background: rgba(255,255,255,.04); }
.hero-stats { display: flex; gap: 42px; margin-top: 58px; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats strong { font: 700 32px/1 "Barlow Condensed"; }
.hero-stats span { margin-top: 5px; color: #7f8b98; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }

.player-section { position: relative; z-index: 5; margin-top: -66px; }
.player-shell {
  display: grid; grid-template-columns: 210px minmax(0,1fr) 245px; min-height: 250px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 22px; overflow: hidden;
  background: rgba(17,22,29,.94); backdrop-filter: blur(18px);
  box-shadow: 0 26px 90px rgba(0,0,0,.42);
}
.player-art { position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg,#0b131b,#153c57); transition: .4s ease; }
.player-art::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 35%); }
.vinyl { position:absolute; width:170px; height:170px; border-radius:50%; border:1px solid rgba(255,255,255,.1); opacity:.35; background: repeating-radial-gradient(circle,rgba(255,255,255,.08) 0 1px,transparent 1px 7px); }
.vinyl span { position:absolute; inset:43%; border-radius:50%; background:rgba(255,255,255,.15); }
.station-monogram { position:relative; z-index:2; font:800 54px/1 "Barlow Condensed"; text-shadow: 0 5px 25px rgba(0,0,0,.5); }
.player-main { padding: 28px 34px; }
.player-kicker { color: #7f8d9b; font-size: 10px; letter-spacing: .17em; text-transform: uppercase; }
.player-main h2 { margin: 6px 0 2px; font: 700 36px/1 "Barlow Condensed"; }
.track { margin-top: 12px; font-weight: 600; }
.artist { margin-top: 4px; color: var(--muted); font-size: 13px; }
.progress { margin: 24px 0 19px; height: 3px; background: rgba(255,255,255,.09); border-radius: 4px; overflow:hidden; }
.progress span { display:block; width:46%; height:100%; background: linear-gradient(90deg,var(--official),#fff); }
.player-controls { display:flex; align-items:center; gap:12px; }
.icon-btn, .play-btn, .mini-switch, .card-play, .world-links button, .news-card button { cursor:pointer; }
.icon-btn { width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.035); font-size:26px; }
.play-btn { width:54px; height:54px; border-radius:50%; border:0; background:#fff; color:#0a0f14; font-size:17px; }
.volume-wrap { margin-left:10px; display:flex; align-items:center; gap:8px; color:#9cabb8; }
.volume-wrap input { width:112px; accent-color:#fff; }
.player-meta { border-left:1px solid var(--line); padding:28px; display:flex; flex-direction:column; gap:19px; background:rgba(255,255,255,.02); }
.player-meta div { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.player-meta span { font-size:11px; color:#7e8a97; text-transform:uppercase; letter-spacing:.1em; }
.player-meta strong { font-size:12px; text-align:right; }
.online { color:var(--green); }
.mini-switch { margin-top:auto; border:1px solid var(--line); background:rgba(255,255,255,.04); border-radius:9px; padding:10px 12px; font-size:11px; font-weight:700; }
.player-note { color:#788593; font-size:11px; margin:9px 4px 0; }
.player-note code { color:#b7c6d5; }
.player-note.warn { color:#ffbf70; }
.player-shell[data-station="techno"] .player-art { background: linear-gradient(145deg,#111020,#512a78); }
.player-shell[data-station="techno"] .progress span { background: linear-gradient(90deg,var(--techno),#fff); }
.player-shell[data-station="western"] .player-art { background: linear-gradient(145deg,#1b120c,#68431e); }
.player-shell[data-station="western"] .progress span { background: linear-gradient(90deg,var(--western),#fff); }
.player-shell[data-station="western"] .station-monogram { font:700 42px/1 "Libre Baskerville"; letter-spacing:-.05em; }

.section { padding: 110px 0; }
.section-head { display:grid; grid-template-columns:1fr 440px; gap:60px; align-items:end; margin-bottom:42px; }
.section-head h2 { margin:10px 0 0; font:800 clamp(44px,5vw,70px)/.95 "Barlow Condensed"; text-transform:uppercase; }
.section-head > p { color:var(--muted); margin:0; font-size:14px; }
.station-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.station-card { position:relative; min-height:450px; padding:24px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); overflow:hidden; opacity:0; transform:translateY(18px); transition:.5s ease; }
.station-card.reveal-in { opacity:1; transform:none; }
.station-card::after { content:""; position:absolute; width:270px; height:270px; border-radius:50%; right:-110px; top:70px; filter:blur(4px); opacity:.28; }
.official-card::after { background:radial-gradient(circle,var(--official),transparent 68%); }
.techno-card::after { background:radial-gradient(circle,var(--techno),transparent 68%); }
.western-card::after { background:radial-gradient(circle,var(--western),transparent 68%); }
.station-card.active { border-color:rgba(255,255,255,.24); box-shadow:inset 0 0 0 1px rgba(255,255,255,.035); }
.station-card-top { display:flex; justify-content:space-between; gap:8px; position:relative; z-index:2; }
.badge, .status { font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.badge { color:#8e9aa6; }
.status { color:var(--green); }
.status.launch { color:var(--western); }
.station-symbol { position:relative; z-index:2; width:92px; height:92px; border-radius:50%; display:grid; place-items:center; margin:56px 0 35px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.2); font:800 34px/1 "Barlow Condensed"; }
.station-symbol.western { font:700 22px/1 "Libre Baskerville"; }

.station-logo-frame {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 150px;
  margin: 30px 0 18px;
  display: grid;
  place-items: center;
}
.station-logo-card {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.34));
  transition: transform .28s ease, filter .28s ease;
}
.station-card.active .station-logo-card {
  transform: scale(1.035);
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.42));
}
.station-logo-frame.western { width: 160px; height: 160px; margin-top: 24px; margin-bottom: 12px; }
.station-card h3 { position:relative; z-index:2; margin:0; font:700 34px/1 "Barlow Condensed"; text-transform:uppercase; }
.station-card h3 em { display:block; font-style:normal; color:#94a2af; }
.western-card h3 em { color:var(--western); font-family:"Libre Baskerville"; font-size:26px; margin-top:6px; text-transform:none; }
.station-card p { position:relative; z-index:2; color:#97a4b1; font-size:13px; min-height:82px; }
.tags { position:relative; z-index:2; display:flex; gap:6px; flex-wrap:wrap; margin:17px 0 20px; }
.tags span { border:1px solid var(--line); border-radius:999px; padding:5px 8px; color:#8f9ba8; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.card-play { position:relative; z-index:2; width:100%; display:flex; justify-content:space-between; align-items:center; border:0; border-top:1px solid var(--line); background:transparent; padding:17px 0 0; font-weight:700; font-size:12px; text-align:left; }
.card-play span { opacity:.7; }

.worlds { padding:110px 0; background:#ece8df; color:#121212; }
.section-head.light .eyebrow { color:#66717b; }
.section-head.light > p { color:#5f6870; }
.world-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.world-card { position:relative; min-height:520px; border-radius:20px; padding:32px; overflow:hidden; display:flex; align-items:flex-end; color:#fff; opacity:0; transform:translateY(18px); transition:.5s ease; }
.world-card.reveal-in { opacity:1; transform:none; }
.modern-world { background: radial-gradient(circle at 80% 20%, rgba(51,163,255,.34), transparent 30%), linear-gradient(150deg,#0e141b,#162f43 62%,#0b1016); }
.modern-world::after { content:"CITY"; position:absolute; top:6%; right:-3%; font:800 180px/1 "Barlow Condensed"; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.08); transform:rotate(-90deg); transform-origin:center; }
.western-world { background: radial-gradient(circle at 77% 25%, rgba(220,166,91,.28), transparent 35%), linear-gradient(150deg,#1a120c,#4e321d 67%,#17100b); }
.western-world::after { content:"1899"; position:absolute; top:20px; right:-10px; font:700 112px/1 "Libre Baskerville"; color:rgba(255,255,255,.04); }
.world-number { position:absolute; top:26px; right:28px; font:700 15px/1 "Barlow Condensed"; color:rgba(255,255,255,.45); }
.world-copy { position:relative; z-index:2; max-width:480px; }
.world-label { font-size:9px; letter-spacing:.16em; font-weight:700; color:#b9c5d0; }
.world-copy h3 { margin:9px 0 13px; font:800 48px/1 "Barlow Condensed"; text-transform:uppercase; }
.western-world .world-copy h3 { font-family:"Libre Baskerville"; text-transform:none; font-size:39px; }
.world-copy p { color:rgba(255,255,255,.72); font-size:13px; max-width:430px; }
.world-links { display:flex; gap:14px; flex-wrap:wrap; margin-top:23px; }
.world-links a, .world-links button { border:0; background:transparent; padding:0; font-size:11px; font-weight:700; color:#fff; }
.world-links button { color:#a8b9c6; }
.western-world .world-links button { color:#e5bd83; }

.schedule-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:14px; }
.schedule-card { min-height:245px; border:1px solid var(--line); border-radius:16px; padding:24px; background:#0d1218; opacity:0; transform:translateY(18px); transition:.5s ease; }
.schedule-card.reveal-in { opacity:1; transform:none; }
.schedule-card.featured { background:linear-gradient(145deg,#112332,#0d141b); }
.schedule-card.western-slot { background:linear-gradient(145deg,#24180f,#110e0b); }
.schedule-time { font:800 41px/1 "Barlow Condensed"; margin-bottom:72px; color:#d8e0e7; }
.western-slot .schedule-time { color:var(--western); font-family:"Libre Baskerville"; font-size:30px; }
.schedule-card span { font-size:9px; color:#74818e; letter-spacing:.14em; font-weight:700; }
.schedule-card h3 { margin:6px 0 8px; font:700 25px/1 "Barlow Condensed"; }
.schedule-card p { margin:0; color:#8996a3; font-size:12px; }

.news-section { padding:110px 0; background:#11161d; }
.news-section .section-head.light h2 { color:#fff; }
.news-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:15px; }
.news-card { min-height:300px; border-radius:16px; padding:26px; background:#151c24; border:1px solid var(--line); display:flex; flex-direction:column; opacity:0; transform:translateY(18px); transition:.5s ease; }
.news-card.reveal-in { opacity:1; transform:none; }
.main-news { background:radial-gradient(circle at 80% 20%,rgba(214,168,95,.18),transparent 35%),#1b1815; }
.news-tag { width:max-content; font-size:9px; font-weight:700; letter-spacing:.14em; color:#91a0ad; }
.news-date { margin-top:55px; color:#65727f; font-size:10px; }
.news-card h3 { margin:8px 0 10px; font:700 28px/1.05 "Barlow Condensed"; }
.main-news h3 { font-size:36px; max-width:480px; }
.news-card p { color:#8794a1; font-size:12px; }
.news-card button { margin-top:auto; align-self:flex-start; border:0; background:transparent; padding:0; color:#d8b47a; font-weight:700; font-size:11px; }

.cta-section { padding:95px 0; background:linear-gradient(90deg,#071017,#111b25); }
.cta-inner { display:flex; align-items:end; justify-content:space-between; gap:40px; }
.cta-inner h2 { margin:10px 0 8px; font:800 clamp(50px,6vw,80px)/.9 "Barlow Condensed"; text-transform:uppercase; }
.cta-inner p { margin:0; color:#91a0ad; }

/* Accroches principales : une seule ligne */
.single-line-title {
  white-space: nowrap !important;
  max-width: none !important;
  width: max-content;
  letter-spacing: -.025em;
}
.news-section .news-title {
  font-size: clamp(40px, 4.2vw, 62px);
}
.cta-inner .cta-title {
  font-size: clamp(38px, 4.7vw, 68px);
}

@media (max-width: 680px) {
  .single-line-title {
    width: auto;
    white-space: normal !important;
  }
  .news-section .news-title { font-size: clamp(30px, 10vw, 46px); }
  .cta-inner .cta-title { font-size: clamp(30px, 10vw, 44px); }
}
.footer { background:#05070a; padding:60px 0 24px; border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:40px; }
.footer-brand { font:800 34px/1 "Barlow Condensed"; }
.footer p { color:#66727e; font-size:12px; }
.footer-grid > div:not(:first-child) { display:flex; flex-direction:column; gap:9px; }
.footer-grid strong { font-size:11px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:5px; }
.footer-grid a { color:#7f8b97; font-size:11px; }
.footer-bottom { margin-top:55px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:#53606c; font-size:10px; }

@media (max-width: 980px) {
  .nav-toggle { display:block; }
  .nav { display:none; position:absolute; top:72px; left:20px; right:20px; padding:18px; background:#0e141b; border:1px solid var(--line); border-radius:14px; flex-direction:column; align-items:stretch; gap:12px; }
  .nav.open { display:flex; }
  .player-shell { grid-template-columns:170px 1fr; }
  .player-meta { grid-column:1/-1; border-left:0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); }
  .player-meta div { flex-direction:column; align-items:flex-start; }
  .section-head { grid-template-columns:1fr; gap:20px; }
  .station-grid, .schedule-grid, .news-grid { grid-template-columns:1fr; }
  .station-card { min-height:390px; }
  .world-grid { grid-template-columns:1fr; }
  .cta-inner { align-items:flex-start; flex-direction:column; }
  .footer-grid { grid-template-columns:1.7fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column:2/3; }
}

@media (max-width: 680px) {
  .wrap { width:min(calc(100% - 26px), var(--wrap)); }
  .brand-copy small { display:none; }
  .hero { min-height:620px; }
  .hero-content { padding:80px 0 110px; }
  .hero h1 { font-size:64px; }
  .hero-lead { font-size:15px; }
  .hero-stats { gap:23px; }
  .hero-stats strong { font-size:27px; }
  .player-section { margin-top:-80px; }
  .player-shell { grid-template-columns:1fr; }
  .player-art { height:165px; }
  .station-logo-frame { width:132px; height:132px; margin:24px 0 14px; }
  .station-logo-frame.western { width:142px; height:142px; }
  .station-logo-player { width: 145px; height: 145px; }
  .player-main { padding:22px; }
  .player-main h2 { font-size:31px; }
  .player-meta { grid-column:auto; grid-template-columns:1fr 1fr; padding:20px; }
  .mini-switch { grid-column:1/-1; }
  .volume-wrap { margin-left:auto; }
  .volume-wrap input { width:78px; }
  .section, .worlds, .news-section { padding:78px 0; }
  .section-head h2 { font-size:48px; }
  .world-card { min-height:470px; padding:25px; }
  .world-copy h3 { font-size:41px; }
  .western-world .world-copy h3 { font-size:31px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-grid > div:first-child { grid-column:1/-1; }
  .footer-grid > div:last-child { grid-column:auto; }
  .footer-bottom { flex-direction:column; gap:8px; }
}

/* --- Lecteur temps réel AzuraCast --- */
.station-logo-player {
  position: relative;
  z-index: 2;
  width: min(78%, 210px);
  height: min(78%, 210px);
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.42));
  transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}
.station-logo-player.behind-cover {
  position: absolute;
  opacity: .12;
  transform: scale(1.08);
  filter: blur(.2px) drop-shadow(0 12px 20px rgba(0,0,0,.3));
}
.station-logo-player[hidden] { display:none; }

.cover-art {
  position: relative;
  z-index: 3;
  width: min(82%, 180px);
  aspect-ratio: 1;
  height: auto;
  border-radius: 14px;
  object-fit: cover;
  object-position: center;
  background: #0b1016;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 42px rgba(0,0,0,.38);
  animation: cover-in .25s ease-out;
}
.cover-art[hidden] { display: none; }
.station-monogram.behind-cover { position:absolute; opacity: .08; transform: scale(1.35); }
.live-art-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(5,8,11,.78);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--green);
}
.progress-wrap { margin: 24px 0 17px; }
.progress-wrap .progress { margin: 0; }
.progress-times {
  min-height: 15px;
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  color: #64717e;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.progress span { width: 0; transition: width .7s linear; }
@keyframes cover-in { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .cover-art { animation: none; }
  .progress span { transition: none; }
}

@media (max-width: 680px) {
  .cover-art { width: 135px; }
  .live-art-badge { left: 14px; bottom: 10px; }
}