/* ═══════════════════════════════════════════════════════════════════════════
   ACCUEIL IMMERSIVE — « la matière du jour »

   Chargée UNIQUEMENT sur la page d'accueil, par-dessus public.css.
   La page ne mentionne pas le temps liturgique : elle en est faite.
   Sept couleurs → sept matières, sept atmosphères, sept PHYSIQUES du
   mouvement. Changer la couleur change tout : le fond, la durée, la
   courbe, la direction d'entrée, le décalage entre éléments et le seul
   mouvement permanent de la page. (cf. CLAUDE.md § L'accueil doit saisir)

   Garde-fous appris à l'écran — ne pas les défaire :
   • aucune transformation 3D sur du TEXTE (calque GPU = texte flou à vie) ;
   • pas de `will-change: transform` ;
   • `overflow-x: clip`, jamais `hidden` (casse `position: sticky`) ;
   • l'état masqué n'existe que sous `html.js-mouvement` : sans JS, rien
     ne disparaît.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   1. LES SEPT TEMPS — jetons de matière ET de mouvement
   ═══════════════════════════════════════════════════════════════════ */

/* Repli : temps ordinaire. 33 semaines sur 52 — c'est l'état par défaut. */
body.accueil-immersive {
  --champ:        #0B3A27;
  --profond:      #04180F;
  --encre-hero:   #F4F1E4;
  --rubrique-hero:#A9CBAF;
  --vive:         #2E7D32;
  --titre-accent: #7FD79A;
  --voile-bas:    rgba(4, 24, 15, .88);
  --survol-hero:  rgba(255, 255, 255, .10);
  --actif-hero:   rgba(255, 255, 255, .17);
  --lisere-hero:  rgba(255, 255, 255, .18);
  --champ-vignette: .32;
  --filet-cadre: transparent;

  /* physique */
  --duree:    900ms;
  --ease:     cubic-bezier(.16, 1, .3, 1);
  --entree-y: 28px;                 /* > 0 : ça POUSSE depuis le bas */
  --entree-e: .985;
  --decal:    90ms;
  --origine:  bottom center;
}

/* VERT — LA RESPIRATION : cycle de 9 s, tout revient toujours. */
body.accueil-immersive[data-temps="VERT"] { /* = valeurs de repli ci-dessus */ }

/* VIOLET — LA DESCENTE : Avent, Carême. Tout tombe, inertie lourde,
   aucun rebond, les éléments arrivent en retard les uns sur les autres. */
body.accueil-immersive[data-temps="VIOLET"] {
  --champ: #331D5C; --profond: #100720;
  --encre-hero: #F0EAF7; --rubrique-hero: #BDABD9;
  --vive: #6A1B9A; --titre-accent: #C9AEEE;
  --voile-bas: rgba(21, 11, 43, .88);
  --champ-vignette: .34;
  --duree: 1250ms;
  --ease: cubic-bezier(.22, .61, .14, 1);
  --entree-y: -36px;                /* < 0 : ça DESCEND depuis le haut */
  --entree-e: 1;
  --decal: 150ms;
  --origine: top center;
}

/* BLANC — L'IRRADIATION : Noël, Pâques. Le seul temps clair. Tout part
   du centre et s'ouvre ; rien ne revient jamais. Jour pâle → noir & blanc,
   la vraie teinte AELF ne subsiste que sur les aplats décoratifs. */
body.accueil-immersive[data-temps="BLANC"] {
  --champ: #F8F3E8; --profond: #C7B48D;
  --encre-hero: #14110E; --rubrique-hero: #5F5849;
  --vive: #EFE7D3; --titre-accent: #14110E;
  --filet-cadre: rgba(15, 14, 13, .38);
  --voile-bas: rgba(199, 180, 141, .42);
  --survol-hero: rgba(0, 0, 0, .06);
  --actif-hero:  rgba(0, 0, 0, .11);
  --lisere-hero: rgba(0, 0, 0, .15);
  --champ-vignette: .15;
  --duree: 1000ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --entree-y: 0px;
  --entree-e: .90;                  /* ça s'OUVRE depuis le centre */
  --decal: 70ms;
  --origine: center;
}

/* ROUGE — LA FLAMME : Rameaux, Pentecôte, martyrs. Le seul temps nerveux :
   durées courtes, décalage serré, tremblement permanent du décor. */
body.accueil-immersive[data-temps="ROUGE"] {
  --champ: #6D110D; --profond: #380705;
  --encre-hero: #FCEDE4; --rubrique-hero: #F3B79C;
  --vive: #C62828; --titre-accent: #FFB08C;
  --voile-bas: rgba(56, 7, 5, .86);
  --champ-vignette: .30;
  --duree: 340ms;
  --ease: cubic-bezier(.2, .9, .25, 1);
  --entree-y: 20px;
  --entree-e: 1;
  --decal: 45ms;
  --origine: bottom center;
}

