/* ═════════════════════════════════════════════════════════════════
   ÉGLISES GUINÉE — site public
   Polices : Anton (display, façon Impact) + Montserrat (body) + Jost (accents)
   Couleur de marque : --terre (dynamique, change avec le temps liturgique)
   ═════════════════════════════════════════════════════════════════ */

:root {
  --encre:       #0F0E0D;
  --encre-doux:  #2C2925;
  --gris:        #6B6660;
  --gris-clair:  #ADA59A;
  --papier:      #FBF8F1;
  --creme:       #F2EBD5;
  --or:          #C9A227;
  --terre:       #B23A1C;       /* défaut, écrasé par site_params.couleur_accent */
  --terre-foncé: #7B2510;

  /* Accent lisible SUR FOND SOMBRE (héros --encre, pied de page).
     --terre est l'accent calculé pour le papier crème : les jours pâles
     (blanc/or/rose) il vaut l'encre → un texte --terre sur fond sombre devient
     noir sur noir. Sur sombre, le noir & blanc s'inverse : l'accent est le
     papier. Écrasé plus bas par [data-liturgie-clair]. */
  --accent-sombre: var(--terre);

  --bord:        rgba(15,14,13,.12);
  --bord-dur:    #0F0E0D;

  /* Typographie — écrasée à l'exécution par le hub admin (params.famille_*) */
  --famille-titres:  "Anton", "Impact", sans-serif;
  --famille-corps:   "Montserrat", sans-serif;
  --famille-accents: "Jost", sans-serif;
  --echelle-titres:  1;
  --echelle-corps:   1;

  --r-s: 4px;
  --r-m: 10px;
  --r-l: 18px;
}

/* ───────────── reset ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.public-body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--famille-corps), -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--terre); text-decoration: none; }
a:hover { color: var(--terre-foncé); }

/* Jours « pâles » (blanc / doré / rose) : --terre passe en encre, le site est
   donc en noir & blanc (la vraie teinte AELF ne subsiste que sur le bandeau et
   les pastilles). Un lien de prose aurait alors EXACTEMENT la couleur du texte
   courant : c'est le soulignement qui reprend la signalétique, et son
   épaississement qui marque le survol (--terre-foncé ne se voit plus sur l'encre).
   Ciblé sur les liens de prose seuls : les liens-composants (boutons, lignes de
   liste, nav) portent tous une classe et gardent leur propre traitement. */
[data-liturgie-clair] a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}
[data-liturgie-clair] a:not([class]):hover { text-decoration-thickness: 2px; }

/* Jours pâles : sur les surfaces sombres, l'accent bascule en papier — sinon il
   vaudrait l'encre, invisible sur --encre (héros, pied de page). */
[data-liturgie-clair] { --accent-sombre: var(--papier); }

img { max-width: 100%; height: auto; display: block; }

/* Focus clavier visible partout. `currentColor` s'adapte au contexte : encre sur
   le papier, papier sur les héros sombres — jamais invisible, quel que soit le
   jour liturgique. Les deux champs qui neutralisent leur outline (recherche,
   géoloc) portent un anneau sur leur conteneur, voir :focus-within plus bas. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ───────────── typo utilitaires ───────────── */
.display, h1.display, h2.display {
  overflow-wrap: break-word;
  font-family: var(--famille-titres);
  font-weight: 400;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--encre);
}

/* ─── Interligne UNIQUE de tous les titres Anton en capitales ───────────────
   `text-wrap: balance` équilibre les retours à la ligne (mot orphelin sur la
   dernière ligne) ; les navigateurs qui ne le gèrent pas l'ignorent.

   1,12 et non 0,88/0,90/0,92/0,95 : en capitales françaises, l'accent d'un É
   ou d'un È de la ligne du dessous monte dans la ligne du dessus et se SOUDE
   au glyphe qui s'y trouve. Deux cas vus à l'écran :
     · « PARCOURIR / PAR DIOCÈSE » se lisait « PARCOURLR » (≥ 1,05 suffit) ;
     · « PAROISSE SAINT- / ANDRÉ DE BONFI » — le trait d'union tombe pile sur
       l'accent, et là 1,05 touche encore : il faut 1,12.
   Le ratio est indépendant de la taille : ce qui colle à 6 rem colle à 2 rem.
   Anton n'ayant aucune descendante en capitales, 1,12 reste visuellement
   serré. NE PAS ré-écraser cette valeur ailleurs dans le fichier — c'est
   précisément ce qui avait laissé revenir le bug titre par titre. */
.display, .hero-titre, .entete-titre, .paroisse-hero-titre, .geoloc-resultats-titre,
.tf-titre, .une-evt-titre {
  text-wrap: balance;
  line-height: 1.12;
}

.jost { font-family: var(--famille-accents); font-weight: 500; }

.eyebrow {
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gris);
}

.italic-jost { font-family: var(--famille-accents); font-style: italic; font-weight: 400; }
.tabular { font-variant-numeric: tabular-nums lining-nums; }

/* ───────────── conteneurs ───────────── */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.container-large { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; }

/* ═════════════════════════════════════════════════════════════════
   HEADER + NAVBAR
   ═════════════════════════════════════════════════════════════════ */
.public-bandeau-liturgie { height: 5px; background: var(--liturgie-couleur); flex-shrink: 0; }

.public-header {
  background-color: rgba(251, 248, 241, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bord);
  position: sticky;
  top: 0;
  z-index: 100;
}

