/* =========================================================
   ECOBIZ 90.0 FM — Feuille de style
   Palette issue du logo : violet #7F3F98 / #662D91, vert #39B54A
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --violet:#7F3F98;
  --violet-deep:#662D91;
  --violet-light:#A063BC;
  --green:#39B54A;
  --green-light:#5FD96F;

  --ink:#07030C;
  --ink-2:#0B0512;
  --ink-3:#140A20;
  --ink-4:#1D1030;

  --paper:#F6F2FA;
  --muted:rgba(246,242,250,.62);
  --muted-2:rgba(246,242,250,.40);
  --hair:rgba(246,242,250,.12);
  --hair-soft:rgba(246,242,250,.07);
  --red:#FF4757;

  --grad:linear-gradient(100deg,var(--violet-light) 0%,var(--violet) 35%,var(--green) 100%);
  --grad-alt:linear-gradient(100deg,var(--green-light) 0%,var(--green) 40%,var(--violet) 100%);

  --font-d:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-b:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1320px;
  --gut:clamp(18px,4.5vw,64px);
  --dock:88px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.is-locked{overflow:hidden}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--font-b);font-size:16px;line-height:1.6;font-weight:300;
  overflow-x:hidden;padding-bottom:var(--dock);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;line-height:1.05;margin:0;letter-spacing:-.03em}
p{margin:0 0 1em}
::selection{background:var(--green);color:var(--ink)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{position:relative;padding-block:clamp(64px,7.5vw,104px)}

/* ---------- 3. DÉCOR ---------- */
.grain{
  position:fixed;inset:-150%;z-index:9998;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}
}
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:9997;
  transform:scaleX(0);transform-origin:0 50%;background:var(--grad);pointer-events:none;
}
.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.cursor.on{opacity:1}
.cursor__dot,.cursor__ring{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:6px;height:6px;background:#fff}
.cursor__ring{width:36px;height:36px;border:1px solid rgba(255,255,255,.6);transition:width .3s var(--ease),height .3s var(--ease)}
.cursor.grow .cursor__ring{width:68px;height:68px}
.cursor.grow .cursor__dot{opacity:0}
@media (hover:none),(pointer:coarse){.cursor{display:none!important}}

@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(255,71,87,0)}100%{box-shadow:0 0 0 0 rgba(255,71,87,0)}}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- 4. PRELOADER ---------- */
.preloader{position:fixed;inset:0;z-index:10000;background:var(--ink);display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s}
.preloader.done{opacity:0;visibility:hidden}
.preloader__inner{display:flex;flex-direction:column;align-items:center;gap:24px;width:min(320px,72vw)}
.preloader__logo{width:100%;filter:drop-shadow(0 0 40px rgba(127,63,152,.5))}
.preloader__eq{display:flex;align-items:flex-end;gap:5px;height:32px}
.preloader__eq span{width:4px;border-radius:2px;background:var(--grad);animation:eq 1s var(--ease-io) infinite alternate}
.preloader__eq span:nth-child(1){height:40%}
.preloader__eq span:nth-child(2){height:100%;animation-delay:.12s}
.preloader__eq span:nth-child(3){height:60%;animation-delay:.24s}
.preloader__eq span:nth-child(4){height:90%;animation-delay:.36s}
.preloader__eq span:nth-child(5){height:50%;animation-delay:.48s}
.preloader__bar{width:100%;height:2px;background:var(--hair);border-radius:2px;overflow:hidden}
.preloader__bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .25s linear}
.preloader__meta{width:100%;display:flex;justify-content:space-between;font-family:var(--font-d);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- 5. NAVIGATION ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px var(--gut);border-bottom:1px solid transparent;
  transition:transform .5s var(--ease),background .4s,backdrop-filter .4s,border-color .4s,padding .4s;
}
.nav.stuck{
  background:rgba(7,3,12,.78);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--hair-soft);padding-block:10px;
}
.nav.hide{transform:translateY(-105%)}
.nav__brand img{height:clamp(28px,3.2vw,38px);width:auto;filter:drop-shadow(0 0 16px rgba(127,63,152,.55));transition:transform .4s var(--ease)}
.nav__brand:hover img{transform:scale(1.05)}

.nav__links{display:flex;gap:4px}
.nav__links a{position:relative;padding:9px 14px;border-radius:99px;font-size:13.5px;color:var(--muted);transition:color .3s}
.nav__links a::before{content:"";position:absolute;inset:0;border-radius:99px;background:rgba(246,242,250,.08);transform:scale(.6);opacity:0;transition:transform .45s var(--ease),opacity .35s}
.nav__links a:hover{color:var(--paper)}
.nav__links a:hover::before{transform:scale(1);opacity:1}
.nav__links a.active{color:var(--paper)}
.nav__links a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1.5px;border-radius:2px;background:var(--grad)}

/* --- Menu déroulant "Actus" (les 4 rubriques) ---
   Logique reprise d'une référence envoyée par l'utilisateur : au
   survol de l'onglet ACTUALITÉS, un panneau se déplie listant les
   rubriques. Ici en tons sombres de la marque plutôt que le panneau
   blanc de la référence, pour rester cohérent avec le reste du site. */
