/* ════════════════════════════════════════════════════════════════
   suivre-en-direct.css – page /suivre-en-direct/
   (grille des retransmissions, avant le voyage).

   Tiré de la feuille direct.css de la maquette Claude Design
   « Suivre en direct.html », SANS ce que le thème porte déjà
   (hero, components, pages-v3, inscriptions, style-v3).

   Classe racine : .pf-suivre-direct, et non .pf-direct, déjà prise
   par la page /en-direct/ : header-v4.css repeint l'en-tête de toute
   page qui contient un .pf-direct (body:has(.pf-direct)).

   Écarts avec direct.css, tous voulus :
   - .pf-jour devient .pf-journee (et ses éléments __head, __t, __v) :
     .pf-jour est la pastille du compte à rebours de l'accueil,
     déclarée sans préfixe dans accueil-v4.css, chargée partout. Sa
     règle .pf-jour b aurait passé à 19 px les <b> de la grille.
   - Couleurs par tokens qui s'inversent la nuit : --navy-900 y
     devient le FOND général, un titre qui l'emploie disparaît.
       texte --navy-900 -> --primary-deep (texte sur fond clair)
       texte --navy     -> --ink
       fond #fff        -> --paper
       fond --navy-050  -> --primary-tint
   - Couleur de filet des diffuseurs par classe de variante et non
     par un style="--et:…" en ligne : GB 2 range un style posé dans
     htmlAttributes dans son propre panneau de styles.
   - La note sous les diffuseurs (style en ligne) devient
     .pf-diff__note.
   - Non repris : .pf-live (pastille EN DIRECT) et data-phase. Aucune
     pastille dans le markup de la maquette, et le thème en a déjà
     une (header-v4, phase-pendant) : la réemployer le moment venu.
   - Police : le texte hérite de Jost, police par défaut du site ;
     seules graisse, corps et interligne sont posés.

   Place dans PF_CSS : après style-v3, pages-v3 et components, avant
   charte-v4-dark, comme informations-pratiques. Proposition : juste
   après evenement-aside-float.
   ════════════════════════════════════════════════════════════════ */


/* ═══ 1. Sections ════════════════════════════════════════════════
   La variante crème n'est déclarée qu'en thème sombre. */

.pf-suivre-direct .pf-section--cream { background: var(--cream); }


/* ═══ 2. Diffuseurs ══════════════════════════════════════════════
   ul.pf-diff > li.pf-diff__it > span __n + p __d (+ a __lk).
   Le filet gauche prend --et, posé par la variante. */

.pf-diff { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pf-diff__it {
  --et: var(--primary);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  margin: 0; padding: 20px 22px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
}
.pf-diff__it::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--et); }
.pf-diff__it--red    { --et: var(--red); }
.pf-diff__it--cyan   { --et: var(--cyan); }
.pf-diff__it--green  { --et: var(--green); }
.pf-diff__it--yellow { --et: var(--yellow); }
.pf-diff__n { font-weight: 700; font-size: 16px; line-height: 1.25; letter-spacing: .01em; color: var(--primary-deep); }
.pf-diff__d { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.pf-diff__lk { font-weight: 600; font-size: 13px; line-height: 1; color: var(--ink); text-decoration: none; margin-top: auto; padding-top: 8px; }
.pf-diff__lk:hover { color: var(--primary-deep); text-decoration: underline; }
.pf-diff__note { font-size: 14px; line-height: 1.55; color: var(--ink-soft); max-width: 70ch; margin: 22px 0 0; }


/* ═══ 3. Journée ═════════════════════════════════════════════════ */

.pf-journee { margin: 0 0 52px; scroll-margin-top: 72px; }
.pf-journee:last-child { margin-bottom: 0; }
.pf-journee__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding-bottom: 14px; border-bottom: 2px solid var(--primary); }
.pf-journee__t { font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; text-transform: uppercase; letter-spacing: .01em; color: var(--primary-deep); margin: 0; }
.pf-journee__v { font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }


/* ═══ 4. Grille des retransmissions ══════════════════════════════
   Bloc Tableau de Gutenberg, un par journée :
     figure.wp-block-table.pf-grille > table.has-fixed-layout
     (> figcaption.wp-element-caption si une légende est saisie)

   .pf-grille est sur la <figure>, PAS sur le <table>. Le tableau
   reçoit donc les règles nues de GeneratePress (table, td, th :
   bordure 1 px, border-collapse: separate, marge basse 1,5em) et
   celles de core/table (thead 3 px, td et th encadrés) : ce sont les
   filets verticaux et le trait épais sous l'en-tête. Toutes sont
   neutralisées ici par .pf-grille table / thead / :is(th, td).

   Le bloc ne sait poser ni classe ni attribut sur une cellule ou une
   ligne. D'où :
   - la colonne « Où suivre » visée par td:last-child ;
   - les libellés mobiles écrits dans la feuille (duplication
     assumée, comme programme-etats.css : si les en-têtes de colonne
     changent dans le bloc, changer aussi les content: plus bas) ;
   - la mise en avant d'un rendez-vous portée par le bloc entier,
     classe pf-grille--cle dans « Classe(s) CSS additionnelle(s) » :
     elle vaut pour toutes les lignes du tableau.
   La légende du bloc (« Retransmissions du …, heure de Paris ») est
   une <figcaption> placée APRÈS le tableau : remontée par order. */