.public-header .container {
  display: flex;
  flex-wrap: wrap;              /* la nav peut passer sur sa propre ligne (2e niveau) */
  align-items: center;
  gap: .35rem 1.25rem;
  min-height: 76px;            /* hauteur souple : grandit proprement si besoin */
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.public-marque {
  display: flex; align-items: center; gap: .65rem; text-decoration: none;
  min-width: 0;
  flex: 1 1 auto;        /* occupe toute la largeur dispo de sa ligne */
  overflow: hidden;
}

.public-marque-pastille {
  width: 14px; height: 14px;
  background: var(--liturgie-couleur);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
  flex-shrink: 0;
}

.public-marque-bloc { display: flex; flex-direction: column; line-height: 1; min-width: 0; }

.public-marque-nom {
  font-family: var(--famille-titres);
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);   /* s'adapte à la largeur dispo */
  letter-spacing: .02em;
  line-height: 1.12;   /* même seuil que les titres display : le É de « GUINÉE » remontait sur la 1ʳᵉ ligne */
  color: var(--encre);
  text-transform: uppercase;
  /* Titre en entier, sur 2 lignes maxi (au lieu de tronquer à une ligne). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

.public-marque-pays {
  font-family: var(--famille-accents);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .26em;
  color: var(--gris);
  text-transform: uppercase;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ─── nav desktop ─── */
.public-nav { display: flex; gap: .35rem; margin-left: auto; align-items: center; }

.public-nav-item, .public-nav .dropdown > a {
  font-family: var(--famille-accents);
  font-weight: 500;
  font-size: .82rem;
  line-height: 1;                 /* aligne <a> et <button> FR/EN sur la même hauteur */
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--encre);
  padding: .55rem .78rem;
  border-radius: var(--r-s);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;                    /* seule source d'espacement icône↔texte (uniforme) */
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

/* Icônes de nav : taille et centrage constants, quel que soit l'item. */
.public-nav-item > i, .public-nav .dropdown > a > i {
  font-size: .95em;
  line-height: 1;
}

/* Sélecteur de langue : groupe compact, aligné verticalement sur les items. */
.public-nav .public-lang { gap: .15rem; }
.public-nav .public-lang .public-nav-item { padding-left: .6rem; padding-right: .6rem; }

/* En-tête à deux niveaux (≥1200px) : le titre occupe toute la 1re ligne,
   la navigation prend une 2e ligne pleine largeur. FR/EN + CTA à droite. */
@media (min-width: 1200px) {
  .public-nav {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: .15rem;
    padding-top: .5rem;
    border-top: 1px solid var(--bord);
  }
  .public-nav .public-lang { margin-left: auto; }   /* pousse FR/EN et le CTA à droite */
}

.public-nav-item:hover, .public-nav .dropdown > a:hover {
  background: var(--creme);
  color: var(--encre);
}

.public-nav-item.is-active { background: var(--encre); color: var(--papier); }
.public-nav-item.is-active:hover { background: var(--encre); color: var(--papier); }

.public-nav-cta {
  background: var(--terre);
  color: #fff !important;
  font-weight: 600;
}
.public-nav-cta:hover { background: var(--terre); color: #fff !important; filter: brightness(.92); }

/* ─── Dropdowns ─── */
.public-nav .dropdown-menu {
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  box-shadow: 0 24px 48px -20px rgba(15,14,13,.25);
  padding: .6rem;
  min-width: 280px;
  background: var(--papier);
  margin-top: .35rem;
}

.public-nav .dropdown-item {
  font-family: var(--famille-corps);
  font-weight: 500;
  font-size: .9rem;
  border-radius: var(--r-s);
  padding: .55rem .8rem;
  color: var(--encre);
  display: flex;
  align-items: center;
  gap: .55rem;
}

.public-nav .dropdown-item:hover, .public-nav .dropdown-item:focus {
  background: var(--terre);
  color: #fff;
}

.public-nav .dropdown-item .pastille {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--gris-clair);
}

.public-nav .dropdown-header {
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
  padding: .8rem .8rem .4rem;
}

.public-nav .dropdown-divider { border-top: 1px solid var(--bord); margin: .4rem 0; }

.public-nav .dropdown-toggle::after { display: none; }
.public-nav .dropdown > a .caret { font-size: .65rem; margin-left: .15rem; opacity: .6; }

/* ─── Bouton menu (icône + libellé « Menu ») ─── */
.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 44px;
  height: 44px;
  padding: 0 .7rem;
  background: none;
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  line-height: 1;
  color: var(--encre);
  cursor: pointer;
  transition: background .15s ease;
}
.nav-toggle .bi { font-size: 1.35rem; }
.nav-toggle-label {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.nav-toggle:hover { background: var(--creme); }
.nav-toggle:active { transform: scale(.97); }

/* ─── Menu mobile — immersif liturgique ─── */
.mobile-menu.offcanvas { background: var(--papier); width: min(380px, 92vw); }

/* Zone 1 — en-tête liturgique */
.mobile-menu-hero {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: 1.15rem 1.2rem 2.5rem;
  background: var(--terre);            /* repli plein (blanc lisible AA) si color-mix non supporté */
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--terre) 88%, #000), var(--terre-foncé));
  color: #fff; border: 0;
}
.mobile-menu-hero .mobile-menu-marque {
  display: flex; align-items: center; gap: .55rem; min-width: 0;
  font-family: var(--famille-titres); font-size: 1.05rem; line-height: 1.05;
  text-transform: uppercase; letter-spacing: .02em;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.mobile-menu-hero .mobile-menu-marque > span:last-child {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mobile-menu-pastille {
  flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.22);
}
.mobile-menu-close {
  margin-left: auto; flex-shrink: 0; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); border: 0; border-radius: 50%;
  color: #fff; font-size: 1rem; cursor: pointer; transition: background .15s ease;
}
.mobile-menu-close:hover { background: rgba(255,255,255,.3); }
.mobile-menu-date {
  flex: 1 0 100%; margin-top: .6rem;
  font-family: var(--famille-accents); font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* Corps (défile) : en-tête pleine largeur + contenu encarté dans .mobile-menu-inner */
.mobile-menu-corps { display: flex; flex-direction: column; padding: 0 0 1.9rem; }
.mobile-menu-inner { display: flex; flex-direction: column; padding: 0 1rem; }

/* Zone 2 — Messe du jour en vedette (au-dessus de l'en-tête relatif) */
.mobile-menu-vedette {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: .85rem;
  margin: -1.7rem .05rem 0; padding: .95rem 1rem;
  background: #fff; border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
  text-decoration: none; color: var(--encre);
}
.mobile-menu-vedette-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--creme);            /* repli plein si color-mix non supporté */
  background: color-mix(in srgb, var(--terre) 16%, #fff);
  color: var(--terre-foncé); font-size: 1.2rem;
}
.mobile-menu-vedette-tx { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.mobile-menu-vedette-titre { font-family: var(--famille-accents); font-weight: 700; font-size: .98rem; }
.mobile-menu-vedette-sous { font-size: .78rem; color: var(--gris); }
.mobile-menu-vedette > .bi { color: var(--terre); font-size: 1.05rem; }
.mobile-menu-vedette.is-active { box-shadow: 0 0 0 2px var(--terre), 0 12px 26px rgba(0,0,0,.14); }

/* Bouton « Me géolocaliser » — action mobile prioritaire */
.mobile-menu-geoloc {
  display: flex; align-items: center; gap: .8rem;
  margin: 1rem .05rem 0; padding: .8rem .95rem;
  background: var(--terre); color: #fff; border-radius: 12px;
  text-decoration: none; box-shadow: 0 8px 20px rgba(0,0,0,.16);
}
.mobile-menu-geoloc:hover { filter: brightness(.95); color: #fff; }
.mobile-menu-geoloc:active { transform: scale(.99); }
.mobile-menu-geoloc-ic {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.2); font-size: 1.1rem;
}
.mobile-menu-geoloc-tx { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.mobile-menu-geoloc-titre {
  font-family: var(--famille-accents); font-weight: 700; font-size: .92rem;
  text-transform: uppercase; letter-spacing: .04em;
}
.mobile-menu-geoloc-sous { font-size: .74rem; opacity: .85; }
.mobile-menu-geoloc > .bi { opacity: .8; flex: 0 0 auto; }

/* Zone 3 — tuiles d'accès rapide */
.mobile-menu-tuiles {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .65rem;
  margin: 1.1rem .05rem 0;
}
.mobile-menu-tuile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; min-height: 84px; padding: .9rem .5rem;
  background: var(--creme); border-radius: var(--r-m);
  text-decoration: none; color: var(--encre); text-align: center;
  transition: background .15s ease, transform .1s ease;
}
.mobile-menu-tuile i { font-size: 1.4rem; color: var(--terre); }
.mobile-menu-tuile span {
  font-family: var(--famille-accents); font-weight: 700;
  font-size: .76rem; letter-spacing: .05em; text-transform: uppercase;
}
.mobile-menu-tuile:hover { background: var(--bord); }
.mobile-menu-tuile:active { transform: scale(.97); }

/* Zone 4 — navigation : lignes + dropdowns, séparées par de fins filets */
.mobile-menu-groupe { display: flex; flex-direction: column; margin-top: 1.5rem; }
.mobile-menu-groupe > .mobile-menu-item,
.mobile-menu-groupe > .mobile-menu-acc { border-top: 1px solid var(--bord); }
.mobile-menu-groupe > *:first-child { border-top: 0; }
.mobile-menu-item {
  display: flex; align-items: center; gap: .95rem;
  min-height: 56px; padding: .9rem .6rem; border-radius: var(--r-s);
  font-family: var(--famille-accents); font-weight: 500;
  font-size: .92rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.mobile-menu-item > i:first-child {
  font-size: 1.1rem; width: 1.5rem; text-align: center; color: var(--terre); flex-shrink: 0;
}
.mobile-menu-item > svg:first-child {            /* icône vectorielle (ex. croix Liturgie) */
  width: 1.5rem; height: 1.25rem; color: var(--terre); flex-shrink: 0; display: inline-block;
}
.mobile-menu-item.is-active > svg:first-child { color: var(--papier); }
.mobile-menu-item > span:not(.mobile-menu-puce) { flex: 1 1 auto; min-width: 0; }
.mobile-menu-item .chevron { font-size: .8rem; color: var(--gris); opacity: .7; }
.mobile-menu-item:hover { background: var(--creme); }
.mobile-menu-item:active { background: var(--bord); }
.mobile-menu-item.is-active { background: var(--encre); color: var(--papier); }
.mobile-menu-item.is-active > i:first-child,
.mobile-menu-item.is-active .chevron { color: var(--papier); opacity: .9; }

.mobile-menu-item--sub {
  font-family: var(--famille-corps); font-weight: 500;
  font-size: .9rem; letter-spacing: 0; text-transform: none;
  min-height: 44px; color: var(--encre-doux);
}
.mobile-menu-puce {
  flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--terre); opacity: .55; margin: 0 .3rem 0 .45rem;
}

/* Accordéons */
.mobile-menu-acc-trigger { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; }
.mobile-menu-acc-trigger .chevron { transition: transform .2s ease; }
.mobile-menu-acc-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.mobile-menu-sous { margin: .15rem 0 .65rem 1.05rem; padding-left: .6rem; border-left: 2px solid var(--bord); }
.mobile-menu-sous-label {
  font-family: var(--famille-accents); font-weight: 600;
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gris); padding: .55rem .3rem .15rem .5rem;
}