/* ROSE — L'ÉCLAIRCIE : Gaudete, Laetare. Le violet qui s'ouvre. Rien ne
   se déplace vraiment, ce sont les opacités qui s'allègent. */
body.accueil-immersive[data-temps="ROSE"] {
  --champ: #FAEAF0; --profond: #C892AC;
  --encre-hero: #25131B; --rubrique-hero: #71495B;
  --vive: #E69AB8; --titre-accent: #25131B;
  --filet-cadre: rgba(15, 14, 13, .30);
  --voile-bas: rgba(200, 146, 172, .40);
  --survol-hero: rgba(0, 0, 0, .06);
  --actif-hero:  rgba(0, 0, 0, .11);
  --lisere-hero: rgba(0, 0, 0, .14);
  --champ-vignette: .14;
  --duree: 1150ms;
  --ease: cubic-bezier(.33, 1, .68, 1);
  --entree-y: 14px;
  --entree-e: 1;
  --decal: 120ms;
  --origine: center;
}

/* OR — LE REFLET : solennités. Contre-pied total — la matière NE BOUGE
   PAS. Tout arrive ensemble, quasi instantanément ; seule la lumière
   parcourt la page. */
body.accueil-immersive[data-temps="OR"] {
  --champ: #F2E2B0; --profond: #CBAA55;
  --encre-hero: #1C1305; --rubrique-hero: #5A4209;
  --vive: #C9A227; --titre-accent: #1C1305;
  --filet-cadre: rgba(15, 14, 13, .32);
  --voile-bas: rgba(203, 170, 85, .42);
  --survol-hero: rgba(0, 0, 0, .07);
  --actif-hero:  rgba(0, 0, 0, .12);
  --lisere-hero: rgba(0, 0, 0, .16);
  --champ-vignette: .16;
  --duree: 260ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --entree-y: 0px;
  --entree-e: 1;
  --decal: 0ms;                     /* tout arrive ENSEMBLE */
  --origine: center;
}

/* NOIR — LA GRAVITÉ : défunts, Vendredi saint. Presque rien ne bouge ;
   un seul affaissement, très lent. L'exact contraire du rouge. */
body.accueil-immersive[data-temps="NOIR"] {
  --champ: #141311; --profond: #040404;
  --encre-hero: #EDE9E0; --rubrique-hero: #9C968C;
  --vive: #212121; --titre-accent: #C9C3B8;
  --voile-bas: rgba(4, 4, 4, .82);
  --champ-vignette: .36;
  --duree: 1600ms;
  --ease: cubic-bezier(.4, 0, .6, 1);
  --entree-y: 12px;
  --entree-e: 1;
  --decal: 220ms;
  --origine: top center;
}

/* ═══════════════════════════════════════════════════════════════════
   2. LE HERO IMMERSIF
   ═══════════════════════════════════════════════════════════════════ */

/* `clip` et non `hidden` : `hidden` ferait du body un conteneur de
   défilement et casserait le header collant. */
body.accueil-immersive { overflow-x: clip; }

.hero-immersif {
  position: relative;
  isolation: isolate;
  min-height: 100vh;    /* repli : `svh` n'existe pas avant Chromium 108 */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--champ);
  color: var(--encre-hero);
  padding-top: 0;
  /* Garde-fou : aucun décor du hero ne peut élargir la page. Le header n'est
     pas un descendant, son `position: sticky` n'est donc pas concerné. */
  overflow: hidden;
  overflow: clip;
}

/* Le hero ne remonte SOUS le header que si le JS tourne : c'est lui qui rend
   le header transparent et qui mesure sa hauteur réelle (elle change quand la
   nav passe sur deux lignes). Sans JS, header crème + hero dessous — jamais de
   marque crème sur fond crème. Les replis 76/112 px couvrent la première image
   avant la mesure. */
html.js-mouvement .hero-immersif {
  margin-top: calc(-1 * var(--h-header, 76px));
  padding-top: var(--h-header, 76px);
}
@media (min-width: 1200px) {
  html.js-mouvement .hero-immersif {
    margin-top: calc(-1 * var(--h-header, 112px));
    padding-top: var(--h-header, 112px);
  }
}

/* Le champ WebGL. Tant qu'il n'a pas démarré il reste invisible : le repli
   CSS en dessous porte la page — jamais d'écran noir. */
