/* ========================================================================
   ZENATHOME - Block / Section Styles
   Reproduit la mise en page de la home zenathomedeco.com
   ======================================================================== */

/* ------------------------------------------------------------------ */
/* Largeurs : l'original est quasi pleine largeur partout              */
/*  - sections 2 colonnes (ambiance / quel service / contact) =        */
/*    full-bleed, image collée au bord                                 */
/*  - nos services / petits + = ~1400px (faibles gouttières)           */
/*  - hero / références = centrés ~960px                               */
/* ------------------------------------------------------------------ */

.section-padding {
    padding-top: 70px;
    padding-bottom: 70px;
}

/* ===== Sections 2 colonnes en PLEINE LARGEUR (full-bleed) ===== */
/* min-height : plancher pour que les sections courtes gardent ~510px,        */
/* comme la home d'origine (images ni écrasées ni démesurées).                */
.ambiance-section > .wp-block-columns,
.services-intro-section > .wp-block-columns,
.contact-form-section > .wp-block-columns {
    max-width: none !important;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    gap: 0;
    align-items: stretch;
    min-height: 510px;
}

/* Colonnes 50/50 strictes */
.ambiance-section > .wp-block-columns > .wp-block-column,
.services-intro-section > .wp-block-columns > .wp-block-column,
.contact-form-section > .wp-block-columns > .wp-block-column {
    flex: 1 1 50%;
    width: 50%;
    min-width: 0;
}

/* Sections full-bleed : pas de padding vertical "section" */
.ambiance-section.section-padding,
.services-intro-section.section-padding,
.contact-form-section.section-padding {
    padding-top: 0;
    padding-bottom: 0;
}

/* Colonne IMAGE (ambiance + contact) : l'image REMPLIT la colonne via        */
/* positionnement absolu -> c'est la hauteur de la section qui pilote, pas le  */
/* ratio de l'image. Fini les images portrait démesurées.                      */
.ambiance-section .wp-block-column:has(> figure.wp-block-image),
.contact-form-section .wp-block-column:has(> figure.wp-block-image) {
    padding: 0;
    align-self: stretch;
    position: relative;
    overflow: hidden;
}

.ambiance-section .wp-block-column:has(> figure.wp-block-image) figure,
.contact-form-section .wp-block-column:has(> figure.wp-block-image) figure {
    position: absolute;
    inset: 0;
    margin: 0;
}

.ambiance-section .wp-block-column:has(> figure.wp-block-image) img,
.contact-form-section .wp-block-column:has(> figure.wp-block-image) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Colonne TEXTE : padding interne */
.ambiance-section .wp-block-column:not(:has(> figure.wp-block-image)),
.services-intro-section .wp-block-column:not(:has(> figure.wp-block-image)),
.contact-form-section .wp-block-column:not(:has(> figure.wp-block-image)) {
    padding: 40px 70px 40px max(70px, calc((100vw - var(--container-max)) / 2));
    align-self: center;
}

/* Quand le texte est à DROITE (ambiance), le grand padding va à droite */
.ambiance-section .wp-block-column:not(:has(> figure.wp-block-image)) {
    padding: 40px max(70px, calc((100vw - var(--container-max)) / 2)) 40px 70px;
}

/* Formulaire de contact : compact pour rester proche de la hauteur d'origine */
:is(.contact-form-section, .contact-grid-block) .wpcf7-form label { margin-bottom: 2px; }
:is(.contact-form-section, .contact-grid-block) .wpcf7-form input[type="text"],
:is(.contact-form-section, .contact-grid-block) .wpcf7-form input[type="email"],
:is(.contact-form-section, .contact-grid-block) .wpcf7-form input[type="tel"] { padding: 9px 14px; }

/* "Quel service" : croquis perspective sur fond blanc -> contain (pas rogné) */
.services-intro-section .wp-block-column:has(> figure.wp-block-image) {
    background-color: #FFFFFF;
    padding: 40px 50px;
    align-self: center;
}

.services-intro-section .wp-block-column:has(> figure.wp-block-image) figure {
    margin: 0;
}

.services-intro-section .wp-block-column:has(> figure.wp-block-image) img {
    object-fit: contain;
    height: auto;
    max-height: 440px;
    width: 100%;
}

/* Petit "A" accentué dans les titres ZENATHOME */
.text-accent {
    color: var(--color-accent);
}

/* ------------------------------------------------------------------ */
/* Séparateur "gold" sous les titres                                   */
/* ------------------------------------------------------------------ */
.wp-block-separator.is-style-zenathome-gold {
    border: none;
    width: 70px;
    height: 3px;
    background-color: #C2A14D;
    opacity: 1;
    margin: 18px auto 28px;
}

.wp-block-separator.is-style-zenathome-gold.align-left {
    margin-left: 0;
    margin-right: auto;
}

/* ------------------------------------------------------------------ */
/* Titres de section                                                   */
/* ------------------------------------------------------------------ */
.section-padding > h2.wp-block-heading,
.ambiance-section h2.wp-block-heading,
.services-intro-section h2.wp-block-heading,
.contact-form-section h2.wp-block-heading,
.references-section h2.wp-block-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.9rem;
    color: var(--color-text);
}