/* Pied */
.mobile-menu-pied {
  margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--bord);
  display: flex; flex-direction: column; gap: .85rem;
}
.mobile-menu-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1rem; background: var(--terre); color: #fff; border-radius: var(--r-s);
  font-family: var(--famille-accents); font-weight: 600;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
.mobile-menu-cta:hover { filter: brightness(.93); color: #fff; }
.mobile-menu-lang { display: flex; gap: 4px; background: var(--creme); padding: 4px; border-radius: var(--r-s); }
.mobile-menu-lang button {
  flex: 1 1 0; padding: .55rem; border: 0; border-radius: calc(var(--r-s) - 3px);
  background: transparent; font-family: var(--famille-accents); font-weight: 600;
  font-size: .78rem; letter-spacing: .08em; color: var(--encre); cursor: pointer;
}
.mobile-menu-lang button.is-active { background: var(--encre); color: var(--papier); }

/* Dévoilement échelonné à l'ouverture (désactivé si reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu.offcanvas.show .mobile-menu-vedette,
  .mobile-menu.offcanvas.show .mobile-menu-tuiles,
  .mobile-menu.offcanvas.show .mobile-menu-groupe > *,
  .mobile-menu.offcanvas.show .mobile-menu-pied { animation: mm-reveal .34s ease both; }
  .mobile-menu.offcanvas.show .mobile-menu-vedette { animation-delay: .04s; }
  .mobile-menu.offcanvas.show .mobile-menu-tuiles  { animation-delay: .09s; }
  .mobile-menu.offcanvas.show .mobile-menu-groupe > * { animation-delay: .14s; }
  .mobile-menu.offcanvas.show .mobile-menu-pied    { animation-delay: .2s; }
}
@keyframes mm-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ═════════════════════════════════════════════════════════════════
   MAIN
   ═════════════════════════════════════════════════════════════════ */
.public-main { flex-grow: 1; }

.public-section { padding: 5rem 0; }
.public-section--creme { background: var(--creme); }
.public-section--encre { background: var(--encre); color: var(--papier); }
.public-section--encre .display { color: var(--papier); }
.public-section--encre .eyebrow { color: var(--gris-clair); }

.public-section-tete { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 2rem; }

/* ═════════════════════════════════════════════════════════════════
   HOMEPAGE HERO — GÉOLOCALISATION
   ═════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: calc(100vh - 76px - 5px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 800px 600px at 90% 10%, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(180deg, var(--papier), var(--creme));
}

.hero::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 720px; height: 720px;
  border-radius: 50%;
  background: var(--liturgie-couleur);
  opacity: .12;
  filter: blur(40px);
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
  padding-top: 4rem;
  padding-bottom: 4rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ─── Hero 2 colonnes : titre à gauche, panneau géoloc à droite ─── */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
  gap: 4rem;
  align-items: center;
}

/* Hero empilé (panneau sous le texte) sous le seuil desktop — aligné sur la
   bascule de la navbar (xl, 1200px) pour couvrir tous les téléphones/tablettes. */
@media (max-width: 1199.98px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);   /* min 0 : la piste ne dépasse jamais le conteneur (sinon le panneau déborde et est coupé) */
    gap: 2.5rem;
  }
  /* Hero empilé → le panneau géoloc passe AVANT le pitch : le bouton
     « Me géolocaliser » reste visible juste sous le header collant, et les
     résultats s'affichent bien cadrés (cf. scroll-margin-top plus bas).
     Cohérent avec la vocation « trouver sa paroisse » de la page d'accueil. */
  .hero-panel-wrap { order: 1; }
  .hero-pitch      { order: 2; }
}

.hero-pitch { display: flex; flex-direction: column; min-width: 0; }
.hero-panel-wrap { width: 100%; min-width: 0; }
.hero-panel-wrap .geoloc-panel { max-width: none; width: 100%; }

/* Ancre #trouver (menu « La plus proche de moi ») + cible du scrollIntoView
   après géolocalisation : compenser le header collant (position:sticky) pour
   ne pas planquer le titre « Les 3 paroisses les plus proches » dessous. */
#trouver, .geoloc-resultats { scroll-margin-top: 90px; }
@media (min-width: 1200px) {
  #trouver, .geoloc-resultats { scroll-margin-top: 120px; }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .8rem;
  background: var(--terre);
  color: #fff;
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 100px;
  margin-bottom: 1.5rem;
  width: max-content;
}
.hero-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.hero-titre {
  font-family: var(--famille-titres);
  font-weight: 400;
  font-size: calc(clamp(2.8rem, 7vw, 5.5rem) * var(--echelle-titres));
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  color: var(--encre);
}

.hero-titre-accent { color: var(--terre); display: block; }

.hero-sous {
  font-family: var(--famille-corps);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--encre-doux);
  max-width: 580px;
  margin: 0 0 2.5rem;
  line-height: 1.5;
}

/* ─── Géolocalisation : panneau ─── */
.geoloc-panel {
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  padding: 1.5rem;
  box-shadow: 0 30px 60px -30px rgba(15,14,13,.2);
  max-width: 640px;
}

.geoloc-titre {
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 1rem;
}

.geoloc-cta {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background: var(--encre);
  color: var(--papier);
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--r-m);
  padding: 1.1rem 1.5rem;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}
.geoloc-cta:hover { background: var(--terre); color: #fff; }
.geoloc-cta:active { transform: scale(.99); }
.geoloc-cta:disabled { opacity: .5; cursor: not-allowed; }

.geoloc-cta-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  font-size: 1.1rem;
}

.geoloc-ou {
  text-align: center;
  font-family: var(--famille-accents);
  font-size: .75rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 1rem 0;
  position: relative;
}
.geoloc-ou::before, .geoloc-ou::after {
  content: "";
  position: absolute;
  top: 50%; width: 35%;
  height: 1px; background: var(--bord);
}
.geoloc-ou::before { left: 0; }
.geoloc-ou::after { right: 0; }

.geoloc-search {
  display: flex;
  align-items: center;
  gap: .55rem;                 /* le libellé ne touche jamais le bouton */
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  padding: 0 1rem;
  background: var(--papier);
  transition: border-color .15s ease;
}
/* Le champ interne neutralise son outline (le conteneur EST le champ visuel) :
   l'anneau de focus est donc porté ici, sinon le focus clavier serait invisible. */
.geoloc-search:focus-within {
  border-color: var(--encre);
  box-shadow: 0 0 0 3px rgba(15, 14, 13, .14);
}

.geoloc-search input {
  flex: 1 1 0;
  min-width: 0;              /* laisse le champ rétrécir : jamais de débordement */
  border: 0;
  background: transparent;
  font-family: var(--famille-corps);
  font-size: 1rem;
  padding: .9rem 0;
  outline: none;
  /* Le libellé indicatif est plus long que le champ sur un téléphone : il doit
     s'abréger proprement, pas se faire trancher en plein mot. */
  text-overflow: ellipsis;
}
.geoloc-search button { flex-shrink: 0; white-space: nowrap; }

