/* ============================================
   PLAN & VASQUE - Pages CMS + Page Cuisine
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Montserrat:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

/* === BACKGROUND MARBRE - TOUTES LES PAGES CMS === */
/* Même structure que la homepage : marbre part du header */

body.page-cms,
[id^="module-ph_simpleblog"] {
    background: #0d0d0d !important;
    position: relative;
}

body.page-cms #header,
body.page-cms #header .header-banner,
body.page-cms #header .header-nav,
body.page-cms #header .header-top,
body.page-cms #header .desktop-header-style-4,
body.page-cms #desktop-header,
body.page-cms #desktop-header-container,
body.page-cms #mobile-header-sticky,
body.page-cms .pv-header,
[id^="module-ph_simpleblog"] #header,
[id^="module-ph_simpleblog"] .header-banner,
[id^="module-ph_simpleblog"] .header-nav,
[id^="module-ph_simpleblog"] .header-top,
[id^="module-ph_simpleblog"] .desktop-header-style-4,
[id^="module-ph_simpleblog"] .pv-header {
    background: transparent !important;
}

body.page-cms #wrapper,
[id^="module-ph_simpleblog"] #wrapper {
    border-bottom: none !important;
    background: transparent !important;
}

body.page-cms .breadcrumb,
[id^="module-ph_simpleblog"] .breadcrumb {
    background: transparent !important;
}

/* Marbre en haut avec gradient fondu vers noir — part du header */
/* body.page-cms::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 250px;
    background: url('../img/marble-bg.jpg') center top / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    mask-image: linear-gradient(to bottom, black, transparent);
    z-index: 0;
    pointer-events: none;
} */

/* Marbre en bas avec gradient fondu depuis noir */
/* .page-content.page-cms::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 350px;
    background: url('../img/marble-bg.jpg') center bottom / cover no-repeat;
    -webkit-mask-image: linear-gradient(to top, black, transparent);
    mask-image: linear-gradient(to top, black, transparent);
    z-index: 0;
    pointer-events: none;
} */

.page-content.page-cms {
    position: relative;
}

/* Contenu au-dessus des gradients */
body.page-cms #header,
[id^="module-ph_simpleblog"] #header {
    position: relative;
    z-index: 2;
}

body.page-cms #footer,
[id^="module-ph_simpleblog"] #footer {
    position: relative;
    z-index: 1;
}

/* Centrer les widgets Elementor */
.page-content.page-cms .elementor-column-wrap {
    align-items: center;
}

.page-content.page-cms .elementor-widget-wrap {
    align-items: center;
}

/* === PAGE CUISINE (CMS ID 21) - LAYOUT === */

/* Masquer titre h1 par défaut (breadcrumb conservé) */
.cms-id-21 .page-header {
    display: none !important;
}

/* Wrapper full-width */
.cms-id-21 #wrapper {
    border-bottom: none !important;
    background: transparent !important;
}

.cms-id-21 #inner-wrapper {
    max-width: 100% !important;
    padding: 0 !important;
}

.cms-id-21 #content-wrapper {
    max-width: 100% !important;
    padding: 0 !important;
}

.cms-id-21 #left-column,
.cms-id-21 #right-column {
    display: none !important;
}

/* === ELEMENTOR OVERRIDES === */

.page-content.page-cms .elementor-section {
    position: relative;
}

/* === HERO SECTION === */

.page-cuisine {
    /* padding-top: 140px !important; */
    /* padding-bottom: 24px !important; */
    text-align: center;
}

/* Titre outline — watermark subtil, le sous-titre chevauche */
.pv-outline-title {
    text-align: center;
}

.pv-outline-title .elementor-heading-title,
.pv-outline-title h1,
.pv-outline-title h2,
.pv-category-hero-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 500 !important;
    font-size: 5rem !important;
    line-height: 0.85 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgba(255, 225, 184, 0.3);
    paint-order: stroke fill;
    position: relative;
    display: inline-block;
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    text-align: center !important;
    letter-spacing: 6px;
    bottom: -12px;
}

