/* ==========================================================================
   MISV — Répertoire, carte et fiche des églises (charte 2026)
   Feuille du widget `misv-church-locations`. Dépend de `misv-tokens` : toutes
   les couleurs viennent des jetons --misv-*, aucune valeur littérale de
   couleur en dehors des ombres (rgba, exigées verbatim par la spécification).

   Deux règles structurantes de ce chantier, à ne pas défaire :

   1. TOUTE règle habillant un <button> est doublée `.x, button.x{…}`, le
      `button` préfixant le DERNIER compound du sélecteur. Le `reset.css` du
      thème Hello Elementor pose sur tout <button> des listes groupées dont
      Chrome retient la spécificité de la branche la plus forte,
      `[type="button"]` = (0,1,0) — autant qu'une classe simple — et les
      feuilles du plugin sont imprimées AVANT celles du thème. `misv-tokens`
      ajoute par-dessus un reset `button[class*="misv-"]` en (0,1,1). Une
      règle de composant en (0,1,0) perd donc contre les deux et le bouton
      rend nu (bordure rose, width:auto).

   2. Aucune `opacity` sur un conteneur portant du texte : elle s'applique
      APRÈS la composition des couleurs et divise le contraste de tout ce
      qu'elle contient. L'état de chargement est signalé par une barre de
      progression (élément sans texte), jamais par un voile sur les résultats.

   Ordre : grille → carte → marqueurs → popup → légende → chips → filtres →
   états → pagination → fiche → responsive → prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grille du répertoire
   -------------------------------------------------------------------------- */

.misv-church-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.misv-church-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--misv-line-1);
    border-radius: 16px;
    transition: transform .35s var(--misv-ease), box-shadow .35s var(--misv-ease);
}

.misv-church-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(28, 25, 22, .12);
}

/* Le siège n'est pas signalé par la seule couleur : le badge textuel
   « Église siège » porte l'information, la bordure or ne fait que l'appuyer. */
.misv-church-card.is-main {
    border-color: var(--misv-gold);
}

.misv-church-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    /* --misv-ink sur --misv-gold : 7,69:1. */
    background: var(--misv-gold);
    color: var(--misv-ink);
    font-family: var(--misv-font);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 6px 11px;
    border-radius: 999px;
}

.misv-church-card__thumb {
    display: block;
    overflow: hidden;
}

.misv-church-card__thumb img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--misv-ease);
}

.misv-church-card:hover .misv-church-card__thumb img {
    transform: scale(1.04);
}

.misv-church-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px 24px;
}

.misv-church-card__title {
    margin: 0;
    font-family: var(--misv-serif);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.15;
    /* --misv-title sur blanc : 17,5:1. */
    color: var(--misv-title);
}

.misv-church-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color .3s var(--misv-ease);
}

.misv-church-card__title a:hover {
    color: var(--misv-red);
}

.misv-church-card__meta {
    margin: 0;
    font-family: var(--misv-font);
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.6;
    /* --misv-body sur blanc : 7,22:1. --misv-muted (#8A8073) plafonne à
       3,88:1 et ne peut pas porter du texte de cette taille. */
    color: var(--misv-body);
}

