/* ════════════════════════════════════════════════════════════════
   pape-france.fr — PHASE « PENDANT »  ·  phase-pendant.css
   25 au 28 septembre 2026.
   ────────────────────────────────────────────────────────────────
   Deux pages : l'accueil en mode direct (data-phase="pendant") et
   /en-direct/ (.pf-direct).

   LA BASCULE TIENT EN UN ATTRIBUT. Le 25 septembre au matin, on
   pose data-phase="pendant" sur le conteneur racine de l'accueil et
   on remplace le contenu éditorial. Aucune classe ne change, aucune
   feuille n'est retirée : accueil-v4.css reste actif, ce fichier ne
   fait que le requalifier.

   MÊMES RÈGLES QUE accueil-v4.css : aucun token redéfini, aucune
   couleur en dur hors des voiles posés sur une photo, aucun
   composant réinventé — le déroulé du jour reprend .pf-jalons de
   components.css, l'étiquette d'accès la gradation data-pf-nature
   du programme, la façade vidéo la grammaire de .pf-map-facade.

   LE ROUGE NE DIT QUE « EN DIRECT ». Pastille, filet du programme
   du jour, liseré de la ligne en cours. Jamais un fond de page,
   jamais un aplat de section : sur ce site le rouge appartient à
   Metz et à l'alerte, il est ici emprunté pour un état, pas promu
   couleur d'ambiance.

   Chargement : APRÈS accueil-v4.css, avant infobox.css et la suite.
   Breakpoints : 1024 · 768 · 480.
   ════════════════════════════════════════════════════════════════ */


/* ═══ 1. PASTILLE EN DIRECT — .pf-live ═══════════════════════════
   L'animation s'appelle pf-live-pulse et non pf-pulse : ce dernier
   nom est déjà pris par le halo du compte à rebours dans
   warmth-v3.css, chargée après — la collision aurait fait battre
   le point au rythme du halo. */

.pf-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; line-height: 1;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: var(--red);
  padding: 9px 13px; border-radius: 999px;
}
.pf-live::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px; background: #fff;
  animation: pf-live-pulse 1.8s ease-in-out infinite;
}
@keyframes pf-live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .pf-live::before { animation: none; } }

/* L'attribut hidden ne masque rien face à un display d'auteur : il ne
   vaut display:none que dans la feuille du NAVIGATEUR, la moins
   prioritaire, et le display:inline-flex ci-dessus le battait. Sans
   cette ligne, pf-direct.js pose hidden et la pastille « EN DIRECT »
   reste allumée toute la nuit. Même piège que la façade uMap. */
.pf-live[hidden] { display: none; }

/* Variante posée sur une surface claire, hors aplat : le rouge y
   passe en --red-AA, seule valeur lisible en texte. */
.pf-live--sobre { background: var(--primary-tint); color: var(--red-AA); }
.pf-live--sobre::before { background: var(--red); }


/* ═══ 2. BANDEAU DE DIRECT — .pf-pbar ════════════════════════════
   Il remplace .pf-band et remonte AU-DESSUS du héros : pendant le
   voyage, c'est la seule information qui vaut d'être vue avant tout
   le reste. Aplat marine et non rouge — le rouge reste dans la
   pastille, un bandeau rouge pleine largeur crierait l'alerte. */

.pf-pbar {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 14px var(--pad);
  background: var(--primary); color: #fff; text-decoration: none;
}
.pf-pbar__t {
  font-family: 'LeonXIV','Jost',sans-serif; font-weight: 400;
  font-size: 20px; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase;
  min-width: 0;

  /* Deux lignes au plus : le titre d'une célébration peut tenir sur six en
     mobile (« Célébration des vêpres avec les évêques, les prêtres, les
     diacres, les personnes consacrées et les séminaristes »). */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.pf-pbar .pf-live { flex: none; white-space: nowrap; }
.pf-pbar__go {
  flex: none; font-size: 11px; font-weight: 600; line-height: 1;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan);
}
.pf-pbar:hover { background: var(--primary-deep); color: #fff; }


/* ═══ 3. HÉROS EN MODE DIRECT ════════════════════════════════════
   .pf-hero--clair inchangé, requalifié par data-phase. Le halo
   froid gagne une pointe de rouge, le titre nomme la célébration
   en cours au lieu de la devise, qui redescend en pied de héros —
   elle reste présente, mais elle n'est plus la réponse à la
   question du jour. */

.pf-home[data-phase="pendant"] .pf-hero--clair {
  background:
    radial-gradient(120% 72% at 100% 0, color-mix(in srgb, var(--red) 10%, transparent), transparent 62%),
    radial-gradient(95% 62% at 0 12%, color-mix(in srgb, var(--cyan) 16%, transparent), transparent 62%),
    var(--paper);
}
.pf-home[data-phase="pendant"] .pf-hero__title { font-size: clamp(34px, 4.6vw, 64px); }
.pf-home[data-phase="pendant"] .pf-hero__title em,
.pf-home[data-phase="pendant"] .pf-hero__title .pf-hl { color: var(--red-AA); }
/* Le compte à rebours n'a plus d'objet une fois le voyage commencé. */
.pf-home[data-phase="pendant"] .pf-jour { display: none; }

.pf-hero__now { font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: 10px 0 0; }
.pf-hero__now b { color: var(--primary-deep); font-weight: 600; }
.pf-hero__devise {
  font-size: 13px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute-AAA); margin: 20px 0 0; padding-top: 14px;
  border-top: 1px solid var(--rule);
}