.nav__drop{position:relative;display:flex;align-items:stretch}
.nav__caret{
  display:inline-block;width:6px;height:6px;margin:0 0 1px 6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.65;transition:transform .3s var(--ease);
}
.nav__drop:hover .nav__caret,.nav__drop:focus-within .nav__caret{transform:rotate(225deg) translate(1px,1px)}
.nav__drop-panel{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  padding-top:12px; /* zone tampon incluse dans le survol : pas de vide entre le lien et le panneau */
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s;
  z-index:20;
}
.nav__drop:hover .nav__drop-panel,.nav__drop:focus-within .nav__drop-panel{
  opacity:1;visibility:visible;pointer-events:auto;
}
.nav__drop-inner{
  display:flex;flex-direction:column;gap:2px;min-width:210px;padding:8px;border-radius:14px;
  background:var(--ink-3);border:1px solid var(--hair);box-shadow:0 20px 50px rgba(0,0,0,.5);
  transform:translateY(-6px);transition:transform .25s var(--ease);
}
.nav__drop:hover .nav__drop-inner,.nav__drop:focus-within .nav__drop-inner{transform:translateY(0)}
.nav__drop-inner a{
  padding:9px 14px;border-radius:8px;font-size:13px;color:var(--muted);white-space:nowrap;
  transition:background .2s,color .2s;
}
.nav__drop-inner a:first-child{color:var(--green);font-weight:500;border-bottom:1px solid var(--hair-soft);border-radius:8px 8px 0 0;margin-bottom:4px;padding-bottom:11px}
.nav__drop-inner a:hover{background:rgba(246,242,250,.07);color:var(--paper)}

.nav__right{display:flex;align-items:center;gap:10px}
.live-pill{
  display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:99px;
  border:1px solid var(--hair);background:rgba(246,242,250,.04);position:relative;overflow:hidden;
  font-family:var(--font-d);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .35s,color .35s;
}
.live-pill::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .4s;z-index:-1}
.live-pill:hover{border-color:transparent;color:#fff}
.live-pill:hover::before{opacity:1}
.live-pill__dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(255,71,87,.6);animation:pulse 2s infinite}
.live-pill__eq{display:none;align-items:flex-end;gap:2px;height:11px}
.live-pill__eq i{width:2px;background:currentColor;border-radius:1px;animation:eq .7s var(--ease-io) infinite alternate}
.live-pill__eq i:nth-child(1){height:50%}
.live-pill__eq i:nth-child(2){height:100%;animation-delay:.1s}
.live-pill__eq i:nth-child(3){height:70%;animation-delay:.2s}
.live-pill__eq i:nth-child(4){height:90%;animation-delay:.3s}
body.is-playing .live-pill__eq{display:flex}

.burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--hair);position:relative}
.burger span{position:absolute;left:12px;width:18px;height:1.5px;background:var(--paper);border-radius:2px;transition:transform .4s var(--ease)}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:24px}
.burger.open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ---------- 6. BOUTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:99px;overflow:hidden;
  font-family:var(--font-d);font-size:14px;font-weight:500;
  transition:transform .35s var(--ease),color .35s,border-color .35s;will-change:transform;
}
.btn--full{width:100%}
.btn__label{position:relative;z-index:2}
.btn__icon{position:relative;z-index:2;width:17px;height:17px;flex:none}
.btn__icon svg{position:absolute;inset:0;width:100%;height:100%;fill:currentColor;transition:opacity .25s,transform .35s var(--ease)}
.ic-pause{opacity:0;transform:scale(.6)}
body.is-playing .btn__icon .ic-play{opacity:0;transform:scale(.6)}
body.is-playing .btn__icon .ic-pause{opacity:1;transform:scale(1)}

.btn--primary{color:#fff;background:var(--grad)}
.btn--primary::after{content:"";position:absolute;inset:0;background:var(--grad-alt);opacity:0;transition:opacity .45s}
.btn--primary:hover{transform:translateY(-2px)}
.btn--primary:hover::after{opacity:1}
.btn__wave{position:absolute;inset:-2px;border-radius:99px;border:1.5px solid var(--green);opacity:0;pointer-events:none}
body.is-playing .btn__wave{animation:ripple 1.8s var(--ease-io) infinite}
@keyframes ripple{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.26)}}

