:root {
  --navy: #031426;
  --navy-soft: #09253b;
  --panel: rgba(7, 28, 46, 0.9);
  --line: rgba(255, 255, 255, 0.17);
  --yellow: #ffc600;
  --cyan: #28bdd0;
  --white: #f8fafc;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: grid;
  place-items: center;
}

.screen {
  width: 100vw;
  height: 100vh;
  min-width: 1180px;
  min-height: 664px;
  padding: 2.2vh 1.8vw 1.4vh;
  display: grid;
  grid-template-rows: 13vh 46vh 29vh 3vh;
  gap: 1.4vh;
  background:
    radial-gradient(circle at 78% 10%, rgba(22, 150, 170, 0.15), transparent 28%),
    linear-gradient(140deg, #020c19, #062139 60%, #031426);
}

.topbar {
  display: grid;
  grid-template-columns: 16vw minmax(450px, 1fr) 31vw;
  gap: 2vw;
  align-items: center;
}

.logo {
  width: 13.2vw;
  max-height: 14vh;
  object-fit: contain;
  object-position: left center;
}

.radio {
  height: 10vh;
  padding: 0 2vw;
  display: grid;
  grid-template-columns: 4.2vw auto 1fr;
  gap: 1.3vw;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--white);
}

.radio-icon {
  width: 3.8vw;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: #07101c;
  font-size: 1.25vw;
  animation: onair 1.4s ease-in-out infinite alternate;
}

.radio-copy { display: grid; text-align: left; gap: .5vh; }
.radio-copy strong { font-size: 1.25vw; }
.radio-copy span { color: var(--yellow); font-size: .76vw; text-transform: uppercase; letter-spacing: .09em; }

.equalizer {
  height: 4vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .28vw;
}

.equalizer i {
  width: .18vw;
  height: 35%;
  background: var(--cyan);
  border-radius: 999px;
  animation: pulse .9s ease-in-out infinite alternate;
}
.equalizer i:nth-child(2n) { animation-delay: -.3s; height: 85%; }
.equalizer i:nth-child(3n) { animation-delay: -.6s; height: 55%; }
.welcome { text-align: right; }
.welcome p { margin: 0; }
#clock { display: block; font-size: 5.2vw; font-weight: 300; line-height: .95; letter-spacing: -.05em; }
#date { margin-top: .6vh; font-size: 1.15vw; text-transform: capitalize; }

.content {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 24vw;
  gap: 1.2vw;
}

.hero,
.weather,
.app-card,
.qr-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.2vw;
  background: var(--panel);
}

.hero { position: relative; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(2, 12, 25, .38));
}
#greeting {
  position: absolute;
  left: 2.4vw;
  bottom: 2.4vh;
  z-index: 1;
  margin: 0;
  padding-left: 1vw;
  border-left: .38vw solid var(--yellow);
  color: white;
  font-size: 2.8vw;
  font-weight: 700;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

.weather {
  padding: 1.4vh 1vw 1vh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1vh;
}

.section-title { display: grid; gap: .25vh; }
.section-title span { color: var(--yellow); font-size: .75vw; text-transform: uppercase; letter-spacing: .14em; }
.section-title strong { font-size: 1.2vw; }
.weather-live {
  min-height: 0;
  padding: 3vh 1.3vw 2vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: .8vw;
  background: linear-gradient(160deg, rgba(9, 55, 80, .92), rgba(2, 15, 29, .96));
}
.weather-main { display: flex; align-items: center; justify-content: center; gap: 1.3vw; }
#weather-icon { color: var(--yellow); font-size: 5vw; }
#weather-temp { font-size: 5.3vw; font-weight: 300; }
#weather-label { margin: 1.2vh 0 3vh; text-align: center; font-size: 1.15vw; }
.weather-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw; border-top: 1px solid var(--line); padding-top: 2vh; }
.weather-details span { display: grid; gap: .5vh; text-align: center; color: #b8c9d4; font-size: .78vw; }
.weather-details strong { color: white; font-size: 1vw; }
.weather-live small { margin-top: auto; color: #75d9e4; text-align: center; font-size: .62vw; text-transform: uppercase; letter-spacing: .09em; }

.bottom {
  min-height: 0;
  display: grid;
  grid-template-columns: 25vw minmax(0, 1fr) 25vw;
  gap: 1.2vw;
}

.programme {
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.2vw;
  background: transparent;
}
.live-banner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1.2vw;
  background: transparent;
}
.live-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .7s ease;
}
.live-banner img.ready { opacity: 1; }
.banner-copy { display: none; }
.banner-copy span { color: var(--yellow); font-size: .65vw; text-transform: uppercase; letter-spacing: .12em; }
.banner-copy strong { font-size: 1vw; }
.live-banner.empty::before {
  content: "Aucune bannière programmée pour le moment";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #b8c9d4;
  font-size: 1vw;
}

