/* Radio Crise et Resilience : la feuille du site.
   Elle vivait dans index.html : sortie le 2026-08-01, la regle est un fichier
   a part, jamais de style dans la page. L'en-tete, le pied et les boutons ne
   sont plus ici : ils viennent de assets/marque.css, commun aux trois sites. */
  
  *{margin:0;padding:0;box-sizing:border-box}
  body{
    background:var(--noir);color:var(--texte);
    font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
    overflow-x:hidden;
  }



  /* ---------- l'antenne ---------- */
  .antenne{
    position:relative;overflow:hidden;
    padding:clamp(26px,3vw,44px) clamp(28px,5vw,80px) clamp(70px,8vw,100px);
  }
  .antenne::before{
    content:"";position:absolute;left:50%;top:-30%;transform:translateX(-50%);
    width:min(1100px,120%);height:130%;pointer-events:none;
    background:radial-gradient(ellipse at center,rgba(var(--or-rgb),.12),transparent 64%);
  }
  .bloc-antenne{position:relative;max-width:1180px;margin:0 auto}

  .en-direct{
    display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
    padding:7px 16px;border-radius:999px;
    border:1px solid rgba(var(--rouge-rgb),.5);background:rgba(var(--rouge-rgb),.1);
    font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--rouge-pale);
  }
  .en-direct i{
    width:7px;height:7px;border-radius:50%;background:var(--rouge);
    box-shadow:0 0 10px var(--rouge);animation:battement 1.8s ease-in-out infinite;
  }
  @keyframes battement{0%,100%{opacity:.35}50%{opacity:1}}

  /* Hauteur figee a deux lignes : sans ca, un titre plus court d'une ligne
     faisait remonter le lecteur d'un programme a l'autre. Les titres
     d'antenne sont ecrits pour tenir en deux lignes, mesure a l'appui. */
  .porte-titre{
    --taille-titre:clamp(30px,4.4vw,54px);
    height:calc(var(--taille-titre) * 1.1 * 2);
    display:flex;align-items:flex-end;margin-bottom:14px;
  }
  .titre-antenne{
    font:400 var(--taille-titre,clamp(30px,4.4vw,54px))/1.1 Georgia,"Times New Roman",serif;
    letter-spacing:-.6px;max-width:900px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .titre-antenne em,.final h2 em{
    font-style:italic;
    background:linear-gradient(100deg,var(--or-pale),var(--or) 55%,var(--or-fonce));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }

  /* visible seulement avec ?essai=court, pour ne pas se croire en direct */
  .bandeau-essai{
    display:inline-block;margin-bottom:14px;padding:8px 18px;border-radius:999px;
    border:1px solid var(--or);background:rgba(var(--or-rgb),.12);color:var(--or-clair);
    font-size:11.5px;letter-spacing:2px;text-transform:uppercase;
  }

  .sous-antenne{
    display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
    font-size:13.5px;letter-spacing:1px;color:var(--texte-doux);margin-bottom:30px;
  }
  /* combien de monde ecoute en ce moment, cadre a droite sur la meme ligne */
  .a-lecoute{display:inline-flex;align-items:baseline;gap:8px;color:var(--or);white-space:nowrap}
  .a-lecoute i{
    width:6px;height:6px;border-radius:50%;background:var(--or);
    align-self:center;animation:battement 2.4s ease-in-out infinite;
  }
  .a-lecoute b{font-weight:600;color:var(--or-clair)}
  .a-lecoute span{color:var(--texte-doux)}

  .porte-video{position:relative}
  .cadre-video{
    position:relative;width:100%;aspect-ratio:16/9;
    border:1px solid rgba(var(--clair-rgb),.1);border-radius:4px;overflow:hidden;
    background:var(--noir-profond);
  }
  .cadre-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  /* fondu au noir entre deux programmes : le lecteur ne bouge pas de sa place */
  .voile-video{
    position:absolute;inset:0;border-radius:4px;background:var(--noir-pur);
    opacity:0;pointer-events:none;transition:opacity .8s ease;
  }
  .voile-video.noir{opacity:1}

  /* le son ne peut pas demarrer seul : un seul clic, sans rien interrompre */
  /* hors du cadre video, au-dessus a droite : aucun clic capte par l'iframe */
  .ligne-son{
    display:flex;justify-content:flex-end;align-items:center;
    min-height:31px;margin-bottom:12px;
  }
  /* Bouton repris tel quel des articles du magazine (.ecouter) : meme forme,
     meme taille, meme halo qui bat. Faire varier l'opacite du bouton entier
     rendrait le texte pale une fois sur deux, c'est le halo qui respire. */
  .activer-son{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    min-height:37px;box-sizing:border-box;
    padding:0 16px 0 13px;border-radius:999px;border:1px solid transparent;
    background:linear-gradient(118deg,var(--or-tendre),var(--or) 52%,var(--or-moyen));
    color:var(--sur-or-fonce);font:600 11px/1 "Segoe UI",system-ui,sans-serif;
    letter-spacing:2.2px;text-transform:uppercase;
    box-shadow:0 0 0 0 rgba(var(--or-rgb),.5);
    animation:appel-ecoute 2.2s ease-in-out infinite;
  }
  .activer-son:hover{filter:brightness(1.08);animation-play-state:paused}
  @keyframes appel-ecoute{
    0%{box-shadow:0 0 0 0 rgba(var(--or-rgb),.6);filter:brightness(1)}
    55%{box-shadow:0 0 0 9px rgba(var(--or-rgb),0);filter:brightness(1.14)}
    100%{box-shadow:0 0 0 0 rgba(var(--or-rgb),0);filter:brightness(1)}
  }
  @media (prefers-reduced-motion:reduce){.activer-son{animation:none}}
  .activer-son svg{width:14px;height:14px;fill:currentColor;flex:none}
  .activer-son.actif{animation:none;box-shadow:none}

  .progression{height:3px;border-radius:2px;background:rgba(var(--clair-rgb),.1);overflow:hidden;margin-bottom:10px}
  .progression i{display:block;height:100%;background:linear-gradient(90deg,var(--or-clair),var(--or));transition:width 1s linear}
  .ligne-chrono{
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    font-size:12px;color:var(--texte-doux);letter-spacing:1px;
  }

  /* Deux lignes : le titre occupe la premiere, le lecteur et la liste A suivre
     partagent la seconde. C'est ce qui met le haut de la liste au niveau du
     haut de la video, quelle que soit la hauteur du titre. */
  /* partager la radio depuis la page, sans quitter l'antenne */
  .partage{display:inline-flex;align-items:center;gap:10px}
  .partage-mot{font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--or)}
  .partage-lien{
    display:grid;place-items:center;width:37px;height:37px;padding:0;
    border:1px solid rgba(var(--clair-rgb),.12);border-radius:50%;background:transparent;
    color:var(--texte-doux);cursor:pointer;transition:color .2s ease,border-color .2s ease;
  }
  .partage-lien:hover{color:var(--or-clair);border-color:rgba(var(--or-rgb),.55)}
  .partage-lien svg{width:13px;height:13px;fill:currentColor}
  .partage-fait{font-size:11px;letter-spacing:1.4px;color:var(--or)}

  /* Repris tel quel du site de l'Academie : un visiteur qui passe d'un site a
     l'autre doit reconnaitre exactement la meme presentation des deux praticiens. */
  @media(max-width:520px){.praticien{grid-template-columns:1fr;justify-items:center;text-align:center}}

  /* Les plateformes en icones, sous la liste A suivre : on ecoute ailleurs en un
     clic. Meme presentation que A suivre : le titre en tete, le contenu dessous
     separe par un filet. Le bloc suit la liste au lieu d'etre pousse tout en bas
     de la colonne, sinon il flotte loin du reste quand la page est haute. */
  .ecoutes-bloc{display:flex;flex-direction:column;align-items:stretch;margin-top:30px}
  .ecoutes-titre{flex:none}
  .ecoutes-vite{
    display:flex;gap:10px;justify-content:flex-start;
    padding-top:14px;border-top:1px solid rgba(var(--clair-rgb),.07);
  }
  .ecoutes-vite a{
    display:grid;place-items:center;width:37px;height:37px;border-radius:50%;
    border:1px solid rgba(var(--clair-rgb),.12);background:rgba(var(--clair-rgb),.03);
    color:var(--texte-doux);transition:color .2s ease,border-color .2s ease,transform .2s ease;
  }
  .ecoutes-vite a:hover{color:var(--or-clair);border-color:rgba(var(--or-rgb),.55);transform:translateY(-2px)}
  .ecoutes-vite svg{width:17px;height:17px;fill:currentColor}
  /* Le nom sous l'icone : sur telephone l'infobulle n'existe pas, et Deezer
     comme Apple ne se devinent pas a leur seul symbole. */
  .ecoutes-vite{align-items:flex-start}
  .ecoutes-vite a{position:relative;overflow:visible}
  .ecoutes-vite a b{
    position:absolute;top:41px;left:50%;transform:translateX(-50%);
    font:400 9px/1 "Segoe UI",sans-serif;letter-spacing:.8px;color:var(--texte-fer);white-space:nowrap;
  }
  .ecoutes-vite a:hover b{color:var(--or-clair)}
  .ecoutes-bloc{padding-bottom:22px}

  /* La grille du jour en carrousel : on voit les visages et les sujets defiler,
     et chaque carte lance son emission tout de suite. */
  .grille-tete{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    max-width:1180px;margin:0 auto 16px;padding:0 4px;
  }
  .grille-tete b{font:400 15px/1 Georgia,serif;letter-spacing:.6px;text-transform:capitalize}
  .grille-tete span{font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--texte-fer)}
  .carrousel{
    display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;
    scroll-snap-type:x mandatory;padding:4px 4px 18px;max-width:1180px;margin:0 auto;
    scrollbar-width:thin;scrollbar-color:rgba(var(--or-rgb),.5) transparent;
  }
  .carrousel::-webkit-scrollbar{height:6px}
  .carrousel::-webkit-scrollbar-thumb{background:rgba(var(--or-rgb),.45);border-radius:3px}
  .prog{
    flex:none;width:236px;scroll-snap-align:start;cursor:pointer;text-align:left;
    border:1px solid rgba(var(--clair-rgb),.08);border-radius:4px;overflow:hidden;
    background:rgba(var(--clair-rgb),.02);color:inherit;padding:0;
    transition:border-color .25s ease,transform .25s ease;
  }
  .prog:hover{border-color:rgba(var(--or-rgb),.55);transform:translateY(-3px)}
  .prog-vignette{position:relative;aspect-ratio:16/9;background:var(--noir-profond);overflow:hidden}
  .prog-vignette img{width:100%;height:100%;object-fit:cover;display:block}
  .prog-heure{
    position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:999px;
    background:rgba(var(--noir-rgb),.85);color:var(--or-clair);
    font:400 12px/1 Georgia,serif;letter-spacing:1px;
  }
  .prog-duree{
    position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:3px;
    background:rgba(var(--noir-rgb),.85);color:var(--texte-clair);font-size:10.5px;letter-spacing:.6px;
  }
  .prog-lire{
    position:absolute;inset:0;display:grid;place-items:center;opacity:0;
    background:rgba(var(--noir-rgb),.5);transition:opacity .25s ease;
  }
  .prog-lire i{
    width:42px;height:42px;border-radius:50%;border:1px solid var(--or);
    display:grid;place-items:center;background:rgba(var(--noir-rgb),.7);
  }
  .prog-lire i::before{
    content:"";border-left:11px solid var(--or-clair);
    border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px;
  }
  .prog:hover .prog-lire{opacity:1}
  .prog-titre{
    display:block;padding:12px 13px 14px;font-size:13.2px;line-height:1.45;color:var(--texte-clair);
  }
  .prog.actuel{border-color:var(--or)}
  .prog.actuel .prog-titre{color:var(--texte)}
  .prog.actuel .prog-heure{background:var(--or);color:var(--sur-or)}
  /* On regarde une emission choisie : l'antenne reprend d'un clic. */
  .ligne-direct{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;margin-bottom:14px}
  .ligne-direct .en-direct{display:inline-flex;align-items:center;margin-bottom:0}
  .en-direct.replay{border-color:rgba(var(--or-rgb),.55);color:var(--or-clair)}
  .en-direct.replay i{background:var(--or);animation:none}
  .retour-antenne{
    display:none;align-items:center;justify-content:center;cursor:pointer;
    min-height:37px;box-sizing:border-box;
    padding:0 16px;border-radius:999px;border:1px solid transparent;
    background:linear-gradient(118deg,var(--or-tendre),var(--or) 52%,var(--or-moyen));
    color:var(--sur-or-fonce);font:600 11px/1 "Segoe UI",system-ui,sans-serif;
    letter-spacing:2.2px;text-transform:uppercase;
  }
  .retour-antenne.visible{display:inline-flex}
  .retour-antenne:hover{filter:brightness(1.08)}

  .colonnes-antenne{
    display:grid;gap:0 clamp(26px,3vw,44px);
    grid-template-columns:1.6fr 1fr;align-items:start;
  }
  .tete-antenne{grid-area:1/1}
  .bloc-lecteur{grid-area:2/1}
  .bloc-chrono{grid-area:3/1;margin-top:22px}
  /* La video occupe une ligne de grille a elle seule : cette colonne s'etire
     dessus, donc elle a exactement sa hauteur et le bouton S'abonner, pousse
     en bas, tombe pile au bas du lecteur. */
  .bloc-suite{grid-column:2;grid-row:2/4;align-self:stretch;display:flex;flex-direction:column}
  .bloc-suite .abonnement-antenne{margin-top:auto}
  .a-suivre{list-style:none}
  .a-suivre-titre{
    font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--or);margin-bottom:16px;
  }
  .a-suivre li{
    display:flex;gap:14px;align-items:flex-start;
    padding:13px 0;border-top:1px solid rgba(var(--clair-rgb),.07);
    font-size:13.4px;line-height:1.55;color:var(--texte-clair);
  }
  .a-suivre li b{flex:none;color:var(--or);font:400 12.5px/1.5 Georgia,serif;letter-spacing:1px}
  /* s'abonner sans avoir a descendre la page, juste sous le lecteur */
  .abonnement-antenne{
    display:block;width:max-content;max-width:100%;margin:26px auto 0;
    text-align:center;text-decoration:none;
  }
  .note-antenne{
    margin-top:10px;font-size:12px;line-height:1.55;color:var(--texte-doux);text-align:center;
  }
  @media(max-width:900px){
    /* partager la radio depuis la page, sans quitter l'antenne */
  .partage{display:inline-flex;align-items:center;gap:10px}
  .partage-mot{font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--or)}
  .partage-lien{
    display:grid;place-items:center;width:37px;height:37px;padding:0;
    border:1px solid rgba(var(--clair-rgb),.12);border-radius:50%;background:transparent;
    color:var(--texte-doux);cursor:pointer;transition:color .2s ease,border-color .2s ease;
  }
  .partage-lien:hover{color:var(--or-clair);border-color:rgba(var(--or-rgb),.55)}
  .partage-lien svg{width:13px;height:13px;fill:currentColor}
  .partage-fait{font-size:11px;letter-spacing:1.4px;color:var(--or)}

  /* Les deux voix de l'antenne. Memes portraits que l'Academie et le magazine :
     un visiteur qui passe d'un site a l'autre reconnait les memes personnes. */
  .voix{display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:1fr 1fr;max-width:900px;margin:0 auto}
  .voix article{display:flex;gap:20px;align-items:flex-start;text-align:left}
  .voix .portrait{
    width:96px;height:96px;flex:none;border-radius:50%;overflow:hidden;
    border:1px solid rgba(var(--or-rgb),.45);background:var(--noir-nuit);
  }
  .voix .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
  .voix b{display:block;font:400 19px/1.2 Georgia,serif;margin-bottom:5px}
  .voix .role{
    display:block;font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;
    color:var(--or);margin-bottom:10px;
  }
  .voix p{font-size:13.5px;line-height:1.65;color:var(--texte-doux)}
  @media(max-width:760px){.voix{grid-template-columns:1fr}}

  /* La grille du jour en carrousel : on voit les visages et les sujets defiler,
     et chaque carte lance son emission tout de suite. */
  .grille-tete{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    max-width:1180px;margin:0 auto 16px;padding:0 4px;
  }
  .grille-tete b{font:400 15px/1 Georgia,serif;letter-spacing:.6px;text-transform:capitalize}
  .grille-tete span{font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--texte-fer)}
  .carrousel{
    display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;
    scroll-snap-type:x mandatory;padding:4px 4px 18px;max-width:1180px;margin:0 auto;
    scrollbar-width:thin;scrollbar-color:rgba(var(--or-rgb),.5) transparent;
  }
  .carrousel::-webkit-scrollbar{height:6px}
  .carrousel::-webkit-scrollbar-thumb{background:rgba(var(--or-rgb),.45);border-radius:3px}
  .prog{
    flex:none;width:236px;scroll-snap-align:start;cursor:pointer;text-align:left;
    border:1px solid rgba(var(--clair-rgb),.08);border-radius:4px;overflow:hidden;
    background:rgba(var(--clair-rgb),.02);color:inherit;padding:0;
    transition:border-color .25s ease,transform .25s ease;
  }
  .prog:hover{border-color:rgba(var(--or-rgb),.55);transform:translateY(-3px)}
  .prog-vignette{position:relative;aspect-ratio:16/9;background:var(--noir-profond);overflow:hidden}
  .prog-vignette img{width:100%;height:100%;object-fit:cover;display:block}
  .prog-heure{
    position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:999px;
    background:rgba(var(--noir-rgb),.85);color:var(--or-clair);
    font:400 12px/1 Georgia,serif;letter-spacing:1px;
  }
  .prog-duree{
    position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:3px;
    background:rgba(var(--noir-rgb),.85);color:var(--texte-clair);font-size:10.5px;letter-spacing:.6px;
  }
  .prog-lire{
    position:absolute;inset:0;display:grid;place-items:center;opacity:0;
    background:rgba(var(--noir-rgb),.5);transition:opacity .25s ease;
  }
  .prog-lire i{
    width:42px;height:42px;border-radius:50%;border:1px solid var(--or);
    display:grid;place-items:center;background:rgba(var(--noir-rgb),.7);
  }
  .prog-lire i::before{
    content:"";border-left:11px solid var(--or-clair);
    border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px;
  }
  .prog:hover .prog-lire{opacity:1}
  .prog-titre{
    display:block;padding:12px 13px 14px;font-size:13.2px;line-height:1.45;color:var(--texte-clair);
  }
  .prog.actuel{border-color:var(--or)}
  .prog.actuel .prog-titre{color:var(--texte)}
  .prog.actuel .prog-heure{background:var(--or);color:var(--sur-or)}
  /* On regarde une emission choisie : l'antenne reprend d'un clic. */
  .ligne-direct{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;margin-bottom:14px}
  .ligne-direct .en-direct{display:inline-flex;align-items:center;margin-bottom:0}
  .en-direct.replay{border-color:rgba(var(--or-rgb),.55);color:var(--or-clair)}
  .en-direct.replay i{background:var(--or);animation:none}
  /* Pas de second style pour .retour-antenne ici : cette redeclaration donnait
     au meme bouton une pilule doree au-dessus de 900 px et une pilule creuse en
     dessous. Un seul bouton, une seule apparence, celle du haut du fichier. */
  .retour-antenne.visible{display:inline-flex}
  .retour-antenne:hover{filter:brightness(1.08)}

  .colonnes-antenne{grid-template-columns:1fr;gap:0}
    .tete-antenne,.bloc-lecteur,.bloc-chrono,.bloc-suite{grid-area:auto}
    .bloc-suite{margin-top:34px}
  }

  /* ---------- sections ---------- */
  section.bande{
    position:relative;z-index:2;
    padding:clamp(72px,8vw,116px) clamp(28px,5vw,80px);
    border-top:1px solid rgba(var(--clair-rgb),.06);
  }
  section.or{border-top-color:rgba(var(--or-rgb),.14)}


  /* ---------- la grille du jour ---------- */
  .grille-cadre{
    max-width:980px;margin:0 auto;
    border:1px solid rgba(var(--clair-rgb),.08);border-radius:4px;
    background:linear-gradient(160deg,rgba(var(--clair-rgb),.03),transparent);
    overflow:hidden;
  }
  .grille-tete{
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding:18px 26px;border-bottom:1px solid rgba(var(--clair-rgb),.08);
  }
  .grille-tete b{font:400 17px/1 Georgia,serif}
  .grille-tete span{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--texte-gris)}
  .grille-liste{list-style:none;max-height:520px;overflow-y:auto}
  .grille-liste li{
    display:grid;grid-template-columns:74px 1fr auto;gap:16px;align-items:center;
    padding:13px 26px;border-top:1px solid rgba(var(--clair-rgb),.05);
    font-size:13.6px;color:var(--texte-etain);
  }
  .grille-liste li:first-child{border-top:none}
  .grille-liste li b{font:400 13px/1 Georgia,serif;color:var(--texte-schiste);letter-spacing:1px}
  .grille-liste li .combien{font-size:11.5px;color:var(--texte-fer);letter-spacing:.6px}
  .grille-liste li.actuel{background:rgba(var(--or-rgb),.07);color:var(--texte)}
  .grille-liste li.actuel b{color:var(--or-clair)}
  .grille-liste li.actuel .quoi{position:relative;padding-left:16px}
  .grille-liste li.actuel .quoi::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:6px;height:6px;border-radius:50%;background:var(--rouge);
    box-shadow:0 0 8px var(--rouge);animation:battement 1.8s ease-in-out infinite;
  }
  @media(max-width:640px){
    .grille-liste li{grid-template-columns:60px 1fr;padding:12px 18px}
    .grille-liste li .combien{display:none}
  }

  /* ---------- emissions phares ---------- */
  .emissions{
    display:grid;gap:20px;max-width:1180px;margin:0 auto;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  }
  .emission{
    position:relative;overflow:hidden;display:flex;flex-direction:column;
    padding:0 26px 24px;text-decoration:none;color:inherit;
    border:1px solid rgba(var(--clair-rgb),.08);border-radius:3px;
    background:linear-gradient(150deg,rgba(var(--clair-rgb),.032),rgba(var(--clair-rgb),.006) 50%,transparent);
    transition:border-color .4s ease,transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .emission::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;
    background:linear-gradient(90deg,var(--or-clair),var(--or) 40%,transparent);
    transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1);
  }
  .emission:hover{border-color:rgba(var(--or-rgb),.34);transform:translateY(-5px)}
  .emission:hover::after{transform:scaleX(1)}

  .emission:hover .vignette img,.marque-carte:hover .vignette img{filter:saturate(1) brightness(.9) contrast(1.02) sepia(0);transform:scale(1.07)}
  .jouer-mini{
    position:absolute;left:26px;bottom:16px;z-index:2;
    width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
    background:rgba(var(--noir-rgb),.72);backdrop-filter:blur(6px);
    border:1px solid rgba(var(--or-rgb),.5);transition:background .3s ease;
  }
  .emission:hover .jouer-mini{background:linear-gradient(120deg,var(--or-tendre),var(--or))}
  .jouer-mini svg{width:13px;height:13px;fill:var(--or-clair);margin-left:2px}
  .emission:hover .jouer-mini svg{fill:var(--sur-or)}
  .duree{position:absolute;right:26px;bottom:20px;z-index:2;font-size:11.5px;letter-spacing:1.4px;color:var(--texte-clair)}

  .meta-emission{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:13px}
  .meta-emission span{
    padding:4px 11px;border:1px solid rgba(var(--clair-rgb),.12);border-radius:999px;
    font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--texte-pale);
  }
  .meta-emission span.serie{border-color:rgba(var(--or-rgb),.4);color:var(--or-clair)}
  .emission h3{font:400 20px/1.32 Georgia,"Times New Roman",serif;margin-bottom:10px}
  .emission p{font-size:13.6px;line-height:1.68;color:var(--texte-doux);flex:1;margin-bottom:16px}
  .invite{display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid rgba(var(--clair-rgb),.07)}
  .invite i{
    display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
    background:linear-gradient(140deg,rgba(var(--or-clair-rgb),.9),rgba(var(--or-rgb),.7));
    color:var(--sur-or);font:600 11px/1 "Segoe UI",sans-serif;font-style:normal;
  }
  .invite b{font-size:12.8px;font-weight:600}
  .invite span{display:block;font-size:11px;color:var(--texte-doux)}


  /* ---------- ou ecouter ---------- */
  .grille-plateformes{
    display:grid;gap:14px;max-width:840px;margin:0 auto;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  }
  .plateforme{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    padding:28px 18px;text-decoration:none;color:inherit;
    border:1px solid rgba(var(--clair-rgb),.08);border-radius:3px;
    background:linear-gradient(165deg,rgba(var(--clair-rgb),.03),transparent);
    transition:border-color .35s ease,transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .plateforme:hover{border-color:rgba(var(--or-rgb),.4);transform:translateY(-4px)}
  .plateforme svg{width:26px;height:26px;fill:var(--or)}
  .plateforme b{font-size:14px;font-weight:600}
  .plateforme span{font-size:11.5px;color:var(--texte-doux);text-align:center}

  /* ---------- ecosysteme ---------- */
  .trois-marques{
    display:grid;gap:20px;max-width:1180px;margin:0 auto;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  }
  .marque-carte.ici{border-color:rgba(var(--or-rgb),.42)}
  .ici-badge{
    position:absolute;right:18px;top:16px;z-index:3;
    padding:5px 12px;border-radius:999px;
    background:linear-gradient(120deg,var(--or-tendre),var(--or) 55%,var(--or-bronze));
    color:var(--sur-or);font:600 9.5px/1 "Segoe UI",sans-serif;letter-spacing:1.8px;text-transform:uppercase;
  }

  /* ---------- final ---------- */
  /* Un seul appel, sobre : la radio sert la credibilite, pas la prospection.
     Pas de display ici : .bouton-or du socle est en inline-flex pour centrer
     son texte, un inline-block local le remettait en haut de la pilule. */
  .bouton-mandat{position:relative;text-decoration:none}

  /* ---------- pied ---------- */
  /* La reserve a droite est la place du bouton « revenir en haut » : il est en
     position fixe, et arrive en bas de page il recouvrait la fin du lien de
     confidentialite (44 px de bouton + sa marge). */
  .lien-stats{
    display:grid;place-items:center;width:26px;height:26px;border-radius:6px;
    border:1px solid rgba(var(--clair-rgb),.1);color:var(--texte-sourd);
    transition:color .25s ease,border-color .25s ease;
  }
  .lien-stats:hover{color:var(--or);border-color:rgba(var(--or-rgb),.45)}
  .lien-stats svg{width:14px;height:14px;fill:currentColor}

  /* Bouton commun aux trois sites publics, copie de
     _SHARED/web/css/menu-telephone.css. Toute retouche se fait la-bas d'abord. */

  @media(max-width:900px){
    nav a:last-child{border-bottom:none}
  }
  @media(max-width:520px){.pied-haut{grid-template-columns:1fr}}

  /* ---------- une page de texte (confidentialite, mentions) ----------
     Elle avait ses propres styles en ligne : elle est desormais habillee comme le
     reste du site, seul son contenu lui appartient. */
  .bande.sombre{padding:clamp(48px,6vw,86px) clamp(28px,5vw,80px)}
  .page-texte{max-width:760px;margin:0 auto}
  .page-texte .surtitre{margin-bottom:12px}
  .page-texte h1{font:400 clamp(28px,3.6vw,45px)/1.15 Georgia,"Times New Roman",serif;margin-bottom:10px}
  .page-texte .maj{font-size:12.5px;color:var(--texte-doux);margin-bottom:38px}
  .page-texte h2{font:400 clamp(21px,2.4vw,27px)/1.25 Georgia,serif;margin:34px 0 12px;color:var(--or-clair)}
  .page-texte p{font-size:14.5px;line-height:1.72;color:var(--texte-clair);margin-bottom:14px}
  .page-texte ul{margin:0 0 16px 20px}
  .page-texte li{font-size:14.5px;line-height:1.72;color:var(--texte-clair);margin-bottom:9px}
  .page-texte a{color:var(--or-clair)}