/* Bouton de carte : <a>, mais habillé comme .misv-btn--red (§1.5). */
.misv-church-card__btn {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* Blanc sur --misv-red : 5,31:1. */
    background: var(--misv-red);
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: 13px 22px;
    font-family: var(--misv-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: none;
    transition: all .3s var(--misv-ease);
}

.misv-church-card__btn:hover,
.misv-church-card__btn:focus {
    /* Blanc sur --misv-red-hover #B3161F : 6,88:1. */
    background: var(--misv-red-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: none;
}

.misv-church-card__btn:active {
    transform: translateY(0);
}

.misv-church-card__btn:focus-visible {
    outline: 2px solid var(--misv-gold);
    outline-offset: 3px;
}

.misv-church-grid-empty,
.misv-church-map-empty {
    padding: 32px 24px;
    border: 1px solid var(--misv-line-1);
    border-radius: 16px;
    background: #fff;
    text-align: center;
    font-family: var(--misv-font);
    font-size: 14px;
    font-weight: 300;
    color: var(--misv-body);
}

/* --------------------------------------------------------------------------
   Carte
   -------------------------------------------------------------------------- */

.misv-church-map-widget {
    display: block;
}

.misv-church-map {
    position: relative;
    width: 100%;
    height: 560px;
    background: #fff;
    border: 1px solid var(--misv-line-1);
    border-radius: 24px;
    overflow: hidden;
}

.misv-church-map--single {
    height: 420px;
}

/* Attribution Leaflet : petite, mais lisible. --misv-body sur blanc 7,22:1. */
.misv-church-map .leaflet-control-attribution {
    font-family: var(--misv-font);
    font-size: 9.5px;
    color: var(--misv-body);
    background: rgba(255, 255, 255, .85);
}

.misv-church-map .leaflet-control-attribution a {
    color: var(--misv-ink);
}

/* Carte différée (voir initMapOnDemand() dans misv-church-locations.js) :
   sur mobile/tablette, ce bouton est tout ce qui s'affiche tant que Leaflet
   n'a pas été instancié — pas de carte ni de tuiles au premier écran.
   Doublé `button.` : sans cela, le reset du thème ET celui de misv-tokens le
   rendaient nu (c'est un <button>). */
.misv-church-map__reveal,
button.misv-church-map__reveal {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 500;
    transform: translate(-50%, -50%);
    /* WCAG 2.1 AA cible tactile >= 44px. */
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border: 0;
    border-radius: 12px;
    /* Blanc sur --misv-ink : 18,69:1. */
    background: var(--misv-ink);
    color: #fff;
    font-family: var(--misv-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transition: all .3s var(--misv-ease);
}

.misv-church-map__reveal:hover,
button.misv-church-map__reveal:hover {
    /* Blanc sur --misv-ink-hover #2A2622 : 15,01:1. */
    background: var(--misv-ink-hover);
    color: #fff;
    transform: translate(-50%, -50%) translateY(-2px);
    box-shadow: none;
}

.misv-church-map__reveal:active,
button.misv-church-map__reveal:active {
    transform: translate(-50%, -50%);
}

.misv-church-map__reveal:focus-visible,
button.misv-church-map__reveal:focus-visible {
    outline: 2px solid var(--misv-gold);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Marqueurs (L.divIcon, voir renderPin() côté JS)
   -------------------------------------------------------------------------- */

.misv-church-pin {
    position: relative;
    width: 18px;
    height: 18px;
}

.misv-church-pin__dot {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--misv-red);
    border: 2.5px solid #fff;
    box-shadow: 0 2px 8px rgba(20, 18, 16, .45);
}

.misv-church-pin--hq .misv-church-pin__dot {
    background: var(--misv-ink);
    border-color: var(--misv-gold);
}

/* L'anneau est décoratif : aucun texte dedans, donc aucune incidence de
   contraste. `misv-ripple` est défini par misv-tokens. */
.misv-church-pin__ring {
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2px solid rgba(209, 32, 42, .55);
    animation: misv-ripple 2.2s ease-out infinite;
}

.misv-church-pin--hq .misv-church-pin__ring {
    border-color: rgba(201, 161, 59, .55);
}

/* Regroupement markercluster : les bulles par défaut du plugin sont bleues,
   on les repasse à la charte. Le compte est du texte : ink sur or 7,69:1. */
.misv-church-map .marker-cluster,
.misv-church-map .marker-cluster div {
    background: var(--misv-gold);
    border: 0;
    color: var(--misv-ink);
}

.misv-church-map .marker-cluster div {
    box-shadow: 0 2px 8px rgba(20, 18, 16, .45);
}

.misv-church-map .marker-cluster span {
    font-family: var(--misv-font);
    font-size: 12px;
    font-weight: 800;
    color: var(--misv-ink);
}

/* --------------------------------------------------------------------------
   Popup

   Le conteneur Leaflet reçoit la classe `misv-church-popup-shell` (option
   `className` de L.popup, voir renderPopup() côté JS) : c'est elle qui porte
   l'habillage du cadre, et sa variante `--hq` celui du siège. On ne dépend
   ainsi ni d'un `:has()` ni d'une relation de frères entre le contenu et le
   bouton de fermeture, que Leaflet est libre de réorganiser.
   -------------------------------------------------------------------------- */

.misv-church-popup-shell .leaflet-popup-content-wrapper {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--misv-line-1);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(20, 18, 16, .3);
}

/* `!important` assumé : Leaflet pose une largeur EN LIGNE sur cet élément à
   l'ouverture de chaque popup, rien d'autre ne peut la reprendre. */
.misv-church-popup-shell .leaflet-popup-content {
    margin: 0;
    width: 238px !important;
    font-family: var(--misv-font);
}

.misv-church-popup-shell .leaflet-popup-tip {
    border: 1px solid var(--misv-line-1);
}

/* Le bouton de fermeture de Leaflet se pose SUR l'en-tête coloré : son gris
   par défaut (#757575) y serait illisible. Blanc sur --misv-red : 5,31:1. */
.misv-church-popup-shell .leaflet-popup-close-button,
.misv-church-popup-shell .leaflet-popup-close-button:hover {
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
}

/* Siège : en-tête ink, croix or (7,69:1 sur ink). */
.misv-church-popup-shell--hq .leaflet-popup-close-button,
.misv-church-popup-shell--hq .leaflet-popup-close-button:hover {
    color: var(--misv-gold);
}

.misv-church-popup {
    font-family: var(--misv-font);
}

.misv-church-popup__head {
    /* Blanc sur --misv-red : 5,31:1. */
    background: var(--misv-red);
    color: #fff;
    padding: 10px 34px 10px 14px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Libellé « siège » dans l'en-tête. Aucune couleur propre : il hérite de
   celle de l'en-tête (blanc sur rouge 5,31:1 ; or sur ink 7,69:1), donc son
   contraste est celui du titre au-dessus duquel il se place. */
.misv-church-popup__badge {
    display: block;
    margin-bottom: 4px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .18em;
}

.misv-church-popup--hq .misv-church-popup__head {
    /* Or sur --misv-ink : 7,69:1. */
    background: var(--misv-ink);
    color: var(--misv-gold);
}

.misv-church-popup__body {
    padding: 12px 14px 14px;
    background: #fff;
}

/* Ligne de lieu. La spécification demandait --misv-muted ; ce jeton plafonne
   à 3,88:1 sur blanc et ne peut donc pas porter du texte de 11px (AA exige
   4,5:1 hors « grand texte », soit >= 18,66px gras). --misv-body : 7,22:1,
   même rôle visuel de ligne secondaire. Écart documenté dans le rapport. */
.misv-church-popup__loc {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--misv-body);
}

.misv-church-popup__cultes {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.55;
    /* --misv-ink-alt sur blanc : 9,62:1. */
    color: var(--misv-ink-alt);
}

.misv-church-popup__link {
    display: block;
    /* Blanc sur --misv-ink : 18,69:1. */
    background: var(--misv-ink);
    color: #fff;
    padding: 12px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: all .3s var(--misv-ease);
}

.misv-church-popup__link::after {
    content: " \2192";
}

.misv-church-popup__link:hover,
.misv-church-popup__link:focus {
    /* Blanc sur --misv-red : 5,31:1. */
    background: var(--misv-red);
    color: #fff;
}

.misv-church-popup__link:focus-visible {
    outline: 2px solid var(--misv-gold);
    outline-offset: -4px;
}

/* --------------------------------------------------------------------------
   Légende
   -------------------------------------------------------------------------- */

/* Sélecteur en (0,2,0) et non (0,1,0) : Leaflet pose `margin` sur
   `.leaflet-bottom .leaflet-control` avec la même spécificité, et cette
   feuille est imprimée après la sienne (dépendance déclarée) — à égalité,
   c'est l'ordre qui tranche, en notre faveur. */
.misv-church-map .misv-church-legend {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 0 12px 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--misv-line-1);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(28, 25, 22, .1);
    font-family: var(--misv-font);
}

.misv-church-legend__row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    /* --misv-ink sur blanc : 18,69:1. */
    color: var(--misv-ink);
    white-space: nowrap;
}