/* ═══ 4. RAIL — ÉTAT D'AVANCEMENT ════════════════════════════════
   Le rail cesse d'être un sommaire pour devenir une jauge : où en
   est le voyage. Trois états, opacité et épaisseur seules — pas une
   couleur de plus, les cinq teintes d'étape sont déjà là. */

.pf-rail__it[data-etat] { opacity: .55; }
.pf-rail__it[data-etat="passe"] { opacity: .35; }
.pf-rail__it[data-etat="avenir"] { opacity: .7; }
.pf-rail__it[data-etat="jour"] { opacity: 1; color: var(--primary-deep); }
.pf-rail__it[data-etat="jour"]::before { height: 7px; }


/* ═══ 5. PROGRAMME DU JOUR — .pf-jourprog ════════════════════════
   Prend la place du bandeau d'inscriptions. Le déroulé lui-même est
   un .pf-jalons de components.css : mêmes noms d'éléments, mêmes
   règles mobiles, même frise en option. Ce fichier n'ajoute que les
   trois états du jour. */

.pf-jourprog { padding: 52px 0 56px; background: var(--cream); border-top: 2px solid var(--red); }
.pf-jourprog__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.pf-jourprog__title {
  font-family: 'LeonXIV','Jost',sans-serif; font-weight: 400;
  font-size: clamp(26px, 3.6vw, 44px); line-height: 1; text-transform: uppercase;
  color: var(--primary); margin: 12px 0 4px;
}
.pf-jourprog__note { font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 8px; }

/* Le jalon devient cliquable : chaque rendez-vous a sa fiche.
   Déclaré hors du scope .pf-jourprog — la colonne latérale de
   /en-direct/ pose les mêmes jalons cliquables. */
a.pf-jalon { text-decoration: none; color: inherit; transition: background .15s ease; }
a.pf-jalon:hover { background: var(--primary-wash); }
/* La note est un bloc flex : le lieu et l'etiquette d'acces passent a la
   ligne plutot que de deborder. L'etiquette est en nowrap (elle se lit d'un
   bloc), c'est donc la note qui s'adapte. */
.pf-jalon__note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pf-jalon__note .pf-acces-tag { margin-left: 0; white-space: nowrap; max-width: 100%; }

/* Colonne d'heure des deroules de ces deux pages.
   pf_libelle_horaire() rend parfois un LIBELLE et non une heure (« Ouverture
   des portes à 17 h 15 ») : components.css le tient en nowrap dans 170 px, et
   il passait sous le titre. 210 px logent encore « 16 H 00 - 17 H 00 » sur une
   ligne (il mesure ~180 px), et tout le reste peut passer a la ligne.
   min-width:0 : sans lui une cellule de grille ne retrecit jamais sous son
   contenu, c'est ce qui rognait le titre et l'etiquette a droite. */
.pf-jourprog .pf-jalon,
.pf-direct .pf-jalon { grid-template-columns: 210px minmax(0, 1fr); }
.pf-jourprog .pf-jalon > *,
.pf-direct .pf-jalon > * { min-width: 0; }
.pf-jourprog .pf-jalon__heure,
.pf-direct .pf-jalon__heure { white-space: normal; text-wrap: balance; line-height: 1.1; }
.pf-jourprog .pf-jalon__libelle,
.pf-direct .pf-jalon__libelle { overflow-wrap: break-word; }