.champ {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.champ.est-vivant { opacity: 1; }
.champ.est-abandonne { opacity: 0; }   /* GPU trop lent : on rend la main au repli */

/* Repli CSS — seul en scène sans WebGL, sous `prefers-reduced-motion`,
   ou si le GPU décroche. Il doit tenir debout tout seul. */
.champ-repli {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Son `::after` déborde de 20 % de chaque côté pour que le flou n'ait pas de
     bord : sans rognage ici, la PAGE fait 120 % de large (mesuré 1728 px pour
     1440 px). `hidden` d'abord comme repli des navigateurs sans `clip`. */
  overflow: hidden;
  overflow: clip;
  background:
    radial-gradient(120% 90% at 12% 108%, var(--vive) 0%, transparent 58%),
    radial-gradient(90% 70% at 82% -8%, var(--vive) 0%, transparent 52%),
    linear-gradient(178deg, var(--champ) 0%, var(--profond) 100%);
  opacity: .96;
}
.champ-repli::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(45% 40% at 30% 30%, var(--vive) 0%, transparent 60%),
    radial-gradient(38% 34% at 72% 66%, var(--vive) 0%, transparent 60%);
  opacity: .22;
  filter: blur(50px);
}

/* Voile de lisibilité : du texte net, quoi que fasse la matière dessous.
   Bande de fondu COURTE et BASSE — au-delà, le bas de l'écran reste voilé
   en permanence et se lit comme du flou. */
.champ-voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, transparent 52%, var(--voile-bas) 100%),
    radial-gradient(78% 62% at 26% 46%, var(--voile-bas) 0%, transparent 72%);
}

/* Fin de la matière. Surtout PAS un fondu vers le papier crème : une bande
   claire de 96 px voile le bas de l'écran en permanence et se lit comme du
   flou. Ici la matière s'assombrit sur elle-même, puis s'arrête net sur un
   filet de la vraie teinte du jour — écho de la bande liturgique du haut. */
.hero-immersif::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 88px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, var(--profond) 100%);
}
.hero-i-bord {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 4;
  background: var(--vive);
}

.hero-immersif > .container {
  position: relative;
  z-index: 3;
  padding-top: 3.5rem;
  padding-bottom: 5.5rem;
}

.hero-i-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 3.5rem;
  align-items: center;
}
@media (max-width: 1199.98px) {
  .hero-i-grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  /* Mobile : l'action d'abord — « trouver ma paroisse » est la raison d'être
     de la page, et la quasi-totalité des visiteurs sont sur téléphone. */
  .hero-i-panneau { order: 1; }
  .hero-i-pitch   { order: 2; }
}

.hero-i-pitch { min-width: 0; }

/* ─── Le jour : pastille de la VRAIE teinte AELF + date ─── */
.hero-i-jour {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rubrique-hero);
  border: 1px solid var(--lisere-hero);
  border-radius: 100px;
  padding: .42rem .95rem;
  margin-bottom: 1.6rem;
  max-width: 100%;
  /* La date est liée par des insécables pour ne jamais se couper en deux.
     Ce filet la laisse quand même se couper si elle ne tient physiquement
     pas — en très grosse taille de texte système — plutôt que de déborder
     la page (cf. mémoire projet : le débordement Huawei vient de là). */
  overflow-wrap: break-word;
}
.hero-i-pastille {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--vive);
  box-shadow: inset 0 0 0 1px var(--filet-cadre),
              0 0 0 1px var(--lisere-hero), 0 0 14px var(--vive);
  flex: 0 0 auto;
}