.geoloc-search button {
  background: transparent;
  border: 0;
  padding: 0 .25rem;
  cursor: pointer;
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--terre);
}
.geoloc-search button:hover { color: var(--terre-foncé); }
/* Sur téléphone le mot « Chercher » mangeait la moitié du champ : le libellé
   indicatif se réduisait à « S… ». On garde le mot pour les lecteurs d'écran
   (il porte le nom accessible du bouton) et on n'affiche qu'une flèche. */
.geoloc-search button .bi { display: none; font-size: 1.15rem; line-height: 1; }
@media (max-width: 600px) {
  .geoloc-search-mot {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .geoloc-search button { padding: 0 .1rem; }
  .geoloc-search button .bi { display: block; }
}

/* ─── Résultats nearest ─── */
.geoloc-resultats { margin-top: 2rem; display: none; }
.geoloc-resultats.is-actif { display: block; }

.geoloc-resultats-titre {
  font-family: var(--famille-titres);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: .005em;
  margin: 0 0 1rem;
  color: var(--encre);
}

.geoloc-erreur {
  background: #fdecea;
  border: 1px solid #f5b7b1;
  color: #922;
  border-radius: var(--r-m);
  padding: 1rem 1.2rem;
  margin-top: 1rem;
  font-size: .9rem;
}

.proche-card {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  margin-bottom: .8rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
.proche-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(15,14,13,.2);
}

.proche-photo {
  width: 76px; height: 76px;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--creme);
  display: flex; align-items: center; justify-content: center;
  color: var(--gris);
}
.proche-photo img { width: 100%; height: 100%; object-fit: cover; }
.proche-photo .icon {
  font-family: var(--famille-titres);
  font-size: 1.4rem;
  color: var(--gris);
}

.proche-nom {
  font-family: var(--famille-titres);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.1;
  margin: 0 0 .25rem;
}
.proche-nom a { color: var(--encre); text-decoration: none; }
.proche-nom a:hover { color: var(--terre); }

.proche-meta {
  font-family: var(--famille-corps);
  font-size: .82rem;
  color: var(--gris);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
}

.proche-distance {
  font-family: var(--famille-titres);
  font-size: 2rem;
  line-height: 1;
  color: var(--terre);
  text-align: center;
  margin-bottom: .25rem;
}
.proche-distance small {
  display: block;
  font-family: var(--famille-accents);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
  margin-top: .15rem;
}

.proche-actions {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: end;
}

.btn-yaller {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--terre);
  color: #fff;
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .55rem .9rem;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
}
.btn-yaller:hover { color: #fff; filter: brightness(.92); }

.btn-fiche {
  font-family: var(--famille-accents);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
  text-decoration: none;
}
.btn-fiche:hover { color: var(--encre); }

/* ─── Stats hero ─── */
.hero-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--bord);
  flex-wrap: wrap;
}
.hero-stat { display: flex; flex-direction: column; gap: .25rem; }
.hero-stat-val {
  font-family: var(--famille-titres);
  font-size: calc(2.4rem * var(--echelle-titres));
  line-height: 1;
  color: var(--encre);
}
.hero-stat-lbl {
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ═════════════════════════════════════════════════════════════════
   TEMPS FORTS — rail de cartes glissant sous le hero
   Annonces du super-admin, fêtes liturgiques, événements à la une.

   Règle non négociable : le débordement horizontal vit sur `.tf-rail`
   SEUL. La page ne déborde jamais, même à 320 px — c'est ce qui permet au
   rail d'être plus large que l'écran sans casser la mise en page.

   Le rail est purement CSS : `scroll-snap` + `overflow-x` suffisent à le
   rendre glissable au doigt. `temps-forts.js` n'ajoute que l'avance
   automatique et les flèches, et se retire sous `prefers-reduced-motion`.
   ═════════════════════════════════════════════════════════════════ */
.tf {
  padding: 3.5rem 0 3rem;
  /* Gouttière du rail : aligne la première carte sur la colonne de texte du
     `.container` (max-width 1240 + 1.5rem de marge) tout en laissant le rail
     lécher les deux bords de l'écran. */
  --tf-gouttiere: max(1.5rem, calc((100% - 1240px) / 2 + 1.5rem));
  --tf-gap: 1rem;
}

/* Sur-titre et flèches sur la même ligne, titre en dessous sur toute la
   largeur : en mobile, mettre les flèches à côté du titre display l'écraserait
   à 320 px. En grand écran (plus bas) les flèches se recentrent sur les deux
   lignes, à droite. */
.tf-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  margin-bottom: 1.6rem;
}
.tf-eyebrow { grid-area: 1 / 1; }
.tf-fleches { grid-area: 1 / 2; }
.tf-titre { grid-area: 2 / 1 / 3 / -1; }

.tf-titre {
  font-family: var(--famille-titres);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  margin: .35rem 0 0;
  color: var(--encre);
  overflow-wrap: break-word;   /* un mot long se coupe plutôt qu'il ne déborde */
}

/* Masquées par défaut : sans JavaScript elles ne feraient rien, et le script
   ne lève l'attribut `hidden` que si le rail déborde vraiment.
   `:not([hidden])` est indispensable — une règle d'auteur `display: flex`
   l'emporterait sur la feuille du navigateur et les rendrait visibles alors
   que le script les a masquées. */
.tf-fleches { display: none; gap: .5rem; flex-shrink: 0; }
.tf-fleches:not([hidden]) { display: flex; }
.tf-fleche {
  /* 44 px : cible tactile confortable au doigt. */
  width: 44px; height: 44px;
  border: 1px solid var(--bord-dur);
  border-radius: 50%;
  background: transparent;
  color: var(--encre);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tf-fleche:hover { background: var(--encre); color: var(--papier); }
.tf-fleche[disabled] { opacity: .3; cursor: default; }
.tf-fleche[disabled]:hover { background: transparent; color: var(--encre); }

.tf-rail {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: .25rem 0 1.25rem;
  /* Sans cela, `scroll-snap-align: start` calerait la première carte sur le
     bord du scrollport, donc SOUS la gouttière : elle arriverait collée au
     bord de l'écran au lieu d'être alignée sur la colonne de texte. */
  scroll-padding-left: var(--tf-gouttiere);
}
.tf-rail::-webkit-scrollbar { display: none; }
.tf-rail:focus-visible { outline: 2px solid var(--encre); outline-offset: -2px; }

.tf-piste {
  display: flex;
  gap: var(--tf-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Gouttières du rail. Côté DÉBUT, une simple marge suffit. Côté FIN, ni le
   padding du rail, ni celui de la piste, ni la marge de la dernière carte ne
   marchent : le navigateur exclut l'espace de fin de la zone scrollable, et la
   dernière carte se collait au bord droit en fin de course. Seul un vrai
   élément flex est compté — d'où ce bloc vide, amputé du `gap` qui le précède
   pour retomber exactement sur la largeur de gouttière. */
.tf-carte:first-child { margin-inline-start: var(--tf-gouttiere); }
.tf-piste::after {
  content: "";
  flex: 0 0 calc(var(--tf-gouttiere) - var(--tf-gap));
}

.tf-carte {
  /* 78vw en mobile : une carte pleine + le liseré de la suivante, l'affordance
     qui dit « ça glisse ». Jamais plus de 300 px sur grand écran. */
  flex: 0 0 clamp(228px, 78vw, 300px);
  scroll-snap-align: start;
  --tf-filet: var(--terre);
}

.tf-lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 190px;
  padding: 1.1rem 1.15rem 1rem;
  border: 1px solid var(--bord);
  border-left: 4px solid var(--tf-filet);
  border-radius: var(--r-m);
  background: var(--papier);
  color: var(--encre);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.tf-lien:hover {
  color: var(--encre);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -22px rgba(15,14,13,.34);
}

.tf-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
}
.tf-quand {
  font-family: var(--famille-accents);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
}
.tf-icone { color: var(--tf-filet); font-size: 1.05rem; line-height: 1; }

.tf-surtitre {
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
}
.tf-nom {
  font-family: var(--famille-titres);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.02;
  font-size: 1.32rem;
  margin: .3rem 0 0;
  /* Trois lignes maximum : au-delà, toutes les cartes du rail perdraient leur
     alignement. Les noms de fête AELF peuvent être très longs. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tf-bas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .6rem;
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid var(--bord);
}
.tf-lieu {
  font-size: .78rem;
  line-height: 1.35;
  color: var(--gris);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tf-fleche-carte { color: var(--terre); flex-shrink: 0; font-size: 1.05rem; }

/* ── Carte ANNONCE : inversée, c'est la voix du promoteur ──
   Sur fond sombre l'accent est `--accent-sombre`, JAMAIS `--terre` : les jours
   liturgiques pâles (blanc/doré/rose) `--terre` vaut l'encre, et on aurait du
   noir sur noir. Fond plein posé avant tout, sans `color-mix` (cible 3G). */
.tf-carte--annonce { --tf-filet: var(--accent-sombre); }
.tf-carte--annonce .tf-lien {
  background: var(--encre);
  color: var(--papier);
  border-color: var(--encre);
}
.tf-carte--annonce .tf-surtitre,
.tf-carte--annonce .tf-lieu { color: var(--gris-clair); }
.tf-carte--annonce .tf-bas { border-top-color: rgba(251,248,241,.18); }
.tf-carte--annonce .tf-icone,
.tf-carte--annonce .tf-fleche-carte { color: var(--accent-sombre); }
.tf-carte--annonce a.tf-lien:hover { color: var(--papier); }

@media (min-width: 768px) {
  .tf { padding: 4.5rem 0 3.5rem; --tf-gap: 1.25rem; }
  /* Assez de place : les flèches se centrent verticalement à droite du bloc
     sur-titre + titre, au lieu de rester sur la ligne du sur-titre. Le titre
     se replie alors sur la première colonne — sinon, en s'étendant sur toute
     la largeur, il passerait sous les flèches dès qu'il est long. */
  .tf-fleches { grid-area: 1 / 2 / 3 / 3; align-self: center; }
  .tf-titre { grid-area: 2 / 1 / 3 / 2; }
}

/* ═════════════════════════════════════════════════════════════════
   FICHES DIOCÈSES
   ═════════════════════════════════════════════════════════════════ */
.dioceses-grid {
  display: grid;
  /* `min(280px, 100%)` : sur un écran étroit — ou en gros texte système —
     la colonne ne peut plus imposer 280 px et déborder la page. */
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
}

.fiche-diocese {
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border-radius: var(--r-l);
  overflow: hidden;
  text-decoration: none;
  color: var(--encre);
  border: 1px solid var(--bord);
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
}
.fiche-diocese:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px -28px rgba(15,14,13,.3);
  color: var(--encre);
}

.fiche-diocese-image {
  aspect-ratio: 4/3;
  background: var(--encre);
  overflow: hidden;
  position: relative;
}
.fiche-diocese-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.fiche-diocese:hover .fiche-diocese-image img { transform: scale(1.05); }

.fiche-diocese-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.65));
}