/* Sous-titre italic — chevauche le titre */
.pv-subtitle,
.pv-subtitle p {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    font-style: italic !important;
    font-size: 18px !important;
    color: #FFFFFF !important;
    text-align: center !important;
    max-width: 304px;
    margin: 0 auto !important;
    line-height: 1.5 !important;
    position: relative;
    z-index: 1;
}

/* Séparateur doré */
.pv-separator .elementor-divider-separator {
    border-top-color: #FFE1B8 !important;
    width: 65px !important;
    margin: 0 auto !important;
}

.pv-separator .elementor-divider {
    padding-top: 16px !important;
    padding-bottom: 0 !important;
}

/* Label "Nos réalisations" */
.pv-realisations-label,
.pv-realisations-label p {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 300 !important;
    font-size: 16px !important;
    color: #FFFFFF !important;
    text-align: center !important;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
}

/* === GALERIE MASONRY === */

.pv-masonry-gallery,
.pv-masonry-gallery .elementor-container,
.pv-masonry-gallery .elementor-row,
.pv-masonry-gallery .elementor-column-wrap,
.pv-masonry-gallery .elementor-element-populated,
.pv-masonry-gallery .elementor-widget-wrap {
    background: transparent !important;
    background-color: transparent !important;
}

.pv-gallery-grid {
    columns: 4;
    column-gap: 8px;
}

.pv-gallery-grid img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    object-fit: cover;
    break-inside: avoid;
    margin-bottom: 8px;
}

/* === BOUTON CTA STICKY === */

.pv-cta-sticky {
    position: sticky !important;
    bottom: 56px;
    z-index: 1;
    display: flex !important;
    justify-content: center;
    padding: 0 16px;
    margin-bottom: 56px;
}

.pv-cta-sticky a,
.pv-cta-sticky .elementor-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--pv-gold, #FFE1B8) !important;
    color: #0d0d0d !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    padding: 20px 24px !important;
    border-radius: 40px !important;
    border: none !important;
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.5);
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.pv-cta-sticky a:hover,
.pv-cta-sticky .elementor-button:hover {
    background: var(--pv-gold-hover, #ffd699) !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
    transform: translateY(-2px);
}

/* === PAGE CERAMIQUES (CMS ID 23) === */

.cms-id-23 .page-header {
    display: none !important;
}

.cms-id-23 .page-content {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Filtres */
.pv-ceramics-filters {
    display: flex;
    justify-content: center;
    margin: 32px 0 48px;
}

.pv-ceramics-filters-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #242424;
    border: 1px solid #3b3b3b;
    border-radius: 51px;
    padding: 12px 16px;
}

.pv-ceramics-filters button {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding: 12px 16px;
    border: 1px solid transparent;
    background: transparent;
    color: #737373;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 54px;
    flex: 1 0 0;
    text-align: center;
    line-height: 1;
}

.pv-ceramics-filters button.active {
    background: #3b3b3b;
    border-color: #565658;
    color: #FFFFFF;
    font-weight: 500;
}

/* Grille masonry — CSS columns pour espacement vertical uniforme */
/* L'ordre des items dans le HTML est adapté pour un rendu visuel gauche-droite */
.pv-ceramics-grid {
    columns: 4;
    column-gap: 32px;
    padding: 0 64px 64px;
}

/* Carte */
.pv-ceramic-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    break-inside: avoid;
    margin-bottom: 32px;
}

.pv-ceramic-card.hidden {
    display: none;
}

.pv-ceramic-card-image {
    position: relative;
    height: 400px;
    background: #242424;
    border: 1px solid #3b3b3b;
    border-radius: 36px 36px 8px 8px;
    overflow: hidden;
    padding: 10px;
}

.pv-ceramic-card-image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    border-radius: 28px 28px 4px 4px !important;
}

.pv-ceramic-card-name {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    padding: 24px 26px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #FFFFFF;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));
    border-radius: 0 0 4px 4px;
}