.pf-grille { display: flex; flex-direction: column; margin: 0; }
.pf-grille table { width: 100%; table-layout: fixed; border: 0; border-collapse: collapse; margin: 0; text-align: left; }
.pf-grille thead { border: 0; }
.pf-grille th:nth-child(1) { width: 22%; }
.pf-grille th:nth-child(2) { width: 36%; }
.pf-grille th:nth-child(3) { width: 42%; }
.pf-grille figcaption { order: -1; margin: 0; text-align: left; font-size: 14px; line-height: 1.5; color: var(--ink-soft); padding: 14px 0 4px; }
.pf-grille :is(th, td) { padding: 16px 18px 16px 0; vertical-align: top; border: 0; border-bottom: 1px solid var(--rule); background: none; }
.pf-grille thead th { font-weight: 600; font-size: 11.5px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); padding-top: 16px; padding-bottom: 12px; }
.pf-grille tbody th { font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--ink); }
.pf-grille__ev { display: block; font-weight: 600; font-size: 16.5px; line-height: 1.35; color: var(--ink); }
.pf-grille__ev a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.pf-grille__ev a:hover { color: var(--primary-deep); border-bottom-color: currentColor; }
.pf-grille__li { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.pf-grille tbody td:last-child { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.pf-grille tbody td:last-child b { font-weight: 600; color: var(--ink); }
.pf-grille--cle tbody :is(th, td) { background: var(--primary-tint); }
.pf-grille--cle tbody th:first-child { padding-left: 18px; border-radius: 8px 0 0 8px; }
.pf-grille--cle tbody td:last-child { padding-right: 18px; border-radius: 0 8px 8px 0; }

/* Étiquette d'attente */
.pf-tbc {
  display: inline-block; max-width: 100%;
  font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--cream); border: 1px solid var(--rule); border-radius: 999px;
  padding: 6px 11px;
}

/* Sous le palier du menu, le tableau devient une liste : l'en-tête
   de colonnes est masqué visuellement, chaque cellule reprend le
   libellé de sa colonne (voir l'en-tête de la section). */
@media (max-width: 768px) {
  /* th:nth-child(n) : doit peser autant que les largeurs de colonne
     (0,2,1), sinon le 22 % de la première colonne survit en liste. */
  .pf-grille table, .pf-grille tbody, .pf-grille tr, .pf-grille td, .pf-grille th:nth-child(n) { display: block; width: auto; }
  .pf-grille table { table-layout: auto; }
  .pf-grille thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pf-grille tr { padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .pf-grille :is(th, td) { border-bottom: 0; padding: 0 0 8px; }
  .pf-grille tbody td:last-child { padding-bottom: 0; }
  .pf-grille td::before { display: block; font-weight: 600; font-size: 10.5px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px; }
  .pf-grille td:nth-child(2)::before { content: "Événement"; }
  .pf-grille td:nth-child(3)::before { content: "Où suivre"; }
  .pf-grille--cle tbody tr { background: var(--primary-tint); padding-left: 16px; padding-right: 16px; border-radius: 10px; margin: 10px 0; border-bottom: 0; }
  .pf-grille--cle tbody :is(th, td) { background: none; }
  .pf-grille--cle tbody th:first-child,
  .pf-grille--cle tbody td:last-child { padding-left: 0; padding-right: 0; border-radius: 0; }
}

/* Variante comparatif veillée / messe (Informations pratiques Paris
   et Saint-Denis). Même bloc Tableau, mêmes contraintes : la première
   cellule d'en-tête est un <td> vide, que les largeurs en th de la
   grille ne visent pas ; les libellés mobiles sont recopiés des
   en-têtes de colonne du bloc, à changer avec eux. La dernière colonne
   reprend le corps normal : ici elle n'est pas secondaire. */
@media (min-width: 769px) {
  .pf-grille--comparatif thead :is(th, td):nth-child(1) { width: 20%; }
  .pf-grille--comparatif thead :is(th, td):nth-child(2),
  .pf-grille--comparatif thead :is(th, td):nth-child(3) { width: 40%; }
}
.pf-grille--comparatif tbody td:last-child { font-size: inherit; color: inherit; }
@media (max-width: 768px) {
  .pf-grille.pf-grille--comparatif td:nth-child(2)::before { content: "Veillée des jeunes · 25 sept."; }
  .pf-grille.pf-grille--comparatif td:nth-child(3)::before { content: "Messe · 26 sept."; }
}


/* ═══ 5. Renvois de fin de page ══════════════════════════════════
   ul.pf-renvois > li > a > b + span */

.pf-renvois { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pf-renvois li { margin: 0; }
.pf-renvois a { display: block; height: 100%; box-sizing: border-box; padding: 20px 22px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; text-decoration: none; transition: border-color .2s, transform .2s; }
.pf-renvois a:hover { border-color: var(--primary); transform: translateY(-2px); }
.pf-renvois b { display: block; font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--primary-deep); margin-bottom: 4px; }
.pf-renvois span { font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .pf-renvois a { transition: none; } .pf-renvois a:hover { transform: none; } }