/* LRI — feuille de style du site public */
:root{
  --ink:#17181C; --bg:#FFFFFF; --panel:#F5F4F0; --line:#E4E3DD;
  --yel:#FFC400; --live:#DC4030; --dim:#6C6F77; --bar:#17181C;
  --or:#8A6100; --fuchsia:#E51078; --anthracite:#2B2D34;
  --pad:clamp(1.1rem,4vw,3rem);
  --rythme:clamp(1.6rem,3.5vw,2.2rem);
}
*{box-sizing:border-box}
/* Le reset img{display:block} ci-dessous prend le pas sur la règle navigateur
   [hidden]{display:none}. On la rétablit explicitement, sinon un élément
   masqué en JS reste visible. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Poppins",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding-bottom:84px; /* place pour le lecteur fixe */
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
/* Le soulignement au survol est remplacé plus bas par un changement de
   couleur : voir « LIENS — survol sans soulignement ». */
a:hover{text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:3px solid var(--yel); outline-offset:2px; border-radius:4px}
/* défini plus bas, avec .sans-image */
.mono,.carte-meta,.meta,.canaux{font-family:"Poppins",ui-monospace,monospace}

/* ---------- en-tête ---------- */
.entete{display:flex; align-items:center; gap:1.4rem; padding:1rem var(--pad); border-bottom:1px solid var(--line)}
.logo{display:flex; align-items:center; gap:.6rem; color:var(--ink)}
.logo:hover{text-decoration:none}
.logo-txt{display:flex; flex-direction:column; line-height:1.05}
.logo-txt b{font-weight:800; font-size:1.15rem; letter-spacing:-.02em}
.logo-txt small{font-size:.54rem; letter-spacing:.13em; color:var(--dim); font-weight:600}
.entete nav{flex:1}
.entete nav ul{display:flex; gap:1.15rem; list-style:none; margin:0; padding:0; font-size:.9rem; font-weight:600; color:var(--dim); white-space:nowrap}
.entete nav a[aria-current="page"]{color:var(--ink)}
.btn-direct{display:flex; align-items:center; gap:.55rem; background:var(--ink); color:#fff; border-radius:99px; padding:.55rem 1.15rem; font-weight:700; font-size:.88rem}
.pastille{width:.45rem; height:.45rem; border-radius:50%; background:var(--live); box-shadow:0 0 0 3px rgba(220,64,48,.25); flex:none}

/* ---------- une ---------- */
.une.sans-une{grid-template-columns:1fr}
.une{display:grid; grid-template-columns:1fr 360px; gap:1.5rem; padding:var(--rythme) var(--pad) 0}
.une-podcast{display:grid; grid-template-columns:260px 1fr; gap:1.4rem; align-items:start; background:var(--panel); border-radius:14px; padding:1.4rem}

/* Cadre strictement carré, quelles que soient les proportions du fichier.
   « aspect-ratio » impose la forme, « align-self:start » empêche la grille
   de l'étirer à la hauteur du texte — sans quoi une image en hauteur
   dicterait la sienne et laisserait du vide sur les côtés. */
.une-visuel{
  aspect-ratio:1/1; width:100%; align-self:start;
  border-radius:10px; overflow:hidden; background:var(--bg);
}
/* « cover » recadre, il ne déforme pas : l'image déborde du cadre et on en
   garde le centre. C'est ce qui garantit qu'aucun vide n'apparaisse. */
.une-cov{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;
}
.etiquette{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--or); margin:0 0 .5rem}
.une-corps h1{font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:800; line-height:1.14; letter-spacing:-.03em; margin:0 0 .5rem; text-wrap:balance}
.chapo{font-size:.95rem; color:var(--dim); margin:0 0 .9rem; max-width:56ch}
.meta{font-size:.78rem; color:var(--dim); margin:0 0 1.1rem}
.une-actions{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-top:1.1rem}
.btn-suite{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--line); border-radius:99px;
  padding:.55rem 1.15rem; font-weight:700; font-size:.9rem;
  text-decoration:none; color:var(--ink); background:var(--bg);
  transition:border-color .16s ease, background .16s ease, transform .15s ease;
}
.btn-suite:hover{border-color:var(--ink); background:var(--panel)}
.btn-suite:active{transform:scale(.97)}
.btn-suite svg{transition:transform .18s ease}
.btn-suite:hover svg{transform:translateX(3px)}
.btn-ecouter{display:inline-flex; align-items:center; gap:.7rem; background:var(--ink); color:#fff; border-radius:99px; padding:.5rem 1.3rem .5rem .5rem; font-weight:700; font-size:.92rem}
.rond{width:34px; height:34px; border-radius:50%; background:var(--yel); color:var(--ink); display:flex; align-items:center; justify-content:center; flex:none}

.bloc-direct{background:var(--ink); color:#fff; border-radius:14px; padding:1.3rem 1.4rem; display:flex; flex-direction:column}
.etiquette-direct{display:flex; align-items:center; gap:.5rem; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--yel); margin:0 0 .8rem}
.bloc-direct h2{font-size:1.2rem; font-weight:700; line-height:1.25; margin:0 0 .3rem}
.direct-sous{font-size:.85rem; opacity:.66; margin:0 0 .5rem}
.onde{display:flex; align-items:flex-end; gap:2px; height:34px; margin:.9rem 0 1.1rem}
.onde i{flex:1; background:var(--yel); border-radius:1px; opacity:.45}
.btn-direct-large{display:flex; align-items:center; justify-content:center; gap:.6rem; background:var(--yel); color:var(--ink); border-radius:99px; padding:.6rem; font-weight:700; font-size:.9rem; margin-top:auto; width:100%}
.canaux{font-size:.72rem; opacity:.55; margin:.7rem 0 0; text-align:center}

/* ---------- blocs ---------- */
.bloc{padding:var(--rythme) var(--pad) 0}
.bloc-tete{display:flex; align-items:baseline; gap:1rem; margin-bottom:1rem}
.bloc-tete h2{font-size:1.35rem; font-weight:800; letter-spacing:-.025em; margin:0}
.bloc-tete a{margin-left:auto; font-size:.85rem; font-weight:700; color:var(--dim)}
.grille-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem}
@media (max-width:1080px){ .grille-4{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){  .grille-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){  .grille-4{grid-template-columns:1fr} }
/* Les partenaires ont leur propre grille : cinq par ligne, et un cadre
   toujours carré. Des logos de proportions très différentes — un rond, une
   bannière large — ne s'alignent que si la boîte qui les contient, elle, ne
   change jamais de forme. */
/* Sept par ligne sur grand écran : ce sont des logos, pas des illustrations,
   et à cinq ils prenaient la place d'une galerie. Jamais moins de trois, même
   sur le plus petit écran — un logo par ligne n'aurait aucun sens. */
.grille-partenaires{grid-template-columns:repeat(7,minmax(0,1fr)); gap:.9rem}
@media (max-width:1200px){ .grille-partenaires{grid-template-columns:repeat(6,minmax(0,1fr))} }
@media (max-width:1080px){ .grille-partenaires{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (max-width:820px){  .grille-partenaires{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:640px){  .grille-partenaires{grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem} }
/* Le nom sous le logo se réduit avec lui : à sept colonnes, il déborderait. */
@media (max-width:1080px){ .partenaire span{font-size:.78rem} }
@media (max-width:640px){  .partenaire span{font-size:.68rem; line-height:1.25} }
.grille-partenaires .partenaire-logo{padding:.7rem}
.carte{border:1px solid var(--line); border-radius:12px; overflow:hidden}
.carte-art{aspect-ratio:16/10; position:relative; background-size:cover; background-position:center; display:block; overflow:hidden}
.carte-art img{width:100%; height:100%; object-fit:cover; display:block}
.carte{position:relative}
.carte-corps h3 a{color:inherit; text-decoration:none}
.carte-corps h3 a:hover{color:var(--or)}
.carte-pl{position:absolute; right:.6rem; bottom:.6rem; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.94); color:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.2)}
.carte-corps{padding:.85rem .95rem 1rem}
.carte-tag{color:var(--or); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; display:block; margin-bottom:.35rem}
.carte-corps h3{font-size:.95rem; font-weight:700; line-height:1.3; margin:0 0 .4rem}
.carte-meta{font-size:.75rem; color:var(--dim); margin:0}

/* ---------- vidéo + événement ---------- */
.duo{display:grid; grid-template-columns:1.55fr 1fr; gap:1.2rem; align-items:start; padding:var(--rythme) var(--pad) 0}
.video{border:1px solid var(--line); border-radius:14px; overflow:hidden}
.video-ecran{aspect-ratio:16/9; max-height:340px; display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center}
.video-pl{width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.94); color:var(--ink); display:flex; align-items:center; justify-content:center}
.video-corps{padding:1rem 1.2rem 1.2rem}
.video-corps h3{font-size:1.15rem; font-weight:700; line-height:1.25; margin:.3rem 0 .3rem}
.evt{border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.3rem; display:flex; flex-direction:column}
.evt-date{display:flex; align-items:baseline; gap:.5rem; margin:.6rem 0 .5rem}
.evt-date .jj{font-size:2.6rem; font-weight:800; letter-spacing:-.04em; line-height:1}
.evt-date .mm{font-size:.95rem; font-weight:700; color:var(--dim)}
.evt h3{font-size:1.15rem; font-weight:700; line-height:1.25; margin:0 0 .35rem}
.evt-lieu{font-size:.85rem; color:var(--dim); margin:0 0 1rem}
.evt-plus{margin-top:auto; font-size:.85rem; font-weight:700; color:var(--or)}

/* ---------- thématiques ---------- */
.themes{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem; padding:var(--rythme) var(--pad) 0}
.themes a{background:var(--panel); border-radius:11px; padding:.95rem .9rem 1rem}
.themes a:hover{text-decoration:none; background:#EDEBE4}
.themes b{display:block; font-size:.93rem; font-weight:700; margin-bottom:.15rem}
.themes span{font-size:.72rem; color:var(--dim);}

/* ---------- bouton d'appel à l'action, en fin de fiche ---------- */
/* Il ferme un texte : d'où la marge au-dessus, plus généreuse que celle qui
   sépare deux paragraphes, pour qu'on le lise comme une suite et non comme
   une ligne de plus. */
.bloc-bouton{margin:1.8rem 0 0}
.bouton-action{
  display:inline-block; background:var(--ink); color:#fff;
  font-weight:700; font-size:.92rem; line-height:1.2;
  padding:.85rem 1.6rem; border-radius:99px;
  transition:background .18s ease, transform .18s ease;
}
.bouton-action:hover{background:var(--fuchsia); transform:translateY(-1px)}
.bouton-action:active{transform:none}

/* ---------- portes d'entrée (page Emploi) ---------- */
/* Trois cartes qui doivent donner envie d'entrer. L'icône ouvre, le titre
   annonce, le chiffre rassure, la flèche invite. Au survol, la carte passe
   en noir : l'inversion complète se remarque mieux qu'un simple ombrage,
   et reprend le code du menu actif. */
.porte{
  position:relative; display:flex; flex-direction:column; gap:.55rem;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:1.5rem 1.4rem 1.2rem; color:inherit; overflow:hidden;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.porte:hover{background:var(--ink); border-color:var(--ink); transform:translateY(-3px)}

.porte-icone{display:block; color:var(--ink); transition:color .22s ease, transform .3s cubic-bezier(.22,.9,.3,1)}
.porte-icone .icone-theme{width:30px; height:30px}
.porte:hover .porte-icone{color:var(--yel); transform:translateY(-2px) scale(1.08)}

.porte-tete{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.porte-tete b{font-size:1.05rem; font-weight:700; line-height:1.25; transition:color .22s ease}
.porte:hover .porte-tete b{color:#fff}

/* Le compteur, juste derrière le titre. */
.porte-compte{
  flex:none; min-width:1.6rem; text-align:center;
  background:var(--yel); color:var(--ink);
  font-size:.78rem; font-weight:800; line-height:1;
  padding:.28rem .5rem; border-radius:99px;
  transition:background .22s ease, color .22s ease;
}
.porte:hover .porte-compte{background:var(--fuchsia); color:#fff}

.porte-texte{font-size:.9rem; color:var(--dim); line-height:1.5; transition:color .22s ease}
.porte:hover .porte-texte{color:rgba(255,255,255,.72)}

.porte-pied{
  display:flex; align-items:center; gap:.4rem; margin-top:.35rem;
  font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim); transition:color .22s ease;
}
.porte-pied svg{transition:transform .22s ease}
.porte:hover .porte-pied{color:var(--yel)}
.porte:hover .porte-pied svg{transform:translateX(4px)}

/* ---------- blocs de texte en colonnes ---------- */
/* Une mesure courte se lit sans effort ; une ligne qui traverse un écran de
   bureau oblige l'œil à chercher le début de la suivante. Deux ou trois
   colonnes, selon le nombre de blocs — jamais une seule, ce serait revenir
   au pavé qu'on veut éviter. */
.blocs-pro{
  display:grid; gap:1.6rem 2.4rem;
  margin:0 0 var(--rythme);
}
.blocs-pro[data-colonnes="2"]{grid-template-columns:repeat(2, minmax(0,1fr))}
.blocs-pro[data-colonnes="3"]{grid-template-columns:repeat(3, minmax(0,1fr))}
.bloc-pro h3{
  margin:0 0 .5rem; font-size:1.02rem; font-weight:800; line-height:1.25;
}
.bloc-pro p{margin:0 0 .7rem; color:var(--dim); line-height:1.6; font-size:.94rem}
.bloc-pro p:last-child{margin-bottom:0}
@media (max-width:900px){
  .blocs-pro[data-colonnes="3"]{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:620px){
  .blocs-pro[data-colonnes="2"], .blocs-pro[data-colonnes="3"]{grid-template-columns:1fr}
}

/* ---------- sous-menu d'une page longue ---------- */
/* Il colle sous l'en-tête : sur une page qui rassemble quatre sujets, savoir
   où l'on est vaut mieux que de remonter pour le vérifier. */
/* Barre rose : le sous-menu double le menu principal, en jaune juste
   au-dessus. Le rose de la marque les sépare franchement — deux barres
   claires l'une sur l'autre se confondaient. */
/* Bandeau noir sur toute la largeur de la fenêtre. La page est bornée par
   une gouttière ; le bandeau la déborde des deux côtés pour rejoindre les
   bords, sans quoi il flotterait au milieu comme une carte. */
.sous-menu{
  position:sticky; top:var(--h-entete, 64px); z-index:20;
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  /* Placé avant la section, donc hors de sa gouttière : plus de marges
     négatives à compenser, la barre part des deux bords d'elle-même et se
     colle sous le menu principal. */
  margin:0;
  padding:.6rem var(--pad);
  background:var(--fuchsia); border-radius:0; border:0;
}
.sous-menu a, .sous-menu-action{
  font-size:.86rem; font-weight:600; color:rgba(255,255,255,.82);
  padding:.45rem .9rem; border-radius:99px; border:1px solid transparent;
  transition:color .18s ease, background .18s ease, border-color .18s ease;
}
.sous-menu a:hover{color:#fff; background:rgba(255,255,255,.16)}
/* Le bouton d'action garde le jaune : sur fond rose, c'est la seule couleur
   de la charte qui ressorte sans crier. */
.sous-menu-action{
  margin-left:auto; background:var(--yel); color:var(--ink); border-color:var(--yel); cursor:pointer;
}
.sous-menu-action:hover{background:var(--ink); border-color:var(--ink); color:#fff}
@media (max-width:640px){
  .sous-menu{gap:.3rem; padding:.55rem 0}
  .sous-menu a, .sous-menu-action{font-size:.8rem; padding:.4rem .7rem}
  .sous-menu-action{margin-left:0; width:100%; text-align:center; margin-top:.3rem}
}
/* Une ancre visée depuis le sous-menu ne doit pas se ranger sous lui. */
[id="thematiques"], [id="formats"], [id="chiffres"], [id="tarifs"]{
  scroll-margin-top:calc(var(--h-entete, 64px) + 4.5rem);
}

/* ---------- fenêtre de demande ---------- */
.fenetre-pro[hidden]{display:none}
.fenetre-pro{position:fixed; inset:0; z-index:120; display:flex; align-items:flex-start; justify-content:center; padding:5vh 1rem}
.fenetre-pro-fond{position:absolute; inset:0; background:rgba(17,18,22,.62)}
body.fenetre-ouverte{overflow:hidden}
.fenetre-pro-boite{
  position:relative; background:var(--bg); border-radius:18px; width:min(760px, 100%);
  max-height:90vh; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.fenetre-pro-tete{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.4rem; border-bottom:1px solid var(--line);
}
.fenetre-pro-tete h2{margin:0; font-size:1.25rem}
.fenetre-pro-fermer{font-size:1.6rem; line-height:1; color:var(--dim); padding:0 .3rem}
.fenetre-pro-fermer:hover{color:var(--ink)}
.fenetre-pro-corps{overflow:auto; padding:1.2rem 1.4rem 1.6rem}

/* ---------- une de liste ---------- */
/* Un bloc large en tête de grille. Deux colonnes inégales : l'image mène,
   le texte suit. Le fond clair et les angles arrondis le détachent des
   cartes sans le charger d'un cadre de plus. */
.une-liste{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  background:var(--panel); border-radius:16px; overflow:hidden;
  margin-bottom:var(--rythme);
}
.une-liste-media{position:relative; min-width:0}
/* Le max-height de l'accueil rétrécirait la LARGEUR ici : avec aspect-ratio,
   brider la hauteur bride les deux côtés. On le lève pour ce bloc. */
/* Une règle plus bas fixe une hauteur à .video-ecran pour l'accueil ; ici on
   veut le même cadrage 16/9 que la pochette d'un podcast, les deux blocs
   occupant la même place en tête de liste. */
.une-liste .video-ecran{max-height:none; width:100%; height:auto; aspect-ratio:16/9}
.une-liste-cov{display:block; aspect-ratio:16/9; background:var(--line); overflow:hidden}
.une-liste-cov img{width:100%; height:100%; object-fit:cover}
.une-liste-pl{
  position:absolute; left:1rem; bottom:1rem;
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.22); transition:transform .18s ease;
}
.une-liste-pl:hover{transform:scale(1.06)}
.une-liste-pl .ic-pause{display:none}
.une-liste-pl.joue .ic-play{display:none}
.une-liste-pl.joue .ic-pause{display:block}
.une-liste-corps{
  display:flex; flex-direction:column; justify-content:center;
  gap:.5rem; padding:1.6rem 1.8rem;
}
.une-liste-corps h2{font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.15; margin:0}
.une-liste-corps h2 a:hover{color:var(--fuchsia)}
.une-liste-texte{margin:0; color:var(--dim); line-height:1.55}
.une-liste-corps .carte-meta{margin:0}
.une-liste-action{margin:.6rem 0 0}
.une-liste-action .bouton-action{padding:.7rem 1.4rem; font-size:.88rem}
@media (max-width:820px){
  .une-liste{grid-template-columns:1fr}
  .une-liste-corps{padding:1.1rem 1.2rem 1.4rem}
}

/* ---------- partage ---------- */
/* Discret par nature : on partage après avoir lu, pas avant. D'où le gris,
   la petite taille, et le trait qui sépare du texte sans faire de bloc. */
.partage{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
  margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid var(--line);
}
.partage-titre{font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-right:.3rem}
.partage-lien{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.85rem; font-weight:600; color:var(--dim);
  border:1px solid var(--line); border-radius:99px; padding:.45rem .9rem;
  background:none; transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.partage-lien svg{flex:none}
.partage-lien:hover{color:var(--ink); border-color:var(--ink); background:var(--panel)}
.partage-lien.copie{color:#1B7F4B; border-color:#1B7F4B}

/* ---------- partenaires ---------- */
.partenaires{display:flex; align-items:center; gap:1.8rem; flex-wrap:wrap; padding:1.6rem var(--pad); margin-top:var(--rythme); border-top:1px solid var(--line)}
.partenaires .etiquette{margin:0; color:var(--dim)}
.part-nom{font-weight:700; color:var(--dim)}
.part-cta{margin-left:auto; font-size:.85rem; font-weight:700; color:var(--or)}

/* ---------- pied ---------- */
/* ── Pied de page ────────────────────────────────────────────
   Une marge haute généreuse : le contenu ne doit jamais sembler
   collé au pied. La barre du lecteur ajoute encore sa hauteur. */
.pied{
  margin-top:4.5rem; padding:2.8rem var(--pad) 1.4rem;
  border-top:1px solid var(--line); background:var(--panel);
  color:var(--dim); font-size:.88rem;
}
.pied-cols{
  display:grid; gap:2rem;
  grid-template-columns:minmax(0,1.6fr) repeat(3, minmax(0,1fr));
  max-width:1180px; margin:0 auto;
}
.pied-marque p{margin:.6rem 0 0; line-height:1.5}
.pied-marque b{color:var(--ink); font-weight:800; font-size:1.05rem}
.pied-marque svg{color:var(--ink)}
.pied-canaux{font-size:.74rem}
.pied-ligne{font-style:italic}
.pied nav{display:flex; flex-direction:column; gap:.5rem}
.pied nav h2{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); font-weight:700; margin:0 0 .3rem;
}
.pied nav a{color:var(--dim); text-decoration:none; transition:color .15s ease}
.pied nav a:hover{color:var(--ink)}
.pied-bas{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  max-width:1180px; margin:2.4rem auto 0; padding-top:1.1rem;
  border-top:1px solid var(--line); font-size:.78rem;
}
.pied-bas p{margin:0}
.pied .version{font-size:.7rem; opacity:.55; margin:0}

/* La barre du lecteur ne doit jamais recouvrir la fin du pied. */
body{padding-bottom:76px}

@media (max-width:860px){
  .pied-cols{grid-template-columns:1fr 1fr}
  .pied-marque{grid-column:1 / -1}
}
@media (max-width:520px){
  .pied-cols{grid-template-columns:1fr}
}

/* ── Icônes de thématique ──────────────────────────────────── */
.icone-theme{flex:none; color:#9A6B00; opacity:.9}
.tuile-icone{display:flex; flex-direction:column; align-items:flex-start; gap:.15rem}
.tuile-icone .icone-theme{margin-bottom:.5rem; transition:transform .25s cubic-bezier(.22,.9,.3,1)}
.tuile-icone:hover .icone-theme{transform:translateY(-2px) scale(1.06)}
.tuile-sombre .icone-theme{color:var(--yel)}
.titre-icone{display:flex; align-items:center; gap:.7rem}
.titre-icone .icone-theme{width:30px; height:30px}

/* ---------- LECTEUR PERSISTANT ---------- */
.lecteur{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; align-items:center; gap:1rem;
  background:var(--bar); color:#fff; padding:.7rem var(--pad);
  border-top:1px solid rgba(255,255,255,.10);
}
.lecteur[hidden]{display:none}
.lecteur-cov{width:44px; height:44px; border-radius:7px; object-fit:cover; flex:none}
.lecteur-txt{min-width:0; flex:0 1 auto}
.lecteur-titre{font-size:.88rem; font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lecteur-sous{font-size:.72rem; opacity:.6; margin-top:.1rem}
.lecteur.est-direct .lecteur-sous::before{content:"● "; color:var(--live)}
/* Bascule lecture/pause par CLASSE, jamais par l'attribut hidden :
   SVGElement n'expose pas la propriété .hidden, un svg.hidden = true
   ne fait donc strictement rien. */
.lecteur .ic-pause{display:none}
.lecteur.joue .ic-play{display:none}
.lecteur.joue .ic-pause{display:block}
.lecteur-pl{width:42px; height:42px; border-radius:50%; background:var(--yel); color:var(--ink); display:flex; align-items:center; justify-content:center; flex:none}
.lecteur-scrub{flex:1; display:flex; align-items:center; gap:.7rem; font-size:.72rem; opacity:.85; min-width:120px}
.lecteur-scrub[hidden]{display:none}
.lecteur-piste,.lecteur-scrub input[type=range]{flex:1; accent-color:var(--yel); height:4px}
.lecteur-retour{display:flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.22); border-radius:99px; padding:.35rem .8rem; font-size:.74rem; font-weight:600; flex:none}
.lecteur-retour[hidden]{display:none}

/* ---------- petits écrans ---------- */
@media (max-width:900px){
  .une,.duo{grid-template-columns:1fr}
  .une-podcast{grid-template-columns:1fr}
  /* Le carré est conservé, mais borné : plein écran, il mangerait toute la
     page avant le titre. */
  .une-visuel{max-width:300px}
}
@media (max-width:640px){
  .entete{gap:.8rem; flex-wrap:wrap}
  .entete nav{order:3; flex-basis:100%}
  .entete nav ul{gap:1rem; font-size:.86rem; white-space:normal; flex-wrap:wrap}
  .lecteur-scrub{display:none}
  .lecteur-retour{display:none}
  body{padding-bottom:70px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* Conteneur dont l'image est absente : le visuel de remplacement fourni par
   LRI. Il remplace le dégradé et le mot « LRI » incrustés en CSS — une vraie
   image se recadre comme les autres, et surtout elle ne peut pas se poser
   par-dessus des commandes, ce qu'un calque a déjà fait au lecteur.
   Le fond noir garantit qu'aucun bord clair n'apparaisse si le cadre est
   plus large que l'image. */
.sans-image, .placeholder{
  background:#17181C url("/assets/thumb-vide.jpg") center / cover no-repeat;
}

/* ══════════════════════════════════════════════════════════
   PAGES INTÉRIEURES
   ══════════════════════════════════════════════════════════ */

.fil{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  padding:1.1rem var(--pad) 0;
  font-size:.7rem;
  letter-spacing:.06em; color:var(--dim);
}
.fil a{color:var(--dim); text-decoration:none}
.fil a:hover{color:var(--ink)}
.fil [aria-current]{color:var(--ink)}

.bloc h1{font-size:clamp(1.7rem,4vw,2.4rem); font-weight:800; letter-spacing:-.03em; margin:0}
.intro{max-width:60ch; color:var(--dim); font-size:1.05rem; margin:.2rem 0 1.8rem}
.sous-titre{
  font-size:1.15rem; font-weight:800; letter-spacing:-.02em;
  margin:2.4rem 0 1rem; padding-bottom:.5rem; border-bottom:1px solid var(--line);
}
.compte{margin-left:auto; font-size:.78rem; color:var(--dim)}
.vide{color:var(--dim); padding:1.4rem 0; font-style:italic}
.lien-tout{margin-left:auto; font-size:.86rem; font-weight:700; color:var(--dim); text-decoration:none}

/* tuiles de navigation */
.grille-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.tuile{
  display:flex; flex-direction:column; gap:.3rem;
  background:var(--panel); border-radius:14px; padding:1.2rem 1.3rem;
  text-decoration:none; color:inherit; transition:transform .15s ease;
}
.tuile:hover{transform:translateY(-2px)}
.tuile b{font-size:1.05rem; font-weight:700}
.tuile span{font-size:.85rem; color:var(--dim)}
.tuile-sombre{background:var(--ink); color:#fff}
.tuile-sombre span{color:rgba(255,255,255,.6)}

/* fiche : podcast, vidéo, événement */
.fiche{display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:2.2rem; padding:1.6rem var(--pad) 0; align-items:start}

/* Le visuel accompagne la lecture : il reste à l'écran pendant qu'on parcourt
   le texte, et s'arrête naturellement à la fin de l'article.
   « align-self:start » est indispensable : sans lui l'élément est étiré sur
   toute la hauteur de la rangée et n'a plus de course pour coller. */
.fiche-media{
  position:sticky; top:1.5rem; align-self:start;
  aspect-ratio:1; border-radius:16px; overflow:hidden; background:var(--panel);
}
.fiche-media img{width:100%; height:100%; object-fit:cover}
.fiche-corps h1{font-size:clamp(1.6rem,3.6vw,2.3rem); line-height:1.12; margin:.35rem 0 .8rem}
.sur-titre{
  font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:#9A6B00; margin:0;
}
.sur-titre a{color:inherit}
.chapo{font-size:1.08rem; color:var(--dim); line-height:1.55; max-width:60ch; margin:0 0 1rem}
.fiche-meta{font-size:.8rem; color:var(--dim); margin:0 0 1.4rem; line-height:1.7}
.invites{font-family:"Poppins",sans-serif; font-size:.9rem}
.texte{margin-top:1.6rem; max-width:64ch; line-height:1.7; color:var(--ink)}
.bouton-ecoute{
  display:inline-flex; align-items:center; gap:.75rem;
  background:var(--ink); color:#fff; border:0; cursor:pointer; text-decoration:none;
  border-radius:99px; padding:.6rem 1.5rem .6rem .6rem; font-weight:700; font-size:.95rem;
}
.bouton-ecoute .rond{
  width:36px; height:36px; border-radius:50%; background:var(--yel); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}

/* vidéo */
/* La vidéo occupe la même colonne que les images des autres fiches, et colle
   de la même façon : on garde une seule grammaire de page. */
.fiche-video{grid-template-columns:minmax(0,380px) minmax(0,1fr)}
.lecteur-video{
  position:sticky; top:1.5rem; align-self:start;
  border-radius:14px; overflow:hidden; background:#000; aspect-ratio:16/9;
}
.lecteur-video iframe,.lecteur-video video{width:100%; height:100%; border:0; display:block}
.format-video{aspect-ratio:16/9 !important}
.voir-play{
  position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}

/* événements */
.liste-evt{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.evt-ligne{
  display:grid; grid-template-columns:5.5rem minmax(0,1fr) auto; gap:1.4rem; align-items:center;
  padding:1rem .3rem; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit;
}
.evt-ligne:hover{background:var(--panel)}
.evt-date{display:flex; flex-direction:column; line-height:1.1}
.evt-date b{font-size:1.7rem; font-weight:800; letter-spacing:-.03em}
.evt-date span{font-size:.66rem; color:var(--dim)}
.evt-titre{font-weight:700; font-size:1.05rem}
.evt-lieu{font-size:.85rem; color:var(--dim); text-align:right}
.liste-evt-passee .evt-ligne{opacity:.62}

/* la radio */
.chiffres{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.5rem 0 .5rem}
.chiffres div{background:var(--panel); border-radius:14px; padding:1.3rem 1.4rem}
.chiffres b{display:block; font-size:1.9rem; font-weight:800; letter-spacing:-.03em}
.chiffres span{font-size:.85rem; color:var(--dim)}
.membre-photo{aspect-ratio:1; border-radius:14px; overflow:hidden; background:var(--panel); margin-bottom:.7rem}
.membre-photo img{width:100%; height:100%; object-fit:cover}
.membre h3{font-size:1rem; font-weight:700; margin:0}
.membre-role{font-size:.85rem; color:var(--dim); margin:.15rem 0 0}
.partenaire{
  display:flex; flex-direction:column; gap:.6rem; align-items:center; text-align:center;
  background:var(--panel); border-radius:14px; padding:1.2rem; text-decoration:none; color:inherit;
}
.partenaire-logo{height:64px; width:100%; display:flex; align-items:center; justify-content:center}
.partenaire-logo img{max-height:64px; max-width:100%; object-fit:contain}
.partenaire span{font-size:.9rem; font-weight:700}

.bloc-texte{max-width:70ch}

@media (max-width:900px){
  .fiche,.fiche-video{grid-template-columns:1fr; gap:1.4rem}
  /* En une seule colonne, un visuel collant masquerait le texte. */
  .fiche-media,.lecteur-video{position:static; top:auto}
  .grille-3,.chiffres{grid-template-columns:1fr 1fr}
  .evt-ligne{grid-template-columns:4rem minmax(0,1fr); gap:1rem}
  .evt-lieu{display:none}
}
@media (max-width:560px){
  .grille-3,.chiffres{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════
   LECTEUR : visibilité et bascule lecture/pause
   ══════════════════════════════════════════════════════════ */

/* La barre n'apparaît que lorsqu'une source est chargée. On passe par une
   classe et non par [hidden] : Turbo restaure l'attribut depuis son cache
   à chaque navigation, ce qui faisait disparaître la barre en pleine écoute. */
.lecteur{ transform:translateY(110%); transition:transform .32s cubic-bezier(.22,.9,.3,1); }
.lecteur.actif{ transform:translateY(0); }

/* Boutons de piste : l'icône suit l'état réel du son. */
[data-lri-jouer] .ic-pause{ display:none; }
[data-lri-jouer].joue .ic-play{ display:none; }
[data-lri-jouer].joue .ic-pause{ display:block; }
[data-lri-jouer].joue{ background:var(--yel); color:var(--ink); }

/* ══════════════════════════════════════════════════════════
   ANIMATIONS — discrètes, jamais décoratives
   ══════════════════════════════════════════════════════════ */

/* Entrée du contenu à chaque page : une respiration, pas un effet. */
@keyframes lri-entree{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
/* « backwards » et non « both » : une fois l'animation terminée, l'élément
   reprend ses propres styles. Avec « both », une matrice de transformation
   restait appliquée — assez pour que les enfants en position collante
   cessent de coller, la transformation créant un bloc conteneur. */
main > *{ animation:lri-entree .38s cubic-bezier(.22,.9,.3,1) backwards; }
main > *:nth-child(2){ animation-delay:.05s; }
main > *:nth-child(3){ animation-delay:.1s; }

/* Cartes : le survol soulève légèrement et rapproche l'image. */
.carte{ transition:transform .22s ease, box-shadow .22s ease; }
.carte:hover{ transform:translateY(-3px); box-shadow:0 12px 28px -18px rgba(23,24,28,.55); }
.carte-art img{ transition:transform .5s cubic-bezier(.22,.9,.3,1); }
.carte:hover .carte-art img{ transform:scale(1.045); }

/* Le bouton de lecture d'une carte n'apparaît qu'au survol… */
.carte-pl{ opacity:0; transform:translateY(6px) scale(.94); transition:opacity .2s ease, transform .2s ease, background .2s ease; }
.carte:hover .carte-pl,
.carte:focus-within .carte-pl,
.carte-pl.joue{ opacity:1; transform:none; }
/* …sauf sur écran tactile, où il n'y a pas de survol. */
@media (hover:none){ .carte-pl{ opacity:1; transform:none; } }

/* Survol du bouton d'écoute : le jaune de la marque, le triangle en noir.
   Le contraste est franc — on doit voir où on s'apprête à cliquer, y compris
   par-dessus une pochette claire. */
.carte-pl:hover, .une-liste-pl:hover{background:var(--yel); color:var(--ink)}
.carte-pl:hover{transform:scale(1.08)}

/* Liens et boutons : retour tactile bref. */
.bouton-ecoute, .btn-direct, .lecteur-pl, .tuile{ transition:transform .16s ease, box-shadow .2s ease, background .2s ease; }
.bouton-ecoute:active, .btn-direct:active, .lecteur-pl:active{ transform:scale(.96); }

/* Lignes d'événements : glissement à l'approche. */
.evt-ligne{ transition:background .18s ease, padding-left .18s ease; }
.evt-ligne:hover{ padding-left:.9rem; }

/* Le soulignement jaune qui se déployait sous les entrées a été retiré :
   les pastilles portent désormais l'état à elles seules, et le trait faisait
   double marquage sous la pastille noire de la page active. */
.entete nav a{ text-decoration:none; }

/* Pastille du direct : battement lent, uniquement quand ça joue. */
@keyframes lri-pouls{ 0%,100%{ box-shadow:0 0 0 0 rgba(220,64,48,.45); } 50%{ box-shadow:0 0 0 5px rgba(220,64,48,0); } }
.btn-direct .pastille{ animation:lri-pouls 2.4s ease-out infinite; }

/* L'onde du direct est définie plus bas, en un seul endroit : la règle qui
   se trouvait ici n'animait les barres que pendant l'écoute, et sa notation
   abrégée « animation: » remettait à zéro les retards de chaque barre —
   les vingt-quatre battaient donc à l'unisson. */

/* Respect absolu du réglage système. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .lecteur{ transform:none; }
  .lecteur:not(.actif){ display:none; }
}

/* Les valeurs chiffrées — durées, dates, compteurs — restent en Poppins mais
   avec des chiffres de largeur fixe, pour qu'elles ne dansent pas d'une ligne
   à l'autre. */
.mono, .carte-meta, .fiche-meta, .lecteur-scrub, .pied-canaux, .version,
.evt-date span, .fil, .sur-titre, .compte, .tuile span, .screen-label{
  font-family:"Poppins",sans-serif;
  font-variant-numeric:tabular-nums;
}

/* Le bouton du direct montre qu'il est en cours, et permet de couper. */
.btn-direct.joue{background:var(--yel); color:var(--ink)}
.btn-direct.joue .pastille{background:var(--ink); animation:none}

/* Le lecteur est fixé au bas de la fenêtre : il n'entre pas dans le flux et
   n'empêche donc jamais le défilement. La réserve sous le contenu est prise
   en charge par le padding-bas du corps de page. */
.lecteur{position:fixed !important; left:0; right:0; bottom:0; z-index:60}

/* ══════════════════════════════════════════════════════════
   FILTRES DE LA LISTE DES PODCASTS
   ══════════════════════════════════════════════════════════ */

.filtres{display:flex; gap:.6rem; margin:0 0 1.4rem; flex-wrap:wrap}
.cherche{
  display:flex; align-items:center; gap:.6rem; flex:1; min-width:220px; max-width:420px;
  background:var(--panel); border-radius:99px; padding:.55rem 1.1rem; color:var(--dim);
}
.cherche input{border:0; background:none; font:inherit; font-size:.92rem; flex:1; color:var(--ink); outline:none}
.puce-btn{
  border:0; background:var(--ink); color:#fff; border-radius:99px;
  padding:.55rem 1.3rem; font:inherit; font-weight:600; font-size:.88rem; cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}
.puce-btn:hover{opacity:.9}
.puce-btn:active{transform:scale(.97)}

.filtres-groupe{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.8rem}
.filtres-titre{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); font-weight:700; margin-right:.3rem; min-width:5.5rem;
}
.puce{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid var(--line); border-radius:99px;
  padding:.35rem .85rem; font-size:.85rem; font-weight:600;
  text-decoration:none; color:var(--dim); background:var(--bg);
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.puce span{
  font-size:.72rem; font-weight:600; color:var(--dim); opacity:.75;
  font-variant-numeric:tabular-nums;
}
.puce:hover{border-color:var(--ink); color:var(--ink)}
.puce-active{background:var(--ink); border-color:var(--ink); color:#fff}
.puce-active span{color:#fff; opacity:.65}

.filtres-etat{font-size:.88rem; color:var(--dim); margin:.6rem 0 1.2rem}
.filtres-etat a{color:var(--ink)}

@media (max-width:640px){
  .filtres-titre{min-width:100%; margin-bottom:.2rem}
}

/* Deux façons de fournir un média dans l'administration */
.deux-voies .ou{
  display:flex; align-items:center; gap:.7rem; margin:.9rem 0;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:#6C7280;
}
.deux-voies .ou::before, .deux-voies .ou::after{
  content:""; flex:1; height:1px; background:#E3E5EA;
}

/* Vidéo lue sur place depuis l'accueil */
.video-ecran{position:relative}
.video-ecran.video-ouverte{background-image:none !important}
.video-ecran iframe, .video-ecran video{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block; background:#000;
}

/* Menus de filtre */
.choix{display:flex; flex-direction:column; gap:.25rem}
.choix span{
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--dim); font-weight:700; padding-left:.9rem;
}
.choix select{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--line); border-radius:99px; background:var(--bg);
  padding:.5rem 2.3rem .5rem 1.1rem; font:inherit; font-size:.88rem; font-weight:600;
  color:var(--ink); cursor:pointer; min-width:12rem;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236C6F77' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
  transition:border-color .16s ease;
}
.choix select:hover{border-color:var(--ink)}
.filtres{align-items:flex-end}
.filtres .puce-btn{margin-bottom:1px}
@media (max-width:720px){
  .filtres{flex-direction:column; align-items:stretch}
  .choix select{width:100%}
}

/* ══════════════════════════════════════════════════════════
   LECTEUR — arrêt et navigation dans l'épisode
   ══════════════════════════════════════════════════════════ */

.lecteur-stop{
  width:30px; height:30px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.72);
  border:0; cursor:pointer; transition:background .16s ease, color .16s ease;
}
.lecteur-stop:hover{background:var(--live); color:#fff}

/* Une piste qu'on peut réellement attraper : la poignée native est trop fine
   et la zone cliquable trop basse pour viser en une fois. */
.lecteur-scrub{gap:.6rem}
.lecteur-scrub span{font-variant-numeric:tabular-nums; min-width:3.1em; opacity:.7}
.lecteur-piste{
  -webkit-appearance:none; appearance:none;
  flex:1; height:16px; background:none; cursor:pointer; margin:0; padding:0;
  --avancement:0%;
}
.lecteur-piste::-webkit-slider-runnable-track{
  height:5px; border-radius:99px;
  background:linear-gradient(to right, var(--yel) var(--avancement), rgba(255,255,255,.20) var(--avancement));
}
.lecteur-piste::-moz-range-track{height:5px; border-radius:99px; background:rgba(255,255,255,.20)}
.lecteur-piste::-moz-range-progress{height:5px; border-radius:99px; background:var(--yel)}
.lecteur-piste::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; border-radius:50%; background:#fff; border:0;
  margin-top:-4px; box-shadow:0 1px 4px rgba(0,0,0,.45);
  transition:transform .14s ease;
}
.lecteur-piste::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; background:#fff; border:0;
  box-shadow:0 1px 4px rgba(0,0,0,.45);
}
.lecteur-piste:hover::-webkit-slider-thumb{transform:scale(1.25)}
.lecteur-piste:active::-webkit-slider-thumb{transform:scale(1.35)}
.lecteur-piste:focus-visible{outline:2px solid var(--yel); outline-offset:4px; border-radius:99px}
.lecteur-piste:disabled{opacity:.45; cursor:default}
.lecteur-piste:disabled::-webkit-slider-thumb{display:none}

/* Sur mobile la piste disparaissait entièrement : on garde l'arrêt et une
   progression fine, sans les compteurs. */
@media (max-width:640px){
  .lecteur-scrub{display:flex; flex-basis:100%; order:5; margin-top:.1rem}
  .lecteur-scrub span{display:none}
  .lecteur-stop{margin-left:auto}
}
/* Le direct n'a pas de progression : l'attribut hidden doit gagner partout. */
.lecteur-scrub[hidden]{display:none !important}

/* ══════════════════════════════════════════════════════════
   ACCUEIL — cadre vidéo et agenda
   ══════════════════════════════════════════════════════════ */

/* Une fois la lecture lancée, le cadre prend les proportions du fichier :
   c'est la hauteur qui est bornée, la largeur suit. Une vidéo verticale
   devient donc un cadre vertical, sans bandes noires de part et d'autre. */
.video-ecran.video-ouverte{
  aspect-ratio:var(--ratio, 16/9);
  height:clamp(240px, 46vh, 420px);
  width:auto; max-width:100%; max-height:none;
  margin-inline:auto; background:#000;
}
.video-ecran.video-ouverte video{object-fit:contain}
.video:has(.video-ouverte){background:var(--panel)}

/* Agenda : plusieurs rendez-vous, lisibles d'un coup d'œil. */
.evt-liste{list-style:none; margin:.9rem 0 0; padding:0; display:flex; flex-direction:column}
.evt-liste li + li{border-top:1px solid var(--line)}
.evt-liste a{
  display:grid; grid-template-columns:3rem minmax(0,1fr); gap:.9rem; align-items:center;
  padding:.75rem .2rem; text-decoration:none; color:inherit;
  transition:background .16s ease;
}
.evt-liste a:hover{background:var(--panel)}
.evt-jour{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:9px; padding:.35rem 0; line-height:1;
}
.evt-jour b{font-size:1.35rem; font-weight:800; letter-spacing:-.03em}
.evt-jour i{font-style:normal; font-size:.6rem; font-weight:700; letter-spacing:.1em; color:var(--dim); margin-top:.2rem}
.evt-texte{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.evt-texte b{font-size:.92rem; font-weight:700; line-height:1.3}
.evt-texte i{font-style:normal; font-size:.78rem; color:var(--dim)}
.evt-vide{font-size:.88rem; color:var(--dim); margin:.9rem 0 0}
.evt-pied{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  flex-wrap:wrap; margin-top:auto; padding-top:1.1rem;
}

/* ══════════════════════════════════════════════════════════
   UNE — chapô borné et boutons alignés sur le bas de l'image
   ══════════════════════════════════════════════════════════ */

/* La colonne de texte prend la hauteur du bloc, fixée par l'image carrée.
   Les actions sont poussées en bas : elles se retrouvent donc exactement
   au niveau du bord inférieur du visuel. */
.une-podcast{align-items:stretch}
.une-visuel{align-self:start}
.une-corps{display:flex; flex-direction:column; height:100%}

/* Trois lignes, pas une de plus. Un chapô plus long est coupé : ce n'est pas
   le résumé qui doit dicter la hauteur du bloc, et la suite se lit sur la
   page de l'épisode. */
.une-corps .chapo{
  font-size:.88rem; line-height:1.5; margin:0 0 .8rem; max-width:52ch;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}
.une-corps .meta{margin:0 0 .4rem}
.une-actions{margin-top:auto; margin-bottom:0}

/* Les deux boutons ont la même hauteur et le même aplomb : la pastille jaune
   ne doit pas gonfler le premier. */
.une-actions .btn-ecouter,
.une-actions .btn-suite{
  height:44px; padding-block:0; box-sizing:border-box; font-size:.9rem;
}
.une-actions .btn-ecouter{padding-left:.4rem; padding-right:1.3rem}
.une-actions .btn-ecouter .rond{width:34px; height:34px}

/* Filtres en pastilles, sur une seule ligne. Ils défilent horizontalement
   plutôt que de passer à la ligne : le bloc garde une hauteur constante. */
.filtres-ligne{
  display:flex; gap:.5rem; align-items:center; margin:0 0 1.4rem;
  overflow-x:auto; scrollbar-width:none; padding-bottom:.2rem;
}
.filtres-ligne::-webkit-scrollbar{display:none}
.filtres-ligne .puce{
  display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; flex:none;
  border:1px solid var(--line); border-radius:99px; padding:.45rem 1rem;
  font-size:.85rem; font-weight:600; color:var(--ink); text-decoration:none;
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.filtres-ligne .puce span{font-size:.72rem; color:var(--dim); font-weight:700}
.filtres-ligne .puce:hover{border-color:var(--ink)}
.filtres-ligne .puce-active{background:var(--ink); border-color:var(--ink); color:#fff}
.filtres-ligne .puce-active span{color:var(--yel)}

/* ══════════════════════════════════════════════════════════
   LOGO OFFICIEL
   ══════════════════════════════════════════════════════════ */

/* Le logo porte le nom et la signature : plus de lockup typographique
   à côté, il ferait doublon. */
.logo{display:inline-flex; align-items:center; gap:0}
.logo img{
  height:46px; width:auto; display:block;
  transform-origin:left center;
  transition:transform .28s cubic-bezier(.22,.9,.3,1);
}

/* Le logo grandit au survol du logo, et de lui seul. Le déclencher depuis
   la navigation faisait bouger la marque alors qu'on visait une rubrique :
   le mouvement paraissait venir de nulle part. */
.logo:hover img{transform:scale(1.07)}

@media (max-width:640px){
  .logo img{height:38px}
}
@media (prefers-reduced-motion:reduce){
  .logo img{transition:none}
  .logo:hover img{transform:none}
}

/* ══════════════════════════════════════════════════════════
   DÉGRADÉ SOUS L'EN-TÊTE
   ══════════════════════════════════════════════════════════ */

/* Une bande grise qui s'éteint vers le blanc, juste sous le menu, sur toutes
   les pages : l'en-tête se détache sans qu'on ait besoin de lui ajouter une
   ombre ou un aplat, qui l'auraient alourdi.
   Posée sur « main », elle commence exactement là où finit l'en-tête et
   défile avec le contenu — un fond sur « body » serait resté collé à la
   fenêtre. */
/* Fond de page uni et blanc. Le dégradé qui descendait de l'en-tête a été
   retiré : il donnait une teinte différente au haut de chaque page et se
   voyait surtout aux endroits où un bloc clair venait se poser dessus. */
main{background:var(--bg)}

/* Le bloc de une est du même gris pâle : sans filet, son bord supérieur se
   confondrait avec le dégradé. */
.une-podcast{border:1px solid var(--line)}

/* ══════════════════════════════════════════════════════════
   MENU — pastilles
   ══════════════════════════════════════════════════════════ */

/* Les entrées passent en noir plein : le gris les faisait lire comme
   désactivées. L'écart entre elles se resserre, ce sont les pastilles qui
   créent désormais la respiration. */
.entete nav ul{gap:.2rem; color:var(--ink)}
.entete nav a{
  display:inline-block; padding:.48rem .9rem; border-radius:99px;
  color:var(--ink); text-decoration:none;
  transition:background .18s ease, color .18s ease;
}
/* Le gris doit se voir sur le blanc de l'en-tête : « --panel » était trop
   pâle pour se détacher, à peine deux points au-dessus du fond. */
.entete nav a:hover{background:#E7E6E0; color:var(--ink); text-decoration:none}

/* Page courante : jaune sur noir. Le repère est net sans être criard, et il
   reprend les deux couleurs du logo. */
.entete nav a[aria-current="page"],
.entete nav a[aria-current="page"]:hover{
  background:var(--ink); color:var(--yel);
}

/* Le dégradé sous l'en-tête étant du même gris que la pastille de survol,
   c'est bien le noir de la page active qui doit porter le repère. */
@media (max-width:640px){
  .entete nav ul{gap:.15rem}
  .entete nav a{padding:.4rem .7rem}
}

/* ══════════════════════════════════════════════════════════
   ÉVÉNEMENTS — date lisible, visuel, texte plein
   ══════════════════════════════════════════════════════════ */

/* Le jour en rouge, le mois assez grand pour se lire d'un trait. La date
   complète en toutes lettres a disparu : elle répétait ce que la pastille
   dit déjà, en moins lisible. */
.evt-date b, .evt-jour b{color:var(--fuchsia)}
.evt-date{display:flex; flex-direction:column; align-items:center; line-height:1.05}
.evt-date b{font-size:2.1rem; font-weight:800; letter-spacing:-.04em}
.evt-date i{
  font-style:normal; font-size:.86rem; font-weight:800; letter-spacing:.09em;
  color:var(--ink); margin-top:.15rem;
}
.evt-jour b{font-size:1.5rem}
.evt-jour i{font-size:.76rem; font-weight:800; letter-spacing:.09em; color:var(--ink)}

/* Le texte des rendez-vous passe en noir : le gris le faisait reculer alors
   que c'est l'information principale de la ligne. */
.evt-texte i, .evt-lieu, .evt-texte-ligne i{color:var(--ink); opacity:.72}

/* La ligne accueille maintenant un visuel. Sans image, l'aplat aux couleurs
   de LRI tient la place : une colonne qui apparaît et disparaît d'une ligne
   à l'autre casserait l'alignement. */
.evt-ligne{grid-template-columns:4.4rem 104px minmax(0,1fr)}
.evt-vignette{
  width:104px; aspect-ratio:4/3; border-radius:9px; overflow:hidden;
  background:var(--panel); display:block;
}
.evt-vignette img{width:100%; height:100%; object-fit:cover; display:block}
.evt-texte-ligne{display:flex; flex-direction:column; gap:.2rem; min-width:0}
.evt-texte-ligne .evt-titre{font-size:1.05rem; font-weight:700; line-height:1.3}
.evt-texte-ligne .evt-lieu{font-size:.86rem; text-align:left}

@media (max-width:640px){
  .evt-ligne{grid-template-columns:3.4rem 72px minmax(0,1fr); gap:.9rem}
  .evt-vignette{width:72px}
  .evt-date b{font-size:1.7rem}
  .evt-lieu{display:block}
}

/* ══════════════════════════════════════════════════════════
   EN-TÊTE QUI REVIENT AU SCROLL VERS LE HAUT
   ══════════════════════════════════════════════════════════ */

.entete{
  position:sticky; top:0; z-index:40; background:var(--bg);
  transition:transform .28s cubic-bezier(.22,.9,.3,1), box-shadow .28s ease;
  will-change:transform;
}
/* Décollé du haut de page : une ombre très basse suffit à poser l'en-tête
   au-dessus du contenu, sans le transformer en bandeau. */
.entete-detachee{box-shadow:0 6px 20px rgba(23,24,28,.07)}
/* On descend : l'en-tête s'efface pour laisser lire. On remonte : il revient. */
/* Le logo dépasse du bandeau : on escamote un peu plus haut que sa seule
   hauteur, sinon il resterait un bout de logo suspendu en haut de l'écran. */
.entete-cachee{transform:translateY(calc(-100% - 14px))}

@media (prefers-reduced-motion:reduce){
  .entete{transition:none}
  .entete-cachee{transform:none}
}

/* ══════════════════════════════════════════════════════════
   ÉMISSIONS — icône à gauche, texte à droite
   ══════════════════════════════════════════════════════════ */

/* La tuile empilait icône puis texte, ce qui gaspillait la largeur et
   allongeait la carte pour rien. En ligne, l'icône devient un repère qu'on
   balaye du regard et le texte gagne la place qui lui manquait. */
.tuile-icone{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  align-items:center; gap:.15rem .9rem;
}
.tuile-icone .icone-theme{grid-row:1 / span 2; align-self:center; margin-bottom:0}
.tuile-icone:hover .icone-theme{transform:scale(1.08)}
.tuile-icone b{align-self:end}
.tuile-icone span{align-self:start}

/* ══════════════════════════════════════════════════════════
   RETOUCHES — logo, agenda de l'accueil
   ══════════════════════════════════════════════════════════ */

/* Le logo dépasse volontairement de l'en-tête : il gagne en présence sans
   pousser la barre vers le bas. Les marges négatives l'autorisent à sortir
   de la hauteur du bandeau, la navigation reste à sa place. */
.logo img{height:62px; margin-block:-8px}
@media (max-width:640px){
  .logo img{height:46px; margin-block:-5px}
}

/* Agenda de l'accueil : le visuel s'intercale entre la date et le texte.
   Disposition en flux plutôt qu'en grille — sans image, il ne reste ni
   colonne fantôme ni gouttière en trop, ce qu'une grille aurait laissé. */
.evt-liste a{display:flex; align-items:center; gap:.85rem}
.evt-jour{width:3rem; flex:none}
.evt-texte{flex:1; min-width:0}
.evt-mini{
  width:56px; height:56px; border-radius:9px; overflow:hidden;
  background:var(--panel); display:block; flex:none;
}
.evt-mini img{width:100%; height:100%; object-fit:cover; display:block}

/* Le survol prend les angles arrondis : un aplat carré coupait le bloc. */
.evt-liste a{border-radius:11px; padding-inline:.55rem}
.evt-liste li + li{border-top:1px solid var(--line)}

/* Cadre du visuel avant lecture.
   « aspect-ratio » combiné à « max-height » faisait rétrécir la LARGEUR pour
   tenir le rapport une fois la hauteur plafonnée : d'où la bande blanche à
   droite de la vignette. On commande donc la hauteur directement, la largeur
   reste pleine, et le fond en « cover » recadre au lieu de laisser du vide. */
.video-ecran{
  width:100%; max-height:none; aspect-ratio:auto;
  height:clamp(190px, 21vw, 260px);
}

/* ══════════════════════════════════════════════════════════
   ONDE DU DIRECT — une conversation, pas un métronome
   ══════════════════════════════════════════════════════════ */

/* Ce sont des gens qui parlent : le rythme est court, irrégulier, et chaque
   barre a sa propre durée. Un cycle unique partagé donnait une vague qui
   défilait proprement — joli, mais mécanique, et rien ne défile dans une
   voix. Ici les vingt-quatre cycles ne retombent jamais ensemble, ce qui
   suffit à faire vivant sans le moindre calcul à l'exécution. */
.onde{height:52px; gap:3px; margin:1rem 0 1.2rem}
.onde i{border-radius:2px; opacity:.55}

@keyframes lri-onde{
  0%,100%{ transform:scaleY(var(--creux, .25)); }
  50%    { transform:scaleY(1); }
}

.bloc-direct .onde i{
  transform-origin:bottom;
  animation:lri-onde .7s ease-in-out infinite;
  will-change:transform;
}

/* En écoute, la voix porte : creux plus marqués, cadence resserrée. */
body:has(.lecteur.actif.joue.est-direct) .bloc-direct .onde i{
  animation-duration:.34s;
  opacity:.85;
}

.bloc-direct .onde i:nth-child(1){ animation-duration:0.75s; animation-delay:0.06s; --creux:0.35; }
.bloc-direct .onde i:nth-child(2){ animation-duration:0.55s; animation-delay:0.58s; --creux:0.17; }
.bloc-direct .onde i:nth-child(3){ animation-duration:0.5s; animation-delay:0.09s; --creux:0.25; }
.bloc-direct .onde i:nth-child(4){ animation-duration:0.59s; animation-delay:0.21s; --creux:0.31; }
.bloc-direct .onde i:nth-child(5){ animation-duration:0.65s; animation-delay:0.5s; --creux:0.29; }
.bloc-direct .onde i:nth-child(6){ animation-duration:0.44s; animation-delay:0.34s; --creux:0.28; }
.bloc-direct .onde i:nth-child(7){ animation-duration:0.85s; animation-delay:0.48s; --creux:0.22; }
.bloc-direct .onde i:nth-child(8){ animation-duration:0.66s; animation-delay:0.48s; --creux:0.28; }
.bloc-direct .onde i:nth-child(9){ animation-duration:0.66s; animation-delay:0.17s; --creux:0.36; }
.bloc-direct .onde i:nth-child(10){ animation-duration:0.81s; animation-delay:0.43s; --creux:0.14; }
.bloc-direct .onde i:nth-child(11){ animation-duration:0.82s; animation-delay:0.21s; --creux:0.34; }
.bloc-direct .onde i:nth-child(12){ animation-duration:0.76s; animation-delay:0.19s; --creux:0.28; }
.bloc-direct .onde i:nth-child(13){ animation-duration:0.65s; animation-delay:0.5s; --creux:0.22; }
.bloc-direct .onde i:nth-child(14){ animation-duration:0.59s; animation-delay:0.43s; --creux:0.23; }
.bloc-direct .onde i:nth-child(15){ animation-duration:0.8s; animation-delay:0.06s; --creux:0.26; }
.bloc-direct .onde i:nth-child(16){ animation-duration:0.78s; animation-delay:0.33s; --creux:0.27; }
.bloc-direct .onde i:nth-child(17){ animation-duration:0.54s; animation-delay:0.23s; --creux:0.27; }
.bloc-direct .onde i:nth-child(18){ animation-duration:0.57s; animation-delay:0.53s; --creux:0.27; }
.bloc-direct .onde i:nth-child(19){ animation-duration:0.46s; animation-delay:0.4s; --creux:0.37; }
.bloc-direct .onde i:nth-child(20){ animation-duration:0.44s; animation-delay:0.38s; --creux:0.38; }
.bloc-direct .onde i:nth-child(21){ animation-duration:0.81s; animation-delay:0.32s; --creux:0.27; }
.bloc-direct .onde i:nth-child(22){ animation-duration:0.71s; animation-delay:0.0s; --creux:0.19; }
.bloc-direct .onde i:nth-child(23){ animation-duration:0.55s; animation-delay:0.09s; --creux:0.27; }
.bloc-direct .onde i:nth-child(24){ animation-duration:0.6s; animation-delay:0.03s; --creux:0.4; }

@media (prefers-reduced-motion:reduce){
  .bloc-direct .onde i{ animation:none; }
}

/* ══════════════════════════════════════════════════════════
   RETOUCHES EN-TÊTE
   ══════════════════════════════════════════════════════════ */

/* Plus de filet sous l'en-tête : le dégradé qui commence juste en dessous
   marque déjà la séparation, le trait faisait redite. L'ombre au défilement
   reste, elle : c'est elle qui pose l'en-tête au-dessus du contenu une fois
   qu'il flotte. */
.entete{border-bottom:0}

/* Survol du menu deux fois plus discret : chaque composante est ramenée à
   mi-chemin du blanc. */
.entete nav a:hover{background:#F3F3F0}

/* ══════════════════════════════════════════════════════════
   BARRES DE FILTRES COLLANTES
   ══════════════════════════════════════════════════════════ */

/* Les filtres restent sous la main pendant qu'on parcourt la liste : sur
   soixante épisodes, remonter en haut pour changer de thématique était une
   corvée.
   Ils s'accrochent sous l'en-tête, dont la hauteur est publiée par le
   script ; quand l'en-tête s'escamote, « --h-entete » tombe à zéro et les
   filtres remontent avec lui — les deux barres ne se chevauchent jamais. */
.filtres, .filtres-ligne{
  position:sticky; top:var(--h-entete, 78px); z-index:20;
  background:var(--bg);
  margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);
  padding-block:.75rem;
  transition:top .28s cubic-bezier(.22,.9,.3,1), box-shadow .2s ease;
}

/* Une fois décollées, elles se détachent du contenu qui défile dessous. */
.filtres-collee{box-shadow:0 6px 18px rgba(23,24,28,.06)}

@media (prefers-reduced-motion:reduce){
  .filtres, .filtres-ligne{transition:none}
}

/* ══════════════════════════════════════════════════════════
   FIL D'ARIANE SOUS LE TITRE
   ══════════════════════════════════════════════════════════ */

/* Il passe sous le titre : la page s'ouvre sur ce qu'elle est, pas sur le
   chemin qui y mène. Le titre remonte d'autant.
   Le fil vit désormais À L'INTÉRIEUR du bloc, qui porte déjà les marges
   latérales : il ne doit plus les ajouter lui-même, sans quoi il se
   retrouverait décalé vers la droite. */
.fil{padding:0; margin:-.35rem 0 1.4rem}
.bloc-tete{margin-bottom:.55rem}
.fiche-corps h1 + .fil{margin:.5rem 0 1rem}

/* Essai : la page courante en jaune plutôt qu'en noir. Le texte reste noir —
   du jaune sur jaune serait illisible, et le noir sur ce jaune tient
   largement les seuils de contraste.
   Le survol devient un simple voile d'encre à 5 % : il se pose sur le blanc
   de l'en-tête sans introduire une teinte de plus. */
.entete nav a:hover{background:rgba(23,24,28,.05)}
.entete nav a[aria-current="page"],
.entete nav a[aria-current="page"]:hover{
  background:var(--yel); color:var(--ink);
}

/* Les menus de filtre n'ont plus d'intitulé au-dessus : la barre collante
   perd la hauteur correspondante, et les trois champs s'alignent enfin sur
   la même ligne de base. */
.choix{display:block}
.filtres{align-items:center}
.filtres .puce-btn{margin-bottom:0}

/* Logo en tête du bloc du direct. Cette version sans contour noir est faite
   pour les fonds sombres — celle de l'en-tête y perdrait son liseré. */
/* « align-self » est indispensable : le bloc du direct est une colonne
   flexible, dont les enfants sont étirés sur toute la largeur par défaut.
   L'image y perdait ses proportions — d'où le logo écrasé. Calée à gauche,
   elle reprend sa largeur naturelle. */
.direct-logo{
  height:68px; width:auto; display:block;
  align-self:flex-start; flex:none;
  margin:0 0 1rem;
}
@media (max-width:640px){ .direct-logo{height:56px} }

/* ══════════════════════════════════════════════════════════
   EN-TÊTE JAUNE
   ══════════════════════════════════════════════════════════ */

/* Le bandeau entier passe en jaune. Les entrées restent en noir — c'est le
   couple le plus lisible de la charte — et la rubrique courante s'inverse :
   pastille noire, texte jaune. */
.entete{background:var(--yel)}
.entete nav a{color:var(--ink)}
.entete nav a:hover{background:rgba(23,24,28,.08)}
.entete nav a[aria-current="page"],
.entete nav a[aria-current="page"]:hover{
  background:var(--ink); color:var(--yel);
}

/* Sur fond jaune, l'ombre de défilement doit être un peu plus dense pour
   rester perceptible. */
.entete-detachee{box-shadow:0 6px 20px rgba(23,24,28,.16)}

/* ══════════════════════════════════════════════════════════
   MENU MOBILE
   ══════════════════════════════════════════════════════════ */

/* Au-dessus de 860 px, le bouton n'existe pas : la navigation tient sur une
   ligne et n'a rien à replier. */
.burger{display:none}

@media (max-width:860px){
  .entete{position:sticky; gap:.8rem; flex-wrap:nowrap}

  /* Le bouton du direct reste dans la barre : sur une radio, c'est l'action
     qu'on vient chercher, elle ne se cache pas derrière un menu. Il se
     réduit à sa pastille et à un libellé court. */
  .btn-direct{margin-left:auto; padding:.5rem .9rem; font-size:.82rem}
  .btn-direct .libelle-direct{display:none}
  .btn-direct::after{content:"Direct"}

  .burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; flex:none; padding:0 9px;
    background:none; border:0; cursor:pointer; border-radius:11px;
    transition:background .18s ease;
  }
  .burger:hover{background:rgba(23,24,28,.08)}
  .burger span{
    display:block; height:2px; width:100%; border-radius:2px;
    background:var(--ink);
    transition:transform .3s cubic-bezier(.2,.9,.3,1), opacity .18s ease;
  }

  /* Ouvert : la barre du haut et celle du bas se rejoignent en croix, celle
     du milieu s'efface. Le mouvement dit ce que fait le bouton. */
  .menu-ouvert .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-ouvert .burger span:nth-child(2){opacity:0}
  .menu-ouvert .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Le panneau se déploie sous la barre, hors du flux : il recouvre la page
     au lieu de la pousser vers le bas. */
  .entete nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--yel);
    box-shadow:0 14px 30px rgba(23,24,28,.18);
    border-top:1px solid rgba(23,24,28,.10);
    padding:.5rem var(--pad) 1rem;
    flex:none;
    transform-origin:top;
    transform:translateY(-8px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .26s cubic-bezier(.2,.9,.3,1), opacity .2s ease,
               visibility 0s linear .26s;
  }
  .menu-ouvert nav{
    transform:none; opacity:1; visibility:visible; pointer-events:auto;
    transition:transform .26s cubic-bezier(.2,.9,.3,1), opacity .2s ease,
               visibility 0s;
  }

  .entete nav ul{
    flex-direction:column; align-items:stretch; gap:.15rem;
    white-space:normal; font-size:1rem;
  }
  .entete nav a{
    display:block; padding:.85rem 1rem; border-radius:12px; font-weight:700;
  }

  /* Chaque entrée entre avec un léger décalage : le menu se déroule au lieu
     d'apparaître d'un bloc. */
  .menu-ouvert nav li{animation:lri-entree-menu .3s cubic-bezier(.2,.9,.3,1) backwards}
  .menu-ouvert nav li:nth-child(1){animation-delay:.02s}
  .menu-ouvert nav li:nth-child(2){animation-delay:.05s}
  .menu-ouvert nav li:nth-child(3){animation-delay:.08s}
  .menu-ouvert nav li:nth-child(4){animation-delay:.11s}
  .menu-ouvert nav li:nth-child(5){animation-delay:.14s}
  .menu-ouvert nav li:nth-child(6){animation-delay:.17s}
}

@keyframes lri-entree-menu{
  from{opacity:0; transform:translateY(-6px)}
  to  {opacity:1; transform:none}
}

@media (max-width:640px){
  /* La navigation ne revient plus sur une troisième ligne : elle est repliée. */
  .entete nav{order:0; flex-basis:auto}
}

@media (prefers-reduced-motion:reduce){
  .burger span, .entete nav{transition:none}
  .menu-ouvert nav li{animation:none}
}

/* ══════════════════════════════════════════════════════════
   PIED DE PAGE JAUNE
   ══════════════════════════════════════════════════════════ */

/* Le pied reprend le jaune de l'en-tête : la page est tenue en haut et en
   bas par la même couleur. Le gris des textes secondaires n'y passait plus —
   trop peu contrasté sur ce fond — il devient du noir atténué, qui garde la
   hiérarchie tout en restant lisible. */
.pied{
  background:var(--yel);
  border-top:0;
  color:rgba(23,24,28,.72);
}
.pied nav a{color:rgba(23,24,28,.72)}
.pied nav a:hover{color:var(--ink)}
.pied nav h2{color:var(--ink)}
.pied-bas{border-top-color:rgba(23,24,28,.16)}
.pied .version{opacity:.5}

/* Le logo remplace le carré provisoire. */
.pied-logo{height:76px; width:auto; display:block; margin-bottom:.2rem}
.pied-marque p{margin:.5rem 0 0}

/* La rubrique courante : blanc sur noir. Sur le bandeau jaune, le jaune du
   texte reprenait la couleur du fond alentour et affaiblissait le repère ;
   le blanc tranche des deux. */
.entete nav a[aria-current="page"],
.entete nav a[aria-current="page"]:hover{
  background:var(--ink); color:#fff;
}

/* ══════════════════════════════════════════════════════════
   TUILES DE THÉMATIQUES — survol inversé
   ══════════════════════════════════════════════════════════ */

/* Au survol, la tuile bascule en noir : le titre passe en jaune, le décompte
   en gris clair, et l'icône suit le titre — laissée dans son brun d'origine,
   elle aurait disparu sur le fond sombre. */
.tuile{transition:transform .15s ease, background .22s ease, color .22s ease}
.tuile:hover{background:var(--ink); color:#fff}
.tuile:hover b{color:var(--yel)}
.tuile:hover span{color:rgba(255,255,255,.62)}
.tuile:hover .icone-theme{color:var(--yel); opacity:1}

/* Les tuiles de formats sont déjà noires : elles n'ont rien à basculer, seul
   le titre s'allume. */
.tuile-sombre:hover{background:var(--ink)}
.tuile-sombre:hover b{color:var(--yel)}

/* ══════════════════════════════════════════════════════════
   FILTRES SUR PETIT ÉCRAN — hauteur réduite
   ══════════════════════════════════════════════════════════ */

/* Empilés, les quatre champs mangeaient un tiers de l'écran alors que la
   barre est collante : autant de liste en moins à chaque instant.
   Deux rangées suffisent — la recherche sur toute la largeur, les deux menus
   côte à côte — et le bouton disparaît de l'écran : les menus s'appliquent
   à la sélection, et la recherche se valide avec la touche Entrée. */
@media (max-width:720px){
  .filtres{
    display:grid; grid-template-columns:1fr 1fr; gap:.45rem;
    align-items:center; padding-block:.55rem;
  }
  .cherche{
    grid-column:1 / -1; max-width:none; min-width:0;
    padding:.45rem .95rem;
  }
  .cherche input{font-size:.86rem}
  .choix{display:block; min-width:0}
  .choix select{
    width:100%; min-width:0;
    padding:.45rem 1.9rem .45rem .8rem; font-size:.8rem;
    background-position:right .65rem center;
  }

  /* Retiré de l'écran, pas du document : un lecteur d'écran et le clavier y
     accèdent toujours. Le masquer avec « display:none » l'aurait supprimé
     pour tout le monde. */
  .filtres .puce-btn{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
  }
  .filtres .puce-btn:focus-visible{
    position:static; width:auto; height:auto; margin:0; padding:.5rem 1.2rem;
    clip-path:none; grid-column:1 / -1;
  }
}

/* ══════════════════════════════════════════════════════════
   UNE — boutons calés sur le bas de l'image
   ══════════════════════════════════════════════════════════ */

/* La carte du podcast épouse la hauteur du bloc du direct, à droite : deux
   cartes côte à côte de hauteurs différentes laissent un décrochement.
   À l'intérieur, l'espace disponible n'est pas réparti au hasard. Le chapô
   peut s'étendre jusqu'à six lignes s'il a de quoi les remplir ; ce qui reste
   se loge ENTRE le chapô et la date, jamais entre la date et les boutons —
   c'est là que le vide se remarque le moins, parce qu'il sépare deux blocs
   d'information de nature différente. */
.une{align-items:stretch}
.une-podcast{align-items:stretch; height:100%}
.une-visuel{align-self:start}
.une-corps{height:100%; min-height:260px; display:flex; flex-direction:column}
.une-corps .chapo{-webkit-line-clamp:6}
.une-corps .meta{margin-top:auto; margin-bottom:.5rem}
.une-actions{margin-top:0}

/* ══════════════════════════════════════════════════════════
   CARTE DE LA DERNIÈRE VIDÉO
   ══════════════════════════════════════════════════════════ */

.video{background:var(--ink); border-color:var(--ink); color:#fff}
.video .etiquette{color:var(--yel)}
.video-corps h3, .video-corps h3 a{color:#fff}
.video-corps h3 a:hover{color:var(--yel); text-decoration:none}
.video .carte-meta{color:rgba(255,255,255,.60)}

/* Le cadre reste noir une fois la lecture lancée : il faisait auparavant
   place au gris des panneaux, ce qui n'a plus de sens sur une carte sombre. */
.video:has(.video-ouverte){background:var(--ink)}

/* ══════════════════════════════════════════════════════════
   PARTENAIRES — pastilles anthracite
   ══════════════════════════════════════════════════════════ */

.partenaires{gap:.9rem}
.part-pastille{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--anthracite); border-radius:12px;
  padding:.6rem 1.1rem; height:56px; min-width:96px;
  transition:background .18s ease, transform .15s ease;
}
.part-pastille img{
  max-height:34px; max-width:150px; width:auto; height:auto;
  object-fit:contain; display:block;
}
.part-pastille:hover{background:#3A3D46; transform:translateY(-2px)}

/* Sans logo, le nom tient la place, dans la même pastille. */
.part-nom{color:#fff; font-weight:700; font-size:.86rem; letter-spacing:.01em}

/* Même traitement sur la page « La radio », où les mêmes fichiers servent. */
.partenaire{background:var(--anthracite); color:#fff}
.partenaire:hover{background:#3A3D46}
.partenaire span{color:#fff}
.partenaire-logo img{max-height:56px}

@media (max-width:640px){
  .part-pastille{height:48px; min-width:78px; padding:.5rem .8rem}
  .part-pastille img{max-height:28px; max-width:110px}
}

/* Les tuiles sont des liens : la règle globale les soulignait entièrement au
   survol, titre et décompte compris. Sur une tuile, c'est le basculement en
   noir qui signale le lien, pas un trait. */
.tuile:hover, .tuile:hover *{text-decoration:none}

/* ══════════════════════════════════════════════════════════
   PRESTATIONS & COMMANDES
   ══════════════════════════════════════════════════════════ */

.offre{
  display:flex; flex-direction:column; gap:.6rem;
  background:var(--panel); border-radius:14px; padding:1.4rem;
  border:1px solid var(--line);
}
.offre h3{font-size:1.1rem; font-weight:800; margin:0; letter-spacing:-.02em}
.offre-desc{font-size:.88rem; color:var(--dim); margin:0; line-height:1.5; flex:1}
.offre-prix{margin:0}
.offre-prix b{font-size:1.35rem; font-weight:800; letter-spacing:-.03em}
.offre-prix span{display:block; font-size:.78rem; color:var(--dim); margin-top:.15rem}
.offre .btn-suite{align-self:flex-start; margin-top:.4rem}
.offre-devis{background:var(--ink); color:#fff; border-color:var(--ink)}
.offre-devis .offre-desc{color:rgba(255,255,255,.62)}
.offre-devis .btn-suite{background:var(--yel); border-color:var(--yel)}

.liste-offres{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.offre-ligne{
  display:grid; grid-template-columns:minmax(0,1fr) 12rem auto; gap:1.4rem;
  align-items:center; padding:1rem .2rem; border-bottom:1px solid var(--line);
}
.offre-ligne b{display:block; font-size:1rem; font-weight:700}
.offre-ligne i{display:block; font-style:normal; font-size:.85rem; color:var(--dim); margin-top:.15rem}
.offre-ligne .offre-prix b{font-size:1.05rem}

.mention-tva{font-size:.78rem; color:var(--dim); margin:1.2rem 0 0}

/* ---------- formulaire ---------- */
.formulaire{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.2rem; margin-top:1rem;
}
.champ{display:flex; flex-direction:column; gap:.35rem; min-width:0}
.champ-large{grid-column:1 / -1}
.champ label{font-size:.8rem; font-weight:700; letter-spacing:.02em}
.champ label span{color:var(--fuchsia)}
.champ input, .champ select, .champ textarea{
  font:inherit; font-size:.94rem; color:var(--ink);
  border:1px solid var(--line); border-radius:11px; padding:.65rem .9rem;
  background:var(--bg); width:100%; transition:border-color .16s ease;
}
.champ input:focus, .champ select:focus, .champ textarea:focus{
  outline:none; border-color:var(--ink);
}
.champ textarea{resize:vertical; line-height:1.5}
.champ .err{display:block; font-style:normal; font-size:.78rem; color:var(--live); font-weight:600}
.formulaire-pied{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:.4rem}
.formulaire-pied p{font-size:.8rem; color:var(--dim); margin:0; max-width:38ch}

/* Le champ leurre doit rester dans le document — un robot lit le HTML, pas
   l'écran — mais ne jamais être atteignable par un humain. */
.leurre{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- alertes et récapitulatif ---------- */
.alerte{
  border-radius:12px; padding:1rem 1.2rem; margin:0 0 1.4rem;
  font-size:.92rem; line-height:1.55;
}
.alerte-ok{background:#F0F7EE; border:1px solid #CBE3C3; color:#1F4419}
.alerte-erreur{background:#FCEFEE; border:1px solid #F0CBC7; color:#7B1F16}

.etat-commande{
  display:inline-block; font-size:.76rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:.4rem .9rem; border-radius:99px; margin:0 0 1.4rem;
}
.etat-attente{background:var(--yel); color:var(--ink)}
.etat-ok{background:#1F4419; color:#fff}
.etat-annule{background:var(--line); color:var(--dim)}

.recap{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.5rem 1.4rem; margin:0 0 1.6rem}
.recap dt{font-size:.76rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--dim)}
.recap dd{margin:0; font-size:.95rem}
.discret{font-size:.82rem; color:var(--dim)}

@media (max-width:720px){
  .formulaire{grid-template-columns:1fr}
  .offre-ligne{grid-template-columns:1fr; gap:.6rem}
  .offre-ligne .btn-suite{justify-self:start}
}

/* ══════════════════════════════════════════════════════════
   ANCRES ET PRÉ-REMPLISSAGE DU FORMULAIRE
   ══════════════════════════════════════════════════════════ */

/* L'en-tête est collant : sans cette marge, une ancre amène la cible pile
   SOUS le bandeau, qui la recouvre. « scroll-margin-top » ne décale rien à
   l'écran, il ne concerne que l'endroit où le défilement s'arrête. */
/* 5,2 rem ≈ 83 px : la hauteur de l'en-tête plus quelques pixels. Le titre
   visé se cale donc juste sous le bandeau, sans rien laisser dépasser du
   paragraphe précédent au-dessus de lui. Plus haut, on voyait la mention de
   TVA et pas le titre ; plus bas, l'en-tête l'aurait recouvert. */
[id]{scroll-margin-top:5.2rem}

/* Le champ pré-rempli s'éclaire un instant, pour qu'on voie que le clic a
   agi ailleurs dans la page. */
@keyframes lri-signal{
  0%   { box-shadow:0 0 0 0 rgba(255,196,0,.9);  border-color:var(--ink); }
  70%  { box-shadow:0 0 0 9px rgba(255,196,0,0); border-color:var(--ink); }
  100% { box-shadow:0 0 0 0 rgba(255,196,0,0); }
}
.champ-signale{animation:lri-signal 1.1s ease-out}

@media (prefers-reduced-motion:reduce){
  .champ-signale{animation:none; border-color:var(--ink)}
}

/* Une confirmation de commande n'est pas une notification parmi d'autres :
   elle porte la seule référence que la personne aura pour nous recontacter. */
.alerte-forte{
  border-left:4px solid #2F7A22; font-size:.98rem; padding:1.2rem 1.4rem;
}

/* Les quatre forfaits tiennent sur une seule ligne plus longtemps que la
   grille générique, qui repasse à trois colonnes dès 1080 px. Ici la
   quatrième carte isolée sur sa propre ligne se voyait trop : mieux vaut des
   cartes un peu plus étroites qu'une rangée bancale. */
.grille-forfaits{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:880px){ .grille-forfaits{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .grille-forfaits{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════════
   FICHE VIDÉO — la vidéo d'abord
   ══════════════════════════════════════════════════════════ */

/* Plus de grille à deux colonnes : la vidéo occupe la largeur, le texte suit.
   Sa taille est bornée par la HAUTEUR de l'écran — une vidéo qui déborde sous
   la ligne de flottaison oblige à faire défiler pour la voir entière, ce qui
   est absurde pour l'objet principal de la page.
   La largeur maximale est déduite de ce plafond de hauteur (16/9), plutôt que
   d'imposer une hauteur : c'est la largeur qui commande, donc aucun risque de
   déformation ni de bande noire sur les côtés. */
.fiche-video{display:block; padding:1.6rem var(--pad) 0}
.video-scene{
  width:100%; max-width:calc(min(70vh, 620px) * 16 / 9);
  margin:0 auto; border-radius:16px; overflow:hidden;
  background:#000; aspect-ratio:16/9;
  box-shadow:0 24px 60px -30px rgba(23,24,28,.5);
}
.video-scene iframe, .video-scene video{width:100%; height:100%; border:0; display:block}

.video-infos{
  max-width:calc(min(70vh, 620px) * 16 / 9);
  margin:1.7rem auto 0;
}
.video-infos h1{
  font-size:clamp(1.5rem, 3vw, 2.1rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.15; margin:.2rem 0 .6rem; text-wrap:balance;
}
.video-infos .fiche-meta{margin:0 0 1.2rem}
.video-infos .texte{max-width:70ch; margin-top:1.2rem}

@media (max-width:860px){
  .fiche-video{padding-top:1rem}
  .video-scene, .video-infos{max-width:100%}
}

/* Le visuel de la une prend toute la hauteur du bloc, largeur inchangée.
   Le cadre carré imposé plus haut est levé : c'est désormais la colonne de
   texte qui donne la hauteur, et l'image la remplit.
   Aucune déformation possible — « cover » recadre, il n'étire jamais : l'image
   déborde du cadre et on en garde le centre. C'est le prix à payer pour
   qu'aucun vide n'apparaisse, et c'est le bon prix. */
.une-visuel{
  aspect-ratio:auto;
  align-self:stretch;
  height:100%;
  min-height:260px;
}
.une-cov{width:100%; height:100%; object-fit:cover; object-position:center; display:block}

@media (max-width:900px){
  /* En une seule colonne, plus rien ne donne la hauteur : on retrouve un
     rapport d'image raisonnable plutôt qu'une bande étirée. */
  .une-visuel{height:auto; aspect-ratio:4/3; min-height:0; max-width:100%}
}

/* Le bloc du direct est étiré à la hauteur de la carte voisine. Tout le
   surplus se déversait en une seule fois JUSTE au-dessus du bouton — cent
   pixels de vide, mesurés — parce que c'était le seul élément à réclamer la
   place restante.
   L'onde la prend désormais à sa place : elle est faite pour s'étendre, ses
   barres sont dimensionnées en pourcentage et grandissent avec elle. Le
   plafond l'empêche de virer au décor envahissant quand le bloc est très
   haut. */
.bloc-direct .onde{flex:1 1 auto; min-height:52px; max-height:132px}

/* Extrait de l'article dans la carte de une. Le nombre de lignes est posé par
   le script ; ces règles ne font que préparer la coupure. */
.une-extrait{
  font-size:.88rem; line-height:1.55; color:var(--dim);
  margin:0 0 .8rem; max-width:52ch;
  -webkit-box-orient:vertical; overflow:hidden;
}
.une-extrait[hidden]{display:none !important}

/* Série cliquable dans la ligne de méta. Discrète au repos — elle ne doit pas
   concurrencer les deux boutons juste en dessous — mais franchement lisible
   comme lien au survol. */
.meta-lien{
  color:var(--ink); font-weight:600; text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:1px;
  transition:border-color .16s ease, color .16s ease;
}
.meta-lien:hover{border-color:var(--ink); text-decoration:none}

/* ══════════════════════════════════════════════════════════
   UNE — visuel en fond, texte par-dessus
   ══════════════════════════════════════════════════════════ */

/* Les deux blocs de la une sont désormais alignés par construction : la
   grille les étire tous les deux à la hauteur de la rangée, et plus rien à
   l'intérieur de la carte du podcast ne réclame de hauteur propre. Quelle que
   soit la longueur du titre d'antenne à droite, les bas s'alignent. */
.une-podcast{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end;         /* le texte se pose en bas */
  min-height:340px;
  padding:0; border:0; background:var(--ink);
  border-radius:14px;
}

.une-fond{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;   /* recadre, ne déforme jamais */
  display:block;
}

/* Le voile : dense là où se trouve le texte, presque nul en haut. Sans lui,
   un titre blanc sur une photo claire devient illisible — et on ne peut pas
   savoir à l'avance si la photo du jour sera claire ou sombre. */
.une-voile{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(18,19,23,.95) 0%,
    rgba(18,19,23,.88) 28%,
    rgba(18,19,23,.55) 58%,
    rgba(18,19,23,.18) 82%,
    rgba(18,19,23,.05) 100%
  );
}

.une-corps{
  position:relative;                          /* au-dessus du voile */
  display:block; height:auto; min-height:0;
  width:100%; padding:1.6rem 1.7rem 1.5rem;
  color:#fff;
}
.une-corps .etiquette{color:var(--yel); margin:0 0 .55rem}
.une-corps h1{
  color:#fff; max-width:26ch;
  font-size:clamp(1.5rem, 2.8vw, 2.1rem); margin:0 0 .55rem;
}
.une-corps .chapo{
  color:rgba(255,255,255,.82); max-width:60ch;
  -webkit-line-clamp:3; margin:0 0 .9rem;
}
.une-corps .meta{color:rgba(255,255,255,.62); margin:0 0 1.1rem}
.une-corps .meta-lien{color:#fff; border-bottom-color:rgba(255,255,255,.35)}
.une-corps .meta-lien:hover{border-bottom-color:#fff}
.une-actions{margin:0}

/* Sur fond sombre, le bouton secondaire ne peut plus être blanc cerné de
   gris : il devient un contour clair, et se remplit au survol. */
.une-actions .btn-suite{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.45);
}
.une-actions .btn-suite:hover{background:rgba(255,255,255,.14); border-color:#fff}

/* Image absente : le garde-fou pose le visuel de remplacement sur la carte
   elle-même, le voile et le texte continuent de fonctionner. */
.une-podcast.sans-image{background-color:var(--ink)}

@media (max-width:900px){
  /* En colonne unique, la carte n'a plus de voisine dont s'aligner : une
     hauteur minimale l'empêche de se réduire à une bande. */
  .une-podcast{min-height:400px}
  .une-corps{padding:1.3rem 1.3rem 1.2rem}
}

/* La barre de filtres passe AU-DESSUS de l'en-tête dans l'ordre d'empilement.
   Les deux sont collants et se croisent quand l'en-tête réapparaît : c'est la
   barre de filtres, liée au contenu qu'on parcourt, qui doit rester visible —
   pas le menu, qu'on peut toujours faire revenir en remontant. */
.filtres, .filtres-ligne{z-index:45}

/* L'en-tête ne mord plus sur ce qui le suit immédiatement : les ancres et les
   éléments collants gardent leur dégagement même quand il est affiché. */
.entete{z-index:40}

/* Bouton d'écoute de la une, en rose. La pastille reste jaune : les deux
   couleurs se côtoient déjà dans le logo, et c'est ce contraste chaud qui
   fait ressortir le bouton sur une photo. */
.une-actions .btn-ecouter{background:var(--fuchsia); color:#fff}
.une-actions .btn-ecouter:hover{background:#F42186}

/* Hauteur de la vidéo : ce qui reste de l'écran une fois retirés l'en-tête,
   le fil d'Ariane, le titre, la date et la barre de lecture fixée en bas.
   Le but est qu'on puisse lire le titre sans faire défiler, sur n'importe
   quel écran — une vidéo qui remplit la fenêtre à elle seule oblige à
   descendre pour savoir ce qu'on regarde.
   Le plancher de 220 px évite qu'elle devienne un timbre-poste sur un écran
   très bas, quitte à ce que le titre passe sous la ligne de flottaison :
   à ce moment-là, c'est la vidéo qui compte. */
.fiche-video{--h-video:clamp(220px, calc(100vh - 330px), 560px)}
.video-scene{max-width:calc(var(--h-video) * 16 / 9)}
.video-infos{max-width:calc(var(--h-video) * 16 / 9)}

/* ══════════════════════════════════════════════════════════
   ÉVÉNEMENTS — le visuel prend de l'ampleur
   ══════════════════════════════════════════════════════════ */

/* Les vignettes de 104 px se lisaient comme une décoration. À 190 px, l'image
   devient l'accroche de la ligne — c'est elle qu'on regarde en premier dans
   un agenda. La ligne entière reste un lien : l'image, la date et le titre
   ouvrent tous l'événement. */
.evt-ligne{
  grid-template-columns:4.4rem 190px minmax(0,1fr);
  gap:1.6rem; padding:1.1rem .3rem;
  border-radius:12px;
  transition:background .18s ease;
}
.evt-vignette{
  width:190px; aspect-ratio:4/3; border-radius:11px;
  overflow:hidden;   /* indispensable : sans lui, l'image agrandie au survol
                        déborderait du cadre arrondi */
}
.evt-vignette img{
  transition:transform .35s cubic-bezier(.2,.9,.3,1);
}
/* Le léger rapprochement au survol dit que l'image est cliquable — elle
   l'était déjà, mais rien ne le laissait deviner. */
.evt-ligne:hover .evt-vignette img{transform:scale(1.06)}
.evt-ligne:hover{background:var(--panel)}

.evt-texte-ligne .evt-titre{font-size:1.15rem}

@media (max-width:720px){
  .evt-ligne{grid-template-columns:3.4rem 120px minmax(0,1fr); gap:1rem}
  .evt-vignette{width:120px}
  .evt-texte-ligne .evt-titre{font-size:1rem}
}
@media (max-width:520px){
  /* Sous cette largeur, trois colonnes deviennent illisibles : l'image passe
     pleine largeur et le reste se range dessous. */
  .evt-ligne{grid-template-columns:3.4rem minmax(0,1fr); gap:.8rem 1rem}
  .evt-vignette{grid-column:1 / -1; grid-row:1; width:100%; aspect-ratio:16/9}
  .evt-date{grid-row:2}
  .evt-texte-ligne{grid-row:2}
}

/* En-tête de la page Pro : le texte à gauche, le logo à droite.
   « align-items:center » plutôt que « start » : le logo est un bloc compact
   face à un paragraphe de trois lignes, il se cale sur son milieu optique. */
.pro-tete{
  display:flex; align-items:center; justify-content:space-between;
  gap:2.5rem; margin:0 0 1.8rem;
}
.pro-tete .intro{margin:0; flex:1}
.pro-logo{height:92px; width:auto; flex:none; display:block}

@media (max-width:720px){
  /* Le logo passe au-dessus du texte : côte à côte, il ne resterait rien
     pour le paragraphe. */
  .pro-tete{flex-direction:column-reverse; align-items:flex-start; gap:1.2rem}
  .pro-logo{height:74px}
}

/* Variante large du logo dans l'en-tête : la signature « la radio de
   l'insertion » est posée à gauche du sigle, l'ensemble est donc bien plus
   étendu que haut (rapport 1,82 contre 1,17).
   À hauteur égale il occuperait 60 % de largeur en plus et écraserait la
   navigation ; on le réduit un peu et on rend les marges négatives, qui
   n'ont plus lieu d'être — cette version ne déborde plus du bandeau. */
.logo img{height:52px; margin-block:0}
@media (max-width:640px){ .logo img{height:40px; margin-block:0} }

/* L'en-tête retrouve donc sa hauteur naturelle : plus rien ne dépasse, et
   l'escamotage n'a plus à compenser un débordement. */
.entete-cachee{transform:translateY(-100%)}

/* Logo vectoriel : net à toutes les tailles et sur tous les écrans, 7 Ko.
   Son texte a été converti en tracés — la version d'origine s'appuyait sur
   Poppins, et une police qui tarde à charger aurait déformé le logo, voire
   débordé de son cadre. Un logo ne doit dépendre de rien. */
.logo img{height:48px; margin-block:0}
@media (max-width:640px){ .logo img{height:38px} }

/* ══════════════════════════════════════════════════════════
   LA RADIO — trois repères, sans cadre
   ══════════════════════════════════════════════════════════ */

/* Un filet fin sépare les colonnes au lieu de trois boîtes : la page cesse
   d'être découpée, et le regard passe d'un repère à l'autre sans obstacle. */
.reperes{
  display:grid; grid-template-columns:repeat(var(--colonnes,3), minmax(0,1fr));
  gap:2.2rem 1.8rem; margin:2rem 0 .5rem;
}
.repere{
  display:flex; flex-direction:column; gap:.15rem;
  padding-left:1.6rem; border-left:1px solid var(--line);
}
/* Le filet marque une séparation entre voisins de la même ligne. Il doit
   donc sauter à chaque début de ligne — pas seulement au tout premier
   repère, sinon la deuxième ligne s'ouvre sur un trait orphelin. Le nombre
   de colonnes est connu du gabarit, d'où ces cinq variantes. */
/* Ces variantes ne valent que sur grand écran : en dessous, c'est la place
   disponible qui fixe le nombre de colonnes, et ces règles-là, plus
   spécifiques, empêcheraient les suivantes de reposer les filets au bon
   endroit. */
@media (min-width:1081px){
  .reperes[data-colonnes="1"] .repere,
  .reperes[data-colonnes="2"] .repere:nth-child(2n+1),
  .reperes[data-colonnes="3"] .repere:nth-child(3n+1),
  .reperes[data-colonnes="4"] .repere:nth-child(4n+1),
  .reperes[data-colonnes="5"] .repere:nth-child(5n+1),
  .reperes[data-colonnes="6"] .repere:nth-child(6n+1){padding-left:0; border-left:0}
}

.repere svg{
  width:30px; height:30px; color:var(--or); margin-bottom:.7rem;
  transition:transform .3s cubic-bezier(.2,.9,.3,1);
}
.reperes:hover .repere svg{transform:translateY(-2px)}

/* Le chiffre suit la largeur disponible : à cinq colonnes, un 2,2 rem
   déborderait sur des valeurs comme « 12 000 ». */
.repere b{
  font-size:clamp(1.5rem, 1rem + 1.4vw, 2.2rem);
  font-weight:800; letter-spacing:-.035em; line-height:1.05;
}
.repere span{font-size:.88rem; color:var(--dim); line-height:1.45; max-width:22ch}

/* En dessous du grand écran, le nombre de colonnes ne dépend plus du contenu
   mais de la place : on reprend la main sur --colonnes, et les règles de
   filet ci-dessus deviennent caduques — d'où leur remise à plat à chaque
   palier. */
@media (max-width:1080px){
  .reperes{--colonnes:3 !important; gap:2rem 1.5rem}
  .reperes .repere{padding-left:1.4rem; border-left:1px solid var(--line)}
  .reperes .repere:nth-child(3n+1){padding-left:0; border-left:0}
}
@media (max-width:820px){
  .reperes{--colonnes:2 !important; gap:1.8rem 1.4rem}
  /* :nth-child(n) vise tout le monde à la même force que la règle du palier
     précédent : sans cela, le filet retiré pour une grille de trois colonnes
     resterait absent au milieu d'une ligne de deux. */
  .reperes .repere:nth-child(n){padding-left:1.2rem; border-left:1px solid var(--line)}
  .reperes .repere:nth-child(2n+1){padding-left:0; border-left:0}
}
/* Sur mobile, trois colonnes plutôt qu'une : ce sont des chiffres courts,
   et une pile de six lignes ferait défiler pour rien. Le filet vertical
   disparaît, la place manque pour le tenir. */
@media (max-width:520px){
  .reperes{--colonnes:3 !important; gap:1.4rem .9rem}
  .reperes .repere:nth-child(n){padding-left:0; border-left:0; border-top:0; padding-top:0}
  .repere svg{margin-bottom:.4rem; width:22px; height:22px}
  .repere b{font-size:clamp(1.1rem, 5.5vw, 1.5rem)}
  .repere span{font-size:.72rem; line-height:1.3; max-width:none}
}

/* ══════════════════════════════════════════════════════════
   ÉLÉMENTS COLLANTS — sous le menu, jamais derrière
   ══════════════════════════════════════════════════════════ */

/* Le visuel d'un article et le lecteur vidéo s'arrêtaient à 24 px du haut de
   la fenêtre, c'est-à-dire DERRIÈRE l'en-tête, qui est lui aussi collant et
   passe devant. En remontant, le menu réapparaissait et masquait le haut de
   l'image.
   Ils s'accrochent désormais à la même variable que les barres de filtres :
   la hauteur réellement occupée par l'en-tête, que le script tient à jour —
   78 px quand il est visible, 0 quand il est escamoté. L'image suit le menu
   au lieu de se cacher dessous. */
.fiche-media, .lecteur-video{
  top:calc(var(--h-entete, 78px) + 1.2rem);
  transition:top .28s cubic-bezier(.22,.9,.3,1);
}

@media (prefers-reduced-motion:reduce){
  .fiche-media, .lecteur-video{transition:none}
}
@media (max-width:900px){
  /* En une seule colonne, rien ne colle : la règle ne doit pas ressusciter le
     comportement désactivé plus haut. */
  .fiche-media, .lecteur-video{top:auto; transition:none}
}

/* ══════════════════════════════════════════════════════════
   ANIMATION D'ENTRÉE — sans transformation
   ══════════════════════════════════════════════════════════ */

/* Un élément transformé devient le référent des positions collantes de ses
   descendants. Or chaque bloc de « main » portait une animation d'entrée avec
   un déplacement : l'image d'un article ne collait donc plus à la fenêtre mais
   à son propre article, autrement dit elle ne collait plus du tout, et le
   menu la recouvrait en remontant. Mesuré : « transform » présent sur .fiche,
   image à −84 px alors qu'elle aurait dû être arrêtée sous l'en-tête.
   L'animation ne joue plus que sur l'opacité. On perd le léger mouvement
   vers le haut ; on récupère tous les comportements collants du site, qui
   sont fonctionnels et non décoratifs. */
@keyframes lri-entree{ from{ opacity:0; } to{ opacity:1; } }

/* ══════════════════════════════════════════════════════════
   VISIONNEUSE D'IMAGE
   ══════════════════════════════════════════════════════════ */

/* Le visuel devient un bouton : il faut donc annuler l'apparence de bouton
   du navigateur, sans quoi on hérite d'un fond gris et d'une bordure. */
.agrandissable{
  position:relative; padding:0; border:0; background:none; cursor:zoom-in;
  display:block; width:100%; overflow:hidden;
}
.agrandissable img{transition:transform .4s cubic-bezier(.2,.9,.3,1)}
.agrandissable:hover img{transform:scale(1.03)}
.loupe{
  position:absolute; right:.7rem; bottom:.7rem;
  width:38px; height:38px; border-radius:50%;
  background:rgba(23,24,28,.62); color:#fff;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
  transition:background .18s ease, transform .18s ease;
}
.loupe svg{width:19px; height:19px}
.agrandissable:hover .loupe{background:var(--ink); transform:scale(1.06)}
.agrandissable:focus-visible{outline:3px solid var(--yel); outline-offset:3px}

.visionneuse{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem, 4vw, 3rem);
  background:rgba(12,13,16,.92);
  opacity:0; transition:opacity .2s ease;
}
.visionneuse.ouverte{opacity:1}
.visionneuse img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;              /* jamais de déformation */
  object-fit:contain;                   /* on montre TOUT, on ne recadre pas */
  border-radius:10px; cursor:default;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
  transform:scale(.97); transition:transform .24s cubic-bezier(.2,.9,.3,1);
}
.visionneuse.ouverte img{transform:scale(1)}
.visionneuse-fermer{
  position:absolute; top:1rem; right:1rem;
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease;
}
.visionneuse-fermer svg{width:20px; height:20px}
.visionneuse-fermer:hover{background:rgba(255,255,255,.28)}
.visionneuse-fermer:focus-visible{outline:3px solid var(--yel); outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .visionneuse, .visionneuse img, .agrandissable img{transition:none}
  .visionneuse img{transform:none}
}

/* ══════════════════════════════════════════════════════════
   PARTENAIRES — les logos d'abord
   ══════════════════════════════════════════════════════════ */

/* Le cadre sombre partait d'une bonne intention — rendre lisibles les logos
   blancs sur fond transparent — mais ceux de LRI portent déjà leur propre
   fond blanc. Résultat : un timbre clair perdu au milieu d'une grande carte
   grise, et c'est la carte qu'on voyait, pas le partenaire.
   Plus de cadre. Le logo occupe la place, en grand, sur le fond de la page. */
.partenaire{
  background:none; border:0; padding:0; color:inherit;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  text-decoration:none; transition:transform .2s ease;
}
.partenaire:hover{background:none; transform:translateY(-3px)}

/* Cadre carré, quelle que soit la largeur de la colonne. Les logos reçus
   n'ont aucune proportion commune — un rond, une bannière, un timbre — et
   seule une boîte de forme constante les met sur un pied d'égalité. */
.partenaire-logo{
  width:100%; aspect-ratio:1; height:auto;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:14px; padding:1rem;
  border:1px solid var(--line);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.partenaire:hover .partenaire-logo{
  border-color:transparent;
  box-shadow:0 14px 34px -16px rgba(23,24,28,.35);
}
/* « contain » : un logo n'est jamais recadré ni déformé, quelles que soient
   ses proportions. C'est la règle absolue sur la marque d'autrui. */
.partenaire-logo img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block;
}

.partenaire span{
  color:var(--ink); font-size:.9rem; font-weight:700; text-align:center;
  line-height:1.3;
}

/* Le pavé de secours ne doit pas s'appliquer ici : le visuel LRI à la place
   du logo d'un partenaire prêterait à confusion. Le nom suffit. */
.partenaire-logo.sans-image{
  background:var(--panel); background-image:none;
}
.partenaire-logo.sans-image::after{
  content:""; display:none;
}

/* ---- bande « Avec » de l'accueil ---- */

/* Même raison : la pastille anthracite encadrait des logos qui ont déjà leur
   fond. On garde une pastille, mais claire, et le logo y gagne en taille. */
.part-pastille{
  background:#fff; border:1px solid var(--line);
  height:64px; min-width:110px; padding:.55rem 1rem;
}
.part-pastille:hover{
  background:#fff; border-color:transparent;
  box-shadow:0 12px 26px -14px rgba(23,24,28,.35);
  transform:translateY(-2px);
}
.part-pastille img{max-height:44px; max-width:170px}
.part-nom{color:var(--ink)}

@media (max-width:640px){
  /* Le cadre reste carré : une hauteur fixe le rendait rectangulaire dès que
     la colonne se rétrécissait, et les logos ne s'alignaient plus. */
  .partenaire-logo{height:auto; aspect-ratio:1; padding:.5rem}
  .part-pastille{height:54px; min-width:92px}
  .part-pastille img{max-height:36px; max-width:130px}
}

/* ══════════════════════════════════════════════════════════
   MENUS DÉROULANTS SUR MESURE
   ══════════════════════════════════════════════════════════ */

.menu-lri{position:relative; min-width:13rem}

/* Le <select> reste dans la page — il porte la valeur et part avec le
   formulaire — mais il est retiré de l'affichage et du parcours au clavier :
   sans cela on tabulerait deux fois sur le même réglage. */
.menu-lri select{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); border:0;
}

.menu-lri-bouton{
  display:flex; align-items:center; justify-content:space-between; gap:.9rem;
  width:100%; text-align:left; cursor:pointer;
  background:var(--anthracite); color:#fff; border:1px solid transparent;
  border-radius:12px; padding:.62rem 1.05rem;
  font:inherit; font-size:.88rem; font-weight:600;
  transition:background .16s ease, border-color .16s ease;
}
/* Le chevron est dessiné en CSS : une image de plus pour trois traits
   serait une requête de trop. */
.menu-lri-bouton::after{
  content:""; flex:none; width:.5rem; height:.5rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s ease;
}
.menu-lri-bouton:hover{background:#3A3D46}
.menu-lri.ouvert .menu-lri-bouton{background:var(--fuchsia)}
.menu-lri.ouvert .menu-lri-bouton::after{transform:translateY(1px) rotate(-135deg)}
.menu-lri-bouton:focus-visible{outline:3px solid var(--yel); outline-offset:2px}
/* Un filtre actif se voit sans qu'on ait à lire : le rose le signale. */
.menu-lri-bouton.choisi{background:var(--fuchsia)}
.menu-lri-bouton.choisi:hover{background:#F42186}

.menu-lri-liste{
  position:absolute; z-index:60; top:calc(100% + .4rem); left:0; right:0;
  margin:0; padding:.35rem; list-style:none;
  background:var(--anthracite); border-radius:14px;
  box-shadow:0 22px 46px -18px rgba(12,13,16,.65);
  max-height:min(60vh, 340px); overflow-y:auto;
  animation:lri-menu .16s ease-out;
}
@keyframes lri-menu{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } }
.menu-lri-liste[hidden]{display:none}

.menu-lri-choix{
  padding:.55rem .85rem; border-radius:9px; cursor:pointer;
  color:rgba(255,255,255,.86); font-size:.88rem; font-weight:500;
  display:flex; align-items:center; justify-content:space-between; gap:.7rem;
}
.menu-lri-choix.survole{background:var(--fuchsia); color:#fff}
.menu-lri-choix[aria-selected="true"]{color:#fff; font-weight:700}
/* La coche marque le choix courant même quand le survol est ailleurs : sans
   elle, on perd de vue ce qui est sélectionné en parcourant la liste. */
.menu-lri-choix[aria-selected="true"]::after{
  content:""; flex:none; width:.42rem; height:.72rem;
  border-right:2px solid var(--yel); border-bottom:2px solid var(--yel);
  transform:rotate(45deg) translate(-1px,-1px);
}
.menu-lri-choix[aria-selected="true"].survole::after{border-color:#fff}

/* Sous ce seuil, le script ne construit rien : le sélecteur du téléphone
   reprend la main, et il est plus confortable que tout ce qu'on dessinerait. */
@media (max-width:720px){
  .menu-lri{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .menu-lri-liste{animation:none}
  .menu-lri-bouton::after{transition:none}
}

/* ══════════════════════════════════════════════════════════
   AGENDA
   ══════════════════════════════════════════════════════════ */

/* Le prochain rendez-vous : visuel carré, date empilée, titre dominant, et
   sous eux une ligne lieu / lien. Aucun cadre — c'est l'échelle qui distingue
   ce bloc des lignes suivantes, et un filet qui l'en sépare. */
.evt-une{
  display:grid; grid-template-columns:290px minmax(0,1fr); gap:2rem;
  align-items:stretch; color:inherit; text-decoration:none;
  padding:0 0 1.8rem; margin:0 0 .2rem;
  border-bottom:1px solid var(--line);
}
.evt-une.sans-visuel{grid-template-columns:1fr}

.evt-une-visuel{
  overflow:hidden; border-radius:16px; background:var(--panel);
  aspect-ratio:1; transition:box-shadow .25s ease;
}
.evt-une-visuel img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.9,.3,1);
}
.evt-une:hover .evt-une-visuel{box-shadow:0 20px 40px -22px rgba(23,24,28,.4)}
.evt-une:hover .evt-une-visuel img{transform:scale(1.04)}

/* Deux colonnes : la date, puis tout le reste. Le titre, l'accroche et la
   ligne du bas partagent la même colonne, donc le même bord gauche. */
.evt-une-corps{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:1.5rem; row-gap:1rem; align-content:center; min-width:0;
}
/* La date se centre sur la HAUTEUR DU TITRE, pas sur celle du bloc entier :
   un titre d'une ligne la met à sa hauteur, deux lignes l'encadrent, trois
   la posent en face de la deuxième. C'est la rangée du titre qui commande. */
.evt-une-corps > .evt-cal{grid-column:1; grid-row:1; align-self:center; margin-top:0}
/* Le titre se centre lui aussi dans sa rangée : sans cela, un titre d'une
   seule ligne serait collé en haut d'une rangée à la hauteur de la date, et
   les deux ne seraient pas sur la même ligne — précisément ce qu'on cherche. */
.evt-une-titre{grid-column:2; grid-row:1; align-self:center}
.evt-une-texte, .evt-une-bas{grid-column:2}

/* Calendrier empilé : trois lignes courtes se saisissent d'un regard, là où
   une date en toutes lettres se lit mot à mot.
   La remontée négative aligne le QUANTIÈME sur la première ligne du titre :
   c'est le chiffre qu'on compare au titre, pas l'abréviation du jour qui le
   surmonte. Sa valeur vaut la hauteur de cette abréviation. */
.evt-cal{
  display:flex; flex-direction:column; align-items:center; flex:none;
  line-height:1; margin-top:-1.3rem;
}
.evt-cal i{
  font-style:normal; font-size:.86rem; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink);
}
.evt-cal b{
  font-size:3.1rem; font-weight:800; letter-spacing:-.05em;
  color:var(--fuchsia); margin:.1rem 0;
}

.evt-une-titre{
  font-size:clamp(1.9rem, 4vw, 3rem); font-weight:800;
  letter-spacing:-.04em; line-height:1.02; text-wrap:balance; min-width:0;
}

.evt-une-bas{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
}
.evt-une-bas i{font-style:italic; font-size:1.05rem; color:var(--dim)}
.evt-une-lien{
  font-size:1rem; color:var(--dim); font-weight:500;
  transition:color .18s ease;
}
.evt-une:hover .evt-une-lien{color:var(--ink)}

/* Le texte va jusqu'au bord : rien ne le bride avant la fin de la ligne. */
.evt-une-texte{
  font-size:1rem; line-height:1.55; color:var(--dim); max-width:none;
}
.evt-une-texte em{
  font-style:normal; font-weight:700; color:var(--or); white-space:nowrap;
}
.evt-une:hover .evt-une-texte em{color:var(--ink)}

@media (max-width:820px){
  .evt-une{grid-template-columns:1fr; gap:1.2rem; padding-bottom:1.4rem}
  .evt-une-visuel{aspect-ratio:16/9}
  .evt-cal b{font-size:2.4rem}
  .evt-cal{margin-top:-.9rem}
  .evt-une-corps{column-gap:1.1rem}
}

/* ---- signal du champ pré-rempli ---- */

/* Le halo d'une seconde passait inaperçu si l'on regardait ailleurs pendant
   le défilement. Le champ garde donc une marque tant qu'une prestation est
   choisie : bordure encrée et pastille rose. */
.champ select.rempli, .champ input.rempli{
  border-color:var(--ink); box-shadow:inset 3px 0 0 var(--fuchsia);
}

/* Recherche de la page vidéos : elle partage la rangée des pastilles, mais
   garde sa largeur propre pour ne pas être compressée par le nombre de
   thématiques. */
.cherche-video{flex:0 1 300px; min-width:200px; display:flex}
.cherche-video .cherche{width:100%; max-width:none; min-width:0}
.filtres-ligne{gap:.55rem}

@media (max-width:720px){
  /* Sur petit écran, la recherche prend sa propre ligne : à côté des
     pastilles, elle n'aurait plus la place d'afficher ce qu'on tape. */
  .filtres-ligne{flex-wrap:wrap; overflow-x:visible}
  .cherche-video{flex:1 1 100%; margin-bottom:.2rem}
}

/* Lignes suivantes : le quantième en rose, le mois dessous, la vignette, puis
   le titre et le lieu. Même grammaire que le bloc du haut, en plus petit. */
.evt-date{gap:.1rem}
.evt-date b{font-size:1.6rem; font-weight:800; letter-spacing:-.04em; color:var(--fuchsia); line-height:1}
.evt-date i{
  font-style:normal; font-size:.72rem; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink); margin-top:.2rem;
}
.evt-texte-ligne .evt-titre{font-size:1.05rem; font-weight:700}
.evt-texte-ligne .evt-lieu{font-style:italic; font-size:.92rem; color:var(--dim); opacity:1}
.evt-ligne{grid-template-columns:3.6rem 150px minmax(0,1fr); gap:1.4rem}
.evt-vignette{width:150px; aspect-ratio:5/4; border-radius:12px}

/* ══════════════════════════════════════════════════════════
   ACCUEIL — bloc agenda sans cadre
   ══════════════════════════════════════════════════════════ */

/* Le cadre disparaît : à côté de la carte du podcast, qui est déjà un bloc
   plein, il ajoutait une boîte dans une boîte. La hiérarchie tient
   maintenant par l'échelle et par les filets. */
.evt{
  border:0; background:none; padding:0;
  display:flex; flex-direction:column;
}

.evt-vedette{
  display:block; text-decoration:none; color:inherit;
  margin:.9rem 0 .2rem;
}
.evt-vedette-visuel{
  display:block; width:100%; aspect-ratio:16/10;
  border-radius:14px; overflow:hidden; background:var(--panel);
}
.evt-vedette-visuel img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s cubic-bezier(.2,.9,.3,1);
}
.evt-vedette:hover .evt-vedette-visuel img{transform:scale(1.04)}

.evt-vedette-bas{display:flex; align-items:flex-start; gap:1rem; margin-top:.9rem}
.evt-vedette .evt-cal{padding-top:.1rem}
.evt-vedette .evt-cal b{font-size:2.2rem; margin:0}
.evt-vedette .evt-cal i{font-size:.72rem; margin-top:.15rem}

.evt-vedette-texte{display:flex; flex-direction:column; gap:.2rem; min-width:0}
.evt-vedette-texte b{
  font-size:1.25rem; font-weight:800; line-height:1.2;
  letter-spacing:-.025em; text-wrap:balance;
}
.evt-vedette-texte i{font-style:italic; font-size:.9rem; color:var(--dim)}
.evt-vedette:hover .evt-vedette-texte b{color:var(--or)}

/* Les deux suivants : un filet les sépare de la vedette et l'un de l'autre. */
.evt-liste{margin-top:1.1rem; border-top:1px solid var(--line)}
.evt-liste a{padding-block:.7rem}
.evt-jour b{font-size:1.35rem; color:var(--fuchsia); letter-spacing:-.04em}
.evt-jour i{
  font-style:normal; font-size:.66rem; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink);
}
.evt-texte i{font-style:italic}

.evt-pied{padding-top:1.3rem}

/* ══════════════════════════════════════════════════════════
   LIENS — survol sans soulignement
   ══════════════════════════════════════════════════════════ */

/* Plus aucun trait sous les liens : c'est la couleur qui signale le survol.
   Le texte ne bouge donc plus d'un pixel au passage de la souris — un
   soulignement modifie la hauteur de ligne dans certains contextes et fait
   « sauter » la mise en page.
   Une réserve à connaître : dans un paragraphe de texte courant, la couleur
   seule est un repère plus faible qu'un trait, en particulier pour qui
   distingue mal les nuances. Les liens du site vivent presque tous dans des
   titres, des boutons ou des listes, où la position et la forme suffisent —
   c'est ce qui rend le compromis acceptable ici. */
a{text-decoration:none}
a:hover, a:focus-visible{text-decoration:none}

/* Titres de cartes et d'articles : ils passent à l'or. */
.carte-corps h3 a:hover,
.video-corps h3 a:hover,
.evt-texte-ligne:hover .evt-titre{color:var(--or)}

/* La série de la une gardait un filet permanent : elle passe à l'or comme
   les autres, sans trait. */
.meta-lien{border-bottom:0; padding-bottom:0; color:#fff; font-weight:700}
.meta-lien:hover{color:var(--yel)}

/* Dans le corps d'un texte rédigé, en revanche, le lien reste souligné :
   c'est le seul endroit où rien d'autre ne le distingue de la phrase qui
   l'entoure. */
.texte a, .intro a, .bloc-texte p a{
  text-decoration:underline; text-underline-offset:.18em;
  text-decoration-thickness:1px; color:var(--or); font-weight:600;
}
.texte a:hover, .intro a:hover, .bloc-texte p a:hover{
  text-decoration:underline; color:var(--ink);
}

/* Bloc partenaires de l'accueil : c'est le même composant que sur « La radio ».
   L'ancienne bande « Avec … » et ses pastilles disparaissent — deux façons de
   présenter les mêmes logos sur le même site, c'était une de trop. */
.partenaires-accueil{padding-top:var(--rythme)}

/* Visuel du prochain rendez-vous, sur l'accueil : sa hauteur est bornée au
   lieu de suivre un rapport d'image.
   Sans ce plafond, dès que la colonne s'élargit — et elle prend toute la page
   sous 900 px, quand les deux colonnes se replient — l'image atteignait plus
   de 500 px de haut et écrasait tout le bloc.
   C'est la hauteur qu'on fixe, jamais la largeur : l'image reste pleine
   largeur et se recadre, elle ne se déforme pas. */
.evt-vedette-visuel{
  aspect-ratio:auto;
  height:clamp(170px, 22vw, 250px);
}

/* Texte de présentation de la vidéo à la une : cinq lignes, pas une de plus.
   La coupure est confiée à la feuille de style et non au serveur, parce qu'il
   s'agit d'un nombre de LIGNES : leur contenu dépend de la largeur de la
   carte, qui change avec l'écran. Compter des caractères donnerait quatre
   lignes ici et six là. */
.video-texte{
  font-size:.92rem; line-height:1.55; color:rgba(255,255,255,.68);
  margin:.9rem 0 0; max-width:64ch;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5;
  overflow:hidden;
}

/* Le bouton mène à la fiche, qui porte le texte entier ET la vidéo : il a
   donc toujours quelque chose de plus à offrir, même si le texte tenait en
   cinq lignes. */
.video-suite{
  margin-top:1.1rem; align-self:flex-start;
  background:transparent; color:#fff; border-color:rgba(255,255,255,.4);
}
.video-suite:hover{background:rgba(255,255,255,.14); border-color:#fff}
.video-corps{display:flex; flex-direction:column; align-items:flex-start}

/* Les deux blocs de la rangée « vidéo / agenda » s'alignent : la carte de la
   vidéo s'étire à la hauteur de l'agenda, et son texte occupe la place ainsi
   libérée — le nombre de lignes est calculé à l'affichage par le script. */
.duo{align-items:stretch}
.video{display:flex; flex-direction:column}
.video-corps{flex:1; display:flex; flex-direction:column; align-items:flex-start}
.video-texte{flex:0 1 auto}
.video-suite{margin-top:auto}

/* Agenda de l'accueil : respiration sous le visuel, et titre aligné sur le
   quantième. */
/* « baseline » plutôt que « flex-start » : les deux textes s'assoient sur la
   même ligne d'écriture, celle du chiffre. C'est ce que fait un typographe
   quand il compose deux corps différents côte à côte — et le navigateur sait
   le calculer seul, quelles que soient les tailles. */
.evt-vedette-bas{margin-top:1.5rem; align-items:baseline}

/* Le titre passe en capitales et grossit.
   L'alignement des deux capitales est calculé, pas approché : d'après les
   métriques de Poppins Bold (ascendante 1,050 em, hauteur de capitale
   0,705 em), l'alignement par le haut laissait le titre trop bas.
   Le calage se fait donc sur la ligne de base, et aucun décalage manuel n'est
   nécessaire : le navigateur place les deux textes sur la même ligne. */
.evt-vedette-texte{padding-top:0}
.evt-vedette-texte b{
  font-size:1.35rem; font-weight:800; line-height:1.15;
  letter-spacing:.005em; text-transform:uppercase;
}
.evt-vedette .evt-cal{padding-top:0}

/* Les lignes du dessous décalent leur date de 0,55 rem — la marge intérieure
   qui accueille le fond du survol — et lui donnent 3 rem de large. La date
   mise en avant reprend exactement ces deux valeurs : les trois quantièmes
   tombent alors sur le même axe vertical, ce qui donne son ordre à la
   colonne. */
.evt-vedette .evt-cal{width:3rem; margin-left:.55rem}
.evt-vedette-bas{padding-inline:0}

/* Le titre remonte de trois pixels : posé exactement sur la ligne de base du
   chiffre, il paraissait encore un rien bas — les capitales d'un corps plus
   petit se lisent optiquement plus bas que celles d'un très grand. */
.evt-vedette-texte{position:relative; top:-3px}

/* Page agenda : plus de correction optique sur ce titre. Elle servait à le
   poser sur la ligne de base du quantième, du temps où la date était calée
   en haut. La date se centre maintenant sur la hauteur du titre — la remontée
   ne compenserait plus rien, elle décalerait. */

/* Retour au logo compact — la carte seule, signature à l'intérieur. Il est
   presque deux fois moins large que la version à signature déportée, à
   hauteur égale : la navigation retrouve la place qu'elle avait perdue.
   Les marges négatives reviennent avec lui, il déborde légèrement du bandeau. */
.logo img{height:62px; margin-block:-8px}
@media (max-width:640px){ .logo img{height:46px; margin-block:-5px} }

/* Logo à signature complète. Très étendu — rapport 3,6 — il ne peut pas être
   aussi haut que la carte compacte sans manger la navigation : 44 px de haut
   pour 159 de large, contre 72 pour la carte.
   Il ne déborde plus du bandeau, les marges négatives disparaissent. */
.logo img{height:44px; margin-block:0}
@media (max-width:860px){ .logo img{height:36px} }
@media (max-width:640px){ .logo img{height:30px} }

/* ══════════════════════════════════════════════════════════
   DOCUMENTS À TÉLÉCHARGER
   ══════════════════════════════════════════════════════════ */

.liste-docs{list-style:none; margin:0 0 1.5rem; padding:0; display:flex; flex-direction:column}
.liste-docs li + li{border-top:1px solid var(--line)}
.liste-docs a{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:1.1rem;
  padding:1rem .6rem; border-radius:12px;
  text-decoration:none; color:inherit;
  transition:background .16s ease;
}
.liste-docs a:hover{background:var(--panel)}

.doc-icone{
  width:44px; height:44px; border-radius:11px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--yel);
  transition:background .18s ease;
}
.doc-icone svg{width:21px; height:21px}
.liste-docs a:hover .doc-icone{background:var(--fuchsia); color:#fff}

.doc-texte{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.doc-texte b{font-size:1rem; font-weight:700; line-height:1.3}
.doc-texte i{font-style:normal; font-size:.88rem; color:var(--dim)}

.doc-meta{
  font-size:.74rem; font-weight:700; letter-spacing:.08em; color:var(--dim);
  white-space:nowrap;
}

/* Texte de présentation : une colonne de lecture, pas la pleine largeur. */
.presentation{max-width:72ch; margin:2rem 0 0}
.presentation p{margin:0 0 1rem; line-height:1.7}
.presentation .sous-titre{margin-top:2rem}

@media (max-width:560px){
  .liste-docs a{grid-template-columns:auto minmax(0,1fr); gap:.9rem}
  .doc-meta{grid-column:2; margin-top:.2rem}
}

/* ══════════════════════════════════════════════════════════
   PLACE DU LECTEUR — réservée seulement quand il joue
   ══════════════════════════════════════════════════════════ */

/* La page réservait 84 px en bas pour la barre de lecture, en permanence.
   Or celle-ci n'apparaît qu'une fois qu'on a lancé un son : le reste du
   temps, ces 84 px étaient un vide sous le pied de page.
   La réservation ne se fait donc plus qu'en présence du lecteur.
   Deux mécanismes plutôt qu'un : « :has() » pour les navigateurs récents, et
   une classe posée sur le corps par le script pour les autres. Le premier qui
   répond suffit ; aucun ne laisse la barre recouvrir la fin du pied de page. */
body{padding-bottom:0}
body.avec-lecteur,
body:has(.lecteur.actif){padding-bottom:84px}

@media (max-width:900px){
  body.avec-lecteur, body:has(.lecteur.actif){padding-bottom:76px}
}
@media (max-width:640px){
  body.avec-lecteur, body:has(.lecteur.actif){padding-bottom:70px}
}

/* ══════════════════════════════════════════════════════════
   PRESSE — une double page de journal
   ══════════════════════════════════════════════════════════ */

/* Dix colonnes, et chaque article prend la largeur qu'on lui a donnée au
   back-office. C'est ce qui permet de composer une ligne à la main —
   5 + 3 + 2 la remplit exactement — au lieu de subir une grille régulière
   où tous les articles se valent. */
.presse-grille{
  display:grid; grid-template-columns:repeat(10, minmax(0,1fr));
  gap:2.4rem 2rem;
  /* Les colonnes d'une même ligne descendent toutes aussi bas : le filet
     court jusqu'en bas et le pavé jaune est un vrai bloc, au lieu de laisser
     un vide sous les articles les plus courts. C'est ainsi qu'une page de
     journal est composée. */
  align-items:stretch;
}

/* Pas de carte, pas de fond : un article de journal n'est pas posé sur une
   étiquette. Ce qui sépare deux colonnes, c'est un filet, comme au plomb. */
/* La largeur est posée par le gabarit, colonne par colonne : c'est lui qui
   sait comment remplir la ligne. Le style ne fixe donc plus de span. */
.presse-art{
  padding:0 0 0 1.6rem;
  border-left:1px solid var(--line);
}
/* Premier de sa ligne : pas de filet à sa gauche, il n'y a rien à séparer. */
.presse-debut{padding-left:0; border-left:0}

/* Le grand format garde son fond jaune : c'est la une, elle doit se voir
   au premier coup d'œil. Le seul, sinon il n'y a plus de hiérarchie. */
/* Le fond jaune marque la une : il suit le format choisi au back-office,
   pas la largeur finalement obtenue. */
.presse-f1{background:var(--yel); padding:1.8rem; border-radius:16px; border-left:0}

.presse-img{margin:0 0 .9rem; border-radius:10px; overflow:hidden; background:var(--panel)}
.presse-img img{width:100%; display:block; aspect-ratio:4/3; object-fit:cover}
.presse-f1 .presse-img img{aspect-ratio:16/9}
.presse-f3 .presse-img img{aspect-ratio:1}

.presse-source{
  margin:0 0 .4rem;
  font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--or);
}
.presse-source a{color:inherit; border-bottom:1px solid currentColor}
.presse-source a:hover{color:var(--ink)}
.presse-f1 .presse-source{color:rgba(23,24,28,.62)}

.presse-titre{
  margin:0 0 .35rem; font-weight:800; line-height:1.15; letter-spacing:-.015em;
  font-size:1.15rem;
}
.presse-f1 .presse-titre{font-size:clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing:-.03em}
.presse-f3 .presse-titre{font-size:1rem}

/* Le sous-titre : plus grand que le texte, plus petit que le titre, en gris.
   C'est le chapô d'un article de presse, pas une accroche publicitaire. */
.presse-chapo{
  margin:0 0 .7rem; color:var(--dim); line-height:1.45; font-weight:500;
  font-size:.95rem;
}
.presse-f1 .presse-chapo{font-size:1.1rem; color:rgba(23,24,28,.72)}
.presse-f3 .presse-chapo{font-size:.86rem}

/* Le texte s'affiche en entier : pas de « lire la suite ». D'où une mesure
   confortable et une justification à gauche — un texte de journal se lit en
   continu, il n'a pas à tenir dans une vignette. */
.presse-texte{font-size:.92rem; line-height:1.65; color:var(--ink)}
.presse-texte p{margin:0 0 .8rem}
.presse-texte p:last-child{margin-bottom:0}
.presse-f1 .presse-texte{font-size:1rem; color:rgba(23,24,28,.88)}
.presse-f3 .presse-texte{font-size:.85rem; line-height:1.6}

/* Sur un écran étroit, une grille de dix colonnes ne veut plus rien dire :
   les largeurs choisies deviennent des demi-largeurs, puis toute la largeur.
   Le filet passe alors au-dessus, il ne sépare plus des colonnes. */
@media (max-width:900px){
  .presse-grille{gap:1.8rem 1.4rem}
  /* Les largeurs calculées cèdent la place : sur un écran étroit, tout tient
     sur une demi-largeur, puis sur la largeur entière. Le !important est ici
     nécessaire — la largeur est posée en style sur l'élément lui-même. */
  .presse-art{grid-column:span 5 !important}
  .presse-f1{grid-column:span 10 !important}
}
@media (max-width:600px){
  .presse-art{grid-column:span 10 !important}
  .presse-art{padding:1.4rem 0 0; border-left:0; border-top:1px solid var(--line)}
  .presse-art:first-child{padding-top:0; border-top:0}
  /* En une colonne, tout le monde ouvre sa ligne : le filet redevient un
     séparateur horizontal, et seul le tout premier s'en passe. */
  .presse-debut{padding-left:0}
  .presse-f1{padding:1.4rem; border-top:0}
}

/* ---------- montant dans la fenêtre de commande ---------- */
/* Le prix a quitté le catalogue : il apparaît ici, une fois la prestation
   choisie. Encadré, parce que c'est le seul endroit où il se lit — il ne
   doit pas se confondre avec les champs qui l'entourent. */
.devis-vif{
  display:flex; flex-direction:column; gap:.3rem;
  background:var(--panel); border-radius:12px; padding:.9rem 1.1rem;
  border:1px solid var(--line);
}
.devis-ligne{display:flex; justify-content:space-between; gap:1rem; font-size:.9rem; color:var(--dim)}
.devis-total{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-weight:700}
.devis-total b{font-size:1.35rem; letter-spacing:-.02em}
.devis-vif small{color:var(--dim); font-size:.76rem; line-height:1.4}

/* ---------- choix du paiement ---------- */
/* Deux boutons de même poids visuel : ni l'un ni l'autre n'est le « bon »
   choix, et pousser à la carte serait un procédé. */
.paiement-choix{display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:.8rem}
.paiement-choix .bouton-action{border:1px solid var(--ink)}
.paiement-choix .bouton-clair{
  display:inline-block; background:none; color:var(--ink);
  border:1px solid var(--line); border-radius:99px;
  font-weight:700; font-size:.92rem; padding:.85rem 1.6rem; cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.paiement-choix .bouton-clair:hover{border-color:var(--ink); background:var(--panel)}
@media (max-width:520px){
  .paiement-choix{flex-direction:column}
  .paiement-choix button{width:100%; text-align:center}
}

/* ---------- paiement par virement ---------- */
.virement{
  background:var(--panel); border-radius:14px; padding:1.2rem 1.4rem;
  margin:1.2rem 0; border-left:4px solid var(--yel);
}
.virement h2{margin:0 0 .5rem; font-size:1.05rem}
.virement p{margin:0 0 .5rem; line-height:1.6; font-size:.94rem}
.virement p:last-child{margin-bottom:0}

/* ══════════════════════════════════════════════════════════
   LA RADIO — présentation en colonnes
   ══════════════════════════════════════════════════════════ */

/* Ouverture : une seule colonne, en grand. C'est le paragraphe qu'on lit
   debout, avant de s'asseoir dans le reste du texte. */
/* Titre et ouverture tiennent sur les deux tiers de la page. Une ligne qui
   traverse tout l'écran se lit mal, et la colonne laissée libre à droite fait
   respirer le haut de page avant les trois colonnes de texte. */
.rad-tete .bloc-tete h1{max-width:66%}
.rad-ouverture{
  max-width:66%; margin:0 0 var(--rythme);
  padding-bottom:1.6rem; border-bottom:2px solid var(--ink);
}
@media (max-width:1000px){
  .rad-tete .bloc-tete h1, .rad-ouverture{max-width:none}
}
.rad-ouverture h2{
  font-size:clamp(1.5rem, 3vw, 2.3rem); line-height:1.1;
  letter-spacing:-.03em; margin:0 0 .8rem; text-wrap:balance;
}
.rad-ouverture p{
  font-size:clamp(1.02rem, 1.4vw, 1.18rem); line-height:1.62; color:var(--ink);
  margin:0 0 .7rem;
}
.rad-ouverture p:first-of-type::first-letter{
  /* Lettrine : la marque d'un texte long qu'on invite à lire, et le repère
     qui dit où commencer. */
  float:left; font-size:3.4em; line-height:.82; font-weight:800;
  margin:.06em .12em 0 0; color:var(--fuchsia);
}

/* Vraies colonnes de texte : le navigateur les équilibre, donc aucune ne
   s'arrête sur un vide. Un filet les sépare, comme au plomb. */
.rad-colonnes{
  column-count:3; column-gap:2.6rem;
  column-rule:1px solid var(--line);
  margin-bottom:var(--rythme);
}
.rad-bloc{
  /* Un bloc ne se coupe jamais entre deux colonnes : un intertitre en bas
     d'une colonne et son texte en haut de la suivante se lisent mal. */
  break-inside:avoid; page-break-inside:avoid;
  margin:0 0 1.6rem;
}
.rad-bloc h3{
  display:flex; align-items:baseline; gap:.5rem;
  font-size:1.02rem; font-weight:800; line-height:1.25; margin:0 0 .5rem;
  letter-spacing:-.01em;
}
/* Un numéro à la place du pictogramme : il ordonne la lecture au lieu de la
   décorer, et il ne dépend d'aucune police d'émojis. */
.rad-num{
  flex:none; font-size:.7rem; font-weight:800; letter-spacing:.06em;
  color:var(--fuchsia); font-variant-numeric:tabular-nums;
}
.rad-bloc p{margin:0 0 .7rem; line-height:1.62; color:var(--dim); font-size:.93rem}
.rad-bloc p:last-child{margin-bottom:0}

.rad-puces{list-style:none; margin:0 0 .7rem; padding:0}
.rad-puces li{
  position:relative; padding-left:1rem; margin-bottom:.4rem;
  line-height:1.55; color:var(--dim); font-size:.93rem;
}
.rad-puces li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--yel);
}

@media (max-width:1000px){ .rad-colonnes{column-count:2; column-gap:2rem} }
@media (max-width:640px){
  .rad-colonnes{column-count:1; column-rule:0}
  .rad-ouverture p:first-of-type::first-letter{font-size:2.8em}
}

/* ══════════════════════════════════════════════════════════
   CONSENTEMENT AUX TRACEURS
   ══════════════════════════════════════════════════════════ */

.cookies[hidden]{display:none}

/* Le bandeau se pose en bas, au-dessus du lecteur : on doit pouvoir
   continuer à lire la page pendant qu'on décide. */
.cookies-bandeau{
  position:fixed; left:0; right:0; bottom:0; z-index:130;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.4rem; flex-wrap:wrap;
  background:var(--bg); color:var(--ink);
  border-top:3px solid var(--yel);
  padding:1.1rem var(--pad);
  box-shadow:0 -12px 34px rgba(17,18,22,.16);
}
.cookies-bandeau[hidden]{display:none}
body.avec-lecteur .cookies-bandeau,
body:has(.lecteur.actif) .cookies-bandeau{bottom:84px}

.cookies-texte{flex:1 1 32rem; min-width:0}
.cookies-texte h2{margin:0 0 .3rem; font-size:1.02rem; font-weight:800}
.cookies-texte p{margin:0; font-size:.88rem; line-height:1.55; color:var(--dim); max-width:78ch}
.cookies-texte a{color:var(--ink); border-bottom:1px solid var(--line)}
.cookies-texte a:hover{border-color:var(--ink)}

/* Refuser et accepter ont le même poids : c'est une exigence, pas une
   politesse. Seul le fond plein distingue le choix positif, et il ne le rend
   pas plus gros. */
.cookies-actions{display:flex; gap:.6rem; flex-wrap:wrap; flex:none}
.cookies-btn{
  font-size:.86rem; font-weight:700; line-height:1;
  padding:.7rem 1.1rem; border-radius:99px;
  border:1px solid var(--line); background:none; color:var(--ink); cursor:pointer;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.cookies-btn:hover{border-color:var(--ink); background:var(--panel)}
.cookies-btn-oui{background:var(--ink); border-color:var(--ink); color:#fff}
.cookies-btn-oui:hover{background:var(--fuchsia); border-color:var(--fuchsia); color:#fff}

/* Panneau de réglage : par-dessus la page, centré. */
.cookies-reglages{position:fixed; inset:0; z-index:140; display:flex; align-items:center; justify-content:center; padding:5vh 1rem; background:rgba(17,18,22,.6)}
.cookies-reglages[hidden]{display:none}
body.cookies-ouvert{overflow:hidden}
.cookies-panneau{
  position:relative; background:var(--bg); border-radius:18px;
  width:min(620px,100%); max-height:90vh; overflow:auto; padding:1.4rem 1.5rem 1.5rem;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.cookies-panneau-tete{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem}
.cookies-panneau-tete h2{margin:0; font-size:1.2rem}
.cookies-fermer{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--dim)}
.cookies-fermer:hover{background:var(--panel); color:var(--ink)}
.cookies-fermer svg{width:18px; height:18px}

.cookies-finalites{list-style:none; margin:0 0 1rem; padding:0; display:flex; flex-direction:column; gap:1rem}
.cookies-finalites li{border-top:1px solid var(--line); padding-top:1rem}
.cookies-finalites li:first-child{border-top:0; padding-top:0}
.cookies-finalite-tete{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.cookies-finalite-tete h3{margin:0; font-size:.98rem; font-weight:800}
.cookies-finalite-tete label{cursor:pointer}
.cookies-finalites p{margin:.35rem 0 0; font-size:.86rem; line-height:1.55; color:var(--dim)}
.cookies-toujours{font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--or)}

/* Interrupteur : la case native reste, invisible mais focalisable — le
   clavier et les lecteurs d'écran continuent de la voir. */
.cookies-bascule{position:relative; display:inline-flex; flex:none}
.cookies-bascule input{position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.cookies-piste{
  width:46px; height:26px; border-radius:99px; background:var(--line);
  position:relative; transition:background .18s ease;
}
.cookies-piste::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .18s ease;
}
.cookies-bascule input:checked + .cookies-piste{background:var(--ink)}
.cookies-bascule input:checked + .cookies-piste::after{transform:translateX(20px)}
.cookies-bascule input:focus-visible + .cookies-piste{outline:3px solid var(--yel); outline-offset:2px}

.cookies-note{font-size:.8rem; color:var(--dim); line-height:1.5; margin:0 0 1.1rem}
.cookies-note a{color:var(--ink); border-bottom:1px solid var(--line)}

@media (max-width:720px){
  .cookies-bandeau{flex-direction:column; align-items:stretch; gap:.9rem}
  .cookies-actions{justify-content:stretch}
  .cookies-btn{flex:1 1 auto; text-align:center}
}

/* ---------- bouton « J'aime » ---------- */
/* Il respire au-dessus du texte qu'il commente : collé au dernier
   paragraphe, il se lisait comme la suite de la phrase. */
.fiche-reactions{margin:2rem 0 .4rem}
/* Un cœur vide qu'on remplit. Le contour dit « pas encore », le plein dit
   « c'est fait » — sans changer de dessin, donc sans saut de mise en page. */
.jaime{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border-radius:99px;
  border:1px solid var(--line); background:none; color:var(--ink);
  font-size:.88rem; font-weight:700; cursor:pointer;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.jaime:hover{border-color:var(--fuchsia); color:var(--fuchsia)}
.jaime svg{
  width:18px; height:18px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round;
  transition:fill .2s ease, transform .2s ease;
}
.jaime:hover svg{transform:scale(1.1)}
.jaime-total{
  font-variant-numeric:tabular-nums; color:var(--dim); font-weight:800;
}
.jaime-total[hidden]{display:none}

/* Déjà aimé : le cœur se remplit, le bouton se calme. */
.jaime.est-aime{border-color:var(--fuchsia); color:var(--fuchsia); cursor:default}
.jaime.est-aime svg{fill:var(--fuchsia); stroke:var(--fuchsia)}
.jaime.est-aime:hover svg{transform:none}
.jaime.est-aime .jaime-total{color:var(--fuchsia)}
.jaime[disabled]{opacity:1}

/* Battement bref au clic : la seule récompense d'un geste sans conséquence. */
@keyframes jaime-battement{
  0%{transform:scale(1)} 35%{transform:scale(1.32)} 60%{transform:scale(.94)} 100%{transform:scale(1)}
}
.jaime.bat svg{animation:jaime-battement .42s ease}

/* Bouton du pied de page, présenté comme les liens qui l'entourent. */
.pied-lien{
  background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:inherit; text-align:left;
}

/* Lien « Lire la suite » d'un article de presse. Il quitte le site : la
   flèche oblique le dit avant le clic. */
.presse-suite{margin:.2rem 0 0}
.presse-suite a{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.82rem; font-weight:800; color:var(--ink);
  border-bottom:2px solid var(--yel); padding-bottom:1px;
}
.presse-suite a:hover{color:var(--fuchsia); border-color:var(--fuchsia)}
.presse-suite svg{transition:transform .2s ease}
.presse-suite a:hover svg{transform:translate(2px,-2px)}
.presse-f1 .presse-suite a{font-size:.9rem; border-color:var(--ink)}

/* ---------- page d'un article de presse ---------- */
.presse-fiche{max-width:74ch}
.presse-fiche-source{
  margin:0 0 1rem; font-size:.72rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--or);
}
.presse-fiche-source a{color:inherit; border-bottom:1px solid currentColor}
.presse-fiche-source a:hover{color:var(--ink)}
.presse-fiche-chapo{
  margin:0 0 1.4rem; font-size:1.12rem; line-height:1.55;
  font-weight:500; color:var(--ink);
}
.presse-fiche-image{margin:0 0 1.6rem; border-radius:14px; overflow:hidden; background:var(--panel)}
.presse-fiche-image img{width:100%; display:block}
.presse-fiche-texte p{margin:0 0 1rem; line-height:1.7}
/* Le renvoi vers l'original : discret mais net, en fin de lecture, là où
   l'on se demande d'où vient ce qu'on vient de lire. */
.presse-fiche-original{
  margin:1.6rem 0 0; padding-top:1.2rem; border-top:1px solid var(--line);
}
.presse-fiche-original a{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:700; font-size:.92rem; color:var(--ink);
  border-bottom:2px solid var(--yel); padding-bottom:2px;
}
.presse-fiche-original a:hover{color:var(--fuchsia); border-color:var(--fuchsia)}


/* ── Formulaire de contact ───────────────────────────────────────────
   Il réutilise la grille de .formulaire. Trois ajouts seulement : la
   mention sous un champ, le message d'erreur général, et la zone de
   texte assez haute pour qu'on ait envie d'écrire plus qu'une ligne. */
.champ small{font-size:.78rem; color:var(--dim); line-height:1.4}
.formulaire-pied small{font-size:.78rem; color:var(--dim); max-width:46ch; line-height:1.45}
.formulaire-pied small a{text-decoration:underline; text-underline-offset:2px}
.err-bloc{
  background:#FDECEA; color:var(--live); font-weight:600;
  padding:.7rem 1rem; border-radius:10px; font-size:.9rem;
}
.formulaire-contact{max-width:760px}
.formulaire-contact textarea{min-height:9rem}