/* ════════════════════════════════════════════════════════════════ HÉROS ACCUEIL V4 – PHOTO EN FOND PLEINE LARGEUR SUR MOBILE ──────────────────────────────────────────────────────────────── Objectif : rendre la photo du héros visible sur téléphone sans déplacer d'un pixel le titre, la pastille J-x, les dates ni les boutons. La photo sort du flux (position:absolute) et occupe le fond du héros, bord à bord. ── COMMENT TESTER LES QUATRE PISTES ────────────────────────── Ajouter UNE classe sur la section du héros, dans l'éditeur : .pf-hero--clair.pf-photo-a → A · Voile .pf-hero--clair.pf-photo-b → B · Portrait à droite .pf-hero--clair.pf-photo-c → C · Socle bas .pf-hero--clair.pf-photo-d → D · Duotone marine Sans classe : comportement actuel (photo masquée en mobile). Pour tester sans toucher au pattern, on peut aussi poser la classe sur ou tout autre ancêtre. ── SÉLECTEUR ────────────────────────────────────────────────── .pf-hero--clair:is(.pf-photo-a, .pf-photo-a *) vise le héros qui porte la classe LUI-MÊME ou qui descend d'un élément la portant. La version d'origine, `:is(.pf-photo-a, body.pf-photo-a) .pf-hero--clair`, ne vérifiait que le second cas : la classe posée sur la section, comme ce bandeau le demande, ne déclenchait rien (constaté le 21 septembre 2026). ── EMPILEMENT ───────────────────────────────────────────────── isolation:isolate fait du héros un contexte d'empilement ; la photo y prend z-index:-1, donc se peint APRÈS le fond du héros (ses halos) et AVANT tout son contenu, sans qu'aucun enfant ait besoin d'être positionné. La version d'origine positionnait chaque enfant direct (`> * { position:relative; z-index:2 }`) : .pf-hero__grid devenait alors le bloc conteneur de la photo, qui est DANS la grille, et à z-index:0 la photo se peignait par-dessus la colonne de texte, elle non positionnée. ════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── Socle commun aux quatre pistes ───────────────────────── */ .pf-hero--clair:is(.pf-photo-a, .pf-photo-b, .pf-photo-c, .pf-photo-d, .pf-photo-a *, .pf-photo-b *, .pf-photo-c *, .pf-photo-d *) { position: relative; isolation: isolate; overflow: hidden; } /* La photo quitte le flux : plus de display:none, plus de hauteur. Son bloc conteneur est le héros entier, rail des étapes compris. */ .pf-hero--clair:is(.pf-photo-a, .pf-photo-b, .pf-photo-c, .pf-photo-d, .pf-photo-a *, .pf-photo-b *, .pf-photo-c *, .pf-photo-d *) .pf-hero__photo { display: block !important; position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; overflow: hidden; pointer-events: none; } .pf-hero--clair:is(.pf-photo-a, .pf-photo-b, .pf-photo-c, .pf-photo-d, .pf-photo-a *, .pf-photo-b *, .pf-photo-c *, .pf-photo-d *) .pf-hero__photo :is(img, figure, .wp-block-image) { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Le voile est porté par un ::after du conteneur photo : il ne dépend d'aucun markup supplémentaire. */ .pf-hero--clair:is(.pf-photo-a, .pf-photo-b, .pf-photo-c, .pf-photo-d, .pf-photo-a *, .pf-photo-b *, .pf-photo-c *, .pf-photo-d *) .pf-hero__photo::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Le bouton fantôme doit rester lisible par-dessus l'image. */ .pf-hero--clair:is(.pf-photo-a, .pf-photo-b, .pf-photo-c, .pf-photo-d, .pf-photo-a *, .pf-photo-b *, .pf-photo-c *, .pf-photo-d *) .pf-btn-ghost { background: rgba(255,255,255,.86); } /* ══ A · VOILE ═══════════════════════════════════════════════ Photo plein cadre, effacée à 80 % de blanc, fondue vers le bas pour que le rail des étapes reste net. La plus discrète. */ /* Le cadre de la photo devient un conteneur de taille : ses unités cqh donnent la hauteur du héros à l'image. Sans risque ici, le cadre est en position:absolute;inset:0 et ne dépend pas de son contenu. */ .pf-hero--clair:is(.pf-photo-a, .pf-photo-a *) .pf-hero__photo { container-type: size; } /* Visage calé à 60 px du bord DROIT, quelle que soit la largeur. Un object-position en pourcentage (-16 % 0) le laissait vers x = 263 px pendant que « AIT LA VIE », à la même hauteur, s'élargit avec l'écran (police de 40 à 50 px) : au-delà de ~380 px le mot recouvrait le visage (mesuré le 22 septembre 2026). 80.2cqh = distance du visage au bord droit de l'image : (1 - 0,358) × 1,2499 × hauteur, avec le visage à 35,8 % de la largeur et une image de rapport 2226/1781. CHANGER DE PHOTO IMPOSE DE RECALCULER CE COEFFICIENT. :root en tête : sans lui, le :is(img, figure, .wp-block-image) du socle commun, qui compte comme une classe, l'emporte. La première valeur de right sert de repli sans unités cqh (navigateurs d'avant 2023), calculée pour un héros de 500 px. Le masque fait apparaître la photo en fondu depuis sa gauche, qui commence vers x = 105 px à 390. */ :root .pf-hero--clair:is(.pf-photo-a, .pf-photo-a *) .pf-hero__photo img { inset: 0 auto auto auto; right: -343px; right: calc(var(--pf-visage-bord, 60px) - 80.2cqh); width: auto; height: 100%; max-width: none; filter: saturate(.72); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%); mask-image: linear-gradient(90deg, transparent 0, #000 24%); } .pf-hero--clair:is(.pf-photo-a, .pf-photo-a *) .pf-hero__title :is(em, .pf-hl) { color: var(--cyan-sur-photo); } .pf-hero--clair:is(.pf-photo-a, .pf-photo-a *) .pf-hero__photo::after { background: linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.86) 52%, rgba(255,255,255,.97) 88%, #fff 100%); } /* ══ B · PORTRAIT À DROITE ═══════════════════════════════════ Fondu latéral : le titre garde un fond blanc franc à gauche, le visage du pape reste identifiable à droite. */ .pf-hero--clair:is(.pf-photo-b, .pf-photo-b *) .pf-hero__photo img { object-position: 78% 14%; -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.35) 38%, #000 85%); mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.35) 38%, #000 85%); } .pf-hero--clair:is(.pf-photo-b, .pf-photo-b *) .pf-hero__photo::after { background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 46%, rgba(255,255,255,.74) 100%), linear-gradient(180deg, transparent 40%, rgba(255,255,255,.90) 94%); } /* ══ C · SOCLE BAS ═══════════════════════════════════════════ Le titre reste sur blanc pur ; la photo monte depuis le bas, derrière la pastille J-x et les boutons. */ .pf-hero--clair:is(.pf-photo-c, .pf-photo-c *) .pf-hero__photo img { object-position: 50% 12%; -webkit-mask-image: linear-gradient(180deg, transparent 26%, rgba(0,0,0,.5) 48%, #000 72%); mask-image: linear-gradient(180deg, transparent 26%, rgba(0,0,0,.5) 48%, #000 72%); } .pf-hero--clair:is(.pf-photo-c, .pf-photo-c *) .pf-hero__photo::after { background: linear-gradient(180deg, rgba(255,255,255,.55) 40%, rgba(255,255,255,.78) 72%, rgba(255,255,255,.95) 100%); } .pf-hero--clair:is(.pf-photo-c, .pf-photo-c *) .pf-btn-ghost { background: rgba(255,255,255,.90); } /* ══ D · DUOTONE MARINE ══════════════════════════════════════ Photo désaturée puis teintée marine sur le bleu pâle de la charte : une texture de marque plutôt qu'une illustration. */ .pf-hero--clair:is(.pf-photo-d, .pf-photo-d *) { background: var(--navy-050, #eef1fb); } .pf-hero--clair:is(.pf-photo-d, .pf-photo-d *) .pf-hero__photo { mix-blend-mode: luminosity; } .pf-hero--clair:is(.pf-photo-d, .pf-photo-d *) .pf-hero__photo img { object-position: 50% 14%; filter: grayscale(1) contrast(1.06); } .pf-hero--clair:is(.pf-photo-d, .pf-photo-d *) .pf-hero__photo::after { mix-blend-mode: normal; background: linear-gradient(180deg, rgba(238,241,251,.74) 0%, rgba(238,241,251,.82) 55%, rgba(238,241,251,.96) 92%, #eef1fb 100%), linear-gradient(180deg, rgba(15,45,133,.30), rgba(26,204,255,.14)); } .pf-hero--clair:is(.pf-photo-d, .pf-photo-d *) .pf-btn-ghost { background: rgba(255,255,255,.84); } /* ══ E · PHOTO FRANCHE, VOILE MARINE ═════════════════════════ La seule piste où la photo se voit vraiment. Les voiles blancs A-D ne peuvent pas s'éclaircir : sous eux « LA VIE » (cyan) est déjà à 2,6:1. Ici on inverse : voile marine à 66-86 %, texte clair. Mesuré le 21 septembre 2026 à 390 px, pire pixel : titre 6,1:1, « LA VIE » 3,2:1, dates 5,7:1, surtitre 8,6:1. Couleurs en dur VOLONTAIREMENT : le héros est identique dans les deux thèmes, le voile marine valant pour les deux. :root en tête pour battre html.pf-dark (accueil-v4.css §7). */ .pf-hero--clair:is(.pf-photo-e, .pf-photo-e *) { position: relative; isolation: isolate; overflow: hidden; } .pf-hero--clair:is(.pf-photo-e, .pf-photo-e *) .pf-hero__photo { display: block !important; position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; overflow: hidden; pointer-events: none; } .pf-hero--clair:is(.pf-photo-e, .pf-photo-e *) .pf-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; } .pf-hero--clair:is(.pf-photo-e, .pf-photo-e *) .pf-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,29,90,.82) 0%, rgba(9,29,90,.70) 40%, rgba(9,29,90,.66) 65%, rgba(9,29,90,.86) 100%); } :root .pf-hero--clair:is(.pf-photo-e, .pf-photo-e *) :is(.pf-hero__title, .pf-hero__dates) { color: #fff; } :root .pf-hero--clair:is(.pf-photo-e, .pf-photo-e *) .pf-hero__title :is(em, .pf-hl) { color: #1ACCFF; } :root .pf-hero--clair:is(.pf-photo-e, .pf-photo-e *) .papefrance-eyebrow { color: rgba(255,255,255,.92); } :root .pf-hero--clair:is(.pf-photo-e, .pf-photo-e *) .pf-jour { background: #091d5a; color: #fff; } :root .pf-hero--clair:is(.pf-photo-e, .pf-photo-e *) .pf-btn-primary { background: #fff !important; color: #091d5a !important; } :root .pf-hero--clair:is(.pf-photo-e, .pf-photo-e *) .pf-btn-ghost { background: rgba(9,29,90,.45) !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); } /* Le rail des étapes garde son fond clair : il sort de la photo. */ .pf-hero--clair:is(.pf-photo-e, .pf-photo-e *) .pf-rail { background: var(--paper); padding-top: 22px; margin-top: 0; } } /* ════════════════════════════════════════════════════════════════ MODE SOMBRE – les voiles blancs deviennent nuit html.pf-dark et non body.pf-dark : la classe du thème sombre est posée sur par pf-theme.js. Visé sur body, rien ne s'appliquait et les voiles restaient blancs en thème sombre. ════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { html.pf-dark .pf-hero--clair:is(.pf-photo-a, .pf-photo-a *) .pf-hero__photo::after { background: linear-gradient(180deg, rgba(6,10,30,.74) 0%, rgba(6,10,30,.82) 52%, rgba(6,10,30,.95) 88%, #060a1e 100%); } html.pf-dark .pf-hero--clair:is(.pf-photo-b, .pf-photo-b *) .pf-hero__photo::after { background: linear-gradient(90deg, rgba(6,10,30,.94) 0%, rgba(6,10,30,.78) 46%, rgba(6,10,30,.66) 100%), linear-gradient(180deg, transparent 40%, rgba(6,10,30,.90) 94%); } html.pf-dark .pf-hero--clair:is(.pf-photo-c, .pf-photo-c *) .pf-hero__photo::after { background: linear-gradient(180deg, rgba(6,10,30,.48) 40%, rgba(6,10,30,.74) 72%, rgba(6,10,30,.94) 100%); } html.pf-dark .pf-hero--clair:is(.pf-photo-d, .pf-photo-d *) .pf-hero__photo::after { background: linear-gradient(180deg, rgba(9,14,38,.72) 0%, rgba(9,14,38,.84) 55%, rgba(9,14,38,.97) 92%, #090e26 100%), linear-gradient(180deg, rgba(15,45,133,.34), rgba(26,204,255,.16)); } html.pf-dark .pf-hero--clair:is(.pf-photo-a, .pf-photo-b, .pf-photo-c, .pf-photo-d, .pf-photo-a *, .pf-photo-b *, .pf-photo-c *, .pf-photo-d *) .pf-btn-ghost { background: rgba(9,14,38,.72); } } /* ════════════════════════════════════════════════════════════════ ACCESSIBILITÉ – si la photo gêne la lecture, l'utilisateur système « contraste élevé » retrouve un fond plein. ════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) and (prefers-contrast: more) { .pf-hero--clair .pf-hero__photo { display: none !important; } }