/* ------------------------------------------------------------------ */
/* HERO                                                                */
/* ------------------------------------------------------------------ */
.hero-section.wp-block-cover {
    min-height: 660px;
    align-items: center;
}

.hero-section .wp-block-cover__image-background {
    object-fit: cover;
}

.hero-section .wp-block-cover__inner-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-section h1.wp-block-heading {
    margin-bottom: 14px;
}

.hero-section p {
    margin-bottom: 6px;
}

/* ------------------------------------------------------------------ */
/* SECTION AMBIANCE (image gauche / texte droite)                      */
/* ------------------------------------------------------------------ */
.ambiance-section {
    background-color: #FFFFFF;
}

.ambiance-section .wp-block-columns {
    align-items: center;
    gap: 50px;
}

.ambiance-section .wp-block-column {
    flex: 1;
}

.ambiance-section figure.wp-block-image,
.ambiance-section figure.wp-block-image img {
    margin: 0;
    width: 100%;
}

.ambiance-section figure.wp-block-image img {
    height: 420px;
    object-fit: cover;
    display: block;
}

.ambiance-section h2.wp-block-heading {
    margin-bottom: 0;
}

.ambiance-section p {
    color: var(--color-text);
    line-height: 1.7;
}

/* ------------------------------------------------------------------ */
/* SECTION "QUEL SERVICE" (texte gauche / image droite, fond blanc)    */
/* ------------------------------------------------------------------ */
.services-intro-section {
    background-color: #FFFFFF;
}

.services-intro-section > h2.wp-block-heading {
    margin-bottom: 28px;
}

.services-intro-section .wp-block-columns {
    align-items: center;
    gap: 50px;
}

.services-intro-section ul.wp-block-list {
    list-style: disc;
    padding-left: 22px;
    margin-bottom: 1em;
}

.services-intro-section ul.wp-block-list li {
    margin-bottom: 6px;
}

.services-intro-section figure.wp-block-image,
.services-intro-section figure.wp-block-image img {
    margin: 0;
    width: 100%;
}

.services-intro-section figure.wp-block-image img {
    height: 420px;
    object-fit: cover;
}

.services-intro-section .wp-block-buttons {
    margin-top: 24px;
}

