/* =========================================================================
   Evenprod Medias — direction C, « le bloc antenne »
   Violet pour l'antenne, blanc pour la lecture.
   Conception mobile d'abord : tout s'élargit ensuite.
   ========================================================================= */

/* Montserrat auto-hébergée (fichiers fournis par César) — plus de dépendance
   à Google Fonts. WOFF2 en premier (environ moitié moins lourd que l'OTF
   d'origine, gardé en repli pour les tout vieux navigateurs qui ne
   comprennent pas WOFF2 — ils ne le sont quasiment plus depuis 2016). */
@font-face{font-family:'Montserrat'; src:url('../fonts/montserrat-300.woff2') format('woff2'), url('../fonts/montserrat-300.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap}
@font-face{font-family:'Montserrat'; src:url('../fonts/montserrat-400.woff2') format('woff2'), url('../fonts/montserrat-400.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:'Montserrat'; src:url('../fonts/montserrat-400i.woff2') format('woff2'), url('../fonts/montserrat-400i.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap}
@font-face{font-family:'Montserrat'; src:url('../fonts/montserrat-500.woff2') format('woff2'), url('../fonts/montserrat-500.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:'Montserrat'; src:url('../fonts/montserrat-600.woff2') format('woff2'), url('../fonts/montserrat-600.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap}
@font-face{font-family:'Montserrat'; src:url('../fonts/montserrat-600i.woff2') format('woff2'), url('../fonts/montserrat-600i.otf') format('opentype'); font-weight:600; font-style:italic; font-display:swap}
@font-face{font-family:'Montserrat'; src:url('../fonts/montserrat-700.woff2') format('woff2'), url('../fonts/montserrat-700.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap}
@font-face{font-family:'Montserrat'; src:url('../fonts/montserrat-800.woff2') format('woff2'), url('../fonts/montserrat-800.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap}
@font-face{font-family:'Montserrat'; src:url('../fonts/montserrat-900.woff2') format('woff2'), url('../fonts/montserrat-900.otf') format('opentype'); font-weight:900; font-style:normal; font-display:swap}

:root{
  /* Charte définitive Evenprod Medias (remplace les tons provisoires du
     prototype). Violet = fond/marque, magenta = accent, teal = secondaire,
     rose = nouvel accent disponible, pas encore affecté à un usage précis. */
  --violet-900:#190033;
  --violet-800:#290052;
  --violet-700:#380070;
  --violet-600:#47008F;
  --violet-500:#6600CC;
  --violet-100:#E5CCFF;
  --violet-050:#F5EBFF;
  --magenta:#CC00CC;
  --magenta-sombre:#8A008A;
  --rose-oct:#D81B73;   /* ruban Octobre rose, thème clair (contraste 4,9 sur blanc) */
  --teal:#1C695D;
  --teal-clair:#30B19D;
  --rose:#EF0766;
  --rose-logo:#D64FDD; /* rose prélevé dans le dégradé du logo eM — distinct du rose de charte ci-dessus */
  /* Ruban des émissions, au repos : une seule couleur pour toutes les tuiles, dans les deux thèmes : le vert menthe
     de la charte (--teal-clair). La couleur propre de chaque émission n'apparaît qu'au survol, au clavier et à l'appui.
     Texte et logos blancs dessus : 2,7 : 1, choix de César. */
  --tuile-repos:var(--teal-clair);
  --surtitre:var(--magenta-sombre);
  /* Jetons sémantiques de l'audit du 05/10/2026 : en clair ils valent exactement ce que les règles utilisaient
     avant (aucun changement visuel), en sombre ils prennent une valeur lisible sur le violet profond. */
  --titre-fort:var(--violet-600);   /* titre de section, citation */
  --teal-texte:var(--teal);         /* signature de la réponse de la rédaction */
  --survol:var(--violet-050);       /* fond d'un bouton rond ou contour au survol */

  --encre:#1A1220;
  --encre-douce:#4A3D55;
  --encre-pale:#7A6B86;
  --papier:#FFFFFF;
  --papier-casse:#FBF9FC;
  --trait:#E6DEEC;

  --largeur:1200px;
  --rayon:10px;
  --rayon-sm:6px;

  --pas-1:.25rem; --pas-2:.5rem; --pas-3:.75rem; --pas-4:1rem;
  --pas-5:1.5rem; --pas-6:2rem; --pas-7:3rem; --pas-8:4rem;
}

/* Thème sombre : suit le réglage choisi dans l'en-tête (case à cocher
   « bascule-theme », mémorisé dans localStorage), sinon la préférence système.
   Toujours un violet profond (--violet-900, déjà utilisé sur les pages plein
   écran de lecture) — jamais du noir pur. Ne touche que les tons de fond/texte
   génériques : la charte (violet-500/600, magenta...) reste la même dans les
   deux thèmes, seule la surface change. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]){
    --papier:#190033;
    --papier-casse:#290052;
    --encre:#F0E6F6;
    --encre-douce:#D9C2E6;
    --encre-pale:#A98CBD;
    --trait:rgba(255,255,255,.14);
    --marque-titre:#C9AEDA;
    --rose-oct:#FF7DB8;
    --surtitre:#FF7DB8;
    --titre-fort:#C9AEDA;
    --teal-texte:var(--teal-clair);
    --survol:rgba(255,255,255,.08);
    --texte-fort-sombre:#fff;
    --fil-article:#30B19D;
    --fil-direct:#FF7DB8;
  }
}
:root[data-theme="sombre"]{
  --papier:#190033;
  --papier-casse:#290052;
  --encre:#F0E6F6;
  --encre-douce:#D9C2E6;
  --encre-pale:#A98CBD;
  --trait:rgba(255,255,255,.14);
  --marque-titre:#C9AEDA;
  --rose-oct:#FF7DB8;   /* contraste 8,2 sur le violet profond */
  --surtitre:#FF7DB8;
  --titre-fort:#C9AEDA;
  --teal-texte:var(--teal-clair);
  --survol:rgba(255,255,255,.08);
  --texte-fort-sombre:#fff;   /* titre de section, sous-titre et ligne « genre · émission · heure » du fil : blanc en thème sombre (demande de César, 03/10/2026) ; les titres des vidéos du fil ne changent pas */
  --fil-article:#30B19D;
  --fil-direct:#FF7DB8;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:'Montserrat',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}

h1,h2,h3,h4{margin:0; line-height:1.15; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:clamp(1.6rem,5vw,2.6rem); font-weight:800}
h2{font-size:clamp(1.25rem,3vw,1.7rem); font-weight:800}
h3{font-size:1.05rem; font-weight:700}
p{margin:0}

.conteneur{width:100%; max-width:var(--largeur); margin:0 auto; padding:0 var(--pas-4)}
@media(min-width:768px){ .conteneur{padding:0 var(--pas-5)} }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Lien d'évitement (« Aller au contenu ») : invisible au repos, mais il doit apparaître quand le
   clavier le sélectionne, sinon le premier Tab se perd. Limité aux liens : les autres usages de
   .sr-only ne reçoivent pas le focus. Le contour de focus global (:focus-visible) s'applique en plus. */
a.sr-only:focus{
  position:fixed; top:.6rem; left:.6rem; z-index:100; width:auto; height:auto; margin:0;
  padding:.7rem 1.1rem; overflow:visible; clip:auto; white-space:normal;
  background:var(--papier); color:var(--encre); border-radius:var(--rayon); font-weight:700;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
}

/* Piège à bots (honeypot) sur les formulaires commentaire/newsletter — voir
   action_commentaire() et action_newsletter() dans index.php. Hors-écran en
   CSS pur (pas de display:none/visibility:hidden, qu'un bot un peu plus
   soigné saurait détecter et éviter) : invisible et hors du parcours clavier
   pour un humain, mais toujours un champ "text" ordinaire pour un bot qui
   remplit tout ce qu'il trouve. Distinct de .sr-only : ici, contrairement au
   contenu sr-only, on ne veut pas non plus l'exposer aux lecteurs d'écran —
   d'où aria-hidden sur le conteneur en plus du positionnement hors-écran. */
.piege-bot{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden}

/* Le contour de focus suit la forme propre de chaque élément (son propre
   border-radius) au lieu d'imposer un carré à peine arrondi partout — sinon
   il tranche sur les pastilles rondes, les images en coin arrondi, etc. */
:focus-visible{outline:3px solid var(--magenta); outline-offset:2px}

/* ------------------------------------------------------------------ bandeau */
.alerte{
  background:var(--magenta); color:#fff;
  font-size:.82rem; font-weight:600; letter-spacing:.01em;
}
.alerte a{display:block; padding:.5rem 0}
/* Anneau de focus blanc : le magenta par défaut (:focus-visible) se confondait avec le fond du bandeau. */
.alerte a:focus-visible{outline-color:#fff; outline-offset:-3px}
.alerte .conteneur{display:flex; align-items:center; gap:var(--pas-2)}
.pastille{
  width:7px; height:7px; border-radius:50%; background:#fff; flex:none;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){ .pastille{animation:none} }

/* ------------------------------------------------------------------- entête */
/* Fond blanc pour la nav et le ruban — comme tf1info.fr. Seules les pages
   émission gardent le droit à leur propre traitement, en dessous. */
.entete{background:var(--papier); color:var(--encre); border-bottom:1px solid var(--trait); position:sticky; top:0; z-index:50}
/* Ne jamais écrire padding:… 0 ici : la barre porte AUSSI la classe
   .conteneur, dont le retrait latéral serait annulé et le logo collerait
   au bord de l'écran. */
.entete-barre{
  display:flex; align-items:center; gap:var(--pas-4);
  padding-top:var(--pas-3); padding-bottom:var(--pas-3); min-height:60px;
}
.marque{display:flex; align-items:center; gap:.55rem; font-weight:800; letter-spacing:-.03em; flex:none}
/* Logo d'en-tête en deux versions (fond clair / fond sombre), même mécanique
   que #bascule-theme : le thème forcé à la main (data-theme) l'emporte, sinon
   la préférence du système. Fichiers rognés sur le contenu : la hauteur
   affichée est celle du logo lui-même, pas celle d'une image à marges. */
.marque-logo{width:163px; max-width:100%; height:auto; margin:-2px 0}
/* Sur téléphone la place manque (logo + 3 boutons de 44px) : la marque a le
   droit de rétrécir, le logo suit en gardant ses proportions. Sans ça le
   bouton menu sortait de l'écran à 375px. */
.entete .marque{flex:0 1 163px; min-width:0}
.logo-sombre{display:none}
:root[data-theme="sombre"] .logo-clair{display:none}
:root[data-theme="sombre"] .logo-sombre{display:block}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) .logo-clair{display:none}
  :root:not([data-theme="clair"]) .logo-sombre{display:block}
}
/* Ruban Octobre rose (voir includes/octobre-rose.php) : à côté du logo, jamais à sa place. Le rose est
   volontairement plus clair que le magenta de la marque pour se lire comme « Octobre rose ». Cible
   tactile de 44 px de haut ; sur téléphone seul le ruban reste, le logo garde sa place. */
.ruban-rose{
  display:flex; align-items:center; gap:.45rem; flex:none; min-height:44px; padding:0 .3rem; margin-left:.2rem;
  color:var(--rose-oct); font-size:.74rem; font-weight:700; line-height:1.1; letter-spacing:.02em; border-radius:8px;
}
.ruban-rose svg{flex:none}
.ruban-rose span{max-width:5.2em}
a.ruban-rose:hover span{text-decoration:underline; text-underline-offset:3px}
a.ruban-rose:focus-visible{outline:3px solid var(--rose-oct); outline-offset:2px}
@media(max-width:600px){
  .ruban-rose{margin-left:-.35rem; padding:0 .15rem; position:relative}
  .ruban-rose span{display:none}
  .ruban-rose svg{width:28px; height:28px}
  /* zone de toucher élargie à 44 px sans prendre de place au logo */
  .ruban-rose::after{content:""; position:absolute; inset:0 -6px}
}
/* Écrans de 320 px et moins : le logo tomberait sous 90 px de large, il a priorité. */
@media(max-width:339px){ .ruban-rose{display:none} }
.marque-sigle{
  width:34px; height:34px; border-radius:50%; background:var(--violet-600); color:#fff;
  display:grid; place-items:center; font-size:.82rem; font-weight:800; letter-spacing:-.06em; flex:none;
}
.marque-nom{font-size:1.02rem; line-height:1.1; color:var(--encre)}
.marque-nom small{display:block; font-size:.6rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--encre-pale)}
/* Le pied de page est toujours violet foncé : son nom de marque ne doit pas suivre le thème clair (texte
   sombre sur fond sombre, 1,1 : 1) */
.pied .marque-nom{color:#fff}
.pied .marque-nom small{color:#C9AEDA}

.nav-principale{display:none; margin-left:auto}
.nav-principale ul{display:flex; align-items:center; gap:var(--pas-5); list-style:none; margin:0; padding:0}
.nav-principale a{
  font-size:.86rem; font-weight:600; color:var(--encre-douce); padding:.4rem 0;
  border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
.nav-principale a:hover{color:var(--encre)}
.nav-principale a[aria-current]{color:var(--marque-fonce); border-bottom-color:var(--marque-accent)}

/* La navigation apparaît dès la tablette : à 768 px il reste largement la
   place, et replier le menu principal sur un iPad n'a aucune justification. */
@media(min-width:768px){
  .nav-principale{display:block}
  .nav-principale ul{gap:var(--pas-4)}
}
@media(min-width:1100px){ .nav-principale ul{gap:var(--pas-5)} }

.entete-actions{display:flex; align-items:center; gap:var(--pas-2); margin-left:auto}
@media(min-width:1000px){ .entete-actions{margin-left:0} }

.bouton-icone{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--trait);
  background:transparent; color:var(--encre); display:grid; place-items:center; cursor:pointer;
  transition:background .15s;
}
.bouton-icone:hover{background:var(--survol)}
#bascule-theme .icone-theme-sombre{display:none}
:root[data-theme="sombre"] #bascule-theme .icone-theme-clair{display:none}
:root[data-theme="sombre"] #bascule-theme .icone-theme-sombre{display:block}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) #bascule-theme .icone-theme-clair{display:none}
  :root:not([data-theme="clair"]) #bascule-theme .icone-theme-sombre{display:block}
}
@media(min-width:768px){ .bouton-burger{display:none} }

.puce-direct{
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--magenta); color:#fff; border-radius:999px;
  padding:.3rem .7rem; font-size:.7rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap;
}
/* Sur tablette, la place va à la navigation : le bandeau magenta en haut
   de page annonce déjà le direct, cette pastille ferait doublon. */
@media(min-width:768px) and (max-width:1099px){ .puce-direct{display:none} }
/* Sur téléphone, la pastille « En direct » et le ruban Octobre rose écrasaient le logo (23 px de large à
   375 px). La pastille ne garde que son point : le texte reste lu par les lecteurs d'écran (font-size:0
   ne le retire pas de l'arbre d'accessibilité), et la zone de toucher reste de 44 px. */
@media(max-width:480px){
  .puce-direct{font-size:0; gap:0; padding:0; width:30px; height:30px; justify-content:center; position:relative}
  .puce-direct::after{content:""; position:absolute; inset:-7px}
}

/* menu déroulant mobile */
.nav-mobile{display:none; border-top:1px solid var(--trait); padding:var(--pas-4) 0 var(--pas-5)}
/* Le menu vit dans l'en-tête collant : sans plafond il dépasse l'écran et la fin de la liste (les
   rubriques) reste hors d'atteinte, la page ne défilant pas sous un élément collant. 76 px = la
   barre de l'en-tête (69 px) et un peu de marge. */
.nav-mobile.ouvert{
  display:block; max-height:calc(100vh - 76px); max-height:calc(100dvh - 76px);
  overflow-y:auto; overscroll-behavior:contain;
}
@media(min-width:1000px){ .nav-mobile{display:none !important} }
.nav-mobile h4{font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--encre-pale); margin-bottom:.5rem}
.nav-mobile ul{list-style:none; margin:0 0 var(--pas-4); padding:0; display:grid; gap:.1rem}
.nav-mobile a{display:block; padding:.45rem 0; font-weight:600; color:var(--encre)}

/* recherche */
.recherche-barre{display:none; background:var(--violet-050); padding:var(--pas-4) 0}
.recherche-barre.ouvert{display:block}
.recherche-champ{display:flex; gap:var(--pas-2)}
.recherche-champ input{
  flex:1; padding:.7rem .9rem; border-radius:var(--rayon-sm); border:1px solid var(--trait);
  background:var(--papier-casse); color:var(--encre); font-size:1rem;
}
.recherche-champ input::placeholder{color:var(--encre-pale)}

/* ruban horizontal des émissions, sous la nav — inspiré de tf1info.fr */
.ruban-emissions{background:var(--papier); border-bottom:1px solid var(--trait); overflow:hidden}
/* Pas de scroll-behavior:smooth ici : le défilement au clic est animé en JS,
   car `smooth` est ignoré dans certains navigateurs et le ruban restait figé. */
.ruban-piste{
  display:flex; gap:.5rem; overflow-x:auto; padding:.6rem var(--pas-4);
  scrollbar-width:none;
}
.ruban-piste::-webkit-scrollbar{display:none}
.ruban-pastille{
  flex:none; display:flex; align-items:center; justify-content:center; min-height:64px;
  padding:.6rem 1.2rem; border-radius:0; background:var(--tuile-repos);
  font-size:.78rem; font-weight:700; color:#fff; white-space:nowrap; text-align:center;
  opacity:.92; transition:opacity .15s, transform .15s, background-color .15s;
}
/* Survol, clavier, appui (téléphone) : la tuile prend la couleur de son émission (--tuile, posée par
   views/parts/ruban-emissions.php ; violet de charte à défaut). */
.ruban-pastille:hover,.ruban-pastille:focus-visible,.ruban-pastille:active{
  opacity:1; transform:translateY(-1px); background:var(--tuile, var(--violet-600));
}
@media(prefers-reduced-motion:reduce){ .ruban-pastille{transition:none} }

/* Logo blanc plutôt que le nom en texte, quand la rédaction en a fourni un
   — même encadré que les pastilles-texte, angles droits comme sur tf1info.fr. */
.ruban-pastille-logo{
  display:flex; align-items:center; justify-content:center;
  padding:.6rem 1.4rem; border-radius:0; background:var(--tuile-repos); min-height:64px;
}
.ruban-pastille-logo img{height:48px; width:auto; display:block}
@media(min-width:1232px){
  .ruban-piste{padding-left:calc((100vw - var(--largeur)) / 2); padding-right:calc((100vw - var(--largeur)) / 2)}
}

/* flèches de défilement génériques — le ruban des émissions ET les
   carrousels vidéo (rubriques de l'accueil, aperçu émission) peuvent
   dépasser la largeur visible, comme sur tf1info.fr : sans flèches, rien
   n'indique qu'on peut faire défiler. Un seul mécanisme, réutilisé partout. */
.defil-conteneur{position:relative}
.defil-fleche{
  position:absolute; top:0; bottom:0; z-index:2; width:2.8rem; border:0; padding:0;
  display:flex; align-items:center; cursor:pointer; color:var(--encre);
}
.defil-fleche[hidden]{display:none}
.defil-fleche-gauche{left:0; justify-content:flex-start; background:linear-gradient(to right, var(--papier) 55%, transparent)}
.defil-fleche-droite{right:0; justify-content:flex-end; background:linear-gradient(to left, var(--papier) 55%, transparent)}
.defil-fleche-gauche svg{margin-left:.5rem}
.defil-fleche-droite svg{margin-right:.5rem}
.defil-fleche svg{width:18px; height:18px}
.defil-fleche:hover{color:var(--marque-fonce)}
@media(max-width:640px){
  .defil-fleche{display:none !important}
}
/* variante sombre — carrousels sur fond de page émission (page-emission-sombre) */
.page-emission-sombre .defil-fleche{color:#fff}
.page-emission-sombre .defil-fleche-gauche{background:linear-gradient(to right, var(--marque-fond) 55%, transparent)}
.page-emission-sombre .defil-fleche-droite{background:linear-gradient(to left, var(--marque-fond) 55%, transparent)}
.page-emission-sombre .defil-fleche:hover{color:var(--marque-accent)}

/* --------------------------------------------------------- bloc antenne */
.bloc-antenne{background:var(--violet-800); color:#fff; padding:var(--pas-5) 0 var(--pas-6)}
.bloc-antenne.fond-clair{background:var(--papier); color:var(--encre); border-bottom:1px solid var(--trait)}
.bloc-antenne.fond-clair .antenne-meta{color:var(--encre-pale)}
.bloc-antenne.fond-clair .plateforme{border-color:var(--trait); color:var(--encre)}
.bloc-antenne.fond-clair .plateforme:hover{background:var(--violet-050)}
.bloc-antenne.fond-clair .rendezvous h2{color:var(--encre-pale)}
.bloc-antenne.fond-clair .rendezvous p{color:var(--encre-pale) !important}
.bloc-antenne.fond-clair .rendezvous h3{color:var(--encre) !important}

/* Bascule clair explicite sur les pages "bloc-antenne" sans fond-clair
   (vidéo, direct) : ce bandeau hérite un texte blanc fixe, pensé pour un
   fond toujours sombre (voir body.sombre plus haut) et jamais mis à jour
   pour data-theme. Sans ce correctif, le titre de la vidéo/du direct
   deviendrait blanc sur blanc dès que le visiteur choisit explicitement le
   thème clair. Reprend exactement les styles de .bloc-antenne.fond-clair,
   déjà utilisés ailleurs (accueil) pour ce même bandeau sur fond clair —
   .fond-clair n'est pas ajouté ici pour ne pas changer /emission (fond et
   texte fixés en style inline sur cette page, donc non affectés). */
:root[data-theme="clair"] .bloc-antenne:not(.fond-clair){background:var(--papier); color:var(--encre)}
:root[data-theme="clair"] .bloc-antenne:not(.fond-clair) .antenne-meta{color:var(--encre-pale)}
:root[data-theme="clair"] .bloc-antenne:not(.fond-clair) .plateforme{border-color:var(--trait); color:var(--encre)}
:root[data-theme="clair"] .bloc-antenne:not(.fond-clair) .plateforme:hover{background:var(--violet-050)}

/* Texte secondaire du bandeau « direct » (ex. « Pas de direct en ce
   moment », « Prochains directs ») : même logique, remplace les styles en
   ligne color:#C9AEDA de views/direct.php, invisibles (1,99:1) sur le fond
   clair une fois data-theme="clair" choisi explicitement. */
.antenne-texte-doux{color:#C9AEDA}
:root[data-theme="clair"] .antenne-texte-doux{color:var(--encre-pale)}
.antenne-grille{display:grid; gap:var(--pas-5)}
@media(min-width:900px){ .antenne-grille{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:var(--pas-5)} }

.lecteur{
  position:relative; aspect-ratio:16/9; background:var(--violet-900);
  border-radius:var(--rayon); overflow:hidden;
}
.lecteur iframe{width:100%; height:100%; border:0; display:block}
/* Sortie du flux de la grille : sinon le bouton de lecture se place
   sous l'image au lieu de se superposer à elle. */
.lecteur-affiche{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.lecteur-couverture{
  position:absolute; inset:0; border:0; padding:0; cursor:pointer; background:transparent;
  display:grid; place-items:center;
}
.lecteur-couverture::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(27,7,48,.15) 0%,rgba(27,7,48,.72) 100%);
}
.bouton-lecture{
  position:relative; z-index:2; width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.94); display:grid; place-items:center;
  transition:transform .18s, background .18s;
}
.lecteur-couverture:hover .bouton-lecture{transform:scale(1.07); background:#fff}

/* Manchette flottante : le direct de l'accueil suit le défilement une fois
   sa section sortie de l'écran, pour garder le son sans revenir en haut. */
.lecteur-suiveur.suivi{
  position:fixed; z-index:60; bottom:1rem; right:1rem;
  width:320px; max-width:calc(100vw - 2rem);
  box-shadow:0 10px 34px rgba(0,0,0,.4); border-radius:var(--rayon);
}
.lecteur-suiveur-fermer{
  position:absolute; top:.4rem; right:.4rem; z-index:3;
  width:26px; height:26px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; font-size:1rem; line-height:1;
  display:grid; place-items:center;
}
.lecteur-suiveur-fermer[hidden]{display:none}
.bouton-lecture::after{
  content:""; border-left:20px solid var(--violet-600);
  border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:5px;
}
.etiquette-lecteur{
  position:absolute; left:var(--pas-3); top:var(--pas-3); z-index:3;
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--magenta); color:#fff; border-radius:var(--rayon-sm);
  padding:.28rem .6rem; font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
}
.duree-lecteur{
  position:absolute; right:var(--pas-3); bottom:var(--pas-3); z-index:3;
  background:rgba(0,0,0,.78); color:#fff; border-radius:4px;
  padding:.12rem .4rem; font-size:.75rem; font-weight:600;
}

.antenne-titre{font-size:clamp(1.15rem,2.6vw,1.6rem); font-weight:800; margin-top:var(--pas-4)}
.antenne-meta{color:#C9AEDA; font-size:.86rem; margin-top:.35rem; display:flex; flex-wrap:wrap; gap:.5rem 1rem}
.antenne-plateformes{display:flex; flex-wrap:wrap; gap:var(--pas-2); margin-top:var(--pas-4)}
.plateforme{
  display:inline-flex; align-items:center; min-height:44px; gap:.4rem; padding:.45rem .8rem;
  border-radius:999px; border:1px solid rgba(255,255,255,.26); font-size:.8rem; font-weight:600;
  transition:background .15s;
}
.plateforme:hover{background:rgba(255,255,255,.14)}
/* Boutons des réseaux sociaux du pied de page : pictogramme au trait + nom (includes/reseaux.php) */
.plateforme-reseau .icone-reseau{flex:none}

/* -------------------------------------------------------- page vidéo */
/* Deux colonnes comme sur tf1info.fr : le lecteur à gauche, la liste
   « à suivre » en barre latérale à droite — plutôt qu'une grille de cartes
   plus bas, hors du champ de vision une fois la lecture lancée. */
.page-video-grille{display:grid; gap:2rem; grid-template-columns:1fr; align-items:start}
@media(min-width:1000px){ .page-video-grille{grid-template-columns:1fr 360px} }
.suite-liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem}
.suite-item a{display:flex; gap:.7rem; align-items:flex-start}
.suite-item .carte-image{flex:none; width:150px; aspect-ratio:16/9; position:relative; border-radius:var(--rayon-sm); overflow:hidden; background:var(--violet-700)}
.suite-item .carte-image img{width:100%; height:100%; object-fit:cover}
.suite-item-titre{
  font-size:.86rem; font-weight:700; line-height:1.3; color:#F0E6F6;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.suite-item a:hover .suite-item-titre{color:#fff}
.suite-item-meta{font-size:.72rem; color:#A98CBD; margin-top:.25rem; display:block}

/* colonne des rendez-vous */
.rendezvous h2{
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:#C9AEDA; font-weight:800; margin-bottom:var(--pas-3);
}
.rdv{
  display:flex; gap:var(--pas-3); align-items:flex-start;
  padding:var(--pas-3) 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.rdv:last-child{border-bottom:0}
.rdv-heure{
  font-size:.9rem; font-weight:800; color:var(--teal-clair);
  min-width:52px; font-variant-numeric:tabular-nums; flex:none;
}
.rdv-titre{font-weight:700; font-size:.94rem}
.rdv-detail{color:#C9AEDA; font-size:.8rem; margin-top:.1rem}
.rdv-compte{
  margin-top:var(--pas-4); padding:var(--pas-3); border-radius:var(--rayon-sm);
  background:rgba(255,255,255,.08); font-size:.82rem; color:#E4D2EE;
}
.rdv-compte strong{color:#fff; font-variant-numeric:tabular-nums}

/* section pleine largeur « Prochains rendez-vous » */
.rdv-section{background:var(--violet-800)}
.rdv-section .section-tete{align-items:baseline}
.rdv-section .sous{font-size:.82rem}
.rdv-carte{
  display:flex; flex-direction:column; gap:.2rem; padding:1.1rem 1.2rem;
  background:rgba(255,255,255,.07);
  border-radius:var(--rayon-sm); color:#fff; transition:background .15s, transform .15s;
}
.rdv-carte:hover{background:rgba(255,255,255,.13); transform:translateY(-1px)}
.rdv-jour{font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#C9AEDA}
.rdv-heure2{font-size:1.4rem; font-weight:800; font-variant-numeric:tabular-nums; margin-top:.1rem}
.rdv-nom{font-weight:700; font-size:.96rem; margin-top:.45rem}
.rdv-invite{font-size:.82rem; color:#C9AEDA; margin-top:.1rem}

/* ------------------------------------------------------------- sections */
.section{padding:var(--pas-6) 0}
.section + .section{padding-top:0}
.section-tete{
  display:flex; align-items:baseline; gap:var(--pas-3);
  margin-bottom:var(--pas-4); flex-wrap:wrap;
}
.section-tete h2{
  font-size:.82rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:800; color:var(--titre-fort);
}
.section-tete .sous{color:var(--encre-pale); font-size:.85rem}
.section-tete .lien-tout{margin-left:auto; font-size:.82rem; font-weight:700; color:var(--violet-500)}
.section-tete .lien-tout:hover{text-decoration:underline}
/* Écrans tactiles : « Tout voir → » faisait 21 px de haut. */
@media(pointer:coarse){ .section-tete .lien-tout{display:inline-flex; align-items:center; min-height:44px} }

/* Titres de section façon tf1info.fr — larges, fins, centrés. Réservé aux
   blocs qui organisent tout le contenu (carrousels, grilles) : les petits
   titres utilitaires (« 3 commentaires », « À lire aussi »… ) gardent le
   style d'origine, plus discret et adapté à leur usage. */
.section-tete.tete-marque{
  display:block; text-align:center; position:relative; margin-bottom:var(--pas-5);
}
.section-tete.tete-marque h2{
  font-size:1.875rem; font-weight:300; letter-spacing:0; text-transform:uppercase;
  color:var(--texte-fort-sombre, var(--marque-titre));
}
.section-tete.tete-marque .sous{display:block; margin-top:.3rem; font-size:.85rem; color:var(--texte-fort-sombre, var(--encre-pale))}
.section-tete.tete-marque .lien-tout{position:absolute; right:0; top:.4rem; margin-left:0}
@media(max-width:640px){
  .section-tete.tete-marque h2{font-size:1.35rem}
  .section-tete.tete-marque .lien-tout{position:static; display:block; margin-top:.6rem}
}

/* Couleur unique de marque pour les pages émission — la charte Evenprod
   définitive est arrivée : ces tokens ne sont plus le bleu provisoire de
   tf1info.fr, mais un simple alias vers la vraie palette. Gardés à part
   pour ne pas réécrire tout le CSS qui les référence déjà. */
:root{
  --marque-fonce: var(--violet-500);
  --marque-fond:  var(--violet-900);
  --marque-accent: var(--magenta);
  /* Thème clair par défaut : identique à --marque-fonce (aucun changement
     visuel). Le thème sombre le redéfinit plus haut (#C9AEDA) car le violet-500
     fixe tombe à 2,24:1 sur le fond violet-900 — échec AA (audit couleurs,
     constat #5 / #6600CC sur #190033). */
  --marque-titre: var(--marque-fonce);
}

/* Fond sombre étendu à toute la page émission, pas seulement le bandeau —
   comme tf1info.fr où la couleur continue sous les onglets et la grille. */
.page-emission-sombre{background:var(--marque-fond)}
.page-emission-sombre .section-tete h2,
.page-emission-sombre .carte-titre{color:#fff}
.page-emission-sombre .section-tete .sous,
.page-emission-sombre .carte-meta{color:rgba(255,255,255,.6)}
.page-emission-sombre .lien-tout{color:var(--marque-accent) !important}
.page-emission-sombre h3{color:rgba(255,255,255,.55) !important}

/* onglets Intégrales / Extraits sur une page émission — comme tf1info.fr :
   onglet actif en pastille blanche, indicateur de couleur en dessous. */
.onglets-emission{
  display:flex; justify-content:center; gap:.5rem; padding:1.2rem 0 1rem;
  border-bottom:3px solid rgba(255,255,255,.15);
}
.onglet{
  position:relative; display:inline-flex; align-items:center; min-height:44px; padding:.55rem 1.1rem; border-radius:999px; font-weight:800;
  font-size:.85rem; color:rgba(255,255,255,.85); background:transparent; border:0;
  cursor:pointer; transition:background .15s, color .15s;
}
.onglet:hover{color:#fff}
.onglet.actif{background:#fff; color:var(--marque-fonce)}
.onglet.actif::after{
  content:""; position:absolute; left:10%; right:10%; bottom:-1rem; height:3px;
  background:var(--marque-accent); border-radius:2px;
}

/* ---------------------------------------------------------- vignettes */
/* Grilles : chaque palier définit TOUTES les variantes, sinon une largeur
   intermédiaire retombe sur une colonne unique. */
.grille{display:grid; gap:var(--pas-4)}

/* Téléphone : deux colonnes partout. */
.grille-2,.grille-3,.grille-4,.grille-5{grid-template-columns:repeat(2,minmax(0,1fr))}

@media(min-width:640px){
  .grille-3,.grille-4,.grille-5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:900px){
  .grille-4,.grille-5{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:1100px){
  .grille-5{grid-template-columns:repeat(5,minmax(0,1fr))}
}

.carte{display:block; min-width:0}
/* Ces éléments sont des <span> : sans display:block ils restent en ligne,
   leur hauteur n'entre pas dans celle de la carte et le texte déborde
   sur la rangée suivante. */
.carte-image{
  display:block; position:relative; aspect-ratio:16/9; border-radius:var(--rayon-sm);
  overflow:hidden; background:var(--violet-100);
}
.carte-image img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.carte:hover .carte-image img{transform:scale(1.04)}
.carte-duree{
  position:absolute; right:5px; bottom:5px; background:rgba(0,0,0,.8); color:#fff;
  font-size:.68rem; font-weight:600; padding:.05rem .3rem; border-radius:3px;
  font-variant-numeric:tabular-nums;
}
.carte-badge{
  position:absolute; left:5px; top:5px; font-size:.6rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:.15rem .4rem;
  border-radius:3px; background:var(--magenta); color:#fff;
}

/* ------------------------------------------------------------- shorts */
/* Carrousel dédié aux formats verticaux — jamais mélangés aux grilles
   16/9 ci-dessus. Ouvre sur YouTube : ce format ne justifie pas une page
   dédiée sur le site. */
/* Carte pleine hauteur avec titre superposé en blanc, comme tf1info.fr —
   234px de large (mesuré sur leur carrousel Shorts), pas une simple vignette
   16/9 réduite avec texte en dessous. */
.shorts-piste{display:flex; gap:var(--pas-3); overflow-x:auto; padding-bottom:.3rem}
.short-carte{flex:none; width:234px; display:block; color:inherit}
.short-image{
  display:block; position:relative; aspect-ratio:9/16; border-radius:var(--rayon-sm);
  overflow:hidden; background:var(--violet-100);
}
.short-image img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.short-carte:hover .short-image img{transform:scale(1.04)}
.short-play{position:absolute; inset:0; display:grid; place-items:center; z-index:2}
.short-image .carte-duree{bottom:auto; top:.6rem}
.short-scrim{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:1.1rem .8rem .8rem;
  background:linear-gradient(to top, var(--marque-fond) 4%, rgba(1,5,44,.55) 55%, transparent);
}
.short-titre{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:.92rem; font-weight:700; line-height:1.3; color:#fff;
}
.short-carte:hover .short-titre{color:var(--marque-accent)}
.short-emission{display:block; margin-top:.25rem; font-size:.74rem; color:rgba(255,255,255,.75)}

/* -------------------------------------------------- scène immersive Short */
/* Occupe tout l'écran restant sous l'entête allégée (chrome « immersif »).
   Format portrait centré même sur grand écran — jamais étiré en paysage,
   qui rendrait la vidéo verticale floue et déformée. */
.short-scene{
  position:relative; min-height:calc(100dvh - 60px);
  display:grid; place-items:center; background:#000; overflow:hidden;
}
.short-cadre{
  position:relative; height:min(88dvh, 860px); aspect-ratio:9/16;
  border-radius:var(--rayon); overflow:hidden; background:#000;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.short-iframe{width:100%; height:100%; border:0; display:block}
.short-infos{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.4rem 1.1rem 1.1rem;
  background:linear-gradient(to top, rgba(0,0,0,.75) 10%, transparent); pointer-events:none;
}
.short-titre-scene{display:block; color:#fff; font-weight:700; font-size:1rem; line-height:1.3}
.short-emission-scene{display:block; margin-top:.25rem; font-size:.8rem; color:rgba(255,255,255,.75)}
.short-nav{
  position:fixed; left:50%; transform:translateX(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center;
  backdrop-filter:blur(4px); transition:background .15s;
}
.short-nav:hover{background:rgba(255,255,255,.26)}
.short-nav-haut{top:.9rem}
.short-nav-bas{bottom:.9rem}
@media (min-width:900px){
  /* Sur grand écran, les flèches se collent aux côtés du cadre plutôt qu'au
     bord de la fenêtre : plus lisible qu'un bouton perdu loin de la vidéo. */
  .short-nav{left:auto; right:calc(50% - 300px); transform:none}
  .short-nav-haut{top:auto; bottom:calc(50% + 40px)}
  .short-nav-bas{bottom:calc(50% - 84px)}
}

/* --------------------------------------------------- carrousel émission */
/* « Émissions de la semaine » / « Derniers sujets » — aperçu horizontal
   avant de filtrer via les onglets Intégrales/Extraits, comme tf1info.fr. */
.carousel-piste{display:flex; gap:var(--pas-4); overflow-x:auto; padding-bottom:.4rem}
.carousel-piste .carte{flex:none; width:260px}
.carousel-piste .carte-image{cursor:pointer}
.carousel-piste .carte-image iframe,
.shorts-piste .short-image iframe,
.carte-une-image iframe,
.item-rubrique .carte-image iframe,
.suite-item .carte-image iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; z-index:3;
}
.carte-titre{
  font-size:.88rem; font-weight:700; line-height:1.3; margin-top:.5rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.carte:hover .carte-titre{color:var(--marque-titre)}
.carte-meta{display:block; font-size:.74rem; color:var(--encre-pale); margin-top:.2rem}

/* --------------------------------------------------------- à la une x3 */
/* Trois cartes en 16:9, comme sur tf1info.fr : image plein cadre, tag et
   titre en blanc superposés en bas — la carte centrale, légèrement
   agrandie (largeur + hauteur), porte l'information la plus importante.
   Passé de portrait à 16:9 le 25/09/2026 (demande de César), en gardant le
   même écart de mise en avant du centre qu'avant ce changement. */
.grille-une{display:grid; gap:var(--pas-4); grid-template-columns:1fr}
@media(min-width:800px){
  .grille-une{grid-template-columns:1fr 1.08fr 1fr; align-items:end}
}
.carte-une{display:block; color:inherit}
.carte-une-image{
  display:block; position:relative; aspect-ratio:16/9; border-radius:var(--rayon-sm);
  overflow:hidden; background:var(--violet-100);
}
@media(min-width:800px){
  .grille-une > .carte-une:nth-child(2) .carte-une-image{aspect-ratio:1.63}
}
.carte-une-image img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.carte-une:hover .carte-une-image img{transform:scale(1.04)}
/* Bouton lecture en haut à droite, comme sur tf1info.fr — au centre, il
   masquait le sujet de la photo sur les cadres portrait. */
.carte-une-play{position:absolute; top:.7rem; right:.7rem; z-index:2}
.carte-une-scrim{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:1.2rem .9rem .9rem;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.4rem;
  background:linear-gradient(to top, var(--marque-fond) 4%, rgba(1,5,44,.55) 55%, transparent);
}
.carte-une-scrim .carte-une-tag{
  display:inline-block; padding:.2rem .55rem; border-radius:3px;
  background:var(--marque-accent); font-size:.68rem; font-weight:700; color:#fff;
  letter-spacing:.05em; text-transform:uppercase;
}
.carte-une-scrim .carte-une-titre{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  font-size:1rem; font-weight:650; line-height:1.32; color:#fff;
  text-transform:uppercase; letter-spacing:.005em;
}
.carte-une:hover .carte-une-scrim .carte-une-titre{color:var(--marque-accent)}

/* variante « vide » : aucun emplacement réel à montrer (troisième carte
   quand il n'y a pas de contenu distinct) — texte d'attente sous un cadre
   neutre. */
.carte-une-vide .carte-une-image{display:block; aspect-ratio:16/9; border-radius:var(--rayon-sm)}
.carte-une-vide .carte-une-titre{display:block; margin-top:.6rem; font-weight:600; font-style:italic; text-align:center}

/* variante « sans image » : le contenu est réel (article publié) mais n'a
   pas de photo — un article sans vidéo liée n'a aucune image dans le site.
   Texte sombre sous le cadre plutôt qu'en surimpression illisible. */
.carte-une-sans-image .carte-une-tag{
  display:block; margin-top:.7rem; font-size:.72rem; font-weight:700; color:var(--marque-fonce);
  letter-spacing:.05em; text-transform:uppercase; text-align:center;
}
.carte-une-sans-image .carte-une-titre{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  margin-top:.3rem; font-size:1rem; font-weight:700; line-height:1.35; color:var(--encre); text-align:center;
}
.carte-une-sans-image:hover .carte-une-titre{color:var(--marque-titre)}
.etiquette-rubrique{display:inline-block}

/* fiche série / émission */
/* Les vignettes viennent de YouTube, donc en 16/9 : un cadrage portrait
   les recadrerait sauvagement. On garde leur format d'origine. */
.carte-emission .carte-image{aspect-ratio:16/9}
.emission-bandeau{
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem .6rem .55rem;
  background:linear-gradient(180deg,transparent,rgba(27,7,48,.55) 45%,rgba(27,7,48,.95));
  color:#fff;
}
/* Sans display:block, les deux lignes se suivent et se chevauchent. */
.emission-bandeau .n,.emission-bandeau .d{display:block}
.emission-bandeau .n{font-size:.92rem; font-weight:800; line-height:1.15}
.emission-bandeau .d{font-size:.7rem; color:#D9C2E6; margin-top:.15rem}

/* -------------------------------------------------------------- actu */
.actu-grille{display:grid; gap:var(--pas-5)}
@media(min-width:900px){ .actu-grille{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)} }

.article-une .etiquette-rubrique{margin-bottom:.4rem}
.article-une h3{
  font-size:clamp(1.3rem,3.4vw,1.95rem); font-weight:800; line-height:1.12;
  letter-spacing:-.025em; margin:.2rem 0 .45rem;
}
.article-une:hover h3{color:var(--marque-titre)}
.article-une .chapo{color:var(--encre-douce); font-size:.98rem}
.article-une .carte-image{aspect-ratio:16/9; margin-bottom:var(--pas-3)}

.etiquette-rubrique{
  display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--magenta);
}
.etiquette-rubrique.urgent{background:var(--magenta); color:#fff; padding:.15rem .45rem; border-radius:3px}
/* Surtitre d'un article : la ligne en capitales au-dessus du titre (includes/surtitre.php). Magenta sombre en thème clair
   (7,9 : 1 sur blanc), rose clair en thème sombre (8,2 : 1 sur le violet profond), blanc sur le bandeau de la page article. */
.surtitre{display:block; margin-top:.55rem; font-size:.82rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--surtitre)}
.bandeau-article .surtitre{margin-top:.7rem; color:#fff; opacity:.95}

/* ------------------------------------------------------------ page rubrique */
/* Bandeau de couleur + titre centré, comme le « TopicHeader » de tf1info.fr
   sur ses pages catégorie (/politique/, etc.) — au lieu d'un simple h1 posé
   sur fond blanc sans traitement. */
.bandeau-rubrique{background:var(--rose); color:#fff; padding:var(--pas-6) 0}
.bandeau-rubrique h1{text-align:center; color:#fff}

/* Champ de recherche large, comme tf1info.fr — pas un simple champ de
   formulaire perdu à côté d'un bouton. */
.recherche-grande{position:relative; display:flex}
.recherche-grande input{
  flex:1; padding:1.1rem 3.2rem 1.1rem 1.3rem; border:0; border-radius:var(--rayon-sm);
  background:var(--violet-050); color:var(--marque-fonce); font-size:1.05rem; font-weight:700;
}
/* Champ à fond lavande fixe (violet-050) dans les deux thèmes : le placeholder doit rester foncé (5,4 : 1) ; --encre-pale devient clair en sombre. */
.recherche-grande input::placeholder{color:#6B5A78; font-weight:400}
.recherche-grande button{
  position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  background:none; border:0; padding:0; color:var(--encre-pale); cursor:pointer; display:flex;
}
.recherche-grande button:hover{color:var(--marque-fonce)}

/* Liste en colonne de lecture, comme « L'info en continu » chez TF1 et
   comme notre propre fil de la rédaction — plutôt qu'une grille dense de
   petites cartes. Item horizontal : image à gauche, texte à droite. */
.liste-rubrique{list-style:none; margin:0 auto; padding:0; max-width:640px}
.item-rubrique{border-bottom:1px solid var(--trait); padding:1.4rem 0}
.item-rubrique:first-child{padding-top:0}
.item-rubrique:last-child{border-bottom:0}
.item-rubrique a{display:flex; gap:1.1rem; align-items:flex-start}
.item-rubrique .carte-image{
  flex:none; width:220px; aspect-ratio:16/9; position:relative;
  border-radius:var(--rayon-sm); overflow:hidden; background:var(--violet-100);
}
.item-rubrique .carte-image img{width:100%; height:100%; object-fit:cover}
.item-rubrique-corps{min-width:0; display:flex; flex-direction:column; gap:.3rem}
.item-rubrique-titre{
  font-size:1.2rem; font-weight:800; line-height:1.3; color:var(--encre);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.item-rubrique a:hover .item-rubrique-titre{color:var(--marque-titre)}
.item-rubrique-meta{font-size:.78rem; color:var(--encre-pale)}
@media(max-width:560px){
  .item-rubrique a{flex-direction:column}
  .item-rubrique .carte-image{width:100%}
}

.liste-articles{display:grid; gap:var(--pas-4); list-style:none; margin:0; padding:0}
.liste-articles li{border-bottom:1px solid var(--trait); padding-bottom:var(--pas-4)}
.liste-articles li:last-child{border-bottom:0; padding-bottom:0}
.liste-articles h4{font-size:.98rem; font-weight:700; line-height:1.3}
.liste-articles a:hover h4{color:var(--marque-titre)}
.liste-articles .meta{font-size:.76rem; color:var(--encre-pale); margin-top:.25rem}

/* ------------------------------------------------------------ publicité */
.pub{text-align:center}
.pub-fictif{
  display:grid; place-items:center; min-height:110px; border-radius:var(--rayon-sm);
  background:repeating-linear-gradient(45deg,var(--violet-100),var(--violet-100) 10px,var(--violet-050) 10px,var(--violet-050) 20px);
  color:var(--violet-600); font-weight:700; font-size:.85rem;
}
.pub-image{display:block; border-radius:var(--rayon-sm); overflow:hidden}
.pub-image img{width:100%; height:auto; display:block}

/* Rotation : plusieurs campagnes sur un même emplacement, une visible à la
   fois, superposées et alternées en fondu via .pub-slide-actif (JS). */
.pub-rotation{position:relative}
.pub-rotation .pub-slide{
  opacity:0; position:absolute; inset:0; pointer-events:none; transition:opacity .5s ease;
}
.pub-rotation .pub-slide-actif{opacity:1; position:relative; pointer-events:auto}
.pub-rotation .pub-slide.pub-fictif{min-height:110px}
@media (prefers-reduced-motion: reduce){ .pub-rotation .pub-slide{transition:none} }

/* Bandeau d'en-tête par défaut (dernière vidéo), à la place de la
   publicité quand aucun annonceur n'est actif sur cet emplacement. */
.bandeau-video{
  display:flex; align-items:center; gap:var(--pas-4); color:#fff; text-decoration:none;
  background:var(--marque-fonce); border-radius:var(--rayon-sm); overflow:hidden;
}
.bandeau-video-image{flex:none; position:relative; width:220px; aspect-ratio:16/9; background:var(--violet-700)}
.bandeau-video-image img{width:100%; height:100%; object-fit:cover; display:block}
.bandeau-video-image .bouton-lecture{position:absolute; inset:0; margin:auto}
.bandeau-video:hover .bandeau-video-image .bouton-lecture{transform:scale(1.07); background:#fff}
.bandeau-video-texte{padding:.6rem var(--pas-4) .6rem 0; min-width:0}
.bandeau-video-tag{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:#E5CCFF; margin-bottom:.25rem;
}
.bandeau-video-titre{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:1rem; font-weight:650; line-height:1.32;
}
.bandeau-video:hover .bandeau-video-titre{color:#E5CCFF}
@media (max-width:640px){.bandeau-video-image{width:130px}}

/* Variante « bandeau généré » : le visuel composé porte déjà son propre
   texte (nom de l'émission, sujet) — pas de bloc texte séparé à côté. */
.bandeau-video-genere{display:block; background:var(--violet-900)}
.bandeau-video-genere img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}

/* ---------------------------------------------------------- newsletter */
.newsletter{background:var(--violet-600); color:#fff; padding:var(--pas-6) 0; margin-top:var(--pas-7)}
.newsletter h2{font-size:1.3rem; font-weight:800}
.newsletter p{color:#E4D2EE; margin-top:.4rem; font-size:.92rem}
.newsletter form{display:flex; flex-wrap:wrap; gap:var(--pas-2); margin-top:var(--pas-4); max-width:520px}
.newsletter input[type=email]{
  flex:1 1 220px; padding:.75rem .9rem; border-radius:var(--rayon-sm);
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.1); color:#fff; font-size:1rem;
}
.newsletter input::placeholder{color:#C9AEDA}

.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.72rem 1.2rem; border-radius:var(--rayon-sm); border:0; cursor:pointer;
  font-weight:700; font-size:.9rem; transition:background .15s, transform .1s;
}
.bouton:active{transform:translateY(1px)}
.bouton-magenta{background:var(--magenta); color:#fff}
.bouton-magenta:hover{background:#B4129F}
.bouton-blanc{background:#fff; color:var(--violet-600)}
.bouton-violet{background:var(--violet-600); color:#fff}
.bouton-violet:hover{background:var(--violet-500)}
.bouton-contour{background:transparent; border:1px solid var(--trait); color:var(--encre)}
.bouton-contour:hover{background:var(--survol)}

/* Pagination des listes publiques (/articles, /actu) — même esprit que le
   pager du back-office (admin/views/videos.php), avec les boutons du site
   public au lieu de ceux de l'admin. */
.pagination{display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:2.4rem}
.pagination-etat{font-size:.85rem; color:var(--encre-pale)}

/* -------------------------------------------------------------- article */
.page-article{max-width:760px; margin:0 auto; padding:var(--pas-6) 0}
/* Sur téléphone, cette ligne annule le retrait latéral de .conteneur (même élément) : le texte
   touchait les deux bords de l'écran. Le bandeau d'article garde son propre retrait (plus bas). */
@media(max-width:799px){ .page-article{padding-left:var(--pas-4); padding-right:var(--pas-4)} }
.page-article h1{margin:.5rem 0 .75rem}
.page-article .chapo{font-size:1.1rem; color:var(--encre-douce); font-weight:500}

/* Bandeau de couleur au-dessus de l'article, comme la page rubrique — même
   principe que tf1info.fr, dont chaque page article ouvre sur ce bandeau. */
/* Bloc coloré limité à la largeur du texte (comme les paragraphes
   justifiés), pas toute la largeur de la fenêtre — et un espace au-dessus
   pour ne pas rester collé à la publicité d'en-tête. */
.bandeau-article{color:#fff; margin-top:var(--pas-6)}
.bandeau-article .page-article{
  background:var(--rose); border-radius:var(--rayon);
  padding:var(--pas-5) var(--pas-5) var(--pas-6);
}
.bandeau-article h1{color:#fff; margin:.6rem 0 0}
/* Le magenta de .etiquette-rubrique est illisible sur le fond rose de ce
   bandeau (contraste insuffisant) : blanc ici, comme le h1 juste au-dessus. */
.bandeau-article .etiquette-rubrique{margin-top:.3rem; color:#fff}
.date-bandeau{margin-top:.7rem; font-size:.85rem; color:#fff}
.signature{
  display:flex; align-items:center; gap:var(--pas-3); flex-wrap:wrap;
  padding:var(--pas-4) 0; margin:var(--pas-4) 0; border-top:1px solid var(--trait);
  border-bottom:1px solid var(--trait); font-size:.85rem; color:var(--encre-douce);
}
.avatar{
  width:38px; height:38px; border-radius:50%; background:var(--violet-100);
  color:var(--violet-600); display:grid; place-items:center; font-weight:800; font-size:.8rem; flex:none;
}
.corps{font-size:1.05rem; line-height:1.75}
.corps p{text-align:justify}
/* Colonne étroite : le texte justifié étire les lignes courtes en grands blancs. */
@media(max-width:639px){ .corps p{text-align:left} }
.corps > * + *{margin-top:1.1rem}
.corps h3{font-size:1.2rem; margin-top:1.8rem}
/* Citation : plus de liseret sur le côté (règle de César) ; la taille, le poids et la couleur la distinguent. */
.corps blockquote{
  margin:1.5rem 0; padding:.2rem 0;
  font-size:1.12rem; font-weight:600; color:var(--titre-fort);
}
.corps ul,.corps ol{padding-left:1.3rem}
.corps a{color:var(--marque-titre); text-decoration:underline}
body.sombre .corps a{color:#C9AEDA}
:root[data-theme="clair"] body.sombre .corps a{color:var(--marque-titre)}
.corps em{color:var(--encre-pale)}

.partage{display:flex; align-items:center; gap:var(--pas-2); flex-wrap:wrap; margin-top:var(--pas-5)}
.partage span{font-size:.78rem; font-weight:700; color:var(--encre-pale); letter-spacing:.06em; text-transform:uppercase}
.partage a,.partage button{
  display:inline-flex; align-items:center; min-height:44px; padding:.4rem .75rem; border-radius:999px; border:1px solid var(--trait);
  font-size:.8rem; font-weight:600; background:var(--papier-casse); color:var(--encre-douce); cursor:pointer;
}
.partage a:hover,.partage button:hover{background:var(--violet-050); color:var(--violet-600)}

/* ------------------------------------------------------- commentaires */
.commentaires{margin-top:var(--pas-7)}
.commentaire{padding:var(--pas-4) 0; border-bottom:1px solid var(--trait)}
.commentaire .qui{font-weight:700; font-size:.9rem}
.commentaire .quand{font-size:.74rem; color:var(--encre-pale)}
.commentaire p{margin-top:.35rem; color:var(--encre-douce); font-size:.95rem}
.commentaire-reponse{margin:.6rem 0 0 var(--pas-5); padding:.5rem .7rem; background:var(--papier-casse); border-radius:4px}
.commentaire-reponse .qui{color:var(--teal-texte)}

/* ------------------------------------------------------ fil d'actualité */
.liste-fil{list-style:none; margin:1.5rem 0; padding:0; max-width:720px}
.fil-entree{padding:0 0 var(--pas-4); margin-bottom:var(--pas-4); border-bottom:1px solid var(--trait)}
.fil-entree:last-child{border-bottom:0}
.fil-entree-heure{display:block; font-size:.78rem; font-weight:700; color:var(--magenta-sombre); letter-spacing:.04em; text-transform:uppercase}
.fil-entree h3{margin-top:.3rem; font-size:1.1rem}
.fil-entree p{margin-top:.4rem; color:var(--encre-douce); line-height:1.6; white-space:pre-line}

.formulaire{display:grid; gap:var(--pas-3); margin-top:var(--pas-4); max-width:560px}
.formulaire input,.formulaire textarea{
  width:100%; padding:.7rem .85rem; border:1px solid var(--trait);
  border-radius:var(--rayon-sm); font-size:.95rem; font-family:inherit; background:var(--papier-casse); color:var(--encre);
}
.formulaire textarea{min-height:110px; resize:vertical}
/* Placeholders : le gris par défaut du navigateur tombait à 4,4 : 1 en clair et 3,6 : 1 en sombre. */
.formulaire ::placeholder{color:var(--encre-pale); opacity:1}
body.sombre .formulaire ::placeholder{color:#A98CBD}
:root[data-theme="clair"] body.sombre .formulaire ::placeholder{color:var(--encre-pale)}

/* ------------------------------------------------------------ programme */
/* Une vraie grille hebdomadaire : sept colonnes qui défilent horizontalement
   sur mobile, au lieu d'une liste verticale de sept blocs empilés. */
.grille-programme{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(198px,1fr);
  gap:.7rem; background:var(--rose-logo); padding:.9rem;
  border-radius:var(--rayon); overflow-x:auto; margin-top:2rem;
  scroll-snap-type:x proximity;
}
@media(min-width:960px){ .grille-programme{grid-auto-columns:minmax(0,1fr)} }

.jour-colonne{background:var(--papier-casse); padding:.9rem .7rem 1.1rem; scroll-snap-align:start; min-width:0; border-radius:var(--rayon-sm)}
.jour-colonne.aujourdhui{background:var(--violet-050)}

.jour-entete{
  font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--encre-douce); padding-bottom:.6rem; margin-bottom:.7rem;
  border-bottom:2px solid var(--trait); display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
}
.jour-colonne.aujourdhui .jour-entete{color:var(--violet-600); border-bottom-color:var(--violet-500)}
.jour-puce{
  background:var(--violet-600); color:#fff; font-size:.6rem; font-weight:800;
  letter-spacing:.04em; text-transform:none; padding:.1rem .45rem; border-radius:999px;
}
.jour-vide{font-size:.8rem; color:var(--encre-pale); font-style:italic}

.creneau-carte{
  display:flex; flex-direction:column; gap:.35rem; padding:.65rem .7rem;
  margin-bottom:.5rem; border-radius:var(--rayon-sm); border:1px solid var(--trait);
  background:var(--papier-casse); transition:transform .12s, box-shadow .12s, border-color .12s;
}
.creneau-carte:hover{transform:translateY(-1px); box-shadow:0 2px 8px rgba(27,7,48,.1); border-color:var(--violet-100)}
.creneau-heure{
  font-weight:800; font-size:.76rem; font-variant-numeric:tabular-nums; color:var(--encre-douce);
}
.creneau-logo{display:block; height:24px; width:auto; max-width:100%; object-fit:contain}
.creneau-titre{font-weight:700; font-size:.87rem; line-height:1.25; color:var(--encre)}
.creneau-etiquette{
  font-size:.6rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--violet-600); align-self:flex-start;
}
.creneau-carte.type-direct .creneau-etiquette{color:var(--magenta-sombre)}

.creneau-carte.maintenant{
  border-color:var(--violet-600); background:var(--violet-050);
}
.badge-antenne{
  margin-top:.3rem; align-self:flex-start; background:var(--magenta); color:#fff;
  font-size:.6rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:.15rem .5rem; border-radius:999px;
}

/* --------------------------------------------------------------- pied */
/* --------------------------------------------------------- tendances --- */
/* Widget générique « Tout Evenprod Medias », en pied de page — comme le
   bloc de tf1info.fr, mais uniquement avec de vrais signaux mesurables. */
.tendances{background:var(--marque-fond); color:#fff; margin-top:var(--pas-8); padding:var(--pas-6) 0}
.tendances h2{font-size:1.3rem; text-align:center; font-weight:800}
.onglets-tendances{display:flex; justify-content:center; gap:.5rem; margin:1.3rem 0 1.6rem}
.onglet-tendance{
  display:inline-flex; align-items:center; min-height:44px; padding:.5rem 1rem; border-radius:999px; font-weight:700; font-size:.82rem;
  color:rgba(255,255,255,.75); background:transparent; border:0; cursor:pointer;
  transition:background .15s, color .15s;
}
.onglet-tendance:hover{color:#fff}
.onglet-tendance.actif{background:#fff; color:var(--marque-fonce)}
.liste-tendances{max-width:640px; margin:0 auto; list-style:none}
.liste-tendances li{border-bottom:1px solid rgba(255,255,255,.12); padding:.9rem 0}
.liste-tendances li:last-child{border-bottom:0}
.liste-tendances a{color:#fff; font-weight:600; font-size:.95rem; line-height:1.4}
.liste-tendances a:hover{text-decoration:underline}
.liste-tendances li.vide{color:rgba(255,255,255,.55); font-size:.88rem; font-style:italic}

.pied{background:var(--violet-900); color:#C9AEDA; margin-top:0; padding:var(--pas-6) 0 var(--pas-5)}
.pied-grille{display:grid; gap:var(--pas-5)}
@media(min-width:700px){ .pied-grille{grid-template-columns:2fr 1fr} }
.pied h4{font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:#fff; margin-bottom:.7rem}
.pied ul{list-style:none; margin:0; padding:0; display:grid; gap:.4rem; font-size:.85rem}
.pied a:hover{color:#fff}
/* Écrans tactiles : les liens du pied de page faisaient 16 px de haut. Réservé au toucher pour ne
   pas allonger le pied de page à la souris. */
@media(pointer:coarse){
  .pied ul{gap:0}
  .pied ul a{display:inline-flex; align-items:center; min-height:44px}
}
.pied-bas{
  margin-top:var(--pas-5); padding-top:var(--pas-4); border-top:1px solid rgba(255,255,255,.13);
  font-size:.76rem; display:flex; flex-wrap:wrap; gap:var(--pas-3) var(--pas-4); align-items:center;
}
.pied .marque-sigle{width:30px; height:30px; font-size:.72rem}

/* -------------------------------------------------------------- divers */
.message{
  padding:.8rem 1rem; border-radius:var(--rayon-sm); font-size:.9rem; font-weight:600;
  margin:var(--pas-4) 0;
}
.message-succes{background:#DDF0EA; color:#065647}
.message-erreur{background:#FBE3F7; color:var(--magenta-sombre)}

.vide{
  padding:var(--pas-7) var(--pas-4); text-align:center; color:var(--encre-pale);
  border:1px dashed var(--trait); border-radius:var(--rayon);
}

.fil{font-size:.78rem; color:var(--encre-pale); padding:var(--pas-4) 0 0}
.fil a:hover{color:var(--violet-500); text-decoration:underline}

.stats-ligne{display:flex; flex-wrap:wrap; gap:var(--pas-4); margin-top:var(--pas-3)}
.stat .v{font-size:1.35rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.stat .l{font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--encre-pale)}

/* pages à fond sombre (direct, lecteur vidéo) */
/* Fond mesuré sur les pages vidéo de tf1info.fr : rgb(1,5,44), exactement
   notre --marque-fond — déjà utilisé sur les pages émission, étendu ici. */
body.sombre{background:var(--marque-fond); color:#F0E6F6}
body.sombre .section-tete h2{color:#C9AEDA}
body.sombre .carte-titre{color:#F0E6F6}
body.sombre .carte:hover .carte-titre{color:#fff}
body.sombre .carte-meta{color:#A98CBD}
body.sombre .carte-image{background:var(--violet-700)}
body.sombre .pied{margin-top:var(--pas-7)}
body.sombre .fil{color:#A98CBD}
body.sombre .corps{color:#E4D2EE}
body.sombre .formulaire input,body.sombre .formulaire textarea{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); color:#fff;
}
body.sombre .commentaire{border-color:rgba(255,255,255,.14)}
body.sombre .commentaire p{color:#D9C2E6}
body.sombre .bouton-contour{border-color:rgba(255,255,255,.25); color:#F0E6F6}
body.sombre .bouton-contour:hover{background:rgba(255,255,255,.08)}
body.sombre .vide{border-color:rgba(255,255,255,.2); color:#A98CBD}
body.sombre .signature{border-color:rgba(255,255,255,.14); color:#C9AEDA}

/* Thème clair explicite (data-theme="clair") sur ces pages à fond sombre :
   le fond violet fixe ci-dessus est un choix volontaire par défaut (voir plus
   haut), mais il doit céder devant le choix explicite du visiteur — sinon le
   bouton « Basculer le thème clair/sombre » met bien à jour data-theme (et
   change l'icône) sans que la page ne change jamais visuellement, puisque ces
   sélecteurs de classe l'emportent sur les jetons --papier/--encre pilotés par
   data-theme (bug constaté à l'audit UX, point 7). Chaque règle reprend la
   valeur déjà utilisée par son équivalent hors ".sombre" ailleurs dans ce
   fichier, aucune nouvelle couleur inventée ici. */
:root[data-theme="clair"] body.sombre{background:var(--papier); color:var(--encre)}
:root[data-theme="clair"] body.sombre .section-tete h2{color:var(--marque-fonce)}
:root[data-theme="clair"] body.sombre .carte-titre{color:var(--encre)}
:root[data-theme="clair"] body.sombre .carte:hover .carte-titre{color:var(--marque-fonce)}
:root[data-theme="clair"] body.sombre .carte-meta{color:var(--encre-pale)}
:root[data-theme="clair"] body.sombre .carte-image{background:var(--violet-100)}
:root[data-theme="clair"] body.sombre .fil{color:var(--encre-pale)}
:root[data-theme="clair"] body.sombre .corps{color:var(--encre)}
:root[data-theme="clair"] body.sombre .formulaire input,
:root[data-theme="clair"] body.sombre .formulaire textarea{background:var(--papier-casse); border-color:var(--trait); color:var(--encre)}
:root[data-theme="clair"] body.sombre .commentaire{border-color:var(--trait)}
:root[data-theme="clair"] body.sombre .commentaire p{color:var(--encre-douce)}

/* Contraste en thème clair, relevé du 03/10/2026 sur la page vidéo : la colonne « Dans la même émission »
   gardait ses couleurs de fond sombre (titre #F0E6F6, soit 1,2 : 1 sur blanc, illisible). Même méthode que
   ci-dessus : on reprend les jetons du thème clair, aucune couleur nouvelle. */
:root[data-theme="clair"] body.sombre .suite-item-titre{color:var(--encre)}
:root[data-theme="clair"] body.sombre .suite-item a:hover .suite-item-titre{color:var(--marque-fonce)}
:root[data-theme="clair"] body.sombre .suite-item-meta{color:var(--encre-pale)}
/* « Tout voir » : le magenta de charte fait 4,1 : 1 sur blanc, on prend sa version sombre */
:root[data-theme="clair"] .page-emission-sombre button.lien-tout{color:var(--magenta-sombre) !important}
/* « Tout voir » des rubriques en thème sombre : le violet de charte (#6600CC) fait 2,2 : 1 sur le violet profond */
@media (prefers-color-scheme: dark){ :root:not([data-theme="clair"]) .section-tete .lien-tout{color:#C9AEDA} }
:root[data-theme="sombre"] .section-tete .lien-tout{color:#C9AEDA}
/* Pages à fond sombre fixe (vidéo, émission) quand le système est clair : même lien, même problème */
:root:not([data-theme="clair"]) body.sombre .section-tete .lien-tout{color:#C9AEDA}
/* Entrée de menu active en thème sombre : le violet de charte fait 2,2 : 1 sur le violet profond */
@media (prefers-color-scheme: dark){ :root:not([data-theme="clair"]) .nav-principale a[aria-current]{color:var(--marque-titre)} }
:root[data-theme="sombre"] .nav-principale a[aria-current]{color:var(--marque-titre)}
/* Titres de page et noms d'émission en turquoise clair (style en ligne dans les vues) : 2,7 : 1 sur blanc.
   Sur fond blanc (thème clair choisi à la main, ou système clair sur une page à fond blanc), on prend le
   turquoise de charte plus foncé (6,4 : 1). Les pages à fond sombre en système clair ne changent pas. */
:root[data-theme="clair"] h1[style*="--teal-clair"],
:root[data-theme="clair"] .etiquette-rubrique[style*="--teal-clair"]{color:var(--teal) !important}
@media (prefers-color-scheme: light){
  :root:not([data-theme="sombre"]) body:not(.sombre) h1[style*="--teal-clair"]{color:var(--teal) !important}
}
:root[data-theme="clair"] body.sombre .bouton-contour{border-color:var(--trait); color:var(--encre)}
:root[data-theme="clair"] body.sombre .vide{border-color:var(--trait); color:var(--encre-pale)}
:root[data-theme="clair"] body.sombre .signature{border-color:var(--trait); color:var(--encre-douce)}

/* ================================================================== le fil */
/* Chronologie de la rédaction : vidéos et articles mélangés, horodatés —
   en colonne de lecture centrée, comme « L'info en continu » sur
   tf1info.fr, avec de grandes images plutôt que des vignettes de liste.
   900px (et non 600px) : une seule colonne assumée, mais qui occupe
   une place plus proche de ce qu'un portail d'info affiche d'ordinaire. */
.fil-redaction{list-style:none; margin:0 auto; padding:0; max-width:900px}

.fil-jour{
  font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--marque-fonce); padding-top:1.8rem; margin-top:.2rem;
}
.fil-jour:first-child{padding-top:0; margin-top:0}

.fil-item{border-bottom:1px solid var(--trait); padding:1.6rem 0}
.fil-item:last-child{border-bottom:0}
.fil-item a{display:flex; flex-direction:column; gap:.55rem}

.fil-entete{display:flex; align-items:center; flex-wrap:wrap; gap:.5rem}
.fil-genre{
  font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
}
.fil-genre-article{color:var(--fil-article, var(--teal))}
.fil-genre-direct{color:var(--fil-direct, var(--magenta))}
.fil-genre-episode{color:var(--texte-fort-sombre, var(--violet-500))}
.fil-genre-extrait,.fil-genre-video{color:var(--texte-fort-sombre, var(--encre-pale))}
.fil-origine{
  font-weight:650; letter-spacing:.02em; text-transform:none; font-size:.76rem;
  color:var(--texte-fort-sombre, var(--encre-pale));
}
.fil-heure{
  font-size:.78rem; color:var(--texte-fort-sombre, var(--encre-pale)); font-variant-numeric:tabular-nums;
}
.fil-heure::before{content:"· "}

.fil-titre{
  font-size:1.5rem; font-weight:700; line-height:1.28; color:var(--marque-fonce);
  letter-spacing:-.008em;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.fil-item a:hover .fil-titre{color:var(--marque-accent)}

.fil-vignette{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  border-radius:var(--rayon-sm); overflow:hidden; background:var(--violet-100);
}
.fil-vignette img{width:100%; height:100%; object-fit:cover}
.fil-play{position:absolute; inset:0; display:grid; place-items:center}
.fil-duree{
  position:absolute; right:.5rem; bottom:.5rem; background:rgba(0,0,0,.8); color:#fff;
  font-size:.72rem; font-weight:700; padding:.15rem .4rem; border-radius:3px;
}
.fil-meta{font-size:.8rem; color:var(--encre-pale)}

/* Lien sortant vers le site des séries : signalé comme extérieur au site. */
.nav-principale .lien-externe{color:#C9AEDA; font-weight:650}
.nav-principale .lien-externe:hover{color:#fff}
.nav-principale .lien-externe span{opacity:.65; font-size:.85em}

/* Photo au milieu d'un article (bloc « Photo » de l'éditeur, 05/10/2026) : pleine largeur de la colonne de lecture, légende
   dessous, crédit en petites capitales. Les dimensions width/height du HTML réservent la place (la page ne saute pas). */
.corps figure{margin:1.8rem 0}
.corps figure img{display:block; width:100%; height:auto; border-radius:10px}
.corps figcaption{margin-top:.6rem; font-size:.88rem; line-height:1.5; color:var(--encre-douce)}
.corps figcaption cite{display:block; margin-top:.15rem; font-style:normal; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--encre-pale)}
.corps figcaption cite::before{content:"Crédit : "}
body.sombre .corps figcaption{color:#D9C2E6}
body.sombre .corps figcaption cite{color:#B79BCB}
:root[data-theme="clair"] body.sombre .corps figcaption{color:var(--encre-douce)}
:root[data-theme="clair"] body.sombre .corps figcaption cite{color:var(--encre-pale)}

/* Direct de l'accueil (07/10/2026, demande de César) : le lecteur, son titre et le bouton « Page du direct » sont centrés
   sous le menu au lieu d'être collés à gauche. La manchette flottante (classe .suivi) garde sa place en bas à droite. */
#section-direct-accueil .conteneur{text-align:center}
#section-direct-accueil .lecteur-suiveur:not(.suivi){margin-left:auto; margin-right:auto}
#section-direct-accueil .antenne-plateformes{justify-content:center}
.lecteur-suiveur.suivi{margin:0}
/* Pastille « Son coupé » : la manchette se lance sans le son (règle des navigateurs pour un lancement automatique) */
.lecteur-suiveur-muet{
  position:absolute; left:var(--pas-3); top:2.7rem; z-index:3; max-width:calc(100% - 3rem);
  background:rgba(0,0,0,.72); color:#fff; border-radius:4px; padding:.15rem .5rem;
  font-size:.72rem; font-weight:600; line-height:1.4; pointer-events:none;
}

/* ===== 08/10/2026, données structurées : l'étiquette de rubrique d'un article est un lien vers la rubrique (audit SEO C08).
   Même apparence qu'avant (la couleur vient de .etiquette-rubrique), soulignée au survol, cible d'au moins 24 px de haut. */
a.etiquette-rubrique{display:inline-flex; align-items:center; min-height:24px}
a.etiquette-rubrique:hover{text-decoration:underline}

/* ===== 08/10/2026, étiquettes visibles des formulaires publics (audit UX P16) : commentaires et lettre d'information.
   L'étiquette est au-dessus du champ ; l'aide (limite de caractères) en dessous, plus claire que le texte courant. */
.formulaire-champ{display:grid; gap:.3rem}
.formulaire-champ label{font-size:.85rem; font-weight:700}
.formulaire-aide{font-size:.78rem; color:var(--encre-pale)}
.formulaire-aide-plein{font-weight:700}
body.sombre .formulaire-aide{color:#C9B4D8}
:root[data-theme="clair"] body.sombre .formulaire-aide{color:var(--encre-pale)}

/* ===== 08/10/2026, petits défauts d'audit : date du bandeau d'article (C13). Le blanc de « Publié le… » ne faisait que 4,29 : 1 sur
   le rose de charte (#EF0766) ; le fond du seul bandeau passe à #DE055C (4,9 : 1 avec du blanc, 4,6 : 1 pour le surtitre à 95 %
   d'opacité). Le rose de charte, lui, ne change nulle part ailleurs. */
.bandeau-article .page-article{background:#DE055C}

/* ===== 08/10/2026, petits défauts d'audit, deuxième série : les titres du menu mobile ne sont plus des <h4> placés avant le <h1>
   de la page (audit SEO C20) ; même apparence qu'avant. */
.nav-mobile .nav-titre{font-size:.66rem; font-weight:700; line-height:1.15; letter-spacing:.12em; text-transform:uppercase; color:var(--encre-pale); margin-bottom:.5rem}