.fiche-diocese-image-vide {
  display: flex; align-items: center; justify-content: center;
  background: var(--terre);
  color: rgba(255,255,255,.9);
  height: 100%;
  font-family: var(--famille-titres);
  font-size: 3rem;
}

.fiche-diocese-pastille {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 2;
  background: rgba(255,255,255,.95);
  border-radius: 100px;
  padding: .35rem .75rem;
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--encre);
  backdrop-filter: blur(4px);
}

.fiche-diocese-corps { padding: 1.25rem 1.5rem 1.5rem; }

.fiche-diocese-nom {
  font-family: var(--famille-titres);
  font-size: 1.7rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 .35rem;
  line-height: 1.05;
}

.fiche-diocese-meta {
  font-family: var(--famille-corps);
  font-size: .85rem;
  color: var(--gris);
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* ═════════════════════════════════════════════════════════════════
   LISTES (événements, homélies)
   ═════════════════════════════════════════════════════════════════ */
.liste { display: flex; flex-direction: column; }

.liste-row {
  display: grid;
  /* `minmax(0, …)` : sans lui, le mot le plus long du titre impose sa largeur
     à toute la ligne et élargit la page en gros texte système. */
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--bord);
}

/* La ligne entière est un lien (les flèches ne sont plus décoratives). */
a.liste-row { color: inherit; text-decoration: none; cursor: pointer; }
a.liste-row:hover .liste-row-titre { color: var(--terre); }
a.liste-row:hover .liste-row-arrow { color: var(--terre); transform: translateX(5px); }

.liste-row-date {
  font-family: var(--famille-titres);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--encre);
}
.liste-row-date small {
  display: block;
  font-family: var(--famille-accents);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gris);
  margin-top: .3rem;
}

.liste-row-titre {
  font-family: var(--famille-titres);
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: .005em;
  margin: 0 0 .3rem;
  line-height: 1.15;
  overflow-wrap: break-word;
}
.liste-row-titre a { color: var(--encre); text-decoration: none; }
.liste-row-titre a:hover { color: var(--terre); }

.liste-row-meta { font-family: var(--famille-corps); font-size: .85rem; color: var(--gris); }

.liste-row-arrow {
  font-family: var(--famille-titres);
  font-size: 1.6rem;
  color: var(--gris);
  transition: color .15s ease, transform .15s ease;
}

@media (max-width: 720px) {
  /* `minmax(0, …)` : la colonne du titre doit pouvoir descendre sous la
     largeur de son mot le plus long, sinon elle élargit toute la page. */
  .liste-row { grid-template-columns: 90px minmax(0, 1fr); gap: 1rem; }
  .liste-row-arrow { display: none; }
}

/* ═════════════════════════════════════════════════════════════════
   PAGE DIOCÈSE / DOYENNÉ — entêtes
   ═════════════════════════════════════════════════════════════════ */
.entete-page {
  background: var(--encre);
  color: var(--papier);
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}

.entete-page::before {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 600px; height: 600px;
  border-radius: 50%;
  /* Aplat décoratif → vraie teinte AELF (comme .hero::before et
     .paroisse-hero-vide-bg::before). Avec --terre, le halo disparaissait les
     jours pâles puisque l'accent y vaut l'encre. */
  background: var(--liturgie-couleur);
  opacity: .25;
  filter: blur(60px);
}

.entete-page .container { position: relative; z-index: 1; }

.entete-eyebrow {
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(251,248,241,.7);
  margin-bottom: 1.5rem;
}
.entete-eyebrow a { color: rgba(251,248,241,.85); }
.entete-eyebrow a:hover { color: var(--papier); }

.entete-titre {
  font-family: var(--famille-titres);
  font-size: calc(clamp(3rem, 8vw, 6rem) * var(--echelle-titres));
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: var(--papier);
}

.entete-meta {
  font-family: var(--famille-accents);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(251,248,241,.85);
  max-width: 640px;
}

/* ─── Listes paroisses ─── */
.paroisses-grid {
  display: grid;
  /* `min(280px, 100%)` : sur un écran étroit — ou en gros texte système —
     la colonne ne peut plus imposer 280 px et déborder la page. */
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1rem;
}

.paroisse-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  text-decoration: none;
  color: var(--encre);
  border-left: 4px solid var(--terre);
  transition: transform .12s ease, box-shadow .12s ease;
}
.paroisse-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(15,14,13,.2);
  color: var(--encre);
}

.paroisse-card-nom {
  font-family: var(--famille-titres);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.15;
}

.paroisse-card-meta {
  font-family: var(--famille-corps);
  font-size: .82rem;
  color: var(--gris);
}

/* ─── Doyennés (liste) ─── */
.doyennes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.doyenne-card {
  display: block;
  padding: 1.5rem;
  background: var(--creme);
  border-radius: var(--r-m);
  text-decoration: none;
  color: var(--encre);
  border-bottom: 4px solid var(--terre);
}
.doyenne-card:hover { background: var(--encre); color: var(--papier); }
.doyenne-card-nom {
  font-family: var(--famille-titres);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.05;
  margin-bottom: .25rem;
}
.doyenne-card-meta { font-family: var(--famille-accents); font-size: .85rem; color: inherit; opacity: .75; }