/* ------------------------------------------------------------------ */
/* NOS SERVICES (4 cartes)                                             */
/* ------------------------------------------------------------------ */
.services-grid-block.wp-block-columns {
    gap: 14px;
    margin-top: 30px;
    max-width: 1400px !important;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

.services-grid-block .service-card-block.wp-block-column {
    flex: 1;
    background-color: #FFFFFF;
}

/* Image de carte */
.service-card-block .card-image-wrapper {
    padding: 0;
}

.service-card-block .card-image-wrapper figure.wp-block-image,
.service-card-block .card-image-wrapper img {
    margin: 0;
    width: 100%;
}

.service-card-block .card-image-wrapper figure.wp-block-image img {
    height: 180px;
    object-fit: cover;
    display: block;
}

/* L'étiquette superposée fait doublon avec le titre -> masquée */
.service-card-block .card-label {
    display: none;
}

/* Contenu de carte */
.service-card-block .card-content {
    padding: 20px 6px 0;
}

.service-card-block .card-content h3.wp-block-heading {
    text-align: left;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 10px;
}

.service-card-block .card-content p {
    text-align: left;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

/* ------------------------------------------------------------------ */
/* CONTACT (formulaire gauche / image droite)                          */
/* ------------------------------------------------------------------ */
.contact-form-section {
    background-color: #EEEEEE;
}

.contact-form-section .wp-block-columns {
    align-items: center;
    gap: 50px;
}

.contact-form-section figure.wp-block-image,
.contact-form-section figure.wp-block-image img {
    margin: 0;
    width: 100%;
}

.contact-form-section figure.wp-block-image img {
    height: 460px;
    object-fit: cover;
}

/* Contact Form 7 */
:is(.contact-form-section, .contact-grid-block) .wpcf7-form p {
    margin-bottom: 10px;
}

:is(.contact-form-section, .contact-grid-block) .wpcf7-form label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    width: 100%;
}

:is(.contact-form-section, .contact-grid-block) .wpcf7-form input[type="text"],
:is(.contact-form-section, .contact-grid-block) .wpcf7-form input[type="email"],
:is(.contact-form-section, .contact-grid-block) .wpcf7-form input[type="tel"],
:is(.contact-form-section, .contact-grid-block) .wpcf7-form textarea {
    width: 100%;
    padding: 11px 14px;
    margin-top: 5px;
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 0.95rem;
    border-radius: 0;
}

:is(.contact-form-section, .contact-grid-block) .wpcf7-form textarea {
    height: 92px;
    min-height: 92px;
    resize: vertical;
}

:is(.contact-form-section, .contact-grid-block) .wpcf7-form input:focus,
:is(.contact-form-section, .contact-grid-block) .wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

:is(.contact-form-section, .contact-grid-block) .wpcf7-form .wpcf7-acceptance {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

:is(.contact-form-section, .contact-grid-block) .wpcf7-form input[type="submit"] {
    background-color: var(--color-accent);
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    padding: 13px 30px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color var(--transition);
}

:is(.contact-form-section, .contact-grid-block) .wpcf7-form input[type="submit"]:hover {
    background-color: var(--color-accent-hover);
}

/* ------------------------------------------------------------------ */
/* NOS REFERENCES                                                      */
/* ------------------------------------------------------------------ */
.references-section {
    background-color: #FFFFFF;
}

/* Pas de séparateur gold sous "Nos références" dans l'original */
.references-section > .wp-block-separator {
    display: none;
}

/* Boîte bordée centrée contenant les logos */
.references-section .references-logos {
    max-width: 920px;
    width: 100%;
    margin: 24px auto 0;
    padding: 30px;
    border: 1px solid #E4E4E4;
}

.references-section .references-logos img {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    height: auto;
}

/* ------------------------------------------------------------------ */
/* NOS PETITS + (aplat rouge)                                          */
/* ------------------------------------------------------------------ */
.petitsplus-section.wp-block-cover {
    background-color: var(--color-accent);
}

/* On force l'aplat rouge : on masque l'image et le voile noir */
.petitsplus-section .wp-block-cover__image-background {
    display: none;
}

.petitsplus-section .wp-block-cover__background {
    background-color: var(--color-accent) !important;
    opacity: 1 !important;
}

.petitsplus-section h2.wp-block-heading {
    color: #FFFFFF;
    font-size: 1.7rem;
}

/* Pas de séparateur gold dans l'original -> discret */
.petitsplus-section .wp-block-separator {
    display: none;
}

.petitsplus-grid-block.wp-block-columns {
    gap: 24px;
    margin-top: 10px;
    max-width: 1400px !important;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

/* Élargir le conteneur interne du cover "petits +" */
.petitsplus-section .wp-block-cover__inner-container {
    max-width: 1400px;
    width: 100%;
}

.petitsplus-grid-block .wp-block-column {
    text-align: center;
}

.petitsplus-icon-block {
    color: #FFFFFF;
    margin: 0 auto 16px;
    display: flex;
    justify-content: center;
}

.petitsplus-icon-block svg {
    width: 46px;
    height: 46px;
}

.petitsplus-section h3.wp-block-heading {
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem !important;
    line-height: 1.4;
    margin-bottom: 6px;
}

.petitsplus-section .wp-block-column > p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
}

/* ------------------------------------------------------------------ */
/* HERO de page intérieure (Cuisines, Galerie, Contact…)               */
/* ------------------------------------------------------------------ */
.page-hero-block.wp-block-cover {
    min-height: 40vh;
    align-items: center;
}

.page-hero-block .wp-block-cover__image-background {
    object-fit: cover;
}

.page-hero-block h1.wp-block-heading {
    font-size: 2.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* PAGE CUISINES                                                        */
/* ------------------------------------------------------------------ */
.bg-light-section {
    background-color: #F7F7F7;
}

/* Rangée de 3 images (hauteur uniforme) */
.cuisines-gallery-3.wp-block-columns {
    gap: 16px;
    margin-top: 26px;
}

.cuisines-gallery-3 .wp-block-image,
.cuisines-gallery-3 .wp-block-image img {
    margin: 0;
    width: 100%;
}

.cuisines-gallery-3 .wp-block-image img {
    height: 240px;
    object-fit: cover;
    display: block;
}

/* Image large "feature" en letterbox */
.cuisines-feature {
    margin: 26px auto 0;
}

.cuisines-feature img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
}

/* Liste des prestations */
.prestations-list {
    list-style: disc;
    padding-left: 22px;
    margin: 6px 0 10px;
}

.prestations-list li {
    margin-bottom: 8px;
    font-size: 1.05rem;
}

/* ------------------------------------------------------------------ */
/* GALERIE - grille + lightbox                                         */
/* ------------------------------------------------------------------ */
.gallery-grid-block {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 1400px;
    margin: 0 auto;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4 / 3;
    background-color: #ddd;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.gallery-item:hover img {
    transform: scale(1.06);
}

.gallery-item-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(182, 44, 44, 0);
    opacity: 0;
    transition: all 0.3s ease;
}

.gallery-item:hover .gallery-item-overlay {
    background-color: rgba(182, 44, 44, 0.55);
    opacity: 1;
}

.gallery-zoom {
    color: #FFFFFF;
    font-size: 2.6rem;
    font-weight: 300;
    line-height: 1;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.92);
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    max-width: 90vw;
    max-height: 85vh;
}

.lightbox-content img {
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: transparent;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    transition: color var(--transition);
    z-index: 2001;
}

.lightbox-close {
    top: 24px;
    right: 32px;
    font-size: 2.6rem;
    line-height: 1;
}

.lightbox-prev,
.lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.2rem;
    padding: 16px;
}

.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    color: var(--color-accent);
}

.lightbox-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-body);
    font-size: 0.95rem;
}

@media (max-width: 1024px) {
    .gallery-grid-block { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
    .gallery-grid-block { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}