/**
 * Barre de filtres du catalogue des châteaux :
 *  - barre collante (sticky) une fois le hero passé,
 *  - bascule de vue + recherche,
 *  - tiroir « Tous les filtres » glissant depuis la droite.
 * Reprend le style « pills » du thème (gris arrondi).
 */

/* Barre collante -------------------------------------------------------- */
/* NB : le thème pose `overflow-x: hidden` sur le body, ce qui casse
   `position: sticky`. On passe donc en `position: fixed` piloté au
   défilement (classe .is-fixed ajoutée par FilterCastle.js une fois le
   hero dépassé), avec un « spacer » pour éviter le saut de contenu. */

/* Colle la barre directement sous le hero (supprime le trou blanc :
   margin 100px du type-section-space-200 + margins 50px de la beige-line). */
.page-template-chateaux > main > .type-section-space-200:first-of-type,
.page-template-chateaux .type-section-space-200:has(.section-video-accueil) {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.page-template-chateaux .type-section-space-200:has(.section-video-accueil) + .beige-line {
    display: none;
}

.page-template-chateaux .search-chateaux,
.page-template-chateaux .type-section-space-200.search-chateaux {
    background: #fff;
    transition: box-shadow 0.2s ease;
    /* Remplace le height: 8rem du master.css (trop haut). */
    height: auto !important;
    min-height: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 8px;
    padding-bottom: 8px;
    top: auto;
    overflow: visible;
}

.page-template-chateaux .search-chateaux.is-fixed {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 40;
    overflow: visible;
    padding-top: 8px;
    padding-bottom: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Espace entre la barre de filtres et le premier titre (APPELLATION / Graves). */
.page-template-chateaux .chateaux-views {
    padding-top: 56px;
}

/* Espace un peu réduit entre Membres d’honneur et la 1re appellation. */
.page-template-chateaux .beige-line--after-honneur {
    margin: 2% auto;
}

.page-template-chateaux .beige-line--after-honneur + .type-section-space-200 .chateaux-views {
    padding-top: 28px;
}

/* Une seule vue visible à la fois (évite A–Z sous les appellations au chargement). */
.page-template-chateaux .view-panel[hidden] {
    display: none !important;
}

@media (max-width: 768px) {
    .page-template-chateaux .chateaux-views {
        padding-top: 36px;
    }

    .page-template-chateaux .beige-line--after-honneur + .type-section-space-200 .chateaux-views {
        padding-top: 20px;
    }
}

.page-template-chateaux .chateaux-bar-spacer {
    height: 0;
}

.page-template-chateaux .chateaux-filter-bar {
    position: relative;
}

.page-template-chateaux .chateaux-filter-bar .filtre-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.page-template-chateaux .view-tabs {
    display: flex;
    gap: 6px;
}

/* Pills ----------------------------------------------------------------- */
.page-template-chateaux .filter-pill {
    all: unset;
    box-sizing: border-box;
    font-family: var(--font-first, inherit);
    background-color: #F5F5F5;
    border-radius: 30px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: #1F2749;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.page-template-chateaux .filter-pill:hover {
    background-color: #e7e8ee;
}

.page-template-chateaux .filter-pill.is-active {
    background-color: #1F2749;
    color: #fff;
}

.page-template-chateaux .search-form {
    flex: 1 1 240px;
    min-width: 200px;
    margin: 0;
    position: relative;
    /* Annule le style « pilule » hérité de .filters-btn-style form (double trait). */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    height: auto !important;
    box-shadow: none !important;
}

.page-template-chateaux .search-input,
.page-template-chateaux #searchbar.search-input {
    box-sizing: border-box;
    width: 100%;
    height: 34px;
    border: 1.5px solid rgba(0, 0, 0, 0.22);
    border-radius: 30px;
    background-color: #F5F5F5;
    padding: 0 16px;
    font-family: var(--font-first, inherit);
    font-size: 13px;
    color: #1F2749;
    outline: none;
    box-shadow: none;
}

.page-template-chateaux .search-input::placeholder {
    color: rgba(31, 39, 73, 0.5);
}

/* Autocomplete ----------------------------------------------------------------- */
.page-template-chateaux .chateaux-autocomplete {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 100050;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(31, 39, 73, 0.12);
    max-height: min(360px, 60vh);
    overflow-y: auto;
    text-align: left;
}

.page-template-chateaux .chateaux-autocomplete[hidden] {
    display: none;
}

.page-template-chateaux .chateaux-autocomplete__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    text-decoration: none;
    color: #1F2749;
    text-align: left;
    transition: background-color 0.15s ease;
}