/* ═════════════════════════════════════════════════════════════════
   PAGE PAROISSE
   ═════════════════════════════════════════════════════════════════ */
.paroisse-hero {
  position: relative;
  background: var(--encre);
  color: var(--papier);
  padding: 0;
  overflow: hidden;
}

.paroisse-hero-cover { position: absolute; inset: 0; z-index: 0; }
.paroisse-hero-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.paroisse-hero-cover::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,14,13,.5), rgba(15,14,13,.9)),
              linear-gradient(135deg, var(--liturgie-couleur) 0%, transparent 60%);
  mix-blend-mode: multiply;
}

.paroisse-hero-vide-bg { position: absolute; inset: 0; background: var(--encre); }
.paroisse-hero-vide-bg::before {
  content: "";
  position: absolute;
  top: -30%; right: -20%;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: var(--liturgie-couleur);
  opacity: .3;
  filter: blur(80px);
}

.paroisse-hero-inner { position: relative; z-index: 1; padding: 3.5rem 0 3rem; }
@media (max-width: 600px) {
  .paroisse-hero-inner { padding: 2.5rem 0 2rem; }
}

.paroisse-hero-eyebrow {
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(251,248,241,.7);
  margin-bottom: 1.5rem;
}
.paroisse-hero-eyebrow a { color: rgba(251,248,241,.85); }
.paroisse-hero-eyebrow a:hover { color: var(--papier); }

.paroisse-hero-type {
  display: inline-block;
  padding: .3rem .8rem;
  background: var(--terre);
  color: #fff;
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 100px;
  margin-bottom: 1.5rem;   /* la pastille suit le nom : on la rapproche de lui et on l'écarte de la suite */
}

.paroisse-hero-titre {
  font-family: var(--famille-titres);
  font-size: calc(clamp(3rem, 8vw, 6rem) * var(--echelle-titres));
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: var(--papier);
  max-width: 980px;
}

.paroisse-hero-patron {
  font-family: var(--famille-accents);
  font-style: italic;
  font-size: 1.25rem;
  color: rgba(251,248,241,.85);
  margin: 0 0 2rem;
}

.paroisse-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.4rem;
  border-radius: 100px;
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform .05s ease, filter .15s ease;
}
.btn-pill:active { transform: scale(.98); }

.btn-pill-clair { background: var(--papier); color: var(--encre); }
.btn-pill-clair:hover { background: var(--papier); color: var(--encre); filter: brightness(.95); }

.btn-pill-ghost {
  background: transparent;
  color: var(--papier);
  box-shadow: inset 0 0 0 1.5px rgba(251,248,241,.4);
}
.btn-pill-ghost:hover { background: rgba(251,248,241,.1); color: var(--papier); }

/* ─── Corps paroisse ─── */
/* Barre d'ancres : navigation interne de la fiche, collante juste sous le
   header public (76px). Permet de sauter à une section sans tout défiler. */
.paroisse-ancres {
  position: sticky;
  top: 76px;
  z-index: 90;
  background: rgba(251, 248, 241, .95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bord);
}
.paroisse-ancres-scroll {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: .5rem 0;
}
.paroisse-ancres-scroll::-webkit-scrollbar { display: none; }
.paroisse-ancres a {
  flex: 0 0 auto;
  font-family: var(--famille-accents);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre);
  padding: .38rem .8rem;
  border-radius: 999px;
  white-space: nowrap;
}
.paroisse-ancres a:hover { background: var(--bord); color: var(--encre); }

.paroisse-corps {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 4rem;
  padding: 3rem 0;
}
@media (max-width: 900px) {
  .paroisse-corps { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem 0; }
}

.bloc { margin-bottom: 1.6rem; }
/* Décalage d'ancrage : header (76px) + barre d'ancres (~46px) + marge, pour
   que le titre visé ne finisse pas caché sous les deux barres collantes. */
.bloc[id] { scroll-margin-top: 130px; }

.bloc-titre {
  font-family: var(--famille-titres);
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: .005em;
  margin: 0 0 1.1rem;
  padding-bottom: .55rem;
  border-bottom: 3px solid var(--terre);
  display: inline-block;
}
@media (max-width: 600px) {
  .bloc-titre { font-size: 1.25rem; margin-bottom: .9rem; padding-bottom: .5rem; }
}
/* Le bloc « Horaires des messes » reste la vedette : ses heures sont
   volontairement grosses (cf. .hj-h) même si les titres de section
   ont été réduits. */

.lead {
  font-family: var(--famille-corps);
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--encre);
  margin: 0 0 1rem;
}

.public-richtext { font-size: 1.05rem; line-height: 1.7; }
.public-richtext > * + * { margin-top: 1rem; }
.public-richtext h2, .public-richtext h3 {
  font-family: var(--famille-titres);
  text-transform: uppercase;
  letter-spacing: .005em;
  margin-top: 1.5rem;
}

/* Texte long replié à 4 lignes (« Notre histoire » des vieilles paroisses).
   La classe est posée par lire-suite.js, jamais dans le HTML : sans JS le
   texte s'affiche en entier. Hauteur en em → suit la taille de texte système. */
.est-replie { position: relative; max-height: 6.8em; overflow: hidden; }
.est-replie::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2.2em;   /* ne mange que la fin de la 4ᵉ ligne, pas la ligne entière */
  /* rgba explicite : `transparent` vire au gris sur les vieux WebKit. */
  background: linear-gradient(rgba(251, 248, 241, 0), var(--papier));
  pointer-events: none;
}

.repli-bouton {
  margin-top: .8rem;
  padding: .2rem 0;
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terre);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--terre);
  cursor: pointer;
}
/* Chevron en ::after : le JS réécrit le libellé du bouton, il ne peut donc
   pas l'effacer. Il pivote sur aria-expanded, comme `.deplier` de l'accueil. */
.repli-bouton::after {
  content: "↓";
  display: inline-block;
  margin-left: .5em;
  transition: transform .25s ease;
}
.repli-bouton[aria-expanded="true"]::after { transform: rotate(180deg); }

.repli-bouton:hover { color: var(--encre); border-bottom-color: var(--encre); }
.repli-bouton:focus-visible { outline: 2px solid var(--terre); outline-offset: 3px; }

/* Horaires des messes — grille hebdo compacte (1 jour = 1 ligne).
   Chaque messe est une pastille « heure + intitulé » ; les pastilles
   se replient (wrap) au lieu de déborder sur les petits écrans 3G. */
.horaires-semaine { display: flex; flex-direction: column; }

.hj-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: .75rem 0;
  border-bottom: 1px solid var(--bord);
}
.hj-row:first-child { border-top: 1px solid var(--bord); }

/* Jour courant : liseré couleur liturgique + libellé accentué.
   (Pas de color-mix : compatibilité navigateurs mobiles anciens.) */
.hj-row.est-aujourdhui {
  border-left: 3px solid var(--liturgie-couleur, var(--terre));
  padding-left: .85rem;
  margin-left: -.85rem;
}
.hj-row.est-aujourdhui .hj-jour { color: var(--liturgie-couleur, var(--terre)); }

.hj-jour {
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
  padding-top: .3rem;
}
.hj-badge {
  display: block;
  font-size: .62rem;
  letter-spacing: .08em;
  margin-top: .15rem;
  color: var(--liturgie-couleur, var(--terre));
}

.hj-heures { display: flex; flex-wrap: wrap; gap: .5rem; }

.hj-pastille {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .32rem .7rem;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: var(--papier);
}
.hj-h {
  font-family: var(--famille-titres);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: var(--encre);
}
.hj-lib {
  font-family: var(--famille-corps);
  font-size: .9rem;
  color: var(--encre-doux);
  overflow-wrap: break-word;
}

@media (max-width: 600px) {
  .hj-row { grid-template-columns: 56px minmax(0, 1fr); gap: .6rem; }
  .hj-pastille { padding: .3rem .65rem; gap: .4rem; }
  .hj-h { font-size: 1.3rem; }
  .hj-lib { font-size: .82rem; }
}

