/**
 * Styles de la page « Liste de cartes »
 * Chargé uniquement sur les pages utilisant le template "Liste de cartes".
 * Les styles « statiques » (hero, grilles, nav, cartes) sont en Tailwind dans les templates ;
 * ce fichier garde surtout les états .scrolled / JS, filtres Boutique, prose cartes, header.
 */

/* Nav verticale desktop (Boutique, Nous soutenir) : écart bas = 1.5rem, ou plus si footer visible (JS --mc-bottom-inset). */
body.page-liste-cartes {
    --mc-bottom-gap: 1.5rem;
    --mc-bottom-inset: max(var(--mc-bottom-gap), env(safe-area-inset-bottom, 0px));
}

.page-liste-cartes-nav-vertical__slot--bottom,
.page-liste-cartes-title-filters__slot--bottom {
    bottom: var(--mc-bottom-inset) !important;
}

/*
 * Voisins sur la même ligne qu’une carte dépliée (classe JS .carte--row-peer) :
 * ne pas étirer pour la hauteur de la carte ouverte. Les autres lignes gardent items-stretch sur la grille.
 */
.liste-cartes > article.carte.carte--row-peer {
    align-self: start;
    height: auto !important;
    max-height: none;
    min-height: 0 !important;
}

.liste-cartes > article.carte.carte--row-peer .carte-face {
    flex: 0 1 auto !important;
}

.liste-cartes > a.carte-evenements-passes.carte-evenements-passes--row-peer {
    align-self: start;
    height: auto !important;
}

/* Carte dépliée : renfort ciblé */
.liste-cartes > article.carte.carte--expanded {
    align-self: start;
    height: auto !important;
    min-height: 0 !important;
}

.liste-cartes > article.carte.carte--expanded .carte-face {
    flex: 0 1 auto !important;
}

/* Bloc « Lire plus » déplié : fond blanc (cohérent boutique / événements / lieux) */
.liste-cartes .carte-content {
    background-color: #fff;
}

/* Titre au scroll (sauf Événements et Boutique) : rotation 180° — état JS .scrolled */
.page-liste-cartes-title.scrolled:not(.page-liste-cartes-title--evenements):not(.page-liste-cartes-title--boutique):not(.page-liste-cartes-title--soutenir) {
    font-size: 2rem;
    transform: rotate(180deg);
    writing-mode: vertical-rl;
}

/* Footer : fond blanc + au-dessus des calques hero/contenu (z). La colonne flex est en Tailwind sur #page (header.php). */
body.page-liste-cartes .site-footer,
body.page-liste-cartes .site-footer.bg-gray-100 {
    background: #ffffff !important;
    position: relative;
    z-index: 120;
}

/* Hero : calque image interne pour parallaxe sans "trou" blanc en haut.
   On surdimensionne le calque et on translate uniquement vers le haut (JS). */
.page-liste-cartes-hero--has-bg .page-liste-cartes-hero-bg {
    top: -20%;
    left: 0;
    right: 0;
    height: 140%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .page-liste-cartes-hero--has-bg .page-liste-cartes-hero-bg {
        top: 0;
        height: 100%;
        will-change: auto;
        transform: none !important;
    }
}

/* Avec image hero : dégradé transparent→blanc. Position/inset/z/pointer-events sont en Tailwind sur le div. */
.page-liste-cartes-content--hero-bg {
    --mc-content-white-start: 60vh;
}