.page-template-chateaux .chateaux-autocomplete__item:hover,
.page-template-chateaux .chateaux-autocomplete__item.is-active {
    background-color: #F5F5F5;
}

.page-template-chateaux .chateaux-autocomplete__img {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: #e7e8ee;
}

.page-template-chateaux .chateaux-autocomplete__img--empty {
    display: inline-block;
}

.page-template-chateaux .chateaux-autocomplete__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
}

.page-template-chateaux .chateaux-autocomplete__title,
.page-template-chateaux .chateaux-autocomplete__appellation {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
}

.page-template-chateaux .chateaux-autocomplete__title {
    font-family: var(--font-first, inherit);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-template-chateaux .chateaux-autocomplete__appellation {
    font-family: var(--font-first, inherit);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: rgba(31, 39, 73, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-template-chateaux .all-filters {
    margin-left: auto;
}

/* Voile ----------------------------------------------------------------- */
.page-template-chateaux .filters-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(31, 39, 73, 0.35);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.page-template-chateaux .filters-overlay.is-open {
    opacity: 1;
}

.page-template-chateaux .filters-overlay[hidden] {
    display: none;
}

/* Tiroir de filtres ----------------------------------------------------- */
.page-template-chateaux .filters-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100001;
    height: 100vh;
    height: 100dvh;
    width: min(440px, 92vw);
    background: #fff;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.page-template-chateaux .filters-drawer.is-open {
    transform: translateX(0);
}

.page-template-chateaux .filters-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.page-template-chateaux .filter-group-title {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1F2749;
    font-weight: 600;
    margin: 0;
}

.page-template-chateaux .filters-close {
    all: unset;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    color: #1F2749;
    padding: 0 4px;
}

.page-template-chateaux .filters-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.page-template-chateaux .facet-title {
    font-weight: 600;
    color: #1F2749;
    margin: 0 0 12px;
    font-size: 15px;
}

.page-template-chateaux .filter-facet ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-template-chateaux .facet-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.page-template-chateaux .facet-option {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #1F2749;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.page-template-chateaux .filter-facet > ul > li + li .facet-option {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0;
}

.page-template-chateaux .facet-letters .facet-option {
    width: auto;
    min-width: 46px;
    justify-content: center;
    border-radius: 30px;
    border: none;
    background-color: #F5F5F5;
}

.page-template-chateaux .facet-option:hover {
    background-color: #eef0f6;
}

.page-template-chateaux .facet-option.is-active {
    background-color: #1F2749;
    color: #fff;
}

.page-template-chateaux .facet-option span {
    font-size: 12px;
    opacity: 0.55;
}

.page-template-chateaux .facet-option.is-active span {
    opacity: 0.85;
}

.page-template-chateaux .filters-drawer-footer {
    padding: 20px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.page-template-chateaux .filters-drawer-footer .facet-reset {
    display: block;
    width: 100%;
    text-align: center;
    cursor: pointer;
}

/* Surbrillance de la facette ciblée à l'ouverture. */
.page-template-chateaux .filter-facet.is-target .facet-title {
    color: #b18b46;
}

.page-template-chateaux .chateaux-no-result {
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
}

/* !important : le bloc porte .type-container-60, dont le `display` annule sinon l'attribut hidden. */
.page-template-chateaux .chateaux-no-result[hidden] {
    display: none !important;
}

/* Blocage du scroll de la page quand le tiroir est ouvert. */
body.chateaux-drawer-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .page-template-chateaux .type-section-space-200.search-chateaux {
        margin: 0 !important;
        padding-left: 0;
        padding-right: 0;
    }

    /* Barre pleine largeur (moins de padding type-container-60). */
    .page-template-chateaux .type-section-space-200.search-chateaux > .container.type-container-60 {
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

    /*
     * Masquer Appellation / Ordre alphabétique.
     * !important + spécificité élevée : master.css force
     * `.filtre-section div { display: flex }` et écrase un simple display:none.
     */
    .page-template-chateaux .type-section-space-200.search-chateaux .container .filtre-section .view-tabs {
        display: none !important;
    }

    /* Recherche + « Tous les filtres » sur une seule ligne, largeur écran. */
    .page-template-chateaux .type-section-space-200.search-chateaux .container .filtre-section {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
    }

    .page-template-chateaux .type-section-space-200.search-chateaux .filters-btn-style form.search-form,
    .page-template-chateaux .type-section-space-200.search-chateaux .container .filtre-section .search-form {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        position: relative;
    }

    .page-template-chateaux .type-section-space-200.search-chateaux .search-input,
    .page-template-chateaux .type-section-space-200.search-chateaux #searchbar.search-input {
        width: 100%;
        min-width: 0;
        /* ≥16px : évite le zoom automatique de Safari iOS au focus. */
        font-size: 16px;
        height: 40px;
    }

    .page-template-chateaux .type-section-space-200.search-chateaux .filters-btn-style .all-filters,
    .page-template-chateaux .type-section-space-200.search-chateaux .container .filtre-section .all-filters {
        display: flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        gap: 0 !important;
    }

    .page-template-chateaux .all-filters .filter-pill {
        padding: 0 14px;
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0;
        height: 40px;
    }

    /*
     * Autocomplete strictement sous le champ (absolute dans .search-form).
     * Largeur = champ de recherche (déjà quasi pleine largeur sur mobile).
     */
    .page-template-chateaux .search-form {
        overflow: visible;
    }

    .page-template-chateaux .chateaux-autocomplete {
        position: absolute !important;
        top: calc(100% + 6px) !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        z-index: 100060;
        max-height: min(45vh, 280px);
        box-sizing: border-box;
    }

    .page-template-chateaux .chateaux-autocomplete__item {
        padding: 10px 14px;
        gap: 14px;
    }

    .page-template-chateaux .chateaux-autocomplete__img {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
    }

    .page-template-chateaux .chateaux-autocomplete__title {
        font-size: 15px;
        white-space: normal;
    }

    .page-template-chateaux .chateaux-autocomplete__appellation {
        white-space: normal;
    }
}

/* Skeleton loading — cartes catalogue (FR + EN) ------------------------------- */
@keyframes ugcb-skel-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.page-template-chateaux .ugcb-skel-wrap {
    position: relative;
    overflow: hidden;
    background: #ece8e1;
}

.page-template-chateaux .ugcb-skel {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: linear-gradient(
        110deg,
        #e8e2d8 0%,
        #e8e2d8 35%,
        #f5f1ea 50%,
        #e8e2d8 65%,
        #e8e2d8 100%
    );
    background-size: 200% 100%;
    animation: ugcb-skel-shimmer 1.35s ease-in-out infinite;
}

.page-template-chateaux .ugcb-skel-wrap.is-loading .ugcb-skel {
    opacity: 1;
}

.page-template-chateaux .ugcb-skel-img {
    position: relative;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.page-template-chateaux .ugcb-skel-wrap.is-loaded .ugcb-skel-img {
    opacity: 1;
}

.page-template-chateaux .ugcb-skel-wrap.is-loaded .ugcb-skel {
    opacity: 0;
    animation: none;
}

/* Réserve la hauteur même sans src (vue alpha différée). Le rapport suit la
   largeur de la vignette : la réserve en vw datait des cartes 3 par ligne et
   maintenait les images en portrait étiré. */
.page-template-chateaux .components-card-appelation .ugcb-skel-wrap {
    width: 100%;
    aspect-ratio: 3 / 2;
    min-height: 120px;
}

.page-template-chateaux .component-card-membre-honneur .ugcb-skel-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 120px;
}

/* La photo occupe toute sa zone, quel que soit son cadrage d'origine. Sans cela
   la hauteur fixe imposée aux vignettes (200 px sous 768 px, une part de la
   largeur de fenêtre au-delà) ne coïncidait pas avec le rapport de la zone :
   trop courte, elle laissait apparaître le fond en bande claire sous l'image ;
   trop haute, elle débordait et remontait le cadrage. Le !important est requis
   pour passer devant la hauteur fixe, elle-même déclarée !important. */
.page-template-chateaux .ugcb-skel-wrap .ugcb-skel-img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

/* Rendu différé des blocs hors viewport (perf catalogue). */
.page-template-chateaux .chateau-group {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}