/* Colonne latérale de /en-direct/ : ~340 px, deux colonnes n'y tiennent pas
   (le titre n'avait plus que 140 px). Empilé quelle que soit la largeur de
   fenêtre, ce que le palier 900 px de components.css ne fait qu'en mobile. */
.pf-direct__side .pf-jalon { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.pf-direct__side .pf-jalon__libelle,
.pf-direct__side .pf-jalon__note { grid-column: 1; }

/* Trois états, POSÉS dans le HTML et REQUALIFIÉS par pf-direct.js.

   La version précédente de ce commentaire disait « et non calculés en
   JS », en assumant une bascule à la main entre deux célébrations.
   L'arbitrage est révisé le 21 septembre 2026 : personne ne sera
   connecté en continu pendant quatre jours, et un programme papal qui
   reste une heure sur la mauvaise ligne est pire qu'un calcul.

   Ce qui est conservé du raisonnement d'origine : le JS ne CONSTRUIT
   rien. Les états écrits dans l'éditeur restent le repli, et sans
   JavaScript, sans réseau ou sur un jalon dont l'heure n'est pas
   confirmée, la page reste exactement celle qui a été publiée. Le
   script ne fait que remplacer data-etat quand il a une heure sûre,
   lue sur l'horloge du serveur et non sur celle du visiteur.

   L'appariement se fait sur data-pf-cle, posé dans GenerateBlocks sur
   chaque a.pf-jalon et portant l'ID de l'évènement. Sans lui, le
   script passe son chemin sans rien signaler. */
.pf-jalon[data-etat="passe"] { opacity: .6; }
.pf-jalon[data-etat="encours"] {
  border-left: 4px solid var(--red); padding-left: 18px;
  background: color-mix(in srgb, var(--red) 8%, transparent);
}
.pf-jalon[data-etat="encours"] .pf-jalon__heure,
.pf-jalon[data-etat="encours"] .pf-jalon__libelle { color: var(--red-AA); }

/* L'étiquette d'état reprend .pf-acces-tag d'accueil-v4.css pour
   la géométrie ; seul l'état « en direct » ajoute une couleur. */
.pf-acces-tag[data-pf-nature="direct"] { background: var(--red); border-color: var(--red); color: #fff; }
.pf-acces-tag[data-pf-nature="termine"] { background: none; color: var(--ink-mute-AAA); border-color: var(--rule); }


/* ═══ 6. FIL DU VOYAGE — .pf-fil ═════════════════════════════════
   Les nouvelles brèves du jour : ouverture des accès, texte d'un
   discours, chiffre d'affluence. Deux colonnes au-dessus de
   1024 px, une seule en dessous. */

.pf-fil { padding: 52px 0 60px; background: var(--paper); }
.pf-fil__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.pf-fil__l {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px;
}
.pf-fil__i { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--rule); }
.pf-fil__h {
  flex: 0 0 52px; font-size: 10.5px; font-weight: 600; line-height: 1.4;
  letter-spacing: 0.08em; color: var(--ink-mute-AAA); font-variant-numeric: tabular-nums;
}
.pf-fil__c { font-size: 15px; line-height: 1.5; color: var(--ink); }
.pf-fil__c em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }


/* ═══ 7. PAGE /en-direct/ ════════════════════════════════════════ */

.pf-direct > .pf-crumb { max-width: var(--maxw); margin: 0 auto; padding: 20px var(--pad) 0; }
.pf-direct__head { max-width: var(--maxw); margin: 0 auto; padding: 34px var(--pad) 22px; }
.pf-direct__title {
  font-family: 'LeonXIV','Jost',sans-serif; font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px); line-height: 0.96; text-transform: uppercase;
  color: var(--primary); margin: 14px 0 0;
}
.pf-direct__intro { font-size: 17px; line-height: 1.5; color: var(--ink-soft); margin: 9px 0 0; max-width: 64ch; }
.pf-direct__grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) 56px;
  display: grid; grid-template-columns: 1.55fr 0.95fr; gap: 36px; align-items: start;
}

/* ─── Façade RGPD du lecteur ────────────────────────────────────
   Même principe que .pf-map-facade : rien n'est demandé à
   l'hébergeur avant le clic. Le bouton reprend la géométrie de
   .pf-map-facade__btn, en jaune parce que c'est ici l'action
   principale de la page — et la seule. */
