/* =========================================================================
   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. */
@font-face{font-family:'Montserrat'; src: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.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:'Montserrat'; src: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.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:'Montserrat'; src: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.otf') format('opentype'); font-weight:600; font-style:italic; font-display:swap}
@font-face{font-family:'Montserrat'; src: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.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap}
@font-face{font-family:'Montserrat'; src: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;
  --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 */

  --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;
}

*,*::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;
}

/* 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}
.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}
.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)}

.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:38px; height:38px; 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(--violet-050)}
@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} }

/* menu déroulant mobile */
.nav-mobile{display:none; border-top:1px solid var(--trait); padding:var(--pas-4) 0 var(--pas-5)}
.nav-mobile.ouvert{display:block}
@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:#fff; 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(--teal-clair);
  font-size:.78rem; font-weight:700; color:#fff; white-space:nowrap; text-align:center;
  opacity:.92; transition:opacity .15s, transform .15s;
}
.ruban-pastille:hover{opacity:1; transform:translateY(-1px)}

/* 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(--teal-clair); 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}
.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}
.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; 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)}

/* -------------------------------------------------------- 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-left:3px solid var(--teal-clair);
  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(--violet-600);
}
.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}

/* 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(--marque-fonce);
}
.section-tete.tete-marque .sous{display:block; margin-top:.3rem; font-size:.85rem}
.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);
}

/* 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; 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)}

/* --------------------------------------------------- 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(--violet-500)}
.carte-meta{display:block; font-size:.74rem; color:var(--encre-pale); margin-top:.2rem}

/* --------------------------------------------------------- à la une x3 */
/* Trois cartes égales, comme sur tf1info.fr : portrait, image plein cadre,
   tag et titre en blanc superposés en bas — la carte centrale, légèrement
   agrandie, porte l'information la plus importante. */
.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:.72; 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:.66}
}
.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:.72; 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-fonce)}
.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(--violet-500)}
.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}

/* ------------------------------------------------------------ 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(--teal-clair); 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;
}
.recherche-grande input::placeholder{color:var(--encre-pale); 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-fonce)}
.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(--violet-500)}
.liste-articles .meta{font-size:.76rem; color:var(--encre-pale); margin-top:.25rem}

/* ------------------------------------------------------------ publicité */
.pub{
  border:1px solid var(--trait); border-radius:var(--rayon-sm);
  background:var(--violet-050); text-align:center; padding:var(--pas-4);
}
.pub-mention{
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--encre-pale); margin-bottom:.5rem;
}
.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;
}

/* ---------------------------------------------------------- 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(--violet-050)}

/* -------------------------------------------------------------- article */
.page-article{max-width:760px; margin:0 auto; padding:var(--pas-6) 0}
.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. */
.bandeau-article{background:var(--teal-clair); color:#fff; padding:var(--pas-5) 0 var(--pas-6)}
.bandeau-article h1{color:#fff; margin:.6rem 0 0}
.bandeau-article .etiquette-rubrique{margin-top:.3rem}
.date-bandeau{margin-top:.7rem; font-size:.85rem; color:rgba(255,255,255,.65)}
.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 > * + *{margin-top:1.1rem}
.corps h3{font-size:1.2rem; margin-top:1.8rem}
.corps blockquote{
  margin:1.5rem 0; padding:.2rem 0 .2rem 1.1rem;
  border-left:3px solid var(--magenta); font-size:1.12rem; font-weight:600; color:var(--violet-600);
}
.corps ul,.corps ol{padding-left:1.3rem}
.corps a{color:var(--violet-500); text-decoration:underline}
.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{
  padding:.4rem .75rem; border-radius:999px; border:1px solid var(--trait);
  font-size:.8rem; font-weight:600; background:#fff; 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}
.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:#fff; color:var(--encre);
}
.formulaire textarea{min-height:110px; resize:vertical}

/* ------------------------------------------------------------ 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:#fff; 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:#fff; 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{
  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}
.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 .vide{border-color:rgba(255,255,255,.2); color:#A98CBD}
body.sombre .signature{border-color:rgba(255,255,255,.14); color:#C9AEDA}

/* ================================================================== le fil */
/* Chronologie de la rédaction : vidéos et articles mélangés, horodatés —
   en colonne de lecture centrée à 600px, comme « L'info en continu » sur
   tf1info.fr, avec de grandes images plutôt que des vignettes de liste. */
.fil-redaction{list-style:none; margin:0 auto; padding:0; max-width:600px}

.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(--teal)}
.fil-genre-direct{color:var(--magenta)}
.fil-genre-episode{color:var(--violet-500)}
.fil-genre-extrait,.fil-genre-video{color:var(--encre-pale)}
.fil-origine{
  font-weight:650; letter-spacing:.02em; text-transform:none; font-size:.76rem;
  color:var(--encre-pale);
}
.fil-heure{
  font-size:.78rem; color: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}