:root {
  --nuit: #0b1f2a;
  --nuit-2: #12303d;
  --nuit-3: #1d4252;
  --principale: #0f766e;
  --menthe: #2dd4bf;
  --accent: #f59e0b;
  --creme: #fff7e6;
  --direct: #e5484d;
  --texte: #eaf3f2;
  --discret: #9bb4bb;
  --rayon: 18px;
  font-family: Tajawal, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", Tahoma, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--nuit); color: var(--texte); line-height: 1.6; }
a { color: inherit; }
h1, h2, h3, strong { font-family: Cairo, Tajawal, system-ui, sans-serif; }
h1, h2, h3 { margin: 0; }
main { max-width: 72rem; margin: 0 auto; padding: 0 16px 2rem; }
section { margin-top: 3rem; }
h2 { font-size: 1.6rem; font-weight: 900; margin: 0 0 1rem; }
h2::after { content: ""; display: block; width: 3rem; height: 4px; border-radius: 4px; margin-top: .4rem;
  background: linear-gradient(90deg, var(--accent), var(--menthe)); }
.visuel-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1rem; padding: .6rem 16px;
  background: rgba(11, 31, 42, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--nuit-3); }
.marque { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.marque img { border-radius: 12px; flex: none; }
.marque strong { display: block; font-size: 1.25rem; font-weight: 900; line-height: 1.2; }
.slogan { display: block; color: var(--accent); font-size: .85rem; }
.menu { display: flex; gap: .3rem; margin-inline-start: auto; }
.menu a { text-decoration: none; font-family: Cairo, sans-serif; font-weight: 600; padding: .45rem .9rem; border-radius: 999px;
  color: var(--discret); }
.menu a:hover { background: var(--nuit-2); color: #fff; }
.langue { background: transparent; color: #fff; border: 1px solid var(--nuit-3); border-radius: 999px; padding: .4rem 1rem; font: inherit;
  cursor: pointer; min-height: 44px; }
.langue:hover { border-color: var(--menthe); }

/* Hero + lecteur en direct */
.hero { position: relative; overflow: hidden; margin: 0; padding: 3rem 16px 3.5rem;
  background: radial-gradient(120% 120% at 80% 0%, #17495a 0%, var(--nuit) 60%); }
.ondes { position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 120%, transparent 0 60px, rgba(45, 212, 191, .09) 61px 63px); }
.hero-contenu { position: relative; max-width: 72rem; margin: 0 auto; display: grid; gap: 2rem; align-items: center;
  grid-template-columns: 1.3fr 1fr; }
.direct { display: inline-flex; align-items: center; gap: .5rem; margin: 0; background: var(--direct); color: #fff; font: 700 .85rem Cairo, sans-serif;
  letter-spacing: .12em; border-radius: 6px; padding: .2rem .7rem; }
.point { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #fff; }
body.lecture-en-cours .point { animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.titre { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 900; line-height: 1.15; margin: 1rem 0 .3rem; overflow-wrap: anywhere; }
.artiste { margin: 0; color: var(--menthe); font-size: 1.25rem; font-weight: 500; min-height: 1.6em; }
.suivant { margin: 1rem 0 0; color: var(--discret); }
.etat { min-height: 1.5em; margin: .5rem 0 0; color: var(--discret); font-size: .9rem; }

.lecteur { background: rgba(18, 48, 61, .75); border: 1px solid var(--nuit-3); border-radius: 28px; padding: 1.5rem;
  display: grid; gap: 1.2rem; justify-items: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.egaliseur { display: flex; align-items: flex-end; gap: 6px; height: 72px; }
.egaliseur i { width: 8px; height: 20%; border-radius: 4px; background: linear-gradient(var(--menthe), var(--principale)); transition: height .3s; }
body.lecture-en-cours .egaliseur i { animation: onde 1s ease-in-out infinite; }
.egaliseur i:nth-child(2n) { animation-delay: -.3s; }
.egaliseur i:nth-child(3n) { animation-delay: -.6s; }
.egaliseur i:nth-child(4n) { animation-delay: -.15s; }
@keyframes onde { 0%, 100% { height: 18%; } 50% { height: 100%; } }
.commandes { display: flex; align-items: center; gap: 1.2rem; }
.lecture { width: 96px; height: 96px; border-radius: 50%; border: none; background: var(--accent); color: var(--nuit);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 10px rgba(245, 158, 11, .18); transition: transform .15s; }
.lecture:hover { transform: scale(1.05); }
.volume input { width: 8rem; accent-color: var(--accent); }

/* Annonce Facebook */
.annonce { display: block; margin-top: 2rem; padding: 1rem 1.25rem; border-radius: var(--rayon); background: #1877f2; color: #fff;
  text-decoration: none; }
.annonce strong { display: block; font-size: 1.1rem; }

/* Programme */
.grille, .credits { list-style: none; margin: 0; padding: 0; }
.grille { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grille li { display: flex; gap: .8rem; padding: .7rem .9rem; background: var(--nuit-2); border-radius: 12px; border: 1px solid transparent; }
.grille .heure { font: 700 1rem Cairo, sans-serif; font-variant-numeric: tabular-nums; color: var(--accent); min-width: 3.4rem; direction: ltr; }
.grille li.en-cours { border-color: var(--menthe); background: #17495a; font-weight: 600; }
.grille .vide { color: var(--discret); grid-column: 1 / -1; }
.credits li { padding: .4rem 0; border-bottom: 1px solid var(--nuit-3); font-size: .9rem; }
.credits small { color: var(--discret); display: block; }
details summary { cursor: pointer; }
details summary h2 { display: inline-block; margin: 0; }
details summary h2::after { display: none; }

/* Émissions */
.cartes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.carte { border-radius: var(--rayon); overflow: hidden; background: var(--nuit-2); border: 1px solid var(--nuit-3); transition: transform .2s, border-color .2s; }
.carte:hover { transform: translateY(-4px); border-color: var(--menthe); }
.carte .visuel { height: 130px; display: grid; place-items: center; font-size: 2.6rem; }
.carte .texte { padding: .9rem 1rem 1.1rem; }
.carte h3 { font-size: 1.1rem; font-weight: 700; }
.carte p { margin: .2rem 0 0; color: var(--discret); font-size: .92rem; }
.carte .creneau { color: var(--accent); font-weight: 700; direction: ltr; unicode-bidi: plaintext; }

/* Replays */
.replays { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.replay { display: flex; gap: .9rem; align-items: center; background: var(--nuit-2); border: 1px solid var(--nuit-3); border-radius: var(--rayon); padding: .9rem; }
.replay button { flex: none; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--menthe); color: var(--nuit); cursor: pointer; font-size: 1.2rem; }
.replay .infos { min-width: 0; flex: 1; }
.replay strong { display: block; font-size: 1rem; }
.replay small { color: var(--discret); unicode-bidi: plaintext; }
.replay audio { width: 100%; margin-top: .4rem; height: 34px; }

/* Vidéos + réseaux */
.reseaux { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.2rem; padding: .9rem 1rem; border-radius: var(--rayon);
  background: var(--nuit-2); border: 1px solid var(--nuit-3); }
.suivez { font: 700 1.05rem Cairo, sans-serif; margin-inline-end: .4rem; }
.rs { display: inline-block; padding: .35rem .9rem; border-radius: 999px; color: #fff; text-decoration: none; font: 700 .9rem Cairo, sans-serif; }
.rs-site { background: var(--principale); }
.rs-fb { background: #1877f2; }
.rs-tt { background: #000; border: 1px solid #333; }
.rs-ig { background: linear-gradient(45deg, #f09433, #dc2743 55%, #bc1888); }
.rs-yt { background: #444; opacity: .75; }
.videos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.video { position: relative; display: block; aspect-ratio: 9 / 14; border-radius: var(--rayon); overflow: hidden; text-decoration: none; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; border: 1px solid var(--nuit-3); }
.video::before { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; opacity: .85; }
.video .reseau { position: absolute; top: .7rem; inset-inline-start: .7rem; font: 700 .75rem Cairo, sans-serif; background: rgba(0, 0, 0, .55);
  border-radius: 999px; padding: .15rem .6rem; }
.video strong { position: relative; font-size: 1rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }

/* Pied */
.pied { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; color: var(--discret); font-size: .9rem;
  padding: 2rem 1rem 3rem; border-top: 1px solid var(--nuit-3); margin-top: 2rem; }
.pied img { border-radius: 10px; }
.pied p { margin: 0; }

/* Lecture automatique : le direct démarre en sourdine, ce bouton active le son */
.activer-son { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 20; padding: .9rem 1.5rem;
  border: none; border-radius: 999px; background: var(--accent); color: var(--nuit); font: inherit; font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45); cursor: pointer; animation: battement 1.8s ease-in-out infinite; }
@keyframes battement { 50% { transform: translateX(-50%) scale(1.06); } }
.activer-son[hidden] { display: none; }

@media (max-width: 820px) {
  .hero-contenu { grid-template-columns: 1fr; text-align: center; }
  .direct { justify-self: center; }
  .menu { display: none; }
  .langue { margin-inline-start: auto; }
  .hero { padding-top: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Badge LIVE du lecteur : point rouge qui clignote en permanence */
.live-badge { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: 0 0 .8rem; font: 900 1.1rem Cairo, sans-serif;
  letter-spacing: .3em; color: #fff; direction: ltr; }
.point-rouge { width: .85rem; height: .85rem; border-radius: 50%; background: #ff2d3a; box-shadow: 0 0 0 0 rgba(255, 45, 58, .7);
  animation: clignote 1.1s ease-in-out infinite; }
@keyframes clignote { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 45, 58, .7); } 50% { opacity: .2; box-shadow: 0 0 0 8px rgba(255, 45, 58, 0); } }
.rs-ti { background: #14224b; border: 1px solid #2b3f86; }

/* Réseaux sociaux en haut de page, sous l'en-tête */
.barre-reseaux { background: var(--nuit-2); border-bottom: 1px solid var(--nuit-3); padding: .5rem 16px; }
.barre-reseaux .reseaux { max-width: 72rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem;
  background: none; border: 0; padding: 0; }
.barre-reseaux .suivez { color: var(--discret); font-weight: 700; margin-inline-end: .3rem; }