/* ─── Le titre — révélation cinétique, en 2D UNIQUEMENT ─── */
.hero-i-titre {
  font-family: var(--famille-titres);
  font-weight: 400;
  font-size: calc(clamp(2.9rem, 8.2vw, 6.4rem) * var(--echelle-titres, 1));
  line-height: 1.12;   /* jamais moins : l'accent d'un É de 2ᵉ ligne se soude au-dessus (cf. public.css) */
  letter-spacing: .004em;
  text-transform: uppercase;
  color: var(--encre-hero);
  margin: 0 0 1.4rem;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.hero-i-ligne {
  display: block;
  overflow: hidden;          /* masque de révélation — aucun descendant collant */
  padding-bottom: .06em;     /* les jambages ne sont pas rognés */
}
.hero-i-ligne > span { display: block; }

.hero-i-titre .est-accent { color: var(--titre-accent); position: relative; }
/* Le filet porte la VRAIE couleur du jour : les jours pâles passent en noir
   & blanc pour le texte, mais blanc ≠ doré doit rester visible quelque part. */
.hero-i-filet {
  display: block;
  height: 6px;
  width: min(230px, 62%);
  background: var(--vive);
  border-radius: 3px;
  margin: .1rem 0 1.5rem;
  transform-origin: left center;
  /* Jours pâles : la teinte AELF (crème, doré, rose) disparaît sur un fond
     clair. On ne la fonce pas — ça mentirait sur la couleur du jour — on la
     CADRE d'un filet d'encre. Blanc et doré redeviennent distinguables. */
  box-shadow: inset 0 0 0 1px var(--filet-cadre);
}

.hero-i-sous {
  font-family: var(--famille-corps);
  font-weight: 500;
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  line-height: 1.55;
  color: var(--rubrique-hero);
  max-width: 34rem;
  margin: 0 0 2.2rem;
}

/* Chapeau justifié à TOUTES les largeurs, téléphone compris.

   `hyphens: auto` n'est PAS optionnel ici : sans césure, le navigateur ne
   peut qu'étirer les espaces, et en français (« communauté », « événements »,
   « pastorales ») une colonne étroite se creuse alors de rivières de blancs.
   La césure s'appuie sur `<html lang="fr">` pour choisir son dictionnaire —
   si la langue disparaissait du <html>, la justification redeviendrait sale
   sans prévenir. */
.hero-i-sous {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  /* Ne couper que les mots d'au moins 9 signes, et jamais à moins de 4 signes
     d'un bord. Sans cette limite le navigateur coupait « Cona-/kry » : césure
     française valide, mais on ne scinde pas le nom de la capitale dans un
     titre d'accueil. Restent coupables les mots où la césure sert vraiment —
     « commu-nauté », « événe-ments ».
     Propriété récente : là où elle manque, on retombe simplement sur la
     césure automatique, jamais sur du texte cassé. */
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-chars: 9 4 3;
}

/* ─── Le panneau géoloc : une plaque nette posée sur la matière ─── */
.hero-i-panneau { min-width: 0; }
.hero-i-panneau .geoloc-panel {
  max-width: none;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    0 2px 0 var(--vive),
    0 42px 80px -34px rgba(0, 0, 0, .65),
    0 10px 26px -18px rgba(0, 0, 0, .5);
  /* Parallaxe VERTICALE seulement : le panneau porte du texte, donc pas de 3D. */
  transform: translateY(calc(var(--ptr-y, 0) * -6px));
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

/* ─── L'invite à descendre ─── */
.hero-i-descendre {
  position: relative;
  z-index: 3;
  align-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  margin-bottom: 3.2rem;
  color: var(--rubrique-hero);
  text-decoration: none;
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  transition: color .3s ease;
}
.hero-i-descendre:hover { color: var(--encre-hero); }
/* Un trait qui se remplit vers le bas : la seule chose qui « appelle ». */
.hero-i-trait {
  width: 1px;
  height: 40px;
  background: var(--lisere-hero);
  position: relative;
  overflow: hidden;
}
.hero-i-trait::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 40px;
  background: var(--vive);
  animation: filer 2.6s var(--ease) infinite;
}
@keyframes filer {
  0%        { transform: translateY(-100%); }
  55%, 100% { transform: translateY(100%); }
}
@media (max-width: 767.98px) { .hero-i-descendre { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
   3. LE HEADER SUR LA MATIÈRE
   Transparent tant qu'on est dans le hero, crème dès qu'on l'a quitté.

   Tout est conditionné à `html.js-mouvement` : c'est le JS qui remonte le hero
   sous le header et qui bascule `est-pose`. Sans JS, le header garde son fond
   crème et son encre — sinon la marque s'écrit en crème sur crème.
   ═══════════════════════════════════════════════════════════════════ */
html.js-mouvement body.accueil-immersive .public-header {
  background-color: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background-color .35s ease, border-color .35s ease;
}
html.js-mouvement body.accueil-immersive .public-marque-nom,
html.js-mouvement body.accueil-immersive .public-nav-item,
html.js-mouvement body.accueil-immersive .public-nav .dropdown > a,
html.js-mouvement body.accueil-immersive .nav-toggle { color: var(--encre-hero); }

html.js-mouvement body.accueil-immersive .public-marque-pays,
html.js-mouvement body.accueil-immersive .public-nav .dropdown > a .caret { color: var(--rubrique-hero); }

html.js-mouvement body.accueil-immersive .nav-toggle {
  border-color: var(--lisere-hero);
  background: transparent;
}
html.js-mouvement body.accueil-immersive .public-nav-item:hover,
html.js-mouvement body.accueil-immersive .public-nav .dropdown > a:hover,
html.js-mouvement body.accueil-immersive .nav-toggle:hover {
  background: var(--survol-hero);
  color: var(--encre-hero);
}
html.js-mouvement body.accueil-immersive .public-nav-item.is-active,
html.js-mouvement body.accueil-immersive .public-nav-item.is-active:hover {
  background: var(--actif-hero);
  color: var(--encre-hero);
}
/* Le sélecteur FR/EN porte ses couleurs en style en ligne : il faut `!important`. */
html.js-mouvement body.accueil-immersive .public-lang .public-nav-item[style] {
  background: transparent !important;
  color: var(--rubrique-hero) !important;
}
html.js-mouvement body.accueil-immersive .public-lang .public-nav-item[style*="var(--encre)"] {
  background: var(--actif-hero) !important;
  color: var(--encre-hero) !important;
}

/* ─── Sorti du hero : le header reprend son identité crème ─── */
html.js-mouvement.est-pose body.accueil-immersive .public-header {
  background-color: rgba(251, 248, 241, .94);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--bord);
}
html.js-mouvement.est-pose body.accueil-immersive .public-marque-nom,
html.js-mouvement.est-pose body.accueil-immersive .public-nav-item,
html.js-mouvement.est-pose body.accueil-immersive .public-nav .dropdown > a,
html.js-mouvement.est-pose body.accueil-immersive .nav-toggle { color: var(--encre); }
html.js-mouvement.est-pose body.accueil-immersive .public-marque-pays,
html.js-mouvement.est-pose body.accueil-immersive .public-nav .dropdown > a .caret { color: var(--gris); }
html.js-mouvement.est-pose body.accueil-immersive .nav-toggle { border-color: var(--bord-dur); }
html.js-mouvement.est-pose body.accueil-immersive .public-nav-item:hover,
html.js-mouvement.est-pose body.accueil-immersive .public-nav .dropdown > a:hover,
html.js-mouvement.est-pose body.accueil-immersive .nav-toggle:hover { background: var(--creme); }
html.js-mouvement.est-pose body.accueil-immersive .public-nav-item.is-active,
html.js-mouvement.est-pose body.accueil-immersive .public-nav-item.is-active:hover {
  background: var(--encre); color: var(--papier);
}
html.js-mouvement.est-pose body.accueil-immersive .public-lang .public-nav-item[style] {
  color: var(--encre) !important;
}
html.js-mouvement.est-pose body.accueil-immersive .public-lang .public-nav-item[style*="var(--encre)"] {
  background: var(--encre) !important; color: var(--papier) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   4. LES DÉVOILEMENTS — la physique du temps, appliquée
   L'état masqué n'existe que si le JS tourne (`html.js-mouvement`).
   ═══════════════════════════════════════════════════════════════════ */
html.js-mouvement [data-revele] {
  /* Le décalage en cascade est LUI AUSSI une signature du temps :
     serré en rouge (45 ms), lourd en noir (220 ms), nul en or. */
  --retard: calc(var(--i, 0) * var(--decal));
  opacity: 0;
  transform: translateY(var(--entree-y)) scale(var(--entree-e));
  transform-origin: var(--origine);
  transition:
    opacity var(--duree) var(--ease) var(--retard),
    transform var(--duree) var(--ease) var(--retard);
}
html.js-mouvement [data-revele].est-revele {
  opacity: 1;
  transform: none;
}

/* Le filet du titre se trace au lieu d'apparaître. */
html.js-mouvement .hero-i-filet[data-revele] { transform: scaleX(0); opacity: 1; }
html.js-mouvement .hero-i-filet[data-revele].est-revele { transform: scaleX(1); }

/* ═══════════════════════════════════════════════════════════════════
   5. LE MOUVEMENT PERMANENT — un seul par temps, sur le DÉCOR seul
   ═══════════════════════════════════════════════════════════════════ */
@keyframes respirer   { 0%, 100% { transform: scale(1);      opacity: .85; }
                        50%      { transform: scale(1.055);  opacity: 1;   } }
@keyframes irradier   { 0%   { transform: scale(.82); opacity: .9; }
                        100% { transform: scale(1.5); opacity: 0;  } }
@keyframes crepiter   { 0%, 100% { opacity: .78; transform: translateY(0);      }
                        50%      { opacity: 1;   transform: translateY(-1.5px); } }
@keyframes eclaircir  { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes balayer    { 0% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes affaisser  { 0% { transform: translateY(-8px); opacity: .55; }
                        100% { transform: translateY(10px); opacity: .8; } }
@keyframes descendre  { 0% { transform: translateY(-14px); opacity: .35; }
                        100% { transform: translateY(14px); opacity: .75; } }

/* Le « signe » : un aplat décoratif présent dans chaque section, qui porte le
   mouvement permanent du temps. Jamais de texte dedans.

   `.signe` est sa PROPRE boîte de rognage (inset:0 sur la section) et le halo
   vit dans son `::before`. Sans cela, un halo qui déborde à droite élargit la
   page : `clip-path` ne rogne que la peinture, pas le débordement de mise en
   page — mesuré à 1728 px pour 1440 px de fenêtre. `overflow:hidden` d'abord,
   `clip` ensuite : repli pour les Safari < 16, sans risque ici (boîte vide,
   décorative, sans descendant collant). */
.signe {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  overflow: clip;
}
.signe::before {
  content: "";
  position: absolute;
  top: var(--t, auto); right: var(--r, auto);
  bottom: var(--b, auto); left: var(--l, auto);
  width: var(--taille, 40vw);
  aspect-ratio: 1;
  /* Dégradé radial plutôt qu'un disque + `filter: blur()` : le flou se fait
     rogner net par la boîte et laisse un bord dur qui se lit comme un bug.
     Le dégradé est transparent avant le bord — rien à rogner — et il coûte
     bien moins cher sur un GPU d'entrée de gamme. */
  background: radial-gradient(circle at center, var(--vive) 0%, transparent 62%);
  opacity: .13;
}
body.accueil-immersive[data-temps="VERT"]   .signe::before { animation: respirer 9s ease-in-out infinite; }
body.accueil-immersive[data-temps="VIOLET"] .signe::before { animation: descendre 14s ease-in-out infinite alternate; }
body.accueil-immersive[data-temps="BLANC"]  .signe::before { animation: irradier 7s ease-out infinite; }
body.accueil-immersive[data-temps="ROUGE"]  .signe::before { animation: crepiter 1.6s ease-in-out infinite; }
body.accueil-immersive[data-temps="ROSE"]   .signe::before { animation: eclaircir 33s ease-in-out infinite; }
body.accueil-immersive[data-temps="NOIR"]   .signe::before { animation: affaisser 80s linear infinite alternate; }
/* OR : la matière ne bouge pas. Un unique balayage la parcourt. */
body.accueil-immersive[data-temps="OR"] .signe::before { background: none; }
body.accueil-immersive[data-temps="OR"] .signe::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  opacity: .22;
  background: linear-gradient(105deg, transparent 42%, var(--vive) 50%, transparent 58%);
  animation: balayer 6s cubic-bezier(.5, 0, .5, 1) infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   6. LA PAGE SOUS LE HERO — la matière continue, en sourdine
   ═══════════════════════════════════════════════════════════════════ */
body.accueil-immersive .public-section,
body.accueil-immersive .tf {
  position: relative;
  isolation: isolate;
}
body.accueil-immersive .public-section > .container,
body.accueil-immersive .tf > .container { position: relative; z-index: 1; }

/* Filet de section aux couleurs du jour. */
body.accueil-immersive .public-section-tete .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
body.accueil-immersive .public-section-tete .eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--vive);
  flex: 0 0 auto;
}

/* ─── Les cartes diocèse : le CADRE bascule en 3D, le texte reste plat ─── */
body.accueil-immersive .fiche-diocese-image {
  perspective: 900px;
  overflow: hidden;
}
body.accueil-immersive .fiche-diocese-image > img,
body.accueil-immersive .fiche-diocese-image-vide {
  transform:
    rotateX(var(--bx, 0deg)) rotateY(var(--by, 0deg))
    translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.09);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
/* Sans pointeur (téléphone), pas de bascule à jouer : le zoom de réserve ne
   ferait que rogner la photo pour rien. */
@media (hover: none) {
  body.accueil-immersive .fiche-diocese-image > img,
  body.accueil-immersive .fiche-diocese-image-vide { transform: none; }
}
body.accueil-immersive .fiche-diocese {
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
body.accueil-immersive .fiche-diocese:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -26px rgba(15, 14, 13, .45);
}
/* La pastille du siège prend la vraie teinte du jour. */
body.accueil-immersive .fiche-diocese-pastille {
  box-shadow: inset 0 0 0 1px var(--vive);
}

/* ─── Les lignes de liste : la flèche vient à la rencontre du pointeur ─── */
body.accueil-immersive .liste-row {
  position: relative;
  transition: background-color .3s var(--ease), padding-left .35s var(--ease);
}
body.accueil-immersive .liste-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--vive);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform .35s var(--ease);
}
body.accueil-immersive .liste-row:hover::before { transform: scaleY(1); }
body.accueil-immersive .liste-row-arrow {
  transition: transform .35s var(--ease);
}
body.accueil-immersive .liste-row:hover .liste-row-arrow { transform: translateX(7px); }

/* ─── Le rail « Temps forts » : les cartes émergent de la matière ─── */
body.accueil-immersive .tf-carte { transition: transform .4s var(--ease); }
body.accueil-immersive .tf-carte:hover { transform: translateY(-5px); }

/* ─── LA BANDE DU JOUR : où l'on en est dans l'année liturgique + l'évangile
   Deux colonnes de contenu (le temps liturgique, l'évangile) et une colonne
   d'action. Tout vient d'AELF, d'où la mention de copyright obligatoire.

   ⚠️ Le balayage de dévoilement est un CALQUE posé DESSUS, jamais un
   `clip-path` sur la bande elle-même : un élément qui se rogne à une aire
   nulle n'« intersecte » plus rien, `IntersectionObserver` ne le signale
   JAMAIS, et le contenu reste invisible pour toujours (mesuré : l'Évangile
   du jour disparaissait). */
.jour-bande {
  position: relative;
  overflow: hidden;
  padding: 2.4rem 0;
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
}

.jour-grille {
  display: grid;
  /* `minmax(0, …)` partout : une référence d'évangile ou un nom de fête long
     ne doit jamais imposer sa largeur et élargir la page en gros texte. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 860px) {
  .jour-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 2.5rem; }
}

.jour-col { min-width: 0; }

.jour-rubrique { color: var(--terre); margin: 0 0 .3rem; }

.jour-titre {
  font-family: var(--famille-titres);
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.05;          /* accents des capitales : cf. `.display` */
  margin: 0;
  overflow-wrap: break-word;
}

.jour-meta {
  color: var(--gris);
  margin: .35rem 0 0;
  font-size: .92rem;
}
/* La fête passe à la ligne : elle complète le temps, elle ne le prolonge pas. */
.jour-fete { display: block; margin-top: .15rem; }

.jour-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
}
@media (min-width: 860px) { .jour-action { align-items: flex-end; } }