/* Équipe */
.equipe-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: .85rem;
  align-items: center;
  padding: .7rem 0;
  border-bottom: 1px solid var(--bord);
}
.equipe-photo {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--creme);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--gris);
}
.equipe-photo img { width: 100%; height: 100%; object-fit: cover; }
.equipe-nom {
  font-family: var(--famille-titres);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .005em;
}
.equipe-fonction {
  font-family: var(--famille-accents);
  font-size: .78rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gris);
  margin-top: .2rem;
}

/* ═════════════════════════════════════════════════════════════════
   ÉVÉNEMENTS À LA UNE — bande juste sous la barre d'ancres
   Placés en HAUT et non en bas de fiche : le promoteur a constaté que
   personne ne défile jusqu'à une section de bas de page. C'est le seul
   bloc d'événements de la fiche paroisse, il n'est pas dupliqué plus bas.
   Rail horizontal au doigt : le nombre d'événements varie, une grille
   obligerait à tronquer. Aucun JS — `scroll-snap` fait tout.
   ═════════════════════════════════════════════════════════════════ */
.une-evts {
  background: var(--creme);
  border-bottom: 1px solid var(--bord);
  padding: 1.2rem 0 1.35rem;
  scroll-margin-top: 130px;   /* même décalage que .bloc[id] */
}

/* Titre à gauche, flèches à droite. `min-width: 0` sur le titre : sans lui,
   à 175 % de texte système il pousserait les flèches hors de l'écran. */
.une-evts-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}

.une-evts-titre {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terre);
  margin: 0;
}

/* Flèches un cran plus petites que celles des temps forts : la bande est un
   bandeau compact, 44 px y prendraient toute la hauteur de la tête. */
.une-evts-tete .tf-fleche { width: 38px; height: 38px; font-size: 1.2rem; }

.une-evts-rail {
  display: flex;
  gap: .7rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Le rail sort de la gouttière du .container pour filer bord à bord :
     la carte coupée à droite signale qu'il y a la suite. */
  margin: 0 -1.5rem;
  padding-left: 1.5rem;   /* PAS de padding-right, cf. ::after ci-dessous */
  /* Même piège que .tf-rail : sans cela `scroll-snap-align: start` cale la
     première carte sur le bord du scrollport, donc SOUS la gouttière. */
  scroll-padding-left: 1.5rem;
}
.une-evts-rail::-webkit-scrollbar { display: none; }
/* Gouttière de fin de course. Elle DOIT venir d'un vrai élément flex : Safari
   iOS ignore le padding-right d'un conteneur à défilement en fin de course.
   Et il ne faut pas cumuler les deux, sinon la gouttière droite fait le double
   de la gauche. Le `gap` compte aussi : .7 + .8 = les 1.5rem de gauche. */
.une-evts-rail::after { content: ""; flex: 0 0 .8rem; }

.une-evt {
  /* min() et non une largeur nue : à 175 % de texte système la carte doit
     rester dans la fenêtre (cf. débordement Huawei). */
  flex: 0 0 min(300px, 82%);
  scroll-snap-align: start;
  position: relative;          /* ancre le ::after du déclencheur */
  background: var(--papier);
  border: 1px solid var(--bord);
  border-left: 3px solid var(--terre);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  padding: .8rem .9rem .9rem;
  transition: box-shadow .15s ease, transform .15s ease;
}
.une-evt:hover { box-shadow: 0 6px 20px rgba(15,14,13,.10); }
/* Le focus clavier vit sur le bouton : on le remonte sur la carte entière,
   sinon seul le titre serait entouré alors que toute la carte est cliquable. */
.une-evt:focus-within { box-shadow: 0 0 0 2px var(--encre); }
.une-evt:focus-within .une-evt-declencheur:focus-visible { outline: none; }

/* Déclencheur de la modale : un vrai <button> (donc clavier + lecteur d'écran)
   dégrisé de tout style, dont le ::after couvre la carte entière. */
.une-evt-declencheur {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}
.une-evt-declencheur::after { content: ""; position: absolute; inset: 0; }

.une-evt-plus {
  display: block;
  margin-top: .55rem;
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terre);
}

.une-evt-quand {
  display: inline-block;
  background: var(--terre);
  color: var(--papier);
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: 999px;
  margin-bottom: .55rem;
}

.une-evt-date {
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: .3rem;
}

/* interligne + text-wrap: balance hérités du groupe des titres Anton */
.une-evt-titre {
  font-family: var(--famille-titres);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .005em;
  overflow-wrap: break-word;
  color: var(--encre);
  margin: 0;
}

.une-evt-lieu {
  font-size: .84rem;
  color: var(--gris);
  margin-top: .4rem;
  overflow-wrap: break-word;
}

/* ── Fiche détaillée d'un événement (modale Bootstrap) ────────────────────
   Une modale par événement, toute déclarative : aucun JavaScript maison.
   Le contenu complet est ici — image, dates, lieu, récurrence, description —
   la carte du rail n'en montre que l'essentiel. */
.evt-modal .modal-content {
  background: var(--papier);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  overflow: hidden;   /* rogne l'image sur les coins arrondis */
}

.evt-modal-tete { position: relative; }
/* Plafond en vh : sur un téléphone tenu à la verticale, une image en 4:3
   mangeait toute la modale et repoussait les dates sous la ligne de flottaison.
   `vh` avant `svh` — svh est ignoré avant Chromium 108 (cf. bloc hero). */
.evt-modal-img {
  display: block;
  width: 100%;
  max-height: 30vh;
  max-height: 30svh;
  object-fit: cover;
}
@media (min-width: 768px) {
  .evt-modal-img { max-height: 42vh; }
}
/* Sans image, le bouton de fermeture n'a plus de fond sombre sous lui : on lui
   garde une pastille claire pour qu'il reste visible dans les deux cas. */
.evt-modal-fermer {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  background-color: var(--papier);
  border-radius: 50%;
  padding: .55rem;
  opacity: .95;
  box-shadow: 0 2px 8px rgba(15,14,13,.25);
}

.evt-modal-corps { padding: 1.1rem 1.2rem .4rem; }
/* Sans image, la croix de fermeture flotte au-dessus de la ligne de catégorie :
   on lui réserve sa place plutôt que de laisser le texte passer dessous. */
.evt-modal-corps > .une-evt-date { padding-right: 2.8rem; }

.evt-modal-titre {
  font-family: var(--famille-titres);
  font-size: clamp(1.4rem, 5vw, 2rem);
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.12;          /* seuil accents, cf. bloc typo */
  overflow-wrap: break-word;
  text-wrap: balance;
  color: var(--encre);
  margin: .1rem 0 1rem;
}

.evt-modal-faits {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: .3rem .9rem;
  margin: 0 0 1.1rem;
  font-size: .92rem;
}
.evt-modal-faits dt {
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}
.evt-modal-faits dd { margin: 0; overflow-wrap: break-word; }

/* À 175 % de texte système, deux colonnes ne tiennent plus : on empile. */
@media (max-width: 420px) {
  .evt-modal-faits { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .evt-modal-faits dd { margin-bottom: .5rem; }
}

.evt-modal-pied {
  border-top: 1px solid var(--bord);
  padding: .8rem 1.2rem;
  gap: .5rem;
}

/* Événements */
.evt-card {
  border-left: 3px solid var(--terre);
  padding: .65rem 1rem;
  background: var(--creme);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  margin-bottom: .7rem;
}
.evt-date {
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terre);
  margin-bottom: .3rem;
}
.evt-titre {
  font-family: var(--famille-titres);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.15;
}
.evt-lieu {
  font-family: var(--famille-corps);
  font-size: .85rem;
  color: var(--gris);
  margin-top: .35rem;
}

/* Mouvements */
.mvt-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: .85rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--bord);
}
.mvt-logo { width: 42px; height: 42px; border-radius: var(--r-s); background: var(--creme); overflow: hidden; }
.mvt-logo img { width: 100%; height: 100%; object-fit: cover; }
.mvt-nom {
  font-family: var(--famille-titres);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .005em;
}
.mvt-cat {
  font-family: var(--famille-accents);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--terre);
}
.mvt-detail { font-family: var(--famille-corps); font-size: .85rem; color: var(--gris); margin-top: .2rem; }

