/* ════════════════════════════════════════════════════════════════ pape-france.fr — EN-TÊTES V4 · header-v4.css ──────────────────────────────────────────────────────────────── FUSION DU 18 SEPTEMBRE 2026. Ce fichier absorbe correctifs-accueil-v4.css, supprimé du thème et de PF_CSS. Les deux feuilles étaient deux passes du même travail (10 sept. 12 h 59 puis 16 h 33) et correctifs-accueil-v4.css annonçait en tête « remplacer header-v4.css ». C'était faux : 45 déclarations n'existaient que dans header-v4.css, à commencer par le fond de la barre. Elles se contredisaient en outre sur dix points, et les hauteurs de logo de header-v4.css portaient un !important qui battait la passe suivante (58/50 px appliqués au lieu de 54/46). Une feuille, plus d'arbitrage implicite : sur chaque point de désaccord c'est la valeur de la SECONDE passe qui est retenue, et les !important devenus inutiles ont disparu avec. POURQUOI CE FICHIER EXISTE L'accueil V4 a un héros BLANC. Or .papefrance-topbar est en position:absolute par-dessus la photo du héros, en texte blanc sur transparent (style-v3.css, « TOPBAR (sur photo hero) »). Posée sur du blanc, elle disparaît purement et simplement. Ce n'est donc pas un habillage : c'est la condition pour que la nouvelle page d'accueil soit utilisable. LES DEUX EN-TÊTES RESTENT DEUX. Conformément à la décision assumée du projet, papefrance-topbar__* (accueil) et papefrance-siteheader__* (pages internes) ne sont pas fusionnées. Ce fichier ajoute une VARIANTE à la première et deux compléments à la seconde, en couvrant systématiquement les deux préfixes. Chargement : APRÈS header-footer.css, et APRÈS accueil-v4.css / phase-pendant.css. Avant mobile-first-v4.css, qui garde la main sur le menu déplié — ce fichier ne touche jamais au menu ouvert. ⚠️ header-footer.css redéclare au :root --primary, --cream, --paper, --ink, --rule et --pad avec d'autres valeurs que style-v3.css, et il est chargé APRÈS lui. Tout ce qui suit hérite donc de ces valeurs-là. Ce fichier ne s'appuie que sur les tokens stables entre les deux (--yellow, --navy, --navy-900, --rule) et fixe explicitement ce qui doit l'être. Cf. la note en fin de EN-TETE-V4.md : l'assainissement est à traiter à part. TROIS SÉLECTEURS ONT ÉTÉ RETIRÉS À LA FUSION, faute de cible : .papefrance-topbar__toggle et .papefrance-siteheader__toggle (burgers faits main, supprimés en v4.1 — c'est .gb-menu-toggle de GenerateBlocks qui sert), et .papefrance-topbar__cta (le bouton de don porte .papefrance-siteheader__cta sur LES DEUX en-têtes, vérifié dans l'export du 17 septembre ; sa couleur est déjà posée en !important par header-footer-v3.css). Zéro occurrence des trois dans le HTML de production. ════════════════════════════════════════════════════════════════ */ /* ═══ 1. TOPBAR SUR FOND CLAIR — [data-fond="clair"] ═════════════ La bascule tient en un attribut posé sur .papefrance-topbar. Sans lui, rien ne change : les pages encore en V3 gardent la topbar blanche sur photo. */ .papefrance-topbar[data-fond="clair"] { /* STICKY, comme .papefrance-siteheader (header-footer-v3.css) : même comportement d'en-tête sur l'accueil et sur les pages internes. Elle sort du flux absolu – sur fond blanc il n'y a plus de photo à recouvrir – mais elle reste en haut de l'écran au défilement. ⚠️ JAMAIS `position: static`, l'étape par laquelle ce fichier est passé le 17 septembre : static rend le z-index inopérant, l'en-tête cesse de créer un contexte d'empilement et ses sous-menus (position:absolute, z-index:100 posé par le bloc GB) se dispersent dans le contexte racine, où le contenu du héros passe devant. ⚠️ left/right À AUTO. style-v3.css pose left:0;right:0 pour le positionnement absolu. Sur un élément sticky ce sont des décalages d'adhérence HORIZONTALE : laissés à 0, la barre se décollerait au défilement latéral. z-index 50 = celui de .papefrance-siteheader. Menu mobile ouvert, mobile-first-v4.css §4 remonte déjà les deux en-têtes à 9998 : ce contexte n'enferme donc pas l'overlay. Pas de backdrop-filter ici, contrairement à .papefrance-siteheader : un backdrop-filter ferait de l'en-tête le bloc conteneur de l'overlay position:fixed du menu, et mobile-first-v4.css doit alors l'annuler à l'ouverture. Fond opaque, rien à annuler. */ position: sticky; top: var(--pf-flag-h); left: auto; right: auto; z-index: 50; padding: 12px 24px; gap: 20px; color: var(--navy-900, #091d5a); background: #fff; border-bottom: 1px solid var(--rule, rgba(15,45,133,.14)); } /* .papefrance-hero .papefrance-topbar { top: 38px } de style-v3.css AGIT sur un élément sticky : il décollerait la barre de 38 px du haut de la fenêtre. On la ramène à 0 – et surtout PAS à `auto`, qui désactiverait purement et simplement l'adhérence verticale. */ .papefrance-hero .papefrance-topbar[data-fond="clair"] { top: var(--pf-flag-h); } .papefrance-topbar[data-fond="clair"] .papefrance-topbar__nav a { color: var(--navy-900, #091d5a); } .papefrance-topbar[data-fond="clair"] .papefrance-topbar__nav a:hover { color: var(--navy, #0F2D85); } .papefrance-topbar[data-fond="clair"] .papefrance-topbar__nav a[aria-current="page"] { color: var(--navy, #0F2D85); } /* Le bouton de don ne change pas : jaune plein en pilule, c'est le seul endroit du site où il est légitime. Sa couleur de texte est déjà posée en !important par header-footer-v3.css, sur la classe .papefrance-siteheader__cta que portent les deux en-têtes. */ /* ═══ 2. LA COMMUTATION DES DEUX LOGOS ═══════════════════════════ Les deux fichiers sont distincts et corrects : data-logo-clair → LeonXIV_2026_logo_RVB_devise.svg (couleur) data-logo-sombre → LeonXIV_2026_logo_blanc_devise_2.svg (blanc) Il ne manquait que la règle qui n'en montre qu'un à la fois : la version blanche était chargée, jamais masquée, invisible sur le fond blanc et occupant quand même sa place – d'où le large vide constaté entre le logo et le bloc de marque. !important est ici justifié : GenerateBlocks peut réémettre un display sur .gb-media-* après cette feuille. C'est, avec le §10, le seul endroit du fichier où il sert. */ .papefrance-brand-logo[data-logo-clair] { display: block !important; } .papefrance-brand-logo[data-logo-sombre] { display: none !important; } html.pf-dark .papefrance-brand-logo[data-logo-clair] { display: none !important; } html.pf-dark .papefrance-brand-logo[data-logo-sombre] { display: block !important; } /* Filet de sécurité si les attributs sautent à leur tour (c'est déjà arrivé à data-fond) : au-delà du premier logo, on masque. */ .papefrance-topbar__brand .papefrance-brand-logo ~ .papefrance-brand-logo:not([data-logo-sombre]) { display: none; } /* ═══ 3. LE BLOC DE TEXTE À CÔTÉ DU LOGO ═════════════════════════ __brand-main réécrit « Léon XIV en France », que le lockup porte déjà en toutes lettres. __brand-sub empile UNESCO / Paris / Saint-Denis / Lourdes / Metz sur cinq lignes – ce qui étire la barre et déborde. Sur l'accueil V4, ces cinq villes sont déjà dans le rail, à trente pixels en dessous, avec leurs dates et leurs couleurs. Les répéter dans l'en-tête ne dit rien de plus. On masque le bloc entier : inutile de traiter __brand-main et __brand-sub séparément, c'est leur parent qui disparaît. */ .papefrance-topbar[data-fond="clair"] .papefrance-topbar__brand-txt { display: none; } /* Sur les pages internes, où il n'y a pas de rail, la liste garde son sens : on la remet simplement en ligne pour qu'elle tienne dans la hauteur de barre. */ .papefrance-siteheader .papefrance-topbar__brand-sub, .papefrance-topbar:not([data-fond="clair"]) .papefrance-topbar__brand-sub { display: block; font-size: 9.5px; line-height: 1.35; letter-spacing: .06em; } /* Le lockup est le seul contenu du lien de marque : on le centre. */ .papefrance-topbar[data-fond="clair"] .papefrance-topbar__brand { align-items: center; gap: 0; } /* Sans le bloc de texte, la barre se resserre autour du lockup. */ .papefrance-topbar[data-fond="clair"] .papefrance-brand-logo { height: 62px; max-height: 62px; width: auto; } /* ═══ 4. CIBLES TACTILES ═════════════════════════════════════════ Les deux en-têtes ont un burger à 42 px et des CTA à ~38 px de haut. Le minimum tactile du projet est 48 px, et c'est ici qu'il compte le plus : ce sont les deux seules commandes du premier écran mobile. Les deux préfixes sont couverts. */ @media (max-width: 1024px) { :is(.papefrance-topbar, .papefrance-siteheader) .gb-menu-toggle { width: 48px; height: 48px; } :is(.papefrance-topbar, .papefrance-siteheader) :is(.papefrance-topbar__cta, .papefrance-siteheader__cta) { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; } } /* ═══ 5. ÉTAT « EN DIRECT » DANS L'EN-TÊTE ═══════════════════════ Pendant les quatre jours, l'en-tête porte lui-même l'état : la pastille .pf-live de phase-pendant.css s'insère dans la barre, avant le CTA. C'est le seul ajout de contenu de la phase – le bandeau .pf-pbar reste dans le corps de page. Elle est présente dans le markup toute l'année : masquée par défaut, elle n'apparaît que si l'en-tête porte data-phase="pendant". La classe .is-pendant fait doublon avec l'attribut, à dessein : data-fond s'est déjà fait réécrire une fois par GenerateBlocks. SECONDE PORTE : body.pf-pendant, posée par le plugin (section 17) du 25 au 28 septembre sur TOUTES les pages. Le header est un bloc du gabarit, partagé par tout le site : un data-phase posé sur la page ne l'atteint pas, et l'éditer à la main obligerait à le défaire le 29. La pastille est alors permanente pendant les quatre jours, direct ou non : elle mène à /en-direct/, qui sait dire « En attendant le prochain direct ». */ :is(.papefrance-topbar, .papefrance-siteheader) .pf-live { display: none; } :is(.papefrance-topbar, .papefrance-siteheader):is([data-phase="pendant"], .is-pendant) .pf-live, body.pf-pendant :is(.papefrance-topbar, .papefrance-siteheader) .pf-live { display: inline-flex; text-decoration: none; flex: none; } /* Sous 1024 px la pastille passe avant le burger et perd son libellé : le point rouge et le mot « Direct » suffisent. */ @media (max-width: 1024px) { :is(.papefrance-topbar, .papefrance-siteheader):is([data-phase="pendant"], .is-pendant) .pf-live, body.pf-pendant :is(.papefrance-topbar, .papefrance-siteheader) .pf-live { font-size: 10px; letter-spacing: .08em; padding: 8px 11px; } } @media (max-width: 480px) { /* À cette largeur, don + direct + burger ne tiennent pas côte à côte. Le don reste – c'est un engagement pris –, le libellé du direct se réduit au mot. */ :is(.papefrance-topbar, .papefrance-siteheader):is([data-phase="pendant"], .is-pendant) .pf-live__long, body.pf-pendant :is(.papefrance-topbar, .papefrance-siteheader) .pf-live__long { display: none; } } /* MOBILE : la pastille passe sous le logo, à gauche. Le header est un flex en ligne (marque | droite | pastille) ; la pastille, dernier enfant, se retrouvait à l'extrême droite avec le don et le burger. Une grille à deux lignes : la marque et la pastille à gauche, le bloc droit sur les deux. Placement par position (1er, 2e enfant) et non par classe : la marque et la colonne droite n'ont pas le même nom sur les deux en-têtes. Ne vaut que si la pastille est présente, pour ne pas ajouter une ligne vide sinon. */ @media (max-width: 768px) { body.pf-pendant :is(.papefrance-topbar, .papefrance-siteheader):has(> a.pf-live), :is(.papefrance-topbar, .papefrance-siteheader).is-pendant:has(> a.pf-live) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marque droite" "direct droite"; align-items: center; row-gap: 6px; } body.pf-pendant :is(.papefrance-topbar, .papefrance-siteheader):has(> a.pf-live) > :first-child, :is(.papefrance-topbar, .papefrance-siteheader).is-pendant:has(> a.pf-live) > :first-child { grid-area: marque; } body.pf-pendant :is(.papefrance-topbar, .papefrance-siteheader):has(> a.pf-live) > :nth-child(2), :is(.papefrance-topbar, .papefrance-siteheader).is-pendant:has(> a.pf-live) > :nth-child(2) { grid-area: droite; } body.pf-pendant :is(.papefrance-topbar, .papefrance-siteheader) > a.pf-live, :is(.papefrance-topbar, .papefrance-siteheader).is-pendant > a.pf-live { grid-area: direct; justify-self: start; } } /* ═══ 6. EN-TÊTE INTERNE SUR LES PAGES DE DIRECT ═════════════════ .papefrance-siteheader est déjà claire et collante : elle convient telle quelle à /en-direct/. Deux ajustements seulement. */ /* Elle est sticky avec un fond translucide flouté ; derrière elle défile une vidéo. On opacifie pour éviter le halo mouvant. */ .pf-direct .papefrance-siteheader, body:has(.pf-direct) .papefrance-siteheader { background: #fff; } /* L'entrée « En direct » du menu se distingue pendant les 4 jours. */ .papefrance-siteheader__nav a[data-nav="direct"] { color: var(--red-AA, #C60613); font-weight: 600; } .papefrance-topbar[data-fond="clair"] .papefrance-topbar__nav a[data-nav="direct"] { color: var(--red-AA, #C60613); } /* ═══ 7. VERSION SOMBRE ══════════════════════════════════════════ La topbar claire est le seul aplat blanc en dur du fichier : il lui faut son équivalent nocturne. Le reste suit les tokens. Les liens sont visés deux fois, par __nav a et par .gb-menu-link. Ce n'est pas un doublon inutile : .gb-menu-link est la classe réelle que GenerateBlocks pose sur les liens du menu, et le bloc peut émettre ses propres couleurs sur ce sélecteur. */ html.pf-dark .papefrance-topbar[data-fond="clair"] { background: var(--paper); color: var(--ink); border-bottom-color: var(--rule); } html.pf-dark .papefrance-topbar[data-fond="clair"] .papefrance-topbar__nav a, html.pf-dark .papefrance-topbar[data-fond="clair"] .gb-menu-link { color: var(--ink); } html.pf-dark .papefrance-topbar[data-fond="clair"] .papefrance-topbar__nav a:hover, html.pf-dark .papefrance-topbar[data-fond="clair"] .gb-menu-link:hover { color: var(--primary-soft); } html.pf-dark .papefrance-topbar[data-fond="clair"] .gb-menu-toggle { color: var(--ink); } html.pf-dark :is(.pf-direct .papefrance-siteheader, body:has(.pf-direct) .papefrance-siteheader) { background: var(--paper); } /* ═══ 8. PALIERS ═════════════════════════════════════════════════ */ @media (max-width: 1024px) { .papefrance-topbar[data-fond="clair"] { padding: 10px 20px; } .papefrance-topbar[data-fond="clair"] .papefrance-brand-logo { height: 54px; max-height: 54px; } } @media (max-width: 480px) { .papefrance-topbar[data-fond="clair"] { padding: 8px 16px; gap: 10px; } .papefrance-topbar[data-fond="clair"] .papefrance-brand-logo { height: 46px; max-height: 46px; } :is(.papefrance-topbar, .papefrance-siteheader) :is(.papefrance-topbar__cta, .papefrance-siteheader__cta) { padding-left: 14px; padding-right: 14px; font-size: 12px; } } /* ═══ 9. HORS EN-TÊTE — HÉRITÉ DE correctifs-accueil-v4.css ══════ Ces deux blocs ne touchent pas à l'en-tête. Ils viennent de la feuille absorbée et sont conservés ici plutôt que perdus ; leur place logique est accueil-v4.css, à déplacer au prochain passage sur ce fichier-là. */ /* Le bouton jour/nuit flotte au ras du rail des cinq étapes et masque la fin du filet « Metz ». On le descend sous le pli. */ .pf-home .pf-theme-toggle, body:has(.pf-hero--clair) .pf-theme-toggle { bottom: 24px; top: auto; } /* Le thème souligne les liens par défaut ; les composants pf- ont leurs propres états de survol. */ .pf-home a:where(.pf-rail__it, .pf-band, .pf-feature, .pf-card, .pf-btn, .pf-link, .pf-jalon) { text-decoration: none; } /* ═══ 10. IMPRESSION ═════════════════════════════════════════════ */ @media print { .papefrance-topbar[data-fond="clair"] { border-bottom: 1px solid #000; } .papefrance-brand-logo[data-logo-sombre] { display: none !important; } :is(.papefrance-topbar, .papefrance-siteheader) :is(.gb-navigation, .gb-menu-toggle) { display: none; } .pf-theme-toggle { display: none; } }