.jour-lien {
  font-family: var(--famille-accents);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82rem;
  background: var(--encre);
  color: var(--papier);
  padding: .7rem 1.3rem;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
}
.jour-lien:hover { color: var(--papier); opacity: .88; }

/* Mention de droits : obligatoire dès qu'un texte AELF est affiché. */
.jour-credit {
  font-family: var(--famille-accents);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-clair);
}
html.js-mouvement .jour-bande[data-revele] {
  transform: none;                      /* la bande ne glisse pas : elle se dévoile */
}
html.js-mouvement .jour-bande[data-revele]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--creme);
  transform-origin: right center;
  transition: transform calc(var(--duree) * 1.25) var(--ease);
}
html.js-mouvement .jour-bande[data-revele].est-revele::after { transform: scaleX(0); }

/* ═══════════════════════════════════════════════════════════════════
   6bis. LES DIOCÈSES — « L'Église en Guinée »

   Sept entrées. La grille de grandes cartes photo ne tenait pas : cinq
   diocèses sur sept n'ont pas d'image, ce qui donnait cinq rectangles
   noirs de 500 px de haut. Ici la photo est une vignette de 56 px — un
   bonus, jamais un trou quand elle manque.

   Deux colonnes, pour ne pas donner à la section la même silhouette que
   « Événements » et « Homélies » qui la suivent en pleine largeur.
   ═══════════════════════════════════════════════════════════════════ */