.pv-ceramic-card-specs {
    display: flex;
    align-items: center;
    justify-content: start;
    background: #242424;
    border: 1px solid #3b3b3b;
    padding: 16px 24px;
    border-radius: 8px;
    gap: 8px;
}

.pv-ceramic-card-specs:last-child,
.pv-ceramic-card-specs.last-visible {
    border-radius: 8px 8px 36px 36px;
}

.pv-specs-left {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pv-spec {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    color: #FFFFFF;
}

.pv-spec img {
    width: 24px;
    height: 24px;
}

.pv-specs-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pv-spec-icon {
    width: 29px;
    height: 29px;
}

/* Légende */
.pv-ceramics-legend {
    padding: 32px 64px 64px;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 4;
}

.pv-ceramics-legend-inner {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--pv-text-secondary, rgba(255,255,255,0.7));
}

.pv-ceramics-legend-inner p {
    margin: 0 0 6px;
    font-weight: 600;
}

.pv-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.pv-legend-item img {
    width: 20px;
    height: 20px;
}

@media (max-width: 992px) {
    .pv-ceramics-grid {
        columns: 1;
        column-gap: 16px;
        padding: 0 16px 32px;
    }
}

/* === RESPONSIVE === */

@media (max-width: 767px) {
    .pv-outline-title .elementor-heading-title {
        font-size: 48px !important;
        letter-spacing: 3px;
        bottom: -8px;
    }

    .pv-subtitle,
    .pv-subtitle p {
        font-size: 16px !important;
        max-width: 260px;
    }

    .pv-gallery-grid {
        columns: 1;
        column-gap: 6px;
    }

    .pv-gallery-grid img {
        margin-bottom: 6px;
    }

    .pv-cta-sticky {
        bottom: 32px;
        padding: 0 16px;
    }

    .pv-cta-sticky a,
    .pv-cta-sticky .elementor-button {
        width: 100%;
        font-size: 14px !important;
        padding: 16px 20px !important;
    }

    .pv-ceramic-card {
        margin-bottom: 16px;
    }

    .pv-ceramic-card-image {
        height: 250px;
    }

    .pv-ceramic-card-name {
        font-size: 18px;
        padding: 16px 18px;
    }

    .pv-spec {
        font-size: 14px;
    }

    .pv-ceramic-card-specs {
        padding: 12px 16px;
    }

    .pv-ceramics-legend {
        padding: 24px 16px 48px;
        justify-content: start;
    }
}

/* === DESCRIPTION CATÉGORIE === */
.category-description {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 8px;
    line-height: 1.6;
    font-weight: 600;
}

/* === BARRE FILTRES / TRI === */
#category .row.align-items-center.justify-content-between.small-gutters,
#search .row.align-items-center.justify-content-between.small-gutters {
    gap: 5px;
}

/* === BOUTON FILTRER (mobile) === */
#search_filter_toggler {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #242424;
    color: #FFE1B8;
    border: 1px solid #3b3b3b;
    border-radius: 8px;
    padding: 10px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

#search_filter_toggler:hover,
#search_filter_toggler:focus {
    background: #3b3b3b;
    color: #FFE1B8;
    border-color: #FFE1B8;
}

#search_filter_toggler .fa-filter {
    color: #FFE1B8;
}

/* === CONTROLES FILTRES (mobile) === */
#search_filter_controls {
    display: flex;
    gap: 12px;
}

#search_filter_controls .js-search-filters-clear-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: #FFFFFF;
    border: 1px solid #3b3b3b;
    border-radius: 8px;
    padding: 10px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    flex: 1;
}

#search_filter_controls .js-search-filters-clear-all:hover {
    background: #242424;
    border-color: #FFE1B8;
    color: #FFE1B8;
}

#search_filter_controls .ok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFE1B8;
    color: #0d0d0d;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    flex: 1;
}

#search_filter_controls .ok:hover {
    background: #e6c8a0;
}