.misv-church-legend__dot {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--misv-red);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(20, 18, 16, .45);
}

.misv-church-legend__dot--hq {
    background: var(--misv-ink);
    border-color: var(--misv-gold);
}

/* --------------------------------------------------------------------------
   Chips (§1.5) — liées aux permaliens des églises
   -------------------------------------------------------------------------- */

.misv-church-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.misv-church-chips li {
    margin: 0;
    list-style: none;
}

.misv-church-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--misv-line-3);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: var(--misv-font);
    font-size: 12px;
    font-weight: 500;
    /* --misv-title sur blanc : 17,5:1. */
    color: var(--misv-title);
    text-decoration: none;
    transition: all .3s var(--misv-ease);
}

.misv-church-chip:hover,
.misv-church-chip:focus {
    border-color: var(--misv-gold);
    color: var(--misv-title);
    transform: translateY(-2px);
}

.misv-church-chip:focus-visible {
    outline: 2px solid var(--misv-gold);
    outline-offset: 3px;
}

.misv-church-chip--hq {
    /* Blanc sur --misv-ink : 18,69:1. */
    background: var(--misv-ink);
    border-color: var(--misv-ink);
    color: #fff;
    font-weight: 600;
}

.misv-church-chip--hq:hover,
.misv-church-chip--hq:focus {
    background: var(--misv-ink-hover);
    color: #fff;
}

