/* ----------------------------------------------------------------
   pape-france.fr — COMPOSANTS FACTORISÉS
   ---------------------------------------------------------------- */

/* ─── EN-TÊTE DE SECTION  (.pf-section-head) ─────────────
 */
.pf-section-head { max-width: 640px; margin: 0 0 44px; }
.pf-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.pf-section-head--wide { max-width: none; }
.pf-section-head .pf-eyebrow { margin-bottom: 20px; }
.pf-section-head__title {
  font-family: 'LeonXIV','Jost',sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(28px, 4vw, 48px); line-height: 0.98; margin: 0; color: var(--navy, #0F2D85);
}
.pf-section-head__intro { margin: 16px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
/* pages-v3.css pose a { color: inherit } : sans soulignement, un lien
   de chapô ne se distingue plus du texte (WCAG 1.4.1). */
.pf-section-head__intro a { text-decoration: underline; text-underline-offset: .2em; }
.pf-section-head__intro a:hover { color: var(--primary-deep); }
/* fond sombre : titres/intro clairs */
.pf-hero--solid .pf-section-head__title,
[data-dark] .pf-section-head__title { color: #fff; }
[data-dark] .pf-section-head__intro { color: rgba(255,255,255,.82); }

/* ─── BARRE D'ONGLETS / FILTRES  (.pf-tabnav) ────────────
 */
.pf-tabnav {
  position: sticky; top: var(--pf-flag-h); z-index: 40;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--rule);
}
.pf-tabnav__in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  display: flex; align-items: center; gap: 8px;
}
.pf-tabnav__here {
  font-family: 'LeonXIV','Jost',sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 18px; color: var(--ink); padding-right: 22px; margin-right: 6px;
  border-right: 1px solid var(--rule); white-space: nowrap;
}
.pf-tabnav__list { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.pf-tabnav__list::-webkit-scrollbar { display: none; }
.pf-tabnav__link {
  padding: 17px 16px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap; cursor: pointer;
  border: none; background: none; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.pf-tabnav__link:hover { color: var(--primary-deep); }
.pf-tabnav__link.is-active { background: var(--ink); color: var(--primary-deep); border-bottom-color: var(--primary, #0F2D85); }
.pf-tabnav__cta { margin-left: auto; }

/* variante « chips » (filtres actualités/revue) : pilules, non sticky */
.pf-tabnav--chips { position: static; background: none; border: none; }
.pf-tabnav--chips .pf-tabnav__in { padding: 0; flex-wrap: wrap; }
.pf-tabnav--chips .pf-tabnav__link {
  padding: 9px 18px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper);
}
.pf-tabnav--chips .pf-tabnav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  transition: all .2s;
}
.pf-tabnav--chips .pf-tabnav__link svg { width: 15px; height: 15px; }

.pf-tabnav--chips .pf-tabnav__link:hover { border-color: var(--primary-soft); color: var(--primary-deep); }
.pf-tabnav--chips .pf-tabnav__link.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.pf-section { scroll-margin-top: 72px; }

/* Filtres sous hero */
.pf-tabnav--chips.is-under-hero {
  background: var(--cream);
  padding: 26px 0 32px;
  margin-top: -1px;
  border-bottom: 1px solid var(--rule);
}
.pf-tabnav--chips.is-under-hero .pf-tabnav__in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
}
/* Supprime bordure du hero */
.pf-page .pf-hero--compact:has(+ .pf-tabnav--chips.is-under-hero) {
  border-bottom: none;
}


/* ─── LISTE / TIMELINE  (.pf-list) ───────────────────────
 */
.pf-list { border-top: 1px solid var(--rule); }
.pf-list__item {
  display: grid; grid-template-columns: 170px 1fr auto; gap: 28px;
  padding: 24px 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.pf-list__item--simple { grid-template-columns: 1fr auto; }
.pf-list__time {
  font-family: 'LeonXIV','Jost',sans-serif; font-weight: 500; font-size: 20px;
  color: var(--primary-deep); font-variant-numeric: tabular-nums;
}
.pf-list__title { font-size: 22px; font-weight: 500; color: var(--ink); margin: 0 0 5px; line-height: 1.12; }
.pf-list__text { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; max-width: 58ch; }
.pf-list__place { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.pf-list__place svg { width: 15px; height: 15px; color: var(--primary); flex: none; }
.pf-list__tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; background: var(--primary-tint); color: var(--primary-deep); white-space: nowrap;
}
.pf-list__tag--muted { background: rgba(15,45,133,.06); color: var(--ink-soft); }
.pf-list__dl { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-deep); white-space: nowrap; }
.pf-list__dl svg { width: 15px; height: 15px; }

/* ─── BOUTONS (échelle documentée) ───────────────────────
   .pf-btn de base défini dans pages-v3.css. 
   Variantes recommandées :
     .pf-btn-primary  fond marine, texte clair   (action principale)
     .pf-btn-ghost    contour marine             (action secondaire)
     .pf-btn-light    fond clair                 (sur fond sombre)
     .pf-btn-cta      fond jaune, texte marine   (don / conversion)
   Taille : .pf-btn--sm (compact) - défaut - .pf-btn--lg (hero). */
.pf-btn-cta { background: var(--yellow, #FFA107); color: var(--navy-900, #091d5a); }
.pf-btn-cta:hover { background: var(--yellow-hover, #ffb735); transform: translateY(-1px); }
.pf-btn--sm { padding: 11px 18px; font-size: 13px; }
.pf-btn--lg { padding: 17px 32px; font-size: 15px; }

/* ─── CHAMPS DE FORMULAIRE  (.pf-field) ───────────────────
 */
.pf-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.pf-field label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.pf-field label .req { color: var(--primary); }
.pf-field input,
.pf-field select,
.pf-field textarea {
  appearance: none; border: 1px solid var(--rule); border-radius: 7px; background: var(--cream, #f5f4ef);
  padding: 13px 15px; font-family: 'Jost', sans-serif; font-size: 15px; color: var(--ink);
  outline: none; transition: border-color .2s, box-shadow .2s; width: 100%;
}
.pf-field textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.pf-field input:focus,
.pf-field select:focus,
.pf-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.pf-field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pf-field__hint { font-size: 12.5px; color: var(--ink-mute); margin: 2px 0 0; line-height: 1.5; }

@media (max-width: 900px) {
  .pf-tabnav__here { display: none; }
  .pf-list__item { grid-template-columns: 1fr; gap: 6px; }
  .pf-list__tag { justify-self: start; margin-top: 6px; }
  .pf-field__row { grid-template-columns: 1fr; }
}

/* ─── MAP  (.pf-map-facade) ───────────────────
 */
.pf-map-facade {
  position: relative;
  border-radius: 14px;
  box-shadow: 0 24px 54px -28px rgba(15,45,133,.35);
  border: 1px solid var(--rule);
  overflow: hidden;
  height: 420px;
}
.pf-map-facade__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-map-facade__btn {
  position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: none; border-radius: 999px; padding: 14px 24px;
  font-family: 'Jost', sans-serif; font-weight: 600; font-size: 14px; /*color: var(--ink);*/
  cursor: pointer; box-shadow: 0 20px 50px -20px rgba(15,45,133,.5);
  background: var(--ink);
}
.pf-map-facade__btn svg {
  width: 18px;
  height: 18px;
  flex: none;
/*  color: var(--navy);*/
}
.pf-map-facade__btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
.pf-map-facade iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(0.9) contrast(1.03);
}


/* ── Deux cibles au centre de la façade : plan OSM et vue de rue Panoramax.
   Le positionnement absolu quitte le bouton pour passer au conteneur, sinon
   les deux se superposent au même point. Le bouton « rue » n'est écrit par
   [pf_carte] que si le lieu est couvert. ── */
.pf-map-facade__actions {
  position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-width: calc(100% - 32px);
}
.pf-map-facade__actions .pf-map-facade__btn {
  position: static; top: auto; left: auto; transform: none;
}
.pf-map-facade__btn--rue {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 14px 34px -18px rgba(15,45,133,.5);
}
/* La visionneuse Panoramax est une photo plein cadre : le filtre de teinte
   prévu pour le plan OSM la rendrait grise. Trois classes contre deux, la
   règle l'emporte sur .pf-map-facade--brand iframe quel que soit l'ordre. */
.pf-map-facade--brand.pf-map-facade--rue iframe { filter: none; }

/* ── Variante brand : teinte marine + pin sur-mesure + légende ── */
.pf-map-facade--brand { border-top: 4px solid var(--navy); }
.pf-map-facade--brand.pf-map-facade--paris       { border-top-color: var(--green); }
.pf-map-facade--brand.pf-map-facade--saint-denis { border-top-color: var(--yellow); }
.pf-map-facade--brand.pf-map-facade--lourdes     { border-top-color: var(--cyan); }
.pf-map-facade--brand.pf-map-facade--metz        { border-top-color: var(--red); }

.pf-map-facade--brand iframe {
  filter: grayscale(0.55) sepia(0.15) hue-rotate(175deg) saturate(1.4) brightness(1.02);
}

/* Sans image d'attente : un aplat charté, jamais un trou blanc.
   Le shortcode [pf_carte] pose cette classe quand ni l'évènement ni son
   étape n'ont d'image. */
.pf-map-facade--vide { background: linear-gradient(140deg, #eef1fb 0%, #dbe3f7 100%); }
.pf-map-facade--vide.pf-map-facade--lourdes { background: linear-gradient(140deg, #e9f8fe 0%, #cdeefb 100%); }
.pf-map-facade--vide.pf-map-facade--metz    { background: linear-gradient(140deg, #e6f7f6 0%, #c9ebe9 100%); }

/* bandeau légende, façon carte */
.pf-map-facade--brand__caption {
  position: absolute; left: 0; /*bottom: 0;*/ z-index: 2;
  background: var(--navy); color: #fff;
  font-family: 'Jost', sans-serif; font-weight: 600; font-size: 13px;
  padding: 10px 16px; /*border-radius: 0 10px 0 0;*/
  top: 0;
  border-radius: 0 0 10px 0;
}

/* ── Carte MapLibre ouverte dans la façade ────────────────────────
   Le bouton « Voir la carte interactive » n'ouvre plus une iframe
   OpenStreetMap mais une vraie carte, au fond charté du site et aux
   mêmes gestes que la page Itinéraire (pf-lieu-map.js). L'iframe reste
   le repli si MapLibre ne se charge pas, d'où le maintien des règles
   .pf-map-facade iframe au-dessus.

   route-map-v2.css n'est PAS chargée sur les fiches : elle vaut 6 Ko
   pour une légende, des popups et une liste d'étapes dont rien n'existe
   ici. Seules les quelques règles réellement utilisées sont recopiées
   plus bas — duplication assumée et bornée. */
.pf-map-facade__canvas { width: 100%; height: 100%; }
.pf-map-facade--live { background: var(--primary-tint, #eef1fb); }

/* Le filtre de teinte marine était fait pour le plan OSM en iframe.
   Sur une carte déjà recolorée à la charte par route-map-style.json,
   il la repeindrait deux fois. */
.pf-map-facade--brand.pf-map-facade--live .pf-map-facade__canvas { filter: none; }

/* Bascule plan ▸ vue de rue une fois la carte ouverte. La version
   précédente vidait la façade sans rien remettre : les deux boutons
   disparaissaient et on ne pouvait plus passer de l'un à l'autre sans
   recharger la page. Posé en bas à gauche, hors des contrôles MapLibre
   qui occupent la droite. */
.pf-map-facade__actions--retour {
  position: absolute; inset: auto auto 12px 12px;
  transform: none; z-index: 2;
}
.pf-map-facade__btn--retour {
  position: static; transform: none;
  padding: 9px 16px; font-size: 13px;
  background: var(--paper, #fff); color: var(--navy, #0F2D85);
  box-shadow: 0 10px 26px -14px rgba(15,45,133,.6);
}

/* Pin du lieu : le composant de la carte du parcours, recopié de
   route-map-v2.css (l. 128-139) pour que la fiche et l'Itinéraire
   parlent la même langue graphique. Sans le numéro : il n'y a qu'un
   lieu, il n'a pas de rang. Si la palette d'étape change là-bas, elle
   change ici — les deux blocs se tiennent. */
.pf-route-map__pin {
  width: 30px; height: 30px; border-radius: 999px; border: 3px solid #fff;
  box-shadow: 0 8px 18px -4px rgba(15,45,133,.55);
  display: grid; place-items: center;
}
.pf-route-map__pin--unesco      { background: var(--navy,   #0F2D85); }
.pf-route-map__pin--paris       { background: var(--green,  #00B5B0); }
.pf-route-map__pin--saint-denis { background: var(--yellow, #FFA107); }
.pf-route-map__pin--lourdes     { background: var(--cyan,   #1ACCFF); }
.pf-route-map__pin--metz        { background: var(--red,    #F71021); }

/* Crédits : cadre généré par MapLibre, ne pas renommer ces sélecteurs. */
.pf-map-facade .maplibregl-ctrl-attrib {
  font-family: 'Jost', sans-serif !important;
  font-size: 10.5px !important;
  color: var(--ink-mute, #7b83a0) !important;
}
.pf-map-facade .maplibregl-ctrl-attrib a { color: var(--ink-mute, #7b83a0) !important; }

/* ─── PAGINATION  (.pf-pagination)  — Query Loop (actualités, etc.) ───
   Classes posées à la main dans GB (Avancé > Classe(s) CSS
   supplémentaire(s)), à côté des classes auto-générées par le bloc
   (gb-query-page-numbers-xxxxx, gb-text-xxxxx) qui changent si le bloc
   est reconstruit : on ne style jamais ces dernières. Tout en tokens,
   donc bascule seul en sombre — aucune règle à dupliquer dans
   charte-v4-dark.css.

   .gb-query-loop-pagination, elle, N'EST PAS un hash : c'est la classe
   de conteneur que GB pose systématiquement autour des numéros de page
   et du lien Suivant/Précédent, quel que soit le bloc — stable d'une
   reconstruction à l'autre. Le lien Suivant est un FRÈRE du <nav>
   .pf-pagination, pas un enfant : sans mise en page ici, il tombe sous
   le rail des numéros, à la merci du style de bloc que GB lui donne
   par ailleurs (bordure, fond, padding) — d'où le double !important,
   pour passer devant une classe de bloc de même spécificité. */
.gb-query-loop-pagination {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 40px 0 0;
}
.pf-pagination {
  display: flex; align-items: center; gap: 8px; margin: 0;
}
.pf-pagination :is(a, span).page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 6px;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper);
  font-size: 15px; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; transition: border-color .15s, color .15s, background .15s;
}
.pf-pagination :is(a, span).page-numbers:hover { border-color: var(--primary); color: var(--primary-deep); }
.pf-pagination :is(a, span).page-numbers.current {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.pf-pagination span.page-numbers.dots { border-color: transparent; background: none; }

.pf-pagination__previous, .pf-pagination__next {
  display: inline-flex !important; align-items: center; gap: 6px;
  height: 44px; padding: 0 !important;
  border: none !important; background: none !important;
  font-size: 14px; font-weight: 600; color: var(--primary-deep) !important;
  text-decoration: none;
}
.pf-pagination__previous:hover, .pf-pagination__next:hover { color: var(--primary-deep) !important; text-decoration: underline; }

/* ─── SORTIE DES SHORTCODES DU PLUGIN ─────────────────────
   Ces classes-là sont écrites par pf-cpt-evenement.php (section 12) :
   markup et style sont tous deux versionnés, ils se renomment ensemble.
   C'est l'exception grepable au « le HTML n'est presque jamais dans le
   dépôt ». Elles sortaient jusqu'ici sans aucune règle, donc en HTML nu.
     [pf_jalons] · [pf_consignes] · [pf_liens_officiels] ·
     [pf_compte_a_rebours] · [pf_lien_infos]
*/

/* Frise horaire — même grammaire que .pf-list ci-dessus, dont elle est la
   variante pilotée par les données : un évènement de masse n'a pas une
   heure, il a une séquence. */
.pf-jalons { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.pf-jalon {
  display: grid; grid-template-columns: 170px 1fr; gap: 4px 28px;
  padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.pf-jalon__heure {
  font-family: 'LeonXIV','Jost',sans-serif; font-size: 20px;
  color: var(--primary-deep); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Heure incertaine : « 16 h 00 – 17 h 00 » tient dans les mêmes 170 px au
   prix de trois points de corps. La colonne reste fixe, sans quoi la ligne
   se désalignerait de ses voisines, chaque jalon étant sa propre grille. */
/*.pf-jalon--intervalle .pf-jalon__heure { font-size: 17px; }*/
.pf-jalon__libelle { grid-column: 2; font-size: 20px; font-weight: 500; color: var(--ink); line-height: 1.15; }
.pf-jalon__note { grid-column: 2; font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 58ch; }

/* L'alerte porte l'information la plus critique de la page : l'heure au-delà
   de laquelle l'accès n'est plus garanti. Jaune et non rouge — le rouge
   dirait « annulé », ce qui serait faux. Le fond en color-mix se retire de
   lui-même là où il n'est pas compris, le filet suffit alors. */
.pf-jalon.pf-alerte {
  border-left: 4px solid var(--yellow);
  padding-left: 18px;
  background: color-mix(in srgb, var(--yellow) 10%, transparent);
}
.pf-jalon.pf-alerte .pf-jalon__heure { color: var(--ink); }

/* Variante frise : [pf_jalons variante="frise"]. Rigoureusement le même
   markup, les heures passent à gauche d'un rail à pastilles. À réserver aux
   sections dont la séquence EST le sujet : la liste reste le défaut, plus
   dense, et deux frises sur une même page ne se lisent plus. */
.pf-jalons--frise { --frise-col: 104px; --frise-gap: 32px; border-top: 0; }
.pf-jalons--frise .pf-jalon {
  grid-template-columns: var(--frise-col) 1fr;
  column-gap: var(--frise-gap);
  padding: 0 0 30px;
  border-bottom: 0;
  position: relative;
}
.pf-jalons--frise .pf-jalon:last-child { padding-bottom: 0; }
.pf-jalons--frise .pf-jalon__heure { text-align: right; }

/* Le rail est tracé par chaque jalon plutôt que par la liste : il s'arrête
   ainsi de lui-même sous le dernier, sans hauteur à calculer ni compteur. */
.pf-jalons--frise .pf-jalon::before {
  content: ""; position: absolute; top: 20px; bottom: 0;
  left: calc(var(--frise-col) + var(--frise-gap) / 2 - 1px);
  width: 2px; background: var(--rule);
}
.pf-jalons--frise .pf-jalon:last-child::before { display: none; }
.pf-jalons--frise .pf-jalon::after {
  content: ""; position: absolute; top: 6px; box-sizing: border-box;
  left: calc(var(--frise-col) + var(--frise-gap) / 2 - 7px);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--primary);
}

/* L'alerte ne peut plus s'exprimer par un bord gauche, qui décalerait la
   ligne et romprait l'aplomb du rail. Elle passe dans la pastille. */
.pf-jalons--frise .pf-jalon.pf-alerte { border-left: 0; padding-left: 0; background: none; }
.pf-jalons--frise .pf-jalon.pf-alerte::after {
  background: var(--yellow); border-color: var(--yellow);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--yellow) 22%, transparent);
}

/* Colonne plus étroite qu'en liste : un intervalle y tient sur deux lignes,
   ce que le nowrap de base interdit. */
.pf-jalons--frise .pf-jalon--intervalle .pf-jalon__heure {
  white-space: normal; /*font-size: 17px;*/ line-height: 1.25;
}

/* Consignes d'objets : trois colonnes lues sur l'étape, plus le bloc propre
   à l'évènement. Le rouge des interdits parle d'objets, pas d'un
   rendez-vous : il ne contredit pas la règle « ardoise, jamais rouge ». */
/* auto-fit et non repeat(3, …) : le shortcode n'émet que les colonnes
   renseignées, et une étape qui ne liste que ses interdits ne doit pas
   laisser deux tiers de vide à sa droite. */
.pf-consignes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin: 0 0 24px; }
.pf-consignes__col { padding: 22px 24px; border-radius: 10px; background: var(--cream); border-top: 3px solid var(--rule); }
.pf-consignes__col h3 {
  margin: 0 0 12px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute);
}
.pf-consignes__col ul { margin: 0; padding-left: 18px; }
.pf-consignes__col li { font-size: 15px; line-height: 1.5; color: var(--ink); margin-bottom: 6px; }
.pf-consignes__col--requis { border-top-color: var(--primary); }
.pf-consignes__col--permis { border-top-color: var(--green); }
.pf-consignes__col--interdits { border-top-color: var(--red); }
.pf-consignes__specifiques { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.pf-consignes__specifiques :last-child { margin-bottom: 0; }

/* Sources externes : on renvoie vers elles, on ne recopie pas ce qui
   changera sans nous. La source est nommée pour que le clic soit un choix. */
.pf-liens-officiels { list-style: none; margin: 0; padding: 0; }
.pf-liens-officiels li { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.pf-liens-officiels a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; text-decoration: none; }
.pf-lien__titre { font-size: 17px; font-weight: 600; color: var(--primary-deep); text-decoration: underline; text-underline-offset: 3px; }
.pf-lien__source { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.pf-liens-officiels p { margin: 5px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); max-width: 62ch; }

/* Compte à rebours : le contenu est écrit par le JS après le premier tic,
   d'où les chiffres tabulaires — sinon la ligne sautille à chaque minute. */
.pf-rebours {
  font-family: 'LeonXIV','Jost',sans-serif; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--primary-deep); white-space: nowrap;
}

.pf-lien-infos { font-weight: 600; color: var(--primary-deep); text-underline-offset: 3px; }
.pf-lien-infos::after { content: " →"; }

@media (max-width: 900px) {
  .pf-jalon { grid-template-columns: 1fr; gap: 4px; }
  .pf-jalon__libelle, .pf-jalon__note { grid-column: 1; }
  .pf-consignes { grid-template-columns: 1fr; gap: 16px; }

  /* La frise garde son rail, mais le rejette à l'extrême gauche : une
     colonne d'heures de 104 px mangerait la moitié d'un écran de téléphone.
     Ces sélecteurs valent ceux du bloc frise ci-dessus et le suivent dans la
     feuille : c'est l'ordre, non la spécificité, qui les fait gagner. */
  /* Le jalon en alerte est repris nommément : sa règle de bureau, plus
     spécifique, remet sinon son padding gauche à zéro et sa pastille vient
     couvrir le texte. */
  .pf-jalons--frise .pf-jalon,
  .pf-jalons--frise .pf-jalon.pf-alerte { grid-template-columns: 1fr; padding: 0 0 26px 30px; }
  .pf-jalons--frise .pf-jalon__heure { text-align: left; }
  .pf-jalons--frise .pf-jalon--intervalle .pf-jalon__heure { white-space: nowrap; }
  .pf-jalons--frise .pf-jalon::before { left: 6px; top: 22px; }
  .pf-jalons--frise .pf-jalon::after { left: 0; }
}