.pf-video-facade {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 14px; background: var(--primary-deep);
  box-shadow: 0 24px 54px -28px rgba(15,45,133,.35);
}
.pf-video-facade > img { width: 100%; height: 100%; object-fit: cover; opacity: .42; display: block; }
.pf-video-facade__veil {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 22px; text-align: center; color: #fff;
  background: linear-gradient(to top, rgba(9,29,90,.94), rgba(9,29,90,.35));
}
.pf-video-facade__btn {
  width: 82px; height: 82px; border: 0; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center;
  background: var(--yellow); color: var(--navy-AAA);
  box-shadow: 0 20px 50px -20px rgba(15,45,133,.5);
}
.pf-video-facade__btn svg { width: 30px; height: 30px; margin-left: 4px; }
.pf-video-facade__btn:hover { background: var(--yellow-hover); }
.pf-video-facade__btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* Même piège que .pf-live ci-dessus : display:grid bat l'attribut hidden.
   pf-direct.js masque le bouton quand aucune source n'est disponible —
   ni direct, ni repli — pour qu'on ne propose pas d'ouvrir le vide. */
.pf-video-facade__btn[hidden] { display: none; }
.pf-video-facade__t {
  display: block; font-family: 'LeonXIV','Jost',sans-serif; font-weight: 400;
  font-size: 26px; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase;
}
.pf-video-facade__rgpd { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.85); max-width: 40ch; margin: 0; }
.pf-video-facade__rgpd a { color: var(--cyan); }
.pf-video-facade__badge { position: absolute; top: 14px; left: 14px; z-index: 2; }
/* État chargé : l'iframe remplace la façade. */
.pf-video-facade[data-charge="true"] > img,
.pf-video-facade[data-charge="true"] .pf-video-facade__veil { display: none; }
.pf-video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ─── Barre de langues ──────────────────────────────────────────
   .pf-tabnav--chips de components.css : des LIENS, une URL par
   flux, partageables et indexables — pas des onglets JS. Seule la
   hauteur de cible est reprise ici, 44 px minimum. */
.pf-direct .pf-tabnav--chips { margin-top: 16px; }
.pf-direct .pf-tabnav--chips .pf-tabnav__link { min-height: 44px; }

/* ─── Colonne latérale ──────────────────────────────────────────── */
.pf-direct__side { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.pf-direct__side .pf-block { padding: 22px 22px 24px; border-top: 1px solid var(--rule); }
.pf-direct__side .pf-block:first-child { border-top: 0; }
.pf-direct__side .pf-block--cream { background: var(--cream); }
.pf-block__title {
  font-family: 'LeonXIV','Jost',sans-serif; font-weight: 400;
  font-size: 22px; line-height: 1.05; text-transform: uppercase;
  color: var(--primary); margin: 12px 0 4px;
}
.pf-block__intro { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 12px; }

/* ─── « Suivre autrement » ──────────────────────────────────────
   Le repli obligatoire : panne de vidéo, connexion faible, écoute
   sans image, textes de la célébration. */
.pf-link {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 0; border-top: 1px solid var(--rule); text-decoration: none;
}
.pf-link > span { display: block; min-width: 0; }
.pf-link__t {
  display: block; font-family: 'LeonXIV','Jost',sans-serif; font-weight: 400;
  font-size: 16px; line-height: 1.15; text-transform: uppercase; color: var(--primary-deep);
}
.pf-link__s { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); margin-top: 4px; }
.pf-link__go { flex: none; font-size: 18px; line-height: 1; color: var(--cyan-AA); transition: transform .25s ease; }
.pf-link:hover .pf-link__go { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .pf-link__go { transition: none; } }


/* ═══ 8. VERSION SOMBRE ══════════════════════════════════════════
   Deux aplats seulement posent problème. Le bandeau marine devient
   bleu vif la nuit, avec du blanc dessus : il passe en panneau
   surélevé. Et la photo de façade, calibrée pour le jour. */

html.pf-dark .pf-pbar { background: var(--primary-tint); color: var(--ink); }
html.pf-dark .pf-pbar:hover { background: var(--primary-wash); color: var(--ink); }
html.pf-dark .pf-pbar__go { color: var(--primary-soft); }
html.pf-dark .pf-video-facade { background: var(--navy-900); }
html.pf-dark .pf-video-facade > img { opacity: .34; }
/* Le glyphe de lecture est en --navy-AAA, qui passe a #C9D6FF la nuit :
   pale sur le jaune --yellow, il devenait quasi invisible. Un fond jaune
   appelle un glyphe sombre dans les deux themes, --navy-900 l'est aux deux. */