.dioceses-chapo {
  color: var(--gris);
  max-width: 46ch;
  margin: 0 0 2.4rem;
}

.dioceses-rangs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 3rem;
}
/* Deux colonnes, jamais trois : à sept entrées, `auto-fit` en donnait
   trois et laissait une dernière rangée d'un seul élément. En deux
   colonnes c'est 4 + 3, et chaque rangée garde de quoi respirer.
   `minmax(0, …)` et jamais `1fr` nu — sinon le nom le plus long élargit
   la page en gros texte système. */
@media (min-width: 900px) {
  .dioceses-rangs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dioceses-vide { color: var(--gris); }

.diocese-rang {
  display: grid;
  /* `minmax(0, …)` : le nom le plus long ne doit jamais imposer sa largeur
     à la colonne — sinon la page s'élargit en gros texte système. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem .5rem 1rem .25rem;
  border-bottom: 1px solid var(--bord);
  text-decoration: none;
  color: var(--encre);
  transition: background-color .15s ease, padding-left .15s ease;
}

.diocese-rang-vignette {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Papier et non crème : la section est elle-même crème depuis qu'elle
     ouvre la page — une pastille crème sur fond crème n'existe pas. */
  background: var(--papier);
  border: 1px solid var(--bord);
  font-family: var(--famille-titres);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--terre);
}
.diocese-rang-vignette img { width: 100%; height: 100%; object-fit: cover; }