.btn--ghost{border:1px solid var(--hair);color:var(--paper)}
.btn--ghost::before{content:"";position:absolute;inset:0;background:var(--paper);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn--ghost:hover{color:var(--ink);border-color:var(--paper)}
.btn--ghost:hover::before{transform:translateY(0)}

/* ---------- 7. TITRES DE SECTION ---------- */
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(24px,3vw,38px);
  opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.sec-head.in{opacity:1;transform:none}
.sec-label{
  display:block;font-family:var(--font-d);font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--green);margin-bottom:8px;
}
.sec-title{font-size:clamp(1.7rem,3.4vw,2.7rem);letter-spacing:-.035em}
.sec-title--sm{font-size:clamp(1.3rem,2.2vw,1.65rem)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- 8. MÉDAILLONS ---------- */
.avatar{
  display:grid;place-items:center;border-radius:50%;flex:none;overflow:hidden;
  font-family:var(--font-d);font-weight:600;color:#fff;letter-spacing:.02em;
  background-size:cover;background-position:center;
}
.avatar--sm{width:30px;height:30px;font-size:11px}
.avatar--lg{width:clamp(76px,9vw,104px);height:clamp(76px,9vw,104px);font-size:clamp(22px,2.6vw,30px)}

/* =========================================================
   10. BANDEAU DU JOUR
   ========================================================= */
.today{position:relative;padding-block:clamp(30px,3.6vw,44px);border-block:1px solid var(--hair-soft);background:rgba(246,242,250,.02)}
.today__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.today__head h1{font-size:clamp(1.1rem,1.9vw,1.4rem)}
/* Premier contenu de l'accueil (plus de hero au-dessus) : le bandeau
   (chrome persistant) dégage déjà la nav fixe, il ne reste qu'à
   ajouter un peu d'air — même valeur que les autres pages internes. */
.today--top{padding-top:clamp(36px,4.6vw,56px)}
.today__date{font-family:var(--font-d);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.today__rail{
  display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:var(--hair) transparent;
}
.today__rail::-webkit-scrollbar{height:5px}
.today__rail::-webkit-scrollbar-thumb{background:var(--hair);border-radius:3px}
.rail{
  flex:0 0 auto;width:210px;padding:14px 16px;border-radius:14px;
  border:1px solid var(--hair-soft);background:var(--ink-2);
  transition:transform .4s var(--ease),border-color .4s;
}
.rail:hover{transform:translateY(-3px);border-color:var(--hair)}
.rail--done{opacity:.42}
.rail--live{border-color:transparent;background:linear-gradient(150deg,rgba(57,181,74,.24),rgba(127,63,152,.2)),var(--ink-3)}
.rail__time{display:block;font-family:var(--font-d);font-size:11px;letter-spacing:.1em;color:var(--green)}
.rail__title{display:block;font-family:var(--font-d);font-size:14.5px;font-weight:500;letter-spacing:-.02em;margin:6px 0 3px}
.rail__host{display:block;font-size:12px;color:var(--muted-2)}
.rail__now{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-family:var(--font-d);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.rail__now i{width:5px;height:5px;border-radius:50%;background:var(--red);animation:pulse 2s infinite}

/* =========================================================
   11. ÉMISSIONS
   ========================================================= */
.daytabs{display:flex;flex-wrap:wrap;gap:7px}
.daytab{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:48px;padding:6px 16px;border-radius:99px;border:1px solid var(--hair);
  font-family:var(--font-d);font-size:12.5px;line-height:1.3;color:var(--muted);
  position:relative;overflow:hidden;transition:color .35s,border-color .35s;
}
.daytab::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .4s;z-index:-1}
.daytab:hover{color:var(--paper)}
.daytab.active{color:#fff;border-color:transparent}
.daytab.active::before{opacity:1}
.daytab i{font-style:normal;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.75;margin-bottom:1px}

.emi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.emi{
  position:relative;padding:22px;border-radius:18px;overflow:hidden;
  border:1px solid var(--hair-soft);background:linear-gradient(165deg,var(--ink-3),var(--ink-2));
  display:flex;flex-direction:column;gap:9px;
  opacity:0;transform:translateY(22px);
  transition:border-color .4s,box-shadow .4s;
}
.emi-grid.go .emi{animation:rise .7s var(--ease) forwards;animation-delay:var(--d,0ms)}
.emi:hover{border-color:rgba(127,63,152,.55);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.emi--live{border-color:transparent;background:linear-gradient(155deg,rgba(57,181,74,.2),rgba(127,63,152,.22)),var(--ink-3)}
.emi__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.emi__time{font-family:var(--font-d);font-size:13px;font-weight:500;color:var(--green)}
.emi__cat{font-family:var(--font-d);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);padding:4px 10px;border:1px solid var(--hair);border-radius:99px}
.emi__title{font-size:clamp(17px,1.8vw,20px);letter-spacing:-.03em}
.emi__desc{font-size:13.5px;color:var(--muted-2);margin:0;line-height:1.55;flex:1}
.emi__foot{display:flex;align-items:center;gap:9px;padding-top:6px;font-size:13px;color:var(--muted)}
.emi__live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-d);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.emi__live i{width:5px;height:5px;border-radius:50%;background:var(--red);animation:pulse 2s infinite}

/* =========================================================
   12. ANIMATEURS
   ========================================================= */
.anim-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.anim{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  padding:22px 12px;border-radius:18px;
  border:1px solid var(--hair-soft);background:linear-gradient(170deg,var(--ink-3),var(--ink-2));
  opacity:0;transform:translateY(22px);
  transition:transform .45s var(--ease),border-color .4s;
}
.anim-grid.go .anim{animation:rise .7s var(--ease) forwards;animation-delay:var(--d,0ms)}
.anim:hover{transform:translateY(-5px);border-color:rgba(57,181,74,.5)}
.anim .avatar{margin-bottom:10px;transition:transform .45s var(--ease)}
.anim:hover .avatar{transform:scale(1.07)}
.anim__name{font-family:var(--font-d);font-size:14px;font-weight:600;letter-spacing:-.02em}
.anim__role{font-size:11.5px;color:var(--green)}
.anim__emi{font-size:11.5px;color:var(--muted-2)}

/* =========================================================
   13. ACTUS + TOP 5
   ========================================================= */
.news__cols{display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(28px,4vw,56px);align-items:start}
/* La colonne des actus est bien plus haute que le Top 5 :
   collant, celui-ci accompagne la lecture au lieu de laisser
   un grand vide sur la droite. */
.news__side{position:sticky;top:92px}
/* Cartes empilées en une colonne, image en tête — reprend la mise
   en page observée sur la référence (radioexpressfm.com) plutôt que
   la grille à 2 colonnes précédente, mieux adaptée à des cartes
   sans image. */
.actu-grid{display:flex;flex-direction:column;gap:16px}
.actu-card{
  opacity:0;transform:translateY(20px);overflow:hidden;
  border-radius:18px;border:1px solid var(--hair-soft);
  background:linear-gradient(165deg,var(--ink-3),var(--ink-2));
  transition:border-color .4s,box-shadow .4s;
}
.actu-grid.go .actu-card{animation:rise .7s var(--ease) forwards;animation-delay:var(--d,0ms)}
.actu-card:hover{border-color:rgba(127,63,152,.55);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.actu-card>a{display:block;position:relative}
.actu-card__img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ink-4)}
.actu-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.actu-card:hover .actu-card__img img{transform:scale(1.06)}
.actu-card__body{padding:20px 22px}
.actu-card__meta{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.actu-card__cat{font-family:var(--font-d);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.actu-card__date{font-size:11.5px;color:var(--muted-2)}
.actu-card h3{font-size:clamp(17px,2.4vw,23px);letter-spacing:-.03em;margin-bottom:8px;transition:transform .45s var(--ease)}
.actu-card:hover h3{transform:translateX(6px)}
.actu-card p{font-size:13.5px;color:var(--muted-2);margin:0 0 14px;line-height:1.6;max-width:68ch}
.actu-card__go{font-family:var(--font-d);font-size:11.5px;letter-spacing:.06em;color:var(--muted-2);transition:color .3s}
.actu-card:hover .actu-card__go{color:var(--green)}

/* --- Onglets de rubrique (page Actus) — même motif que .daytabs --- */
.cat-tabs{display:flex;flex-wrap:wrap;gap:7px}
.cat-tabs a{
  position:relative;padding:8px 16px;border-radius:99px;overflow:hidden;
  border:1px solid var(--hair);font-family:var(--font-d);font-size:12.5px;color:var(--muted);
  transition:color .3s,border-color .3s;
}
.cat-tabs a::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .4s;z-index:-1}
.cat-tabs a:hover{color:var(--paper)}
.cat-tabs a.active{color:#fff;border-color:transparent}
.cat-tabs a.active::before{opacity:1}
.actu-empty{padding:40px 0;color:var(--muted-2);font-size:14px}

.top5{
  display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--hair-soft);border-radius:18px;overflow:hidden;
  background:linear-gradient(170deg,var(--ink-3),var(--ink-2));
}
.top5__it{
  display:flex;align-items:center;gap:14px;padding:15px 18px;
  border-bottom:1px solid var(--hair-soft);opacity:0;transform:translateY(16px);
  transition:background .4s;
}
.top5.go .top5__it{animation:rise .6s var(--ease) forwards;animation-delay:var(--d,0ms)}
.top5__it:last-child{border-bottom:0}
.top5__it:hover{background:rgba(246,242,250,.04)}
.top5__n{
  font-family:var(--font-d);font-size:26px;font-weight:700;line-height:1;width:34px;flex:none;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.top5__body{min-width:0;flex:1}
.top5__body b{display:block;font-family:var(--font-d);font-size:14px;font-weight:500;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis}
.top5__body em{font-style:normal;font-size:11.5px;color:var(--muted-2)}
.top5__plays{font-family:var(--font-d);font-size:11.5px;color:var(--green);white-space:nowrap}

/* =========================================================
   14. PODCASTS
   ========================================================= */
.pod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pod{
  position:relative;border-radius:18px;overflow:hidden;
  border:1px solid var(--hair-soft);background:linear-gradient(165deg,var(--ink-3),var(--ink-2));
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(24px);transition:border-color .45s;
}
.pod-grid.go .pod{animation:rise .75s var(--ease) forwards;animation-delay:var(--d,0ms)}
.pod:hover{border-color:rgba(127,63,152,.55)}
.pod__glow{position:absolute;width:280px;height:280px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(127,63,152,.4),transparent 68%);opacity:0;transition:opacity .45s;transform:translate(-50%,-50%);z-index:2}
.pod:hover .pod__glow{opacity:1}

/* Vignette cliquable (lance la vidéo) — reprend le motif image-pleine-
   largeur + corps texte déjà utilisé par .actu-card, en remplacement
   de l'ancienne onde audio (les podcasts sont désormais des vidéos). */
.pod__thumb{
  position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(155deg,var(--violet-deep),var(--ink-4));border:0;padding:0;cursor:pointer;
}
.pod__thumb--soon{cursor:default}
.pod__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.pod:hover .pod__thumb img{transform:scale(1.06)}
.pod__dur{
  position:absolute;top:10px;right:10px;font-family:var(--font-d);font-size:11px;
  padding:3px 9px;border-radius:99px;background:rgba(11,5,18,.65);color:var(--paper);
}
.pod__playbtn{
  position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:rgba(11,5,18,.55);border:1px solid rgba(255,255,255,.25);
  transition:background .4s,border-color .4s,transform .4s var(--ease);
}
.pod__thumb:hover .pod__playbtn{background:var(--grad);border-color:transparent;transform:scale(1.1)}
.pod__playbtn svg{width:13px;height:13px;fill:var(--paper);margin-left:2px}
.pod__soon{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-d);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
}

.pod__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.pod__cat{font-family:var(--font-d);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.pod__body h3{font-size:clamp(17px,1.8vw,20px);letter-spacing:-.03em;line-height:1.18}
.pod__body p{font-size:13px;color:var(--muted-2);margin:0;line-height:1.55}
.pod__date{margin-top:auto;padding-top:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}

/* =========================================================
   14b. LECTEUR VIDÉO MODAL (podcasts)
   ========================================================= */
body.modal-open{overflow:hidden}
.video-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:24px}
/* Une règle d'auteur (ci-dessus) l'emporte toujours sur le [hidden]
   du navigateur, quelle que soit sa spécificité — même bug déjà
   rencontré et corrigé sur l'ancien écran d'accueil. Sans ceci, la
   modale resterait visible en permanence dès le chargement. */
.video-modal[hidden]{display:none}
.video-modal__backdrop{position:absolute;inset:0;border:0;background:rgba(7,3,12,.86);backdrop-filter:blur(6px);cursor:pointer}
.video-modal__box{
  position:relative;z-index:1;width:min(920px,100%);border-radius:18px;overflow:hidden;
  background:var(--ink-3);border:1px solid var(--hair-soft);box-shadow:0 30px 80px rgba(0,0,0,.55);
  animation:videoIn .35s var(--ease) forwards;
}
@keyframes videoIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.video-modal__box video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.video-modal__meta{padding:14px 20px 18px;display:flex;flex-direction:column;gap:2px}
.video-modal__meta strong{font-family:var(--font-d);font-size:15px;letter-spacing:-.02em}
.video-modal__meta span{font-size:12.5px;color:var(--muted-2)}
.video-modal__close{
  position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:rgba(11,5,18,.65);border:1px solid rgba(255,255,255,.18);
  transition:background .3s,transform .3s var(--ease);
}
.video-modal__close:hover{background:var(--grad);border-color:transparent;transform:rotate(90deg)}
.video-modal__close svg{width:15px;height:15px;stroke:var(--paper);stroke-width:2;fill:none}
@media (max-width:640px){
  .video-modal{padding:0}
  .video-modal__box{width:100%;border-radius:0}
}

/* =========================================================
   15. OÙ NOUS ÉCOUTER + NEWSLETTER
   ========================================================= */
.ecoute{overflow:hidden}
.ecoute__bg{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(620px 460px at 84% 26%,rgba(57,181,74,.13),transparent 62%),
    radial-gradient(600px 440px at 12% 70%,rgba(127,63,152,.18),transparent 62%);
}
.ecoute__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.freq{
  padding:24px 22px;border-radius:18px;border:1px solid var(--hair-soft);
  background:linear-gradient(170deg,var(--ink-3),var(--ink-2));
  opacity:0;transform:translateY(22px);transition:transform .45s var(--ease),border-color .4s;
}
.ecoute__grid.go .freq{animation:rise .7s var(--ease) forwards;animation-delay:var(--d,0ms)}
.freq:hover{transform:translateY(-4px);border-color:rgba(57,181,74,.45)}
.freq__mode{font-family:var(--font-d);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.freq__val{display:block;font-family:var(--font-d);font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:600;letter-spacing:-.035em;margin:12px 0 2px}
.freq__lbl{display:block;font-size:13px;color:var(--paper)}
.freq__note{display:block;font-size:12px;color:var(--muted-2);margin-top:8px;line-height:1.5}

.news-letter{
  margin-top:clamp(22px,3vw,34px);padding:clamp(22px,3vw,32px);border-radius:20px;
  border:1px solid rgba(127,63,152,.4);
  background:linear-gradient(150deg,rgba(127,63,152,.28),rgba(57,181,74,.1)),var(--ink-3);
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
}
.news-letter__txt b{display:block;font-family:var(--font-d);font-size:clamp(17px,2vw,21px);letter-spacing:-.025em}
.news-letter__txt span{font-size:13.5px;color:var(--muted)}
.news-letter__field{display:flex;gap:10px;flex-wrap:wrap}
.news-letter__field input{
  min-width:min(280px,70vw);padding:14px 20px;border-radius:99px;
  border:1px solid var(--hair);background:rgba(7,3,12,.4);outline:none;font-size:14px;
  transition:border-color .3s;
}
.news-letter__field input:focus{border-color:var(--green)}
.news-letter .form-status{grid-column:1/-1;margin:0}

/* =========================================================
   16. RÉAGIR À L'ANTENNE
   ========================================================= */
.antenne__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,72px);align-items:start}
.antenne__left>p{color:var(--muted);max-width:46ch;margin-top:14px}
.antenne__lines{display:flex;flex-direction:column;margin-top:26px;border-top:1px solid var(--hair-soft)}
.antenne__lines li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--hair-soft)}
.antenne__lines span{font-family:var(--font-d);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.antenne__lines a{position:relative;font-family:var(--font-d);font-size:clamp(14px,1.5vw,17px);transition:color .3s}
.antenne__lines a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--green);transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
.antenne__lines a:hover{color:var(--green-light)}
.antenne__lines a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* ---------- 17. FORMULAIRES ---------- */
.contact__form{display:flex;flex-direction:column;gap:4px}
.field{position:relative;padding-top:20px}
.field input,.field select,.field textarea{
  width:100%;background:none;border:0;border-bottom:1px solid var(--hair);
  padding:11px 0;font-family:var(--font-d);font-size:15px;outline:none;resize:none;transition:border-color .3s;
}
.field select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A9A0B4'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:20px}
.field select option{background:var(--ink-3);color:var(--paper)}
.field label{position:absolute;left:0;top:31px;pointer-events:none;color:var(--muted-2);font-size:15px;transform-origin:0 50%;transition:transform .4s var(--ease),font-size .4s var(--ease),color .3s}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,
.field select:focus+label,.field select:valid+label{
  transform:translateY(-28px);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);
}
.field i{position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.field input:focus~i,.field textarea:focus~i,.field select:focus~i{transform:scaleX(1)}
.field.err input,.field.err textarea,.field.err select{border-bottom-color:var(--red)}
.contact__form .btn{margin-top:22px}
.form-status{font-size:13px;color:var(--green-light);margin:12px 0 0;min-height:1.3em;opacity:0;transition:opacity .4s}
.form-status.show{opacity:1}
.form-status.err{color:#FF6B7A}

/* ---------- 18. FOOTER ---------- */
.footer{padding-top:clamp(56px,7vw,92px);border-top:1px solid var(--hair-soft);position:relative;overflow:hidden}
.footer__top{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,4.5vw,64px);padding-bottom:clamp(36px,5vw,60px)}
.footer__brand img{width:min(220px,58vw);margin-bottom:18px;filter:drop-shadow(0 0 22px rgba(127,63,152,.5))}
.footer__brand p{font-size:13.5px;color:var(--muted-2);line-height:1.75}
.footer__social{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.soc{
  padding:8px 15px;border-radius:99px;border:1px solid var(--hair);font-family:var(--font-d);
  font-size:11.5px;letter-spacing:.06em;color:var(--muted);transition:color .3s,border-color .3s,background .3s;
}
.soc:hover{color:#fff;border-color:transparent;background:var(--grad)}
.footer__nav{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.footer__nav h4{font-family:var(--font-d);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px;font-weight:500}
.footer__nav a{display:block;font-size:14px;color:var(--muted);padding:5px 0;transition:color .3s,transform .4s var(--ease)}
.footer__nav a:hover{color:var(--paper);transform:translateX(5px)}
.footer__marquee{overflow:hidden;border-block:1px solid var(--hair-soft);padding-block:12px}
.footer__marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}
.footer__marquee-track span{font-family:var(--font-d);font-size:clamp(20px,4.4vw,50px);font-weight:700;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(246,242,250,.16);white-space:nowrap;padding-right:22px}
.footer__bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block:22px;font-size:12.5px;color:var(--muted-2)}

/* ---------- 19. LECTEUR (DOCK) ---------- */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:950;
  display:grid;grid-template-columns:auto minmax(150px,1fr) minmax(90px,1.3fr) auto auto;
  gap:clamp(14px,2.4vw,26px);align-items:center;padding:14px clamp(14px,3vw,26px);
  background:rgba(11,5,18,.84);backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-top:1px solid var(--hair-soft);transition:transform .6s var(--ease);
}
.player::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--grad);opacity:0;transition:opacity .5s}
body.is-playing .player::before{opacity:1}
.player.tucked{transform:translateY(105%)}
.player__btn{position:relative;width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--grad);transition:transform .35s var(--ease)}
.player__btn:hover{transform:scale(1.07)}
.player__btn svg{position:absolute;width:19px;height:19px;fill:#fff;transition:opacity .25s,transform .3s var(--ease)}
.player__btn .ic-play{margin-left:2px}
body.is-playing .player__btn .ic-play{opacity:0;transform:scale(.6)}
body.is-playing .player__btn .ic-pause{opacity:1;transform:scale(1)}
.player__spin{position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;border-top-color:var(--paper);opacity:0}
body.is-loading .player__spin{opacity:1;animation:spin .8s linear infinite}
.player__meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.player__badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-d);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.player__badge i{width:5px;height:5px;border-radius:50%;background:var(--red);flex:none}
body.is-playing .player__badge{color:var(--green)}
body.is-playing .player__badge i{background:var(--green);animation:pulse 2s infinite}
.player__title{font-family:var(--font-d);font-size:14.5px;font-weight:500;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__sub{font-size:12px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__viz{width:100%;height:42px;display:block}
.player__vol{display:flex;align-items:center;gap:10px}
.player__mute{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;position:relative;transition:background .3s}
.player__mute:hover{background:rgba(246,242,250,.08)}
.player__mute svg{position:absolute;width:19px;height:19px;fill:var(--muted);transition:opacity .2s}
.player__mute .ic-mute{opacity:0}
body.is-muted .player__mute .ic-vol{opacity:0}
body.is-muted .player__mute .ic-mute{opacity:1;fill:#FF6B7A}
#volRange{-webkit-appearance:none;appearance:none;width:92px;height:3px;border-radius:2px;background:var(--hair);outline:none;cursor:pointer}
#volRange::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--paper);cursor:pointer;transition:transform .2s}
#volRange::-webkit-slider-thumb:hover{transform:scale(1.25)}
#volRange::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--paper);cursor:pointer}
.player__close{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;transition:background .3s}
.player__close:hover{background:rgba(246,242,250,.08)}
.player__close svg{width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round}
.player-fab{
  position:fixed;right:20px;bottom:20px;z-index:949;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:var(--grad);transform:scale(0);
  transition:transform .45s var(--ease);box-shadow:0 12px 34px rgba(127,63,152,.5);
}
.player-fab.show{transform:scale(1)}
.player-fab:hover{transform:scale(1.1)}
.player-fab svg{width:20px;height:20px;fill:#fff;margin-left:2px}

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width:1180px){
  .anim-grid{grid-template-columns:repeat(4,1fr)}
  .ecoute__grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:1000px){
  .emi-grid,.pod-grid{grid-template-columns:repeat(2,1fr)}
  .news__cols{grid-template-columns:1fr}
  .antenne__grid{grid-template-columns:1fr}
  .news-letter{grid-template-columns:1fr}
}

@media (max-width:900px){
  :root{--dock:76px}
  .burger{display:block}
  .nav__links{
    position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;align-items:center;gap:6px;
    background:rgba(7,3,12,.96);backdrop-filter:blur(20px);
    opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
  }
  .nav__links.open{opacity:1;visibility:visible}
  .nav__links{overflow-y:auto;padding-block:60px}
  .nav__links a{font-family:var(--font-d);font-size:25px;padding:12px 20px;color:var(--paper)}
  .nav__links a::before{display:none}
  /* Pas de survol au tactile : le panneau des rubriques reste
     toujours déplié, en liste compacte sous "Actus" plutôt qu'en
     popover positionné. */
  .nav__caret{display:none}
  .nav__drop{display:flex;flex-direction:column;align-items:center}
  .nav__drop-panel{position:static;opacity:1;visibility:visible;pointer-events:auto;padding-top:0}
  .nav__drop-inner{
    position:static;transform:none;background:none;border:0;box-shadow:none;
    min-width:0;padding:2px 0 0;align-items:center;gap:0;
  }
  .nav__drop-inner a{font-family:var(--font-b);font-size:15px;padding:7px 14px;color:var(--muted-2)}
  .nav__drop-inner a:first-child{border-bottom:0;margin-bottom:0;padding-bottom:7px;color:var(--green)}
  .live-pill__label{display:none}
  .live-pill{padding:10px 14px}
  .sec-head{align-items:flex-start;flex-direction:column;gap:16px}
  .player{grid-template-columns:auto 1fr auto;gap:12px;padding:11px 14px}
  .player__viz,.player__vol{display:none}
  .player__btn{width:46px;height:46px}
  .footer__top{grid-template-columns:1fr}
}

@media (max-width:640px){
  .emi-grid,.pod-grid{grid-template-columns:1fr}
  .anim-grid{grid-template-columns:repeat(2,1fr)}
  .ecoute__grid{grid-template-columns:1fr}
  .footer__nav{grid-template-columns:1fr 1fr}
  .footer__bot{flex-direction:column;gap:6px}
  .teaser-grid,.teasers__cols{grid-template-columns:1fr}
  /* Titre + date ne tiennent pas sur une ligne à 390 px. */
  .today__head{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ---------- 21. MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .grain{display:none}
  .reveal,.sec-head,.teaser{opacity:1;transform:none}
  .emi,.pod,.anim,.actu-card,.freq,.top5__it{opacity:1!important;transform:none!important}
}

/* =========================================================
   22. COUCHE INTERACTIVE
   ========================================================= */

/* --- Texte cinétique : lettre par lettre --- */
.kc{display:inline-block;will-change:transform,opacity}
.js .kin .kc{opacity:0;transform:translateY(98%) rotate(5deg)}
.js .kin.go .kc{animation:kcIn .85s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes kcIn{to{opacity:1;transform:none}}
/* Le dégradé de marque est recomposé lettre par lettre (voir app.js) */
.kc--grad{
  background-image:var(--grad);background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* --- Bandeau défilant --- */
/* Le bandeau suit immédiatement la nav dans le DOM sur TOUTES les
   pages (chrome persistant). La nav étant en position fixed, elle
   ne réserve aucun espace dans le flux normal : sans cette marge,
   le bandeau se dessinerait sous elle, texte superposé. */
.ticker{
  position:relative;z-index:3;overflow:hidden;margin-top:74px;
  border-block:1px solid var(--hair-soft);background:rgba(246,242,250,.02);padding-block:15px;
}
.ticker::before,.ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.ticker__track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__group{display:flex;align-items:center;gap:24px;padding-right:24px}
.ticker__group span{
  font-family:var(--font-d);font-size:clamp(14px,1.8vw,20px);font-weight:500;
  letter-spacing:-.02em;color:var(--muted);white-space:nowrap;
}
.ticker__group span:first-child{color:var(--green)}
.ticker__group i{color:var(--violet-light);font-style:normal;font-size:11px}

/* --- Chiffres animés --- */
.stats-band{padding-block:clamp(30px,4vw,48px);border-block:1px solid var(--hair-soft);background:rgba(246,242,250,.02)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{
  text-align:center;opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms);
}
.stats.go .stat{opacity:1;transform:none}
.stat b{
  display:block;font-family:var(--font-d);font-size:clamp(2rem,4.6vw,3.4rem);font-weight:700;
  letter-spacing:-.05em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.stat span{display:block;margin-top:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}

/* --- Reflet qui suit le pointeur sur les cartes --- */
.emi,.pod,.anim,.freq,.rail{transform-style:preserve-3d}
.emi::after,.pod::after,.anim::after,.freq::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(246,242,250,.09),transparent 45%);
  opacity:0;transition:opacity .4s;
}
.emi:hover::after,.pod:hover::after,.anim:hover::after,.freq:hover::after{opacity:1}
.anim,.freq{position:relative}

/* --- Balayage lumineux au survol --- */
.emi::before{
  content:"";position:absolute;top:0;bottom:0;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(160,99,188,.16),transparent);
  transform:translateX(-160%) skewX(-14deg);transition:transform .85s var(--ease);
}
.emi:hover::before{transform:translateX(320%) skewX(-14deg)}

/* --- Révélations par transition (compatibles avec l'inclinaison) --- */
.emi,.pod,.anim,.freq,.top5__it,.actu-card{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .55s var(--ease),border-color .4s,box-shadow .4s;
  transition-delay:var(--d,0ms),var(--d,0ms),0s,0s;
}
.emi-grid.go .emi,.pod-grid.go .pod,.anim-grid.go .anim,
.ecoute__grid.go .freq,.top5.go .top5__it,.actu-grid.go .actu-card{opacity:1;transform:none}
/* Une fois révélées, les cartes redeviennent réactives au pointeur. */
.emi-grid.go .emi,.pod-grid.go .pod,.anim-grid.go .anim,.ecoute__grid.go .freq{transition-delay:var(--d,0ms),var(--d,0ms),0s,0s}
/* Les teasers utilisent le mécanisme générique .reveal (un
   IntersectionObserver par carte) plutôt que la coordination
   par grille : ils apparaissent sur plusieurs pages différentes
   (accueil, bas d'article) sans code de câblage dédié. */
.teaser{transition:opacity .8s var(--ease),transform .8s var(--ease),border-color .4s,box-shadow .4s}

@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr);gap:26px}
  .ticker::before,.ticker::after{width:44px}
}

@media (prefers-reduced-motion:reduce){
  .js .kin .kc{opacity:1;transform:none}
  .stat,.emi,.pod,.anim,.freq,.top5__it,.actu-card,.teaser{opacity:1!important;transform:none!important}
  .ticker__track{animation:none}
}

/* =========================================================
   23. PAGES INTERNES, TEASERS & ARTICLE
   ========================================================= */

/* Sections qui ouvrent une page dédiée (pas de hero au-dessus) :
   le bandeau (chrome persistant) dégage déjà la nav fixe, il ne
   reste qu'à ajouter un peu d'air avant le premier titre. */
.emissions--page,.anims--page,.news--page,.podcasts--page,
.ecoute--page,.antenne--page{padding-top:clamp(36px,4.6vw,56px)}

.wrap--narrow{max-width:760px}
.mini-title{
  font-family:var(--font-d);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:18px;
}

/* --- Indicateur discret pendant une navigation douce --- */
#page.is-routing{opacity:.5;transition:opacity .25s var(--ease)}

/* --- Bloc teasers (accueil) --- */
.teasers__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.teasers .sec-head{margin-bottom:20px}
.teasers__more{
  font-family:var(--font-d);font-size:12.5px;color:var(--muted);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;transition:color .3s;
}
.teasers__more:hover{color:var(--green)}
.teasers__more i{transition:transform .35s var(--ease)}
.teasers__more:hover i{transform:translateX(4px)}

.teaser-grid{display:flex;flex-direction:column;gap:10px}
.teaser{
  display:block;padding:18px 20px;border-radius:16px;
  border:1px solid var(--hair-soft);background:linear-gradient(165deg,var(--ink-3),var(--ink-2));
}
.teaser:hover{border-color:rgba(127,63,152,.5)}
.teaser__cat{font-family:var(--font-d);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.teaser h3{font-size:15.5px;letter-spacing:-.02em;margin:7px 0 5px}
.teaser p{font-size:13px;color:var(--muted-2);margin:0 0 10px;line-height:1.55}
.teaser__date{font-family:var(--font-d);font-size:11px;color:var(--muted-2)}

/* --- Page article --- */
.article{padding-top:clamp(36px,4.6vw,56px)}
.article__back{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);font-size:13px;
  color:var(--muted);margin-bottom:28px;transition:color .3s;
}
.article__back:hover{color:var(--green)}
.article__meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:16px}
.article__cat{
  font-family:var(--font-d);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:var(--grad);padding:6px 14px;border-radius:99px;
  display:inline-block;transition:opacity .3s;
}
.article__cat:hover{opacity:.82}
.article__date,.article__author{font-size:13px;color:var(--muted-2)}
.article__title{font-size:clamp(1.9rem,4.4vw,3.1rem);letter-spacing:-.04em;line-height:1.08;margin-bottom:16px}
.article__excerpt{font-size:clamp(15px,1.6vw,18px);color:var(--muted);max-width:64ch;margin-bottom:28px}
.article__cover{margin:0 0 32px;border-radius:18px;overflow:hidden;border:1px solid var(--hair-soft)}
.article__cover img{width:100%;display:block}