.misv-church-chip__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--misv-gold);
}

/* --------------------------------------------------------------------------
   Filtres
   -------------------------------------------------------------------------- */

.misv-church-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 18px;
    background: var(--misv-ivory);
    border: 1px solid var(--misv-line-1);
    border-radius: 18px;
}

.misv-church-filters input,
.misv-church-filters select {
    flex: 1 1 160px;
    box-sizing: border-box;
    min-height: 44px;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid var(--misv-line-1);
    border-radius: 14px;
    font-family: var(--misv-font);
    font-size: 14px;
    font-weight: 300;
    /* --misv-ink sur blanc : 18,69:1. */
    color: var(--misv-ink);
    transition: border-color .3s var(--misv-ease);
}

.misv-church-filters input::placeholder {
    /* --misv-body sur blanc : 7,22:1 (le gris du navigateur est bien plus
       faible ; on ne laisse pas le placeholder sous le seuil). */
    color: var(--misv-body);
    opacity: 1;
}

.misv-church-filters input:focus,
.misv-church-filters select:focus {
    border-color: var(--misv-gold);
}

.misv-church-filters input:focus-visible,
.misv-church-filters select:focus-visible {
    outline: 2px solid var(--misv-gold);
    outline-offset: 3px;
}

/* Bouton générique du formulaire (le « Rechercher », qui n'a pas de classe).
   `.misv-church-filters button` est en (0,1,1) : il bat le reset du thème
   (0,1,0) et égale celui de misv-tokens, que l'ordre d'impression départage
   en notre faveur (cette feuille dépend de `misv-tokens`). */
.misv-church-filters button {
    /* WCAG 2.1 AA cible tactile >= 44px. */
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border: 0;
    border-radius: 12px;
    /* Blanc sur --misv-red : 5,31:1. */
    background: var(--misv-red);
    color: #fff;
    font-family: var(--misv-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transition: all .3s var(--misv-ease);
}

.misv-church-filters button:hover {
    /* Blanc sur --misv-red-hover : 6,88:1. */
    background: var(--misv-red-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: none;
}

.misv-church-filters button:active {
    transform: translateY(0);
}

.misv-church-filters button:focus-visible {
    outline: 2px solid var(--misv-gold);
    outline-offset: 3px;
}

/* « Près de moi » : bouton ink, second rôle. */
.misv-church-filters .misv-church-filters__near,
.misv-church-filters button.misv-church-filters__near {
    /* Blanc sur --misv-ink : 18,69:1. */
    background: var(--misv-ink);
    color: #fff;
}

.misv-church-filters .misv-church-filters__near:hover,
.misv-church-filters button.misv-church-filters__near:hover {
    /* Blanc sur --misv-ink-hover : 15,01:1. */
    background: var(--misv-ink-hover);
    color: #fff;
}

/* `[disabled]` NE PORTE PAS d'opacity : elle s'appliquerait après la
   composition et diviserait le contraste du libellé (« Localisation
   refusée »). L'état est signalé par le curseur et la teinte du fond, qui
   reste au-dessus du seuil. */
.misv-church-filters .misv-church-filters__near[disabled],
.misv-church-filters button.misv-church-filters__near[disabled] {
    /* Blanc sur --misv-body #5E564B : 7,22:1. */
    background: var(--misv-body);
    color: #fff;
    cursor: not-allowed;
    transform: none;
}

/* Réinitialiser : bouton contour (§1.5). */
.misv-church-filters .misv-church-filters__reset,
.misv-church-filters button.misv-church-filters__reset {
    background: transparent;
    border: 1.5px solid var(--misv-title);
    /* --misv-title sur --misv-ivory : 16,37:1. */
    color: var(--misv-title);
}

.misv-church-filters .misv-church-filters__reset:hover,
.misv-church-filters button.misv-church-filters__reset:hover {
    /* Blanc sur --misv-title #1C1916 : 17,5:1. */
    background: var(--misv-title);
    color: #fff;
}

/* Mode avancé : bascule en bouton contour, même famille que le reset. */
.misv-church-filters .misv-church-filters__toggle,
.misv-church-filters button.misv-church-filters__toggle {
    background: transparent;
    border: 1.5px solid var(--misv-line-3);
    color: var(--misv-title);
    letter-spacing: .1em;
}

.misv-church-filters .misv-church-filters__toggle:hover,
.misv-church-filters button.misv-church-filters__toggle:hover,
.misv-church-filters .misv-church-filters__toggle:focus,
.misv-church-filters button.misv-church-filters__toggle:focus {
    background: #fff;
    border-color: var(--misv-gold);
    color: var(--misv-title);
    transform: translateY(-2px);
}

.misv-church-filters__chevron {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform .3s var(--misv-ease);
}

.misv-church-filters__toggle[aria-expanded="true"] .misv-church-filters__chevron {
    transform: rotate(180deg);
}

/* Panneau avancé : pleine largeur, passe à la ligne dans le flex du form. */
.misv-church-filters .misv-church-filters__advanced {
    flex: 0 0 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid var(--misv-line-2);
}

/* Une règle auteur bat la règle `[hidden]` du navigateur (priorité par
   origine avant spécificité) : sans ceci, `hidden` ne masquerait rien. */
.misv-church-filters .misv-church-filters__advanced[hidden] {
    display: none !important;
}

.misv-church-filters__advanced select {
    flex: 1 1 180px;
}

.misv-church-filters--advanced input[type="search"] {
    flex: 1 1 220px;
    max-width: 360px;
}

/* --------------------------------------------------------------------------
   États : chargement, vide, erreur
   -------------------------------------------------------------------------- */

/* Leçon 17 : PAS d'`opacity` ici. L'ancienne règle posait `opacity:.6` sur la
   grille et la carte pendant le chargement — tout le texte des cartes déjà
   affichées passait alors sous le seuil AA. La barre de progression est un
   élément sans texte, elle n'altère aucun contraste. */
.misv-church-grid.is-loading,
.misv-church-map.is-loading {
    position: relative;
    pointer-events: none;
    cursor: progress;
}

.misv-church-grid.is-loading::after,
.misv-church-map.is-loading::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3px;
    z-index: 600;
    background-image: linear-gradient(90deg, transparent, var(--misv-red), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: misv-church-progress 1.1s linear infinite;
}

@keyframes misv-church-progress {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}

/* Chargement : hauteur réservée, sinon on rejoue le décalage de mise en page
   qu'on corrige ailleurs sur le site. */
.misv-church-skeleton {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.misv-church-skeleton__card {
    min-height: 220px;
    border: 1px solid var(--misv-line-1);
    border-radius: 16px;
    background-image: linear-gradient(100deg, var(--misv-paper) 30%, var(--misv-line-1) 50%, var(--misv-paper) 70%);
    background-size: 200% 100%;
    animation: misv-church-shimmer 1.4s linear infinite;
}

@keyframes misv-church-shimmer {
    to { background-position: -200% 0; }
}

.misv-church-empty,
.misv-church-error {
    padding: 48px 24px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--misv-line-1);
    border-radius: 16px;
    font-family: var(--misv-font);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    /* --misv-body sur blanc : 7,22:1. */
    color: var(--misv-body);
}

.misv-church-empty__title,
.misv-church-error__title {
    margin: 0 0 10px;
    font-family: var(--misv-serif);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.15;
    color: var(--misv-title);
}

.misv-church-error {
    border-color: var(--misv-red);
}

/* <button> : doublé, sinon nu. */
.misv-church-error__retry,
button.misv-church-error__retry {
    margin-top: 18px;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border: 0;
    border-radius: 12px;
    /* Blanc sur --misv-red : 5,31:1. */
    background: var(--misv-red);
    color: #fff;
    font-family: var(--misv-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transition: all .3s var(--misv-ease);
}

.misv-church-error__retry:hover,
button.misv-church-error__retry:hover {
    background: var(--misv-red-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: none;
}

.misv-church-error__retry:active,
button.misv-church-error__retry:active {
    transform: translateY(0);
}

.misv-church-error__retry:focus-visible,
button.misv-church-error__retry:focus-visible {
    outline: 2px solid var(--misv-gold);
    outline-offset: 3px;
}

/* Lien souligné des états vides (« Voir toutes les assemblées »). */
.misv-church-empty .misv-ul,
.misv-church-error .misv-ul {
    color: var(--misv-title);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.misv-church-empty .misv-ul:hover,
.misv-church-error .misv-ul:hover {
    color: var(--misv-red);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.misv-church-pagination {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-family: var(--misv-font);
}

.misv-church-pagination__count {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    /* --misv-body sur --misv-paper : 6,98:1. */
    color: var(--misv-body);
}

.misv-church-pagination__pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.misv-church-pagination__pages li {
    margin: 0;
    list-style: none;
}

.misv-church-pagination__link {
    /* WCAG 2.1 AA cible tactile >= 44px. */
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--misv-line-1);
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    /* --misv-title sur blanc : 17,5:1. */
    color: var(--misv-title);
    text-decoration: none;
    transition: all .3s var(--misv-ease);
}

.misv-church-pagination__link:hover {
    background: var(--misv-hover-row);
    border-color: var(--misv-gold);
    color: var(--misv-title);
}

.misv-church-pagination__link:focus-visible {
    outline: 2px solid var(--misv-gold);
    outline-offset: 3px;
}

/* Page courante : jamais signalée par la seule couleur — le fond plein, le
   contour et aria-current portent l'information ensemble. */
.misv-church-pagination__link.is-current {
    /* Blanc sur --misv-ink : 18,69:1. */
    background: var(--misv-ink);
    border-color: var(--misv-ink);
    color: #fff;
    cursor: default;
}

.misv-church-pagination__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 44px;
    /* --misv-body sur --misv-paper : 6,98:1. */
    color: var(--misv-body);
}

/* La grille reçoit tabindex=-1 au changement de page pour que le focus suive
   le regard : ce focus programmatique ne doit pas dessiner de contour. */
.misv-church-grid:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   Fiche église (gabarit de repli et widget « champ »)
   -------------------------------------------------------------------------- */

.misv-church-field {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    font-family: var(--misv-font);
    font-size: 13.5px;
    font-weight: 300;
    color: var(--misv-body);
}

.misv-church-field__icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: var(--misv-gold-text);
}

.misv-church-field__label {
    margin-right: .35em;
    font-weight: 600;
    /* --misv-title sur blanc : 17,5:1. */
    color: var(--misv-title);
}

.misv-church-field__value {
    word-break: break-word;
}

.misv-church-field--hours .misv-church-field__value,
.misv-church-field--address .misv-church-field__value,
.misv-church-field--cultes .misv-church-field__value {
    white-space: normal;
}

.misv-church-single {
    font-family: var(--misv-font);
    color: var(--misv-body);
}

.misv-church-single__title {
    font-family: var(--misv-font);
    font-size: 56px;
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--misv-title);
}

.misv-church-single__thumb img {
    width: 100%;
    height: auto;
    border-radius: 24px;
    display: block;
}

.misv-church-single__facts {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 28px 0;
    padding: 0;
    list-style: none;
}

.misv-church-single__facts li {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--misv-line-2);
    font-size: 13.5px;
    font-weight: 300;
    color: var(--misv-body);
}

.misv-church-single__facts strong {
    flex: none;
    width: 110px;
    font-weight: 600;
    color: var(--misv-title);
}

/* Cultes & rencontres : carte blanche, lignes internes rayon 18 (§1.5). */
.misv-church-cultes {
    margin: 28px 0;
    padding: 32px 30px 34px;
    background: #fff;
    border: 1px solid var(--misv-line-1);
    border-radius: 16px;
}

.misv-church-cultes__title {
    margin: 0 0 16px;
    font-family: var(--misv-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--misv-title);
}

.misv-church-cultes__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.misv-church-cultes__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--misv-line-2);
    list-style: none;
}

.misv-church-cultes__item:last-child {
    border-bottom: 0;
}

.misv-church-cultes__day {
    font-family: var(--misv-serif);
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    color: var(--misv-title);
}

.misv-church-cultes__name {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 300;
    /* --misv-body sur blanc : 7,22:1 (--misv-muted plafonnerait à 3,88:1). */
    color: var(--misv-body);
}

.misv-church-cultes__time {
    flex: none;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
    /* Or PORTANT DU TEXTE : --misv-gold-text, 4,84:1 sur blanc. */
    color: var(--misv-gold-text);
}

/* Galerie de la fiche : vignettes rayon 14 (§ rayons). */
.misv-church-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin: 28px 0;
    padding: 0;
    list-style: none;
}

.misv-church-gallery li {
    margin: 0;
    list-style: none;
}

.misv-church-gallery img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    border-radius: 14px;
    background: var(--misv-line-2);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .misv-church-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .misv-church-map {
        height: 460px;
    }
}

@media (max-width: 782px) {
    .misv-church-grid {
        grid-template-columns: 1fr;
    }

    .misv-church-map {
        height: 380px;
        border-radius: 18px;
    }

    .misv-church-single__title {
        font-size: 38px;
    }

    .misv-church-filters {
        padding: 14px;
    }
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .misv-church-skeleton__card,
    .misv-church-pin__ring,
    .misv-church-grid.is-loading::after,
    .misv-church-map.is-loading::after {
        animation: none;
    }

    /* La barre de progression reste visible, simplement immobile. */
    .misv-church-grid.is-loading::after,
    .misv-church-map.is-loading::after {
        background-size: 100% 100%;
    }

    .misv-church-card,
    .misv-church-card__thumb img,
    .misv-church-card__btn,
    .misv-church-chip,
    .misv-church-pagination__link,
    .misv-church-popup__link,
    .misv-church-filters button,
    .misv-church-map__reveal,
    button.misv-church-map__reveal,
    .misv-church-error__retry,
    button.misv-church-error__retry {
        transition: none;
    }

    .misv-church-card:hover,
    .misv-church-card:hover .misv-church-card__thumb img,
    .misv-church-card__btn:hover,
    .misv-church-chip:hover,
    .misv-church-filters button:hover {
        transform: none;
    }

    .misv-church-map__reveal:hover,
    button.misv-church-map__reveal:hover {
        transform: translate(-50%, -50%);
    }
}