html.pf-dark .pf-video-facade__btn { color: var(--navy-900); }
html.pf-dark .pf-direct__side { border-color: var(--rule); }
html.pf-dark .pf-acces-tag[data-pf-nature="direct"] { background: var(--red); border-color: var(--red); color: #240104; }
html.pf-dark .pf-jalon[data-etat="encours"] { background: color-mix(in srgb, var(--red) 12%, transparent); }


/* ═══ 9. ≤1024 px ════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Mes règles ci-dessus pèsent plus que celles de components.css : sans
     ceci l'empilement mobile de .pf-jalon ne s'applique plus. */
  .pf-jourprog .pf-jalon,
  .pf-direct .pf-jalon { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pf-jourprog .pf-jalon__libelle, .pf-jourprog .pf-jalon__note,
  .pf-direct .pf-jalon__libelle, .pf-direct .pf-jalon__note { grid-column: 1; }
}

@media (max-width: 1024px) {
  .pf-pbar { justify-content: flex-start; gap: 12px; }
  .pf-pbar__t { flex: 1; font-size: 16px; }
  .pf-jourprog { padding: 32px 0 34px; }
  .pf-jourprog__note { font-size: 13px; }
  .pf-fil { padding: 28px 0 32px; }
  .pf-fil__l { display: block; }
  .pf-fil__c { font-size: 14px; }

  .pf-direct__head { padding: 22px var(--pad) 18px; }
  .pf-direct__grid { display: block; padding: 0 0 32px; }
  /* Le lecteur passe pleine largeur, sans coins arrondis : sur un
     téléphone, une vidéo encadrée perd les pixels qui comptent. */
  .pf-video-facade { border-radius: 0; box-shadow: none; }
  .pf-video-facade__btn { width: 66px; height: 66px; }
  .pf-video-facade__btn svg { width: 26px; height: 26px; }
  .pf-video-facade__t { font-size: 19px; }
  /* La barre de langues défile horizontalement plutôt que de passer
     à la ligne : six pilules sur trois lignes mangeraient le pli. */
  .pf-direct .pf-tabnav--chips {
    margin-top: 0; padding: 14px var(--pad);
    background: var(--cream); border-bottom: 1px solid var(--rule);
  }
  .pf-direct .pf-tabnav--chips .pf-tabnav__in {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .pf-direct .pf-tabnav--chips .pf-tabnav__in::-webkit-scrollbar { display: none; }
  .pf-direct .pf-tabnav--chips .pf-tabnav__link { flex: 0 0 auto; }
  .pf-direct__side { border: 0; border-radius: 0; }
  .pf-direct__side .pf-block { padding: 24px var(--pad) 26px; border-top: 1px solid var(--rule); }
  .pf-direct__side .pf-block:first-child { border-top: 1px solid var(--rule); }
}


/* ═══ 10. ≤768 px ════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pf-pbar { padding: 13px var(--pad); }
  .pf-pbar__t { font-size: 15px; }
  .pf-pbar__go { font-size: 10px; }
  .pf-home[data-phase="pendant"] .pf-hero__title { font-size: clamp(34px, 10.5vw, 44px); }
  .pf-hero__now { font-size: 14px; }
  .pf-hero__devise { font-size: 12px; margin-top: 16px; }
  .pf-direct__intro { font-size: 14.5px; }
}


/* ═══ 11. ≤480 px ════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .pf-live { font-size: 10px; letter-spacing: 0.1em; padding: 8px 11px; }
  .pf-pbar { gap: 10px; }
  /* Décoratif (aria-hidden) : sous 480 px il prend au titre la place de trois
     mots, alors que toute la bande est déjà un lien. */
  .pf-pbar__go { display: none; }
}


/* ═══ 12. IMPRESSION ═════════════════════════════════════════════
   Le programme du jour s'imprime le matin, quand le réseau sature
   autour des lieux de célébration. */
@media print {
  .pf-pbar { background: none; color: var(--ink); border-bottom: 2px solid var(--ink); }
  .pf-video-facade, .pf-direct .pf-tabnav--chips { display: none; }
  .pf-fil__l { display: block; }
  .pf-jalon[data-etat="encours"] { background: none; }
  .pf-live { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}