.article__body{font-size:16px;line-height:1.85;color:var(--paper)}
.article__body p{margin:0 0 22px;color:rgba(246,242,250,.86)}
.article__body h2{font-size:clamp(1.25rem,2.4vw,1.6rem);letter-spacing:-.025em;margin:38px 0 16px}
.article__body h3{font-size:clamp(1.1rem,1.9vw,1.3rem);letter-spacing:-.02em;margin:30px 0 14px}
.article__body ul{margin:0 0 22px;padding-left:22px}
.article__body li{margin-bottom:8px;color:rgba(246,242,250,.86)}
.article__body li::marker{color:var(--green)}
.article__body strong{color:var(--paper);font-weight:600}
.article__body a,.article__excerpt a{color:var(--green-light);text-decoration:underline;text-underline-offset:3px}

.article__share{
  display:flex;align-items:center;gap:12px;margin-top:36px;padding-top:26px;
  border-top:1px solid var(--hair-soft);font-size:13px;color:var(--muted-2);
}
.article__share a{
  padding:8px 15px;border-radius:99px;border:1px solid var(--hair);color:var(--muted);
  font-family:var(--font-d);font-size:12.5px;transition:color .3s,border-color .3s,background .3s;
}
.article__share a:hover{color:#fff;border-color:transparent;background:var(--grad)}

.article__related{margin-top:56px;padding-top:40px;border-top:1px solid var(--hair-soft)}
.article__related .teaser-grid{flex-direction:row;flex-wrap:wrap}
.article__related .teaser{flex:1 1 260px}

@media (max-width:900px){
  .teasers__cols{grid-template-columns:1fr}
}