.diocese-rang-corps { min-width: 0; }

.diocese-rang-nom {
  display: block;
  font-family: var(--famille-titres);
  font-size: 1.28rem;
  /* 1,25 et non moins : en capitales, l'accent du È de « DIOCÈSE » monte
     au-dessus de la hauteur de capitale et se soude à la ligne du dessus. */
  line-height: 1.25;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.diocese-rang-meta {
  display: block;
  font-family: var(--famille-corps);
  font-size: .85rem;
  color: var(--gris);
  margin-top: .15rem;
}
.diocese-rang-fleche {
  font-family: var(--famille-titres);
  font-size: 1.3rem;
  color: var(--gris-clair);
  transition: color .15s ease, transform .15s ease;
}

/* Le survol ÉCLAIRCIT au lieu d'assombrir : sur une section crème, un survol
   crème serait invisible. */
.diocese-rang:hover,
.diocese-rang:focus-visible {
  background: var(--papier);
  padding-left: .75rem;
  color: var(--encre);
}
.diocese-rang:hover .diocese-rang-fleche {
  color: var(--terre);
  transform: translateX(4px);
}

@media (max-width: 767.98px) {
  .dioceses-rangs { gap: 0; }
  .diocese-rang-vignette { width: 46px; height: 46px; font-size: 1.2rem; }
  .diocese-rang-nom { font-size: 1.1rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   6ter. LE DÉPLIEMENT — « voir les homélies suivantes »

   `<details>` natif : rôle, clavier et recherche du navigateur gratuits,
   et le bloc reste dépliable sans JavaScript. On ne remplace donc pas la
   mécanique, on ne fait qu'habiller le `<summary>`.
   ═══════════════════════════════════════════════════════════════════ */
.deplier { margin-top: -1px; }   /* le filet de la dernière ligne sert de bord */

.deplier-bouton {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  /* Le libellé est long (« Voir les 8 homélies suivantes ») et la capsule est
     un `inline-flex` : sans ces trois lignes elle débordait de 4 px à 320 px
     en texte système à 200 %. Elle se replie plutôt que d'élargir la page. */
  flex-wrap: wrap;
  max-width: 100%;
  overflow-wrap: break-word;
  margin-top: 1.5rem;
  padding: .7rem 1.3rem;
  border: 1px solid var(--bord-dur);
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--famille-accents);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82rem;
  color: var(--encre);
  list-style: none;               /* retire la puce triangulaire */
  transition: background-color .15s ease, color .15s ease;
}
/* Safari ignore `list-style` sur <summary> : il faut ce pseudo-élément. */
.deplier-bouton::-webkit-details-marker { display: none; }

.deplier-bouton:hover { background: var(--encre); color: var(--papier); }
.deplier-bouton:focus-visible { outline: 2px solid var(--terre); outline-offset: 3px; }

/* Le libellé suit l'état du bloc : « Voir … » fermé, « Replier » ouvert. */
.deplier-fermer { display: none; }
.deplier[open] .deplier-ouvrir { display: none; }
.deplier[open] .deplier-fermer { display: inline; }

.deplier-chevron {
  font-family: var(--famille-titres);
  line-height: 1;
  transition: transform .2s ease;
}
.deplier[open] .deplier-chevron { transform: rotate(180deg); }

/* ═══════════════════════════════════════════════════════════════════
   7. RESPONSIVE — vérifié jusqu'à 320 px, aucun débordement
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
  .hero-immersif { min-height: 92vh; min-height: 92svh; }
  .hero-immersif > .container { padding-top: 2rem; padding-bottom: 3rem; }
  .hero-i-jour { font-size: .62rem; letter-spacing: .14em; padding: .38rem .7rem; }
}
@media (max-width: 359.98px) {
  .hero-i-jour { letter-spacing: .1em; }
}


/* ═══════════════════════════════════════════════════════════════════
   9. TÉLÉPHONE — c'est LA version qui compte
   La quasi-totalité des visiteurs sont sur mobile. Deux partis pris :
   • pas de grande carte blanche qui masque la matière : l'action est
     posée À MÊME le champ, ce qui rend 200 px et laisse voir le jour ;
   • rien ne dépasse, rien ne se coupe en plein mot, même en très gros
     texte système (Huawei & co) — tout est en `rem` et sait s'abréger.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* ─ L'action, sans le carton blanc ─ */
  .hero-i-panneau .geoloc-panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    transform: none;
  }
  /* Le titre du panneau répétait le libellé du bouton juste dessous. */
  .hero-i-panneau .geoloc-titre { display: none; }

  .hero-i-panneau .geoloc-cta {
    box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .55);
  }
  .hero-i-panneau .geoloc-ou { color: var(--rubrique-hero); margin: .75rem 0; }
  .hero-i-panneau .geoloc-ou::before,
  .hero-i-panneau .geoloc-ou::after { background: var(--lisere-hero); }

  /* Le champ posé sur la matière : opaque pour rester net, cerclé pour
     exister aussi bien sur un fond sombre que sur un fond pâle. */
  .hero-i-panneau .geoloc-search {
    background: rgba(255, 255, 255, .94);
    border-color: var(--lisere-hero);
  }
  /* Les résultats s'affichent sur le champ, plus dans une carte blanche. */
  .hero-i-panneau .geoloc-resultats-titre { color: var(--encre-hero); }

  /* ─ Resserrage : tout le hero doit tenir sans paraître étiré ─ */
  .hero-i-grid { gap: 1.9rem; }
  .hero-i-jour { margin-bottom: 1.1rem; }
  .hero-i-titre { margin-bottom: .9rem; }
  .hero-i-filet { margin: 0 0 1.1rem; height: 5px; }
  .hero-i-sous { margin-bottom: 1.6rem; font-size: 1rem; }
}

/* Très petits écrans : on protège la lisibilité avant la grandeur. */
@media (max-width: 359.98px) {
  .hero-i-titre { font-size: calc(clamp(2.1rem, 11vw, 2.9rem) * var(--echelle-titres, 1)); }
  .hero-i-sous { font-size: .95rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   8. SOBRIÉTÉ — mouvement réduit : la matière reste, elle s'immobilise
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .champ { display: none; }
  .signe { animation: none !important; }
  .hero-i-panneau .geoloc-panel { transform: none; }
  html.js-mouvement [data-revele],
  html.js-mouvement .jour-bande[data-revele] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  body.accueil-immersive .fiche-diocese-image > img,
  body.accueil-immersive .fiche-diocese-image-vide { transform: scale(1.02); transition: none; }
}