/* Coordonnées */
.coords-bloc {
  background: var(--creme);
  border-radius: var(--r-m);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.coords-bloc dl { margin: 0; }
.coords-bloc dt {
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gris);
  margin-top: .9rem;
}
.coords-bloc dt:first-child { margin-top: 0; }
.coords-bloc dd { margin: .25rem 0 0; font-family: var(--famille-corps); font-size: .95rem; }

.mini-carte {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--r-m);
  margin-top: 1rem;
  overflow: hidden;
}

/* ═════════════════════════════════════════════════════════════════
   CAROUSEL DIAPOSITIVES
   ═════════════════════════════════════════════════════════════════ */
.bulletin-carousel {
  margin: 3rem 0;
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--encre);
}
.bulletin-carousel-img { width: 100%; aspect-ratio: 21/9; overflow: hidden; }
.bulletin-carousel-img img { width: 100%; height: 100%; object-fit: cover; }
.bulletin-carousel-legende {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.7));
  color: #fff;
  font-family: var(--famille-accents);
  font-style: italic;
  font-size: 1rem;
}
.bulletin-carousel-ctrl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15,14,13,.6);
  color: #fff;
  border: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  z-index: 2;
}
.bulletin-carousel-ctrl:hover { background: var(--terre); }
.bulletin-carousel-ctrl[data-dir="prev"] { left: 1rem; }
.bulletin-carousel-ctrl[data-dir="next"] { right: 1rem; }

/* ═════════════════════════════════════════════════════════════════
   CARTE
   ═════════════════════════════════════════════════════════════════ */
.public-carte { width: 100%; min-height: 75vh; border-radius: var(--r-l); overflow: hidden; }

.carte-legende {
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  padding: 1.5rem;
}
.carte-legende-titre {
  font-family: var(--famille-titres);
  font-size: 1.2rem;
  text-transform: uppercase;
  margin: 0 0 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--bord);
}
.carte-legende ul { list-style: none; padding: 0; margin: 0; }
.carte-legende li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem 0;
  cursor: pointer;
  font-family: var(--famille-corps);
  font-size: .92rem;
  transition: opacity .15s ease;
}
.carte-legende li.is-masque { opacity: .35; text-decoration: line-through; }
.carte-legende-pastille {
  width: 14px; height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  flex-shrink: 0;
}
.carte-legende-compte {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-family: var(--famille-accents);
  font-weight: 600;
  color: var(--gris);
}

/* ═════════════════════════════════════════════════════════════════
   RECHERCHE
   ═════════════════════════════════════════════════════════════════ */
.recherche-form {
  display: flex;
  gap: 0;
  margin: 2rem 0 3rem;
  max-width: 720px;
  border: 2px solid var(--encre);
  border-radius: var(--r-m);
  background: #fff;
  overflow: hidden;
}
/* Même principe que .geoloc-search : l'outline du champ est neutralisé,
   l'anneau de focus est porté par le conteneur. */
.recherche-form:focus-within { box-shadow: 0 0 0 3px rgba(15, 14, 13, .14); }
.recherche-input {
  flex-grow: 1;
  min-width: 0;              /* laisse le champ rétrécir : le bouton reste visible <360px */
  font-family: var(--famille-corps);
  font-size: 1.1rem;
  padding: 1rem 1.25rem;
  background: transparent;
  border: 0;
  outline: none;
}
.recherche-input::placeholder { color: var(--gris-clair); font-style: italic; }

.recherche-btn {
  background: var(--encre);
  color: var(--papier);
  border: 0;
  padding: 0 1.5rem;
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
}
.recherche-btn:hover { background: var(--terre); }

.recherche-section-titre {
  font-family: var(--famille-titres);
  font-size: 1.5rem;
  text-transform: uppercase;
  margin: 2.5rem 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--terre);
}

/* ═════════════════════════════════════════════════════════════════
   FOOTER
   ═════════════════════════════════════════════════════════════════ */
.public-footer {
  background: var(--encre);
  color: var(--papier);
  padding: 4rem 0 2rem;
  margin-top: auto;
}

.public-footer .container { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
@media (max-width: 768px) {
  .public-footer .container { grid-template-columns: 1fr; gap: 2rem; }
}

.public-footer-marque {
  font-family: var(--famille-titres);
  font-size: 1.5rem;
  text-transform: uppercase;
  margin: 0 0 .8rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.public-footer h6 {
  font-family: var(--famille-accents);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris-clair);
  margin: 0 0 1rem;
}

.public-footer ul { list-style: none; padding: 0; margin: 0; }
.public-footer li { padding: .35rem 0; }
.public-footer a {
  color: var(--papier);
  text-decoration: none;
  font-family: var(--famille-corps);
  font-size: .92rem;
}
/* Pied de page sombre : --accent-sombre, sinon le survol rendait le lien
   noir sur noir les jours pâles (il disparaissait au passage de la souris). */
.public-footer a:hover { color: var(--accent-sombre); }

.public-footer-bas {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(251,248,241,.15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--famille-accents);
  font-size: .78rem;
  color: var(--gris-clair);
}

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE FINAL
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Bas de footer : empiler les crédits et autoriser le retour à la ligne
     (les spans nowrap élargissaient la page → décalage horizontal mobile). */
  .public-footer-bas { flex-direction: column; align-items: center; text-align: center; }
  .public-footer-bas > span { white-space: normal !important; max-width: 100%; }
  .public-footer-signature { flex-wrap: wrap; justify-content: center; }

  .public-section { padding: 3.5rem 0; }
  .hero { min-height: auto; }
  .hero .container { padding-top: 2rem; padding-bottom: 3rem; }
  .geoloc-panel { padding: 1.2rem; }
  .proche-card {
    grid-template-columns: 1fr;
    gap: .8rem;
    padding: 1rem;
  }
  .proche-photo { display: none; }
  .proche-actions {
    flex-direction: column;       /* empilé et centré */
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    padding-top: .85rem;
    border-top: 1px solid var(--bord);
  }
  .proche-distance {
    font-size: 1.15rem;           /* compact : « 0.3 km » sur une ligne */
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
  }
  .proche-distance small { display: inline; margin: 0; }
  .hero-stat-val { font-size: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   TÉLÉPHONE — la quasi-totalité des visiteurs. Rien ne doit être
   tronqué en plein mot ni tenir sur deux lignes bancales.
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* La baseline du site n'arrivait qu'à s'afficher tronquée (« … ») et
     poussait le bouton Menu sur une 3e ligne : 80 px d'en-tête pour rien. */
  .public-marque-pays { display: none; }
  .public-header .container { flex-wrap: nowrap; min-height: 64px; }
  .public-marque-nom { -webkit-line-clamp: 2; }

  /* « Trouver les paroisses près de moi » tenait sur deux lignes avec
     l'icône flottant à gauche — on resserre pour rester sur une ligne. */
  .geoloc-cta {
    font-size: .84rem;
    letter-spacing: .04em;
    gap: .55rem;
    padding: .95rem 1rem;
  }
  .geoloc-cta-icone { flex: 0 0 auto; }

  .geoloc-search { padding: 0 .8rem; }
  .geoloc-search input { font-size: .95rem; padding: .8rem 0; }
  .geoloc-search button { font-size: .7rem; letter-spacing: .06em; }
  .geoloc-ou { margin: .8rem 0; }
}

/* Téléphone : la date passe AU-DESSUS du titre. En colonne fixe de 120 px
   elle ne laissait plus qu'une quarantaine de pixels au titre — et c'est
   ce qui élargissait la page quand le texte système est agrandi. */
@media (max-width: 600px) {
  .liste-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .3rem .9rem;
    align-items: start;
  }
  .liste-row-date {
    grid-column: 1 / -1;
    font-size: 1.1rem;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .15rem .5rem;
  }
  .liste-row-date small { display: inline; margin-top: 0; }
}