.app-card,
.qr-card {
  padding: 2vh 1.2vw;
  color: white;
}

.app-card {
  display: grid;
  grid-template-columns: 4.2vw 1fr 8vw;
  align-items: center;
  gap: .8vw;
  overflow: hidden;
  background: linear-gradient(135deg, #f4f9fb, #d9f1f3);
  color: #061a2b;
}
.phone-visual {
  width: 3.8vw;
  height: 7.8vw;
  padding: .35vw;
  transform: rotate(-7deg);
  border-radius: .8vw;
  background: #061522;
  box-shadow: 0 .6vw 1.2vw rgba(4, 27, 43, .28);
}
.phone-screen {
  width: 100%;
  height: 100%;
  padding: .5vw .25vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  border-radius: .55vw;
  background: linear-gradient(160deg, #063a57, #0f8896 65%, #ffc600);
}
.phone-screen img { width: 3.4vw; height: auto; object-fit: contain; }
.phone-screen span { color: white; font-size: .35vw; text-align: center; text-transform: uppercase; letter-spacing: .05em; }
.app-copy { display: grid; gap: 1vh; }
.app-card strong { font-size: 1.05vw; line-height: 1.1; }
.app-card small { color: #275568; font-size: .68vw; line-height: 1.35; text-transform: uppercase; }
.app-card .app-qr { width: 8vw; height: 8vw; object-fit: contain; background: white; border-radius: .5vw; }

.qr-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8vw;
  align-items: center;
  gap: 1vw;
  border-color: rgba(36, 111, 131, .2);
  background:
    radial-gradient(circle at 0 100%, rgba(93, 183, 198, .22), transparent 45%),
    linear-gradient(145deg, #ffffff, #edf7f5);
  color: #101824;
}
.qr-card img {
  width: 8vw;
  height: 8vw;
  padding: .25vw;
  object-fit: contain;
  border: 1px solid #d9e8ea;
  border-radius: .75vw;
  background: white;
  box-shadow: 0 .55vw 1.2vw rgba(23, 52, 62, .13);
}
.programme-copy { display: grid; align-content: center; gap: .65vh; }
.programme-kicker {
  width: max-content;
  padding-bottom: .35vh;
  border-bottom: .22vw solid #d7aa2e;
  color: #246f83;
  font-size: .68vw;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.programme-copy strong { font-size: 1.28vw; line-height: 1; }
.programme-copy small {
  margin-top: .25vh;
  color: #66727f;
  font-size: .58vw;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.programme-tabs {
  display: grid;
  gap: .35vh;
  margin: .45vh 0;
}
.programme-tabs span {
  padding: .38vh .45vw;
  border-left: .18vw solid #5db7c6;
  border-radius: 0 .3vw .3vw 0;
  background: rgba(232, 246, 248, .9);
  color: #246f83;
  font-size: .55vw;
  font-weight: 800;
  text-transform: uppercase;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .8vw;
  color: #c4d1dc;
  font-size: .7vw;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.dot { width: .42vw; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); }

#radio-player {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

@keyframes pulse {
  from { transform: scaleY(.55); opacity: .65; }
  to { transform: scaleY(1.05); opacity: 1; }
}
@keyframes onair {
  from { box-shadow: 0 0 0 0 rgba(255, 198, 0, .15); }
  to { box-shadow: 0 0 0 .7vw rgba(255, 198, 0, 0); }
}