.page-liste-cartes-content--hero-bg .page-liste-cartes-content-bg-sheet {
    background-image: linear-gradient(180deg, transparent 0%, transparent calc(var(--mc-content-white-start) - 200px), #fff var(--mc-content-white-start), #fff 100%);
}

@media (max-width: 1023px) {
    .page-liste-cartes-content--hero-bg .page-liste-cartes-content-bg-sheet {
        background-image: linear-gradient(180deg, transparent 0%, transparent calc(var(--mc-content-white-start) - 200px), #fff var(--mc-content-white-start), #fff 100%);
    }
}

/* Apparition douce au scroll (cartes + images éditoriales, classe ajoutée en JS). */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Mobile/tablette : le bloc titre-filtres passe en flux normal (position relative) pour
   prendre de la hauteur dans le document et aligner naturellement la grille sous lui.
   Sur desktop, il reste fixed (géré par les classes Tailwind).
   Exception : page Soutenir (éditorial) — reste en fixed plein écran comme au desktop ; sinon
   min-height: 0 !important ci-dessous écrase tout et le bloc absolute interne a 0 px → titre invisible. */
@media (max-width: 1023px) {
    .page-liste-cartes-title-filters--lieux,
    .page-liste-cartes-title-filters--boutique,
    .page-liste-cartes-title-filters--evenements {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        transform: none !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 3rem !important;
        padding-bottom: 1rem !important;
    }

    /* Soutenir : même calque que desktop (fixed inset-0), au-dessus de l’intro hero (z-50). */
    .page-liste-cartes-title-filters--soutenir {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        transform: none !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        /* Au-dessus du bloc intro hero éditorial (z-55) */
        z-index: 110;
        pointer-events: none;
    }

    .page-liste-cartes-title-filters--lieux,
    .page-liste-cartes-title-filters--boutique {
        left: 0;
        right: auto;
    }

    .page-liste-cartes-title-filters--lieux {
        justify-content: flex-start;
    }

    .page-liste-cartes-title-filters--evenements {
        left: auto;
        right: 0;
        align-items: flex-end;
        justify-content: flex-start;
    }
}

@media (min-width: 1024px) {
    .page-liste-cartes-title-filters--lieux,
    .page-liste-cartes-title-filters--evenements {
        padding-top: 7rem;
    }

    /* Boutique / Soutenir : pas de padding-top sur le calque (écart bas = slot + --mc-bottom-inset) */
    .page-liste-cartes-title-filters--boutique:not(.scrolled),
    .page-liste-cartes-title-filters--soutenir:not(.scrolled) {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Bloc texte (contenu déplié) : liens */
.carte-bloc-texte a {
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: var(--color-page-secondary, currentColor);
}
.carte-bloc-texte a strong,
.carte-bloc-texte a b {
    font-weight: 900;
}

/* Bloc texte : espacement paragraphes et sauts de ligne */
.carte-bloc-texte p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}
.carte-bloc-texte p:first-child {
    margin-top: 0;
}
.carte-bloc-texte p:last-child {
    margin-bottom: 0;
}
.carte-bloc-texte p + p {
    margin-top: 0.75em;
}
/* <br> crée un espace vertical (priorité sur .prose) */
.carte-bloc-texte br,
.carte-content-inner .carte-bloc-texte br,
.prose .carte-bloc-texte br {
    display: block !important;
    margin-top: 0.75em;
}

/*
 * Contenu déplié : .prose applique des marges verticales énormes aux <hr> (typo Tailwind, ~3em).
 * Les séparateurs (bloc dédié ou <hr> dans le texte riche) doivent rester compacts.
 */
.carte-content-inner.prose hr {
    margin-top: 0;
    margin-bottom: 0;
}

.carte-content-inner.prose hr.carte-separator,
hr.carte-separator {
    margin-bottom: 12px !important;
}

/* Événements avant scroll (desktop uniquement — en mobile/tablette le bloc est dans le flux, voir media query plus bas) */
@media (min-width: 1024px) {
    .page-liste-cartes-title-filters--evenements:not(.scrolled) {
        align-items: flex-end;
        justify-content: center;
    }

    /* Boutique : slot bas-gauche (miroir Soutenir bas-droite pr-8) — marge bas via --mc-bottom-inset */
    .page-liste-cartes-title-filters--boutique .page-liste-cartes-title-filters__slot--bottom {
        left: 0;
        right: auto;
        align-items: flex-start;
        justify-content: flex-end;
    }
}
/* Filtres Événements + Boutique : visibles sur hero (desktop) ; couleur via .nav-over-content (JS) */
@media (min-width: 1024px) {
    .page-liste-cartes-filtres-vertical--evenements,
    .page-liste-cartes-filtres-vertical--boutique {
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block;
        transition: color 0.3s ease;
    }

    .page-liste-cartes-filtres-vertical--evenements:not(.nav-over-content) a,
    .page-liste-cartes-filtres-vertical--boutique:not(.nav-over-content) a,
    .page-liste-cartes-filtres-vertical--boutique:not(.nav-over-content) .page-liste-cartes-filtres-boutique-panier-link {
        color: #fff;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        transition: color 0.3s ease, text-shadow 0.3s ease;
    }

    .page-liste-cartes-filtres-vertical--evenements.nav-over-content a,
    .page-liste-cartes-filtres-vertical--boutique.nav-over-content a,
    .page-liste-cartes-filtres-vertical--boutique.nav-over-content .page-liste-cartes-filtres-boutique-panier-link {
        color: #171717;
        text-shadow: none;
    }

}

/* Pages Visiter : liens sœurs blancs sur hero, noirs sur fond blanc (JS .nav-over-content par lien) */
@media (min-width: 768px) {
    .page-liste-cartes-sibling-link:not(.nav-over-content) {
        color: #fff !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }

    .page-liste-cartes-sibling-link.nav-over-content {
        color: #171717 !important;
        text-shadow: none;
    }
}

@media (max-width: 1023px) {
    .page-liste-cartes-title-filters--evenements.scrolled .page-liste-cartes-filtres-vertical--evenements {
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        display: none !important;
    }
}
/* Commun au scroll (Événements / Soutenir — pas Boutique : elle reste ancrée en bas du viewport). */
.page-liste-cartes-title-filters--evenements.scrolled,
.page-liste-cartes-title-filters--soutenir.scrolled {
    align-items: flex-start;
    gap: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    height: auto;
    top: 18vh;
    transform: none;
}

/* Lieux / Visiter : au scroll, même translate qu’au hero (JS) ; garder le padding-top lg
   (7 rem) comme au hero — padding-top: 0 le faisait remonter sous le bandeau. */
.page-liste-cartes-title-filters--lieux.scrolled {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2rem;
    padding-bottom: 2rem;
    height: 100vh;
    top: 50%;
}

/* Événements au scroll : titre + filtres sur une ligne */
.page-liste-cartes-title-filters--evenements.scrolled {
    flex-direction: row;
    justify-content: flex-end;
}

/* Boutique au scroll (desktop) : calque plein écran ; ancrage bas + marge footer sur le slot interne */
@media (min-width: 1024px) {
    .page-liste-cartes-title-filters--boutique.scrolled {
        top: 0;
        right: 0;
        left: 0;
        transform: none !important;
        padding-top: 0;
        padding-bottom: 0;
    }

    .page-liste-cartes-title-filters--boutique.scrolled .page-liste-cartes-title-filters__slot--bottom {
        justify-content: flex-end;
        align-items: flex-start;
    }
}

.page-liste-cartes-title-filters--soutenir.scrolled {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}
/* Typo commune aux 3 titres au scroll */
.page-liste-cartes-title--evenements.scrolled,
.page-liste-cartes-title--boutique.scrolled,
.page-liste-cartes-title-filters--lieux.scrolled .page-liste-cartes-parent {
    font-size: 32px;
    line-height: 90%;
    text-decoration: underline;
    text-underline-offset: 20%;
    text-decoration-thickness: 18%;
    text-decoration-skip-ink: auto;
    text-shadow: none !important;
}

/* Titre Événements au scroll */
.page-liste-cartes-title--evenements.scrolled {
    color: var(--color-accent, #4cea01);
    transform: none !important;
}

/* Boutique : calque plein écran (miroir Soutenir) ; padding horizontal sur le slot uniquement */
.page-liste-cartes-title-filters--boutique:not(.scrolled) {
    top: 0;
    right: 0;
    left: 0;
    transform: none !important;
    padding: 0;
}

/* Ligne titre (vertical-rl) à gauche, filtres à droite — miroir horizontal d’Événements */
.page-liste-cartes-boutique-title-row {
    flex-direction: row;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 1.5rem;
}

.page-liste-cartes-title-filters--boutique .page-liste-cartes-filtres-vertical--boutique {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    align-self: flex-end;
}

/* Desktop : la nav suit le slot bas-gauche (pl-8) + le bas de la ligne titre | filtres */
@media (min-width: 1024px) {
    .page-liste-cartes-title-filters--boutique .page-liste-cartes-boutique-title-row {
        align-items: flex-end;
    }

    .page-liste-cartes-title-filters--boutique.scrolled .page-liste-cartes-filtres-vertical--boutique {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Mobile / tablette : flux vertical du cluster (filtres masqués lg:block) */
@media (max-width: 1023px) {
    .page-liste-cartes-boutique-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
}

/* Découvrir la Puisaye (Lieux) au scroll */
.page-liste-cartes-title-filters--lieux.scrolled .page-liste-cartes-titles .page-liste-cartes-title {
    display: none;
}

/* Parent (ex. « Visiter ») : couleur = accent de la sous-page (variable définie sur le conteneur). */
.page-liste-cartes-title-filters--lieux .page-liste-cartes-parent {
    color: var(--page-liste-cartes-parent-accent, var(--color-accent, #4cea01));
    transition:
        font-size 0.35s ease,
        line-height 0.35s ease,
        letter-spacing 0.35s ease,
        text-underline-offset 0.35s ease,
        text-decoration-thickness 0.35s ease,
        opacity 0.3s ease;
}

.page-liste-cartes-title-filters--lieux.scrolled .page-liste-cartes-parent {
    font-family: 'BVH Eddi', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    color: var(--page-liste-cartes-parent-accent, var(--color-accent, #4cea01));
}
.page-liste-cartes-sibling-link {
    text-shadow: none;
}

.page-liste-cartes-sibling-link.page-liste-cartes-sibling-current {
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.page-liste-cartes-filtres-vertical--evenements.nav-over-content a {
    text-shadow: none !important;
}

.page-liste-cartes-filtres-vertical--evenements a.page-liste-cartes-filtre-current,
.page-liste-cartes-filtres-vertical--boutique ul li:not(.page-liste-cartes-filtres-boutique-panier) a.page-liste-cartes-filtre-current {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Filtres verticaux : interligne plus aéré (labels longs type « Tout voir ») */
.page-liste-cartes-filtres-vertical--evenements a,
.page-liste-cartes-filtres-vertical--boutique ul li:not(.page-liste-cartes-filtres-boutique-panier) a {
    line-height: 1.25;
}

.page-liste-cartes-title-filters--evenements .page-liste-cartes-title {
    pointer-events: none;
}

/* Événements : ligne filtres (gauche) | titre vertical (droite) — comme la home */
.page-liste-cartes-evenements-title-row {
    flex-direction: row;
    align-items: flex-start;
    flex-shrink: 0;
    gap: 1rem;
}

.page-liste-cartes-evenements-title-row .page-liste-cartes-title--evenements {
    margin-bottom: 0 !important;
}

.page-liste-cartes-title-filters--evenements .page-liste-cartes-filtres-vertical--evenements {
    position: relative;
    z-index: 2;
}

.page-liste-cartes-title-filters--lieux.scrolled .page-liste-cartes-sibling-link {
    font-family: 'BVH Eddi', sans-serif;
    font-weight: 900;
    font-size: 14px;
    line-height: 90%;
    letter-spacing: 0;
}

.page-liste-cartes-title-filters--lieux .page-liste-cartes-sibling-link {
    transition: color 0.3s ease, font-size 0.3s ease, line-height 0.3s ease;
}
/* Lien « . Page courante » : visible uniquement après scroll (évite doublon avec le H1) */
.page-liste-cartes-title-filters--lieux:not(.scrolled) .page-liste-cartes-sibling-current {
    display: none;
}

/* Titre Boutique : vertical-rl + 180° comme le lien Boutique sur la home (lecture bas → haut) ; au scroll typo commune (32px, souligné). */
.page-liste-cartes-title.page-liste-cartes-title--boutique {
    transform: rotate(180deg);
    text-shadow: none !important;
}

.page-liste-cartes-title--boutique.scrolled {
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    text-align: right;
}

.page-liste-cartes-title-filters--boutique:not(.scrolled) .page-liste-cartes-title--boutique {
    text-align: right;
}

.page-liste-cartes-title-filters--soutenir:not(.scrolled) {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: none !important;
    padding: 0;
}

.page-liste-cartes-title--soutenir.scrolled {
    font-size: 32px;
    line-height: 90%;
    text-align: right;
    margin-bottom: 0;
    text-decoration: none;
    text-shadow: none !important;
}

/* Tablette et mobile Boutique : pas de transformation au scroll, H1 reste vertical, pas d’affichage des filtres (déjà hidden lg:block) */
@media (max-width: 767px) {
    .page-liste-cartes-title-filters--boutique.scrolled {
        justify-content: center;
        flex-direction: column;
        height: 100vh;
        top: 28%;
        transform: translateY(-50%);
        padding-top: 0;
        padding-bottom: 0;
        gap: 0;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .page-liste-cartes-title-filters--boutique.scrolled {
        justify-content: center;
        flex-direction: column;
        height: 100vh;
        top: 31%;
        transform: translateY(-50%);
        padding-top: 0;
        padding-bottom: 0;
        gap: 0;
    }
}
@media (max-width: 1023px) {
    /* Annuler l’état scrolled desktop : H1 reste vertical, filtres masqués */
    .page-liste-cartes-title-filters--boutique.scrolled .page-liste-cartes-title--boutique {
        writing-mode: vertical-rl !important;
        transform: rotate(180deg) !important;
        font-size: 32px;
        text-align: right;
        margin-bottom: 0;
    }
    .page-liste-cartes-title-filters--boutique.scrolled .page-liste-cartes-filtres-vertical--boutique {
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        display: none !important;
    }
}

/* Filtres Boutique uniquement : BVH Eddi 900, 14px, alignés à gauche */
.page-liste-cartes-filtres-vertical--boutique {
    font-family: 'BVH Eddi', sans-serif;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0;
    text-align: left;
}
.page-liste-cartes-filtres-vertical--boutique ul {
    align-items: flex-start;
}
.page-liste-cartes-filtres-vertical--boutique a {
    display: inline-block;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.page-liste-cartes-filtres-vertical--boutique.nav-over-content a {
    text-shadow: none !important;
}

/* Filtres Boutique : survol = opacité uniquement (comme Événements) ; actif = soulignement texte */
.page-liste-cartes-filtres-vertical--boutique ul li:not(.page-liste-cartes-filtres-boutique-panier) a:hover {
    color: inherit;
    text-decoration: none;
}
/* Lien Panier (Boutique) : texte + icône + compteur sur une ligne, compteur même style que le texte */
.page-liste-cartes-filtres-boutique-panier-link,
.page-liste-cartes-filtres-boutique-panier-link .page-liste-cartes-panier-count {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}
.page-liste-cartes-filtres-boutique-panier-link .page-liste-cartes-panier-count {
    background: none;
    padding: 0;
    min-width: 0;
    height: auto;
}
/* Panier : tout sur une seule ligne + alignement vertical */
.page-liste-cartes-filtres-boutique-panier-link {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    align-items: center !important;
    gap: 0;
}
/* Espace à droite de « Panier » avant icône + compteur */
.page-liste-cartes-filtres-boutique-panier-link .page-liste-cartes-panier-icon-count {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0;
    margin-left: 1.25rem;
    gap: 0.5rem;
}
.page-liste-cartes-filtres-boutique-panier-link .page-liste-cartes-panier-icon {
    display: block;
    vertical-align: middle;
}
/* Compteur : hauteur égale à l’icône (16px), chiffre centré verticalement pour alignement avec Panier et l’icône */
.page-liste-cartes-filtres-boutique-panier-link .page-liste-cartes-panier-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 16px;
    line-height: 0;
}
/* Panier : survol = opacité uniquement */
.page-liste-cartes-filtres-boutique-panier-link:hover {
    color: inherit !important;
    opacity: 0.8;
}