/*
Theme Name: Bucolia Paysage
Theme URI: https://example.com/bucolia-paysages
Author: OpenAI
Description: Thème WordPress complet, responsive et autonome pour Bucolia Paysages.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: bucolia-paysages
*/

:root{
  --bp-green:#069447;
  --bp-green-dark:#075d34;
  --bp-orange:#ff8425;
  --bp-sage:#dfeabf;
  --bp-cream:#fff3c8;
  --bp-paper:#fbfcf4;
  --bp-ink:#111a17;
  --bp-muted:#5a635e;
  --bp-white:#fff;
  --bp-radius:26px;
  --bp-shadow:0 18px 50px rgba(7,93,52,.10);
  --bp-container:min(1240px,calc(100% - 40px));
  --bp-title:"Orange Squash Regular","Cormorant Garamond",Georgia,serif;
  --bp-body:"Open Sans",Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--bp-ink);background:var(--bp-paper);font-family:var(--bp-body);line-height:1.65}img{max-width:100%;height:auto}a{color:inherit;text-decoration:none}.container{width:var(--bp-container);margin-inline:auto}.site-main{overflow:hidden}.section{padding:96px 0}.section--soft{background:linear-gradient(180deg,#f8faec 0%,#fff 100%)}.eyebrow{display:inline-flex;align-items:center;gap:.55rem;border:1px solid rgba(7,93,52,.35);border-radius:999px;padding:.45rem .9rem;color:var(--bp-green-dark);font-size:.85rem;font-weight:700}.eyebrow:before{content:"✦";color:var(--bp-green)}h1,h2,h3{font-family:var(--bp-title);line-height:1.05;margin:0 0 1rem;font-weight:500}h1{font-size:clamp(3.4rem,7vw,7rem)}h2{font-size:clamp(2.4rem,4.5vw,4.4rem)}h3{font-size:1.7rem}.accent{color:var(--bp-orange)}.lead{font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--bp-muted);max-width:760px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;border-radius:999px;padding:.9rem 1.4rem;font-weight:700;border:1px solid transparent;transition:.25s ease;cursor:pointer}.btn:hover{transform:translateY(-2px)}.btn--primary{background:var(--bp-green-dark);color:#fff}.btn--primary:hover{background:var(--bp-orange)}.btn--ghost{border-color:rgba(17,26,23,.25);background:rgba(255,255,255,.5)}.button-row{display:flex;gap:1rem;flex-wrap:wrap}.site-header{position:sticky;top:0;z-index:50;background:rgba(249,251,238,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(7,93,52,.08)}.header-inner{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:2rem}.site-branding img{height:60px;width:auto}.brand-text{font-family:var(--bp-title);font-size:2rem;color:var(--bp-green-dark)}.main-nav{display:flex;align-items:center;gap:1.6rem}.main-nav ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0}.main-nav a{font-weight:700;font-size:.95rem}.main-nav a:hover,.current-menu-item>a{color:var(--bp-green)}.menu-toggle{display:none;background:none;border:0;font-size:1.7rem}.hero{background:radial-gradient(circle at 18% 25%,rgba(223,234,191,.9),transparent 30%),radial-gradient(circle at 88% 20%,rgba(255,243,200,.9),transparent 28%),linear-gradient(180deg,#f6f9e8,#fbfcf4);padding:70px 0 40px;position:relative}.hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}.hero h1{max-width:1000px}.hero .button-row{justify-content:center;margin-top:1.4rem}.hero-media{margin-top:46px;border-radius:90px 18px 90px 18px;overflow:hidden;box-shadow:var(--bp-shadow);min-height:420px;background:linear-gradient(135deg,rgba(7,93,52,.15),rgba(255,132,37,.12)),url('assets/images/hero-placeholder.jpg') center/cover}.hero-media img{width:100%;height:100%;object-fit:cover}.botanical{position:absolute;opacity:.45;pointer-events:none}.botanical--l{left:-40px;top:230px;width:180px}.botanical--r{right:-20px;top:160px;width:150px}.split{display:grid;grid-template-columns:.8fr 1.4fr;gap:70px;align-items:center}.counter{font-weight:800;color:var(--bp-green);letter-spacing:.08em}.comparison-project-title{font-family:var(--bp-body);font-size:1.25rem;font-weight:700;color:var(--bp-green-dark);margin-top:1.3rem}.bucolia-before-after{position:relative}.bucolia-before-after__media{position:relative;overflow:hidden;border-radius:var(--bp-radius);box-shadow:var(--bp-shadow);min-height:480px;background:var(--bp-sage);isolation:isolate}.bucolia-before-after__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}.bucolia-before-after__after{position:absolute;inset:0;clip-path:inset(0 50% 0 0);will-change:clip-path}.bucolia-before-after__label{position:absolute;top:18px;z-index:4;background:rgba(255,255,255,.92);padding:.42rem .78rem;border-radius:999px;font-weight:800;font-size:.78rem;box-shadow:0 4px 14px rgba(0,0,0,.1)}.bucolia-before-after__label--before{left:18px}.bucolia-before-after__label--after{right:18px}.bucolia-before-after__handle{position:absolute;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;gap:7px;font-size:1.25rem;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.2);pointer-events:none}.bucolia-before-after__handle:before,.bucolia-before-after__handle:after{content:"";position:absolute;left:50%;width:2px;height:260px;background:rgba(255,255,255,.95);transform:translateX(-50%)}.bucolia-before-after__handle:before{bottom:100%}.bucolia-before-after__handle:after{top:100%}.bucolia-before-after__range{position:absolute;z-index:6;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}.bucolia-before-after__project-link{position:absolute;z-index:8;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:.55rem;background:var(--bp-green-dark);color:#fff;padding:.75rem 1rem;border-radius:999px;font-weight:700;font-size:.88rem;box-shadow:0 8px 22px rgba(0,0,0,.2);transition:.25s ease}.bucolia-before-after__project-link:hover{background:var(--bp-orange);transform:translateY(-2px)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}.card{background:#fff;border-radius:22px;padding:28px;box-shadow:0 12px 34px rgba(7,93,52,.08);border:1px solid rgba(7,93,52,.08)}.card-icon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:var(--bp-sage);font-size:1.8rem;margin-bottom:18px}.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px}.project-card{position:relative;border-radius:24px;overflow:hidden;min-height:360px;background:#dfeabf}.project-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.project-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.7))}.project-card__content{position:absolute;z-index:2;left:24px;right:24px;bottom:22px;color:#fff}.about-grid,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.rounded-media{border-radius:28px;overflow:hidden;box-shadow:var(--bp-shadow)}.values{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}.value{background:#fff;border-radius:18px;padding:20px;border:1px solid rgba(7,93,52,.08)}.cta-band{background:var(--bp-green-dark);color:#fff;border-radius:28px;padding:46px;display:flex;align-items:center;justify-content:space-between;gap:2rem;position:relative;overflow:hidden}.cta-band h2{font-size:clamp(2rem,4vw,3.5rem)}.site-footer{background:#073d25;color:#eaf4e4;padding:70px 0 26px}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px}.site-footer ul{list-style:none;padding:0;margin:0}.site-footer li{margin:.5rem 0}.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}.page-hero{padding:90px 0 70px;background:linear-gradient(180deg,var(--bp-sage),#f7faec)}.page-hero .lead{max-width:700px}.service-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:55px 0;border-bottom:1px solid rgba(7,93,52,.1)}.service-row:nth-child(even) .service-media{order:-1}.service-media{border-radius:24px;overflow:hidden;min-height:340px;background:linear-gradient(135deg,var(--bp-sage),var(--bp-cream))}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.gallery-card{border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--bp-shadow)}.gallery-card img{width:100%;aspect-ratio:4/3;object-fit:cover}.gallery-card__body{padding:20px}.form-card{background:#fff;border-radius:24px;padding:32px;box-shadow:var(--bp-shadow)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field--full{grid-column:1/-1}.field label{display:block;font-weight:700;margin-bottom:7px}.field input,.field textarea,.field select{width:100%;padding:14px 15px;border:1px solid rgba(17,26,23,.18);border-radius:12px;font:inherit;background:#fff}.field textarea{min-height:150px;resize:vertical}.notice{padding:14px 16px;border-radius:12px;margin-bottom:18px}.notice--success{background:#e2f6e8;color:#1b6c3d}.notice--error{background:#fde8e5;color:#9c2b21}.wp-block-image img{border-radius:18px}
@media(max-width:980px){.main-nav{position:fixed;inset:86px 0 auto;background:#f8faec;padding:24px;display:none;flex-direction:column;align-items:stretch}.main-nav.is-open{display:flex}.main-nav ul{flex-direction:column}.menu-toggle{display:block}.header-cta{display:none}.split,.about-grid,.contact-grid,.service-row{grid-template-columns:1fr}.service-row:nth-child(even) .service-media{order:0}.cards,.gallery-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.bucolia-before-after__media{min-height:360px}.hero-media{min-height:330px;border-radius:54px 16px 54px 16px}}
@media(max-width:680px){:root{--bp-container:min(100% - 28px,1240px)}.section{padding:68px 0}.hero{padding-top:46px}.cards,.projects-grid,.gallery-grid,.values,.form-grid,.footer-grid{grid-template-columns:1fr}.field--full{grid-column:auto}.bucolia-before-after__media{min-height:310px;aspect-ratio:4/3}.bucolia-before-after__project-link{right:12px;bottom:12px;font-size:.78rem}.bucolia-before-after__handle{width:48px;height:48px}.cta-band{padding:32px;align-items:flex-start;flex-direction:column}.site-branding img{height:48px}.header-inner{min-height:74px}.main-nav{inset:74px 0 auto}.page-hero{padding:65px 0 50px}}


/* Gutenberg / contenu administrable */
/* Blocs Gutenberg en pleine largeur */
.bucolia-editable-page > .wp-block-group.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Contenu intérieur toujours centré */
.bucolia-editable-page .wp-block-group__inner-container {
    width: var(--bp-container);
    max-width: var(--bp-container);
    margin-inline: auto;
}
.bucolia-editable-page .wp-block-columns{margin-bottom:0}
.bucolia-editable-page .wp-block-button.btn{padding:0;background:transparent;border:0}
.bucolia-editable-page .wp-block-button.btn .wp-block-button__link{border-radius:999px;padding:.9rem 1.4rem;font-family:var(--bp-body);font-weight:700;transition:.25s ease}
.bucolia-editable-page .wp-block-button.btn--primary .wp-block-button__link{background:var(--bp-green-dark);color:#fff}
.bucolia-editable-page .wp-block-button.btn--primary .wp-block-button__link:hover{background:var(--bp-orange)}
.bucolia-editable-page .wp-block-button.btn--ghost .wp-block-button__link{background:rgba(255,255,255,.5);color:var(--bp-ink);border:1px solid rgba(17,26,23,.25)}
.bucolia-editable-page .wp-block-image.hero-media{width:var(--bp-container);margin:46px auto 0;min-height:420px}
.bucolia-editable-page .wp-block-image.hero-media img{width:100%;height:420px;object-fit:cover}
.bucolia-editable-page .wp-block-columns.split,.bucolia-editable-page .wp-block-columns.about-grid,.bucolia-editable-page .wp-block-columns.contact-grid,.bucolia-editable-page .wp-block-columns.service-row{width:var(--bp-container);margin-inline:auto}
.bucolia-editable-page .section>h2,.bucolia-editable-page .section>p,.bucolia-editable-page .section>.wp-block-shortcode{width:var(--bp-container);margin-left:auto;margin-right:auto}
.bucolia-editable-page .wp-block-columns.cards{width:var(--bp-container);margin:40px auto 0}
.bucolia-editable-page .wp-block-column.card{flex-basis:0!important}
.bucolia-editable-page .cta-band .btn{background:#fff;color:var(--bp-green-dark)}
@media(max-width:980px){.bucolia-editable-page .wp-block-columns.split,.bucolia-editable-page .wp-block-columns.about-grid,.bucolia-editable-page .wp-block-columns.contact-grid,.bucolia-editable-page .wp-block-columns.service-row{display:flex;flex-direction:column}.bucolia-editable-page .wp-block-columns.cards{display:grid;grid-template-columns:1fr 1fr}.bucolia-editable-page .wp-block-image.hero-media img{height:330px}}
@media(max-width:680px){.bucolia-editable-page .wp-block-columns.cards{grid-template-columns:1fr}.bucolia-editable-page .wp-block-image.hero-media img{height:280px}}


/* =========================================================
   PERSONNALISATIONS BUCOLIA — CSS ADDITIONNEL FUSIONNÉ
   Ancien contenu de Apparence > Personnaliser > CSS additionnel
   Placé après le CSS principal afin de conserver les priorités.
========================================================= */

/* =========================
   CARTE / ENCART FORMULAIRE
   ========================= */
/* =========================================================
   DÉCORATIONS DE LA PAGE D’ACCUEIL BUCOLIA PAYSAGES
========================================================= */

:root {
    --bp-hero-gauche:
        url("https://bucolia-paysages.fr/wp-content/uploads/2026/08/hero-gauche.png");

    --bp-hero-droite:
        url("https://bucolia-paysages.fr/wp-content/uploads/2026/08/hero-droite.png");

    --bp-prestations-gauche:
        url("https://bucolia-paysages.fr/wp-content/uploads/2026/08/prestations-gauche.png");

    --bp-prestations-droite:
        url("https://bucolia-paysages.fr/wp-content/uploads/2026/08/prestations-droite.png");

    --bp-cta-gauche:
        url("https://bucolia-paysages.fr/wp-content/uploads/2026/08/cta-gauche.png");

    --bp-cta-droite:
        url("https://bucolia-paysages.fr/wp-content/uploads/2026/08/cta-droite.png");
}

/* =========================================================
   RÉGLAGES COMMUNS
========================================================= */

.hero,
.section:has(.cards),
.cta-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Le vrai contenu passe devant les motifs */
.hero > *,
.section:has(.cards) > *,
.cta-band > * {
    position: relative;
    z-index: 2;
}

/* Configuration commune des illustrations */
.hero::before,
.hero::after,
.section:has(.cards)::before,
.section:has(.cards)::after,
.cta-band::before,
.cta-band::after {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
}

/* =========================================================
   SECTION PRINCIPALE — CULTIVER LE BEAU
========================================================= */

/* Grande composition à gauche */
.hero::before {
    left: -28px;
    top: 145px;

    width: clamp(190px, 16vw, 290px);
    height: clamp(330px, 34vw, 520px);

    background-image: var(--bp-hero-gauche);
    background-position: left center;
}

/* Composition à droite */
.hero::after {
    right: 22px;
    top: 130px;

    width: clamp(140px, 12vw, 210px);
    height: clamp(190px, 18vw, 285px);

    background-image: var(--bp-hero-droite);
    background-position: right center;
}

/* Évite que le texte du hero touche les illustrations */
.hero .container,
.hero .hero-content,
.hero .hero-inner {
    position: relative;
    z-index: 2;
}

/* =========================================================
   SECTION NOS PRESTATIONS
========================================================= */

.section:has(.cards) {
    padding-top: 75px;
    padding-bottom: 85px;
}

/* Branche claire à gauche du titre */
.section:has(.cards)::before {
    top: 45px;
    left: calc(50% - 360px);

    width: clamp(100px, 9vw, 155px);
    height: clamp(80px, 8vw, 125px);

    background-image: var(--bp-prestations-gauche);
    background-position: center;
    opacity: 0.9;
}

/* Branche claire à droite du titre */
.section:has(.cards)::after {
    top: 45px;
    right: calc(50% - 360px);

    width: clamp(100px, 9vw, 155px);
    height: clamp(80px, 8vw, 125px);

    background-image: var(--bp-prestations-droite);
    background-position: center;
    opacity: 0.9;
}

/* Cartes légèrement plus premium */
.section:has(.cards) .card {
    position: relative;
    z-index: 2;
    overflow: hidden;

    border: 1px solid rgba(7, 93, 52, 0.10);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.93);

    box-shadow:
        0 12px 30px rgba(7, 93, 52, 0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.section:has(.cards) .card:hover {
    transform: translateY(-5px);

    border-color: rgba(7, 93, 52, 0.22);

    box-shadow:
        0 18px 40px rgba(7, 93, 52, 0.12);
}

/* Petit motif très discret dans chaque carte */
.section:has(.cards) .card::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -25px;

    width: 105px;
    height: 85px;

    background-image: var(--bp-prestations-droite);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0.10;
    pointer-events: none;
}

/* =========================================================
   BANDEAU VERT — PARLONS DE VOTRE PROJET
========================================================= */

.cta-band {
    min-height: 190px;

    padding-left: clamp(190px, 17vw, 285px) !important;
    padding-right: clamp(190px, 17vw, 285px) !important;

    border-radius: 24px;
}

/* Grande branche à gauche */
.cta-band::before {
    left: -34px;
    bottom: -34px;

    width: clamp(225px, 21vw, 340px);
    height: clamp(160px, 17vw, 250px);

    background-image: var(--bp-cta-gauche);
    background-position: left bottom;
}

/* Grande composition à droite */
.cta-band::after {
    right: -35px;
    bottom: -28px;

    width: clamp(260px, 25vw, 400px);
    height: clamp(160px, 17vw, 250px);

    background-image: var(--bp-cta-droite);
    background-position: right bottom;
}

/* Le contenu du bandeau reste lisible */
.cta-band h2,
.cta-band h3,
.cta-band p,
.cta-band a,
.cta-band .button,
.cta-band .wp-block-button {
    position: relative;
    z-index: 3;
}

/* Bouton crème comme sur la maquette */
.cta-band .button,
.cta-band .wp-block-button__link {
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 999px !important;

    background: #f8f8e9 !important;
    color: #075d34 !important;

    box-shadow: none !important;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.cta-band .button:hover,
.cta-band .wp-block-button__link:hover {
    background: #ffffff !important;
    transform: translateY(-2px);
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1050px) {

    .hero::before {
        left: -55px;
        top: 190px;

        width: 205px;
        height: 380px;

        opacity: 0.9;
    }

    .hero::after {
        right: -20px;
        top: 150px;

        width: 145px;
        height: 210px;

        opacity: 0.92;
    }

    .section:has(.cards)::before {
        left: calc(50% - 260px);
        width: 110px;
        height: 90px;
    }

    .section:has(.cards)::after {
        right: calc(50% - 260px);
        width: 110px;
        height: 90px;
    }

    .cta-band {
        padding-left: 175px !important;
        padding-right: 175px !important;
    }

    .cta-band::before {
        width: 220px;
        height: 170px;
    }

    .cta-band::after {
        width: 250px;
        height: 170px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    /* Hero */
    .hero::before {
        left: -65px;
        top: auto;
        bottom: 135px;

        width: 145px;
        height: 250px;

        opacity: 0.72;
    }

    .hero::after {
        right: -25px;
        top: 145px;

        width: 105px;
        height: 145px;

        opacity: 0.78;
    }

    /* Prestations */
    .section:has(.cards) {
        padding-top: 65px;
        padding-bottom: 60px;
    }

    .section:has(.cards)::before {
        top: 22px;
        left: 12px;

        width: 72px;
        height: 58px;

        opacity: 0.6;
    }

    .section:has(.cards)::after {
        top: 22px;
        right: 12px;

        width: 72px;
        height: 58px;

        opacity: 0.6;
    }

    .section:has(.cards) .card::after {
        width: 80px;
        height: 65px;
    }

    /* CTA */
    .cta-band {
        min-height: 330px;

        padding:
            42px
            28px
            145px !important;

        text-align: center;
    }

    .cta-band::before {
        left: -20px;
        bottom: -25px;

        width: 155px;
        height: 120px;
    }

    .cta-band::after {
        right: -30px;
        bottom: -25px;

        width: 190px;
        height: 120px;
    }
}

/* =========================================================
   PETITS TÉLÉPHONES
========================================================= */

@media (max-width: 480px) {

    .hero::before {
        left: -72px;
        bottom: 120px;

        width: 125px;
        height: 220px;
    }

    .hero::after {
        right: -28px;
        top: 155px;

        width: 88px;
        height: 125px;
    }

    .section:has(.cards)::before,
    .section:has(.cards)::after {
        width: 58px;
        height: 48px;
    }

    .cta-band::before {
        width: 130px;
        height: 105px;
    }

    .cta-band::after {
        width: 160px;
        height: 105px;
    }
}


.wpforms-container {
    margin: 0;
}

.wpforms-container form.wpforms-form {
    background: #f7f7f3;
    border: 1px solid #e6e6dc;
    border-radius: 28px;
    padding: 28px 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    max-width: 100%;
}

/* Labels */
.wpforms-container .wpforms-field-label {
    display: block;
    margin-bottom: 8px;
    color: #111111;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
}

/* Champs */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px;
    padding: 14px 16px !important;
    border: 1px solid #cfd3c5 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #172219 !important;
    font-family: "Open Sans", sans-serif;
    font-size: 15px !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Zone de texte */
.wpforms-container textarea {
    min-height: 140px;
    resize: vertical;
}

/* Focus */
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
    border-color: #0c6b3d !important;
    box-shadow: 0 0 0 3px rgba(12, 107, 61, 0.10) !important;
    outline: none !important;
}

/* Correction select */
.wpforms-container select {
    height: 52px !important;
    min-height: 52px !important;
    line-height: 1.4 !important;
    padding: 0 42px 0 16px !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
}

/* Espacement entre champs */
.wpforms-container .wpforms-field {
    padding: 0 0 18px 0 !important;
}

/* Sous-labels / aides */
.wpforms-container .wpforms-field-sublabel,
.wpforms-container .wpforms-field-description {
    margin-top: 6px;
    color: #6c7268;
    font-size: 13px;
}

/* Bouton */
.wpforms-container button[type="submit"],
.wpforms-container input[type="submit"] {
    min-height: 50px;
    padding: 14px 24px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #006b38 !important;
    color: #ffffff !important;
    font-family: "Open Sans", sans-serif;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: none !important;
}

.wpforms-container button[type="submit"]:hover,
.wpforms-container input[type="submit"]:hover {
    background: #ff8425 !important;
    transform: translateY(-1px);
}

/* Erreurs */
.wpforms-container label.wpforms-error {
    margin-top: 6px;
    color: #b42318;
    font-size: 13px;
}

.wpforms-container input.wpforms-error,
.wpforms-container select.wpforms-error,
.wpforms-container textarea.wpforms-error {
    border-color: #b42318 !important;
}

/* Mobile */
@media (max-width: 767px) {
    .wpforms-container form.wpforms-form {
        padding: 22px 18px;
        border-radius: 20px;
    }

    .wpforms-container .wpforms-one-half,
    .wpforms-container .wpforms-first {
        width: 100% !important;
        margin-left: 0 !important;
    }
}
/* Formulaire de devis : encart centré */
body.page-id-343 .wpforms-container {
    width: min(100%, 900px) !important;
    max-width: 900px !important;
    margin: 50px auto !important;
    padding: 0 20px;
    box-sizing: border-box;
}

body.page-id-343 .wpforms-container form.wpforms-form {
    width: 100%;
    padding: 35px !important;
    background: #f7f7f3;
    border: 1px solid #e1e5d7;
    border-radius: 26px;
    box-shadow: 0 12px 35px rgba(28, 69, 43, 0.08);
    box-sizing: border-box;
}

/* Champs e-mail côte à côte */
body.page-id-343 .wpforms-field-email .wpforms-field-row {
    max-width: 100% !important;
}

/* Sur mobile */
@media (max-width: 767px) {
    body.page-id-343 .wpforms-container {
        margin: 25px auto !important;
        padding: 0 15px;
    }

    body.page-id-343 .wpforms-container form.wpforms-form {
        padding: 22px 18px !important;
        border-radius: 20px;
    }
}
/* Masquer le sous-menu par défaut */
.main-navigation ul ul,
.primary-menu ul ul,
.menu-item-has-children > .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    padding: 10px;
    margin: 0;
    background: #ffffff;
    border: 1px solid #dce5c6;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
    z-index: 9999;
}

/* Afficher au survol */
.main-navigation li:hover > ul,
.primary-menu li:hover > ul,
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu {
    display: block;
}

/* Positionner correctement le parent */
.menu-item-has-children {
    position: relative;
}

/* Style des liens du sous-menu */
.sub-menu a {
    display: block;
    padding: 10px 14px;
    color: #172219;
    text-decoration: none;
    white-space: normal;
}

.sub-menu a:hover {
    background: #eef4d8;
    color: #006b38;
    border-radius: 8px;
}

/* =========================================
   FAQ BUCOLIA AVEC CATÉGORIES
   Version corrigée : le menu reste au-dessus
========================================= */

.bucolia-faq-tabs {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 40px));
    margin: 70px auto;
    padding: 58px;
    overflow: hidden;
    border: 1px solid rgba(7, 93, 52, 0.10);
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 5% 5%,
            rgba(223, 234, 191, 0.55),
            transparent 28%
        ),
        radial-gradient(
            circle at 95% 5%,
            rgba(255, 243, 200, 0.60),
            transparent 26%
        ),
        #fbfcf4;
    box-shadow: 0 18px 50px rgba(7, 93, 52, 0.08);
}

/* =========================
   ONGLETS DES CATÉGORIES
========================= */

.faq-tabs-nav {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 42px;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(7, 93, 52, 0.14);
}

.faq-tab {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid #cbd9ad;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #5a635e;
    font-family: var(--bp-body, "Open Sans", Arial, sans-serif);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 6px 18px rgba(7, 93, 52, 0.04);
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.faq-tab:hover {
    color: #075d34;
    background: #f7faec;
    border-color: #069447;
    box-shadow: 0 8px 20px rgba(7, 93, 52, 0.08);
    transform: translateY(-1px);
}

.faq-tab.is-active {
    color: #ffffff;
    background: #075d34;
    border-color: #075d34;
    box-shadow: 0 8px 22px rgba(7, 93, 52, 0.16);
}

.faq-tab.is-active:hover {
    color: #ffffff;
    background: #069447;
    border-color: #069447;
}

.faq-tab:focus-visible {
    outline: 3px solid rgba(255, 132, 37, 0.35);
    outline-offset: 3px;
}

/* =========================
   PANNEAUX DE CATÉGORIES
========================= */

.faq-panel {
    position: relative;
    z-index: 1;
    display: none !important;
    max-width: 920px;
    margin: 0 auto;
}

.faq-panel.is-active {
    display: block !important;
    animation: bucoliaFaqAppear 0.28s ease;
}

@keyframes bucoliaFaqAppear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   CARTES DES QUESTIONS
========================= */

.bucolia-faq-tabs details,
.bucolia-faq-tabs .wpfaqblock-item,
.bucolia-faq-tabs .faq-item,
.bucolia-faq-tabs [class*="faq-item"],
.bucolia-faq-tabs [class*="accordion-item"] {
    margin: 0 0 14px !important;
    overflow: hidden;
    border: 1px solid #dce5c6 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 8px 24px rgba(7, 93, 52, 0.05);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.bucolia-faq-tabs details:hover,
.bucolia-faq-tabs .wpfaqblock-item:hover,
.bucolia-faq-tabs .faq-item:hover,
.bucolia-faq-tabs [class*="faq-item"]:hover,
.bucolia-faq-tabs [class*="accordion-item"]:hover {
    border-color: #9fbd78 !important;
    box-shadow: 0 12px 28px rgba(7, 93, 52, 0.09);
    transform: translateY(-1px);
}

/* =========================
   QUESTIONS
========================= */

.bucolia-faq-tabs summary,
.bucolia-faq-tabs .wpfaqblock-question,
.bucolia-faq-tabs .faq-question,
.bucolia-faq-tabs [class*="faq-question"],
.bucolia-faq-tabs [class*="accordion-title"] {
    position: relative;
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 76px;
    margin: 0 !important;
    padding: 20px 72px 20px 24px !important;
    border: 0 !important;
    background: transparent !important;
    color: #111a17 !important;
    font-family: var(--bp-body, "Open Sans", Arial, sans-serif) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.45;
    text-align: left;
    list-style: none;
    cursor: pointer;
}

.bucolia-faq-tabs summary::-webkit-details-marker {
    display: none;
}

/* =========================
   ICÔNE À DROITE
========================= */

.bucolia-faq-tabs summary::after,
.bucolia-faq-tabs .wpfaqblock-question::after,
.bucolia-faq-tabs .faq-question::after,
.bucolia-faq-tabs [class*="faq-question"]::after,
.bucolia-faq-tabs [class*="accordion-title"]::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 20px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #bfd29d;
    border-radius: 50%;
    background: #f1f5e5;
    color: #075d34;
    font-family: Arial, sans-serif;
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-50%);
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.bucolia-faq-tabs details[open] {
    border-color: rgba(255, 132, 37, 0.50) !important;
}

.bucolia-faq-tabs details[open] > summary::after {
    content: "−";
    border-color: #069447;
    background: #069447;
    color: #ffffff;
}

/* =========================
   RÉPONSES
========================= */

.bucolia-faq-tabs .wpfaqblock-answer,
.bucolia-faq-tabs .faq-answer,
.bucolia-faq-tabs [class*="faq-answer"],
.bucolia-faq-tabs [class*="accordion-content"],
.bucolia-faq-tabs details > div,
.bucolia-faq-tabs details > p {
    margin: 0 !important;
    padding: 0 72px 24px 24px !important;
    color: #5a635e !important;
    font-family: var(--bp-body, "Open Sans", Arial, sans-serif) !important;
    font-size: 15.5px !important;
    line-height: 1.8 !important;
}

/* =========================
   HEADER ET SOUS-MENU
   Toujours au-dessus de la FAQ
========================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 9999 !important;
}

.site-header .header-inner {
    position: relative;
    z-index: 10000;
}

.main-nav {
    position: relative;
    z-index: 10001 !important;
}

/*
Ne pas mettre position: relative sur tous les <ul>,
car cela peut perturber la position absolue du sous-menu.
*/
.main-nav .sub-menu {
    z-index: 10002 !important;
}

/* =========================
   VERSION MOBILE
========================= */

@media (max-width: 760px) {
    .bucolia-faq-tabs {
        width: calc(100% - 28px);
        margin: 42px auto;
        padding: 26px 16px;
        border-radius: 22px;
    }

    .faq-tabs-nav {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 9px;
        margin-bottom: 28px;
        padding-bottom: 18px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .faq-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .faq-tab {
        flex: 0 0 auto;
        min-height: 43px;
        padding: 10px 16px;
        font-size: 13px;
    }

    .bucolia-faq-tabs summary,
    .bucolia-faq-tabs .wpfaqblock-question,
    .bucolia-faq-tabs .faq-question,
    .bucolia-faq-tabs [class*="faq-question"],
    .bucolia-faq-tabs [class*="accordion-title"] {
        min-height: 66px;
        padding: 17px 57px 17px 17px !important;
        font-size: 15px !important;
    }

    .bucolia-faq-tabs summary::after,
    .bucolia-faq-tabs .wpfaqblock-question::after,
    .bucolia-faq-tabs .faq-question::after,
    .bucolia-faq-tabs [class*="faq-question"]::after,
    .bucolia-faq-tabs [class*="accordion-title"]::after {
        right: 13px;
        width: 31px;
        height: 31px;
        font-size: 20px;
    }

    .bucolia-faq-tabs .wpfaqblock-answer,
    .bucolia-faq-tabs .faq-answer,
    .bucolia-faq-tabs [class*="faq-answer"],
    .bucolia-faq-tabs [class*="accordion-content"],
    .bucolia-faq-tabs details > div,
    .bucolia-faq-tabs details > p {
        padding: 0 17px 20px !important;
        font-size: 14.5px !important;
    }
}
/* =========================================================
   HERO — GRANDE PLANTE + FLEUR SÉPARÉE AU-DESSUS
========================================================= */

.hero {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

/* Le contenu reste devant */
.hero .container,
.hero .hero-copy,
.hero h1,
.hero .lead,
.hero .button-row {
    position: relative;
    z-index: 3;
}

.hero .hero-media {
    position: relative;
    z-index: 1;
}

/* =========================================================
   HERO — 4 FLEURS RAPPROCHÉES VERS LE CENTRE
========================================================= */

.hero {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

/* Texte et boutons devant les décorations */
.hero .container,
.hero .hero-copy,
.hero h1,
.hero .lead,
.hero .button-row {
    position: relative;
    z-index: 3;
}

/* Grande image derrière */
.hero .hero-media {
    position: relative;
    z-index: 1;
}

/* =========================================================
   DÉCORATIONS COMMUNES
========================================================= */

.hero::before,
.hero::after {
    content: "" !important;
    position: absolute !important;

    top: 92px !important;
    bottom: auto !important;

    width: 390px !important;
    height: 315px !important;

    /* Petite fleur + grande plante */
    background-image:
        url("https://bucolia-paysages.fr/wp-content/uploads/2026/07/fleure3.png"),
        url("https://bucolia-paysages.fr/wp-content/uploads/2026/08/hero-gauche.png") !important;

    background-repeat:
        no-repeat,
        no-repeat !important;

    background-size:
        78px auto,
        170px auto !important;

    /*
       Petite fleur vers l'intérieur.
       Grande plante sur le bord extérieur du bloc.
    */
    background-position:
        325px 18px,
        0 bottom !important;

    opacity: 0.95 !important;
    pointer-events: none !important;
    user-select: none !important;
    z-index: 2 !important;
}

/* Groupe gauche rapproché du centre */
.hero::before {
    left: calc(50% - 740px) !important;
    right: auto !important;
    transform: none !important;
}

/* Groupe droit rapproché du centre et retourné */
.hero::after {
    right: calc(50% - 740px) !important;
    left: auto !important;
    transform: scaleX(-1) !important;
}

/* =========================================================
   GRANDS ÉCRANS
========================================================= */

@media (min-width: 1600px) {
    .hero::before {
        left: calc(50% - 770px) !important;
    }

    .hero::after {
        right: calc(50% - 770px) !important;
    }
}

/* =========================================================
   ÉCRANS MOYENS
========================================================= */

@media (max-width: 1500px) {
    .hero::before {
        left: calc(50% - 690px) !important;
    }

    .hero::after {
        right: calc(50% - 690px) !important;
    }
}

@media (max-width: 1250px) {
    .hero::before,
    .hero::after {
        top: 110px !important;

        width: 310px !important;
        height: 275px !important;

        background-size:
            64px auto,
            145px auto !important;

        background-position:
            255px 12px,
            0 bottom !important;
    }

    .hero::before {
        left: calc(50% - 565px) !important;
    }

    .hero::after {
        right: calc(50% - 565px) !important;
    }
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 900px) {
    .hero::before,
    .hero::after {
        top: 145px !important;

        width: 210px !important;
        height: 220px !important;

        background-size:
            45px auto,
            110px auto !important;

        background-position:
            165px 10px,
            0 bottom !important;

        opacity: 0.75 !important;
    }

    .hero::before {
        left: -5px !important;
    }

    .hero::after {
        right: -5px !important;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {
    .hero::before,
    .hero::after {
        top: 170px !important;

        width: 120px !important;
        height: 155px !important;

        background-size:
            28px auto,
            72px auto !important;

        background-position:
            92px 8px,
            0 bottom !important;

        opacity: 0.48 !important;
    }

    .hero::before {
        left: -8px !important;
    }

    .hero::after {
        right: -8px !important;
    }
}
/* =========================================================
   FULL WIDTH GUTENBERG — BUCOLIA
   Le fond du bloc va jusqu'aux bords de l'écran
   Le contenu reste centré
   ========================================================= */

.bucolia-editable-page .alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* Contenu interne */
.bucolia-editable-page .alignfull > .wp-block-group__inner-container {
    width: var(--bp-container) !important;
    max-width: var(--bp-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Évite que le bloc soit limité par la largeur Gutenberg */
.bucolia-editable-page .wp-block-group.alignfull {
    padding-left: 0;
    padding-right: 0;
}

/* Le contenu du groupe garde ses espacements */
.bucolia-editable-page .wp-block-group.alignfull > .wp-block-group__inner-container {
    padding-left: 0;
    padding-right: 0;
}
/* =========================================================
   PRESTATIONS — FOND VERT PLEINE LARGEUR
   Tous les blocs ayant une ancre "presta-*"
   ========================================================= */

/* ---------------------------------------------------------
   COULEUR DU FOND
   Modifie uniquement cette valeur pour changer
   la couleur de toutes les prestations.
   --------------------------------------------------------- */

:root {
    --bp-presta-background: #075d34;
}


/* ---------------------------------------------------------
   BLOCS PRESTA
   Fonctionne automatiquement avec :
   presta-1
   presta-2
   presta-3
   presta-4
   presta-5
   presta-6
   etc.
   --------------------------------------------------------- */

[id^="presta-"] {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    background: var(--bp-presta-background) !important;
    color: #ffffff;
}


/* ---------------------------------------------------------
   CONTENU INTÉRIEUR
   Le fond prend toute la largeur,
   mais le contenu reste centré.
   --------------------------------------------------------- */

[id^="presta-"] > .wp-block-group__inner-container {
    width: var(--bp-container) !important;
    max-width: var(--bp-container) !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ---------------------------------------------------------
   TEXTE SUR FOND VERT
   --------------------------------------------------------- */

[id^="presta-"] h1,
[id^="presta-"] h2,
[id^="presta-"] h3,
[id^="presta-"] h4,
[id^="presta-"] h5,
[id^="presta-"] h6,
[id^="presta-"] p {
    color: #ffffff;
}


/* ---------------------------------------------------------
   LIENS
   --------------------------------------------------------- */

[id^="presta-"] a {
    position: relative;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 680px) {

    [id^="presta-"] {
        width: 100vw !important;
        max-width: 100vw !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }

}
/* =========================================================
   HERO DES PAGES — FOND NATUREL PREMIUM
   ========================================================= */

.page-hero {
    position: relative;
    overflow: hidden;

    padding: 70px 0 65px !important;
    min-height: 420px;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            ellipse 55% 90% at 0% 50%,
            rgba(186, 211, 139, 0.42),
            transparent 70%
        ),
        radial-gradient(
            ellipse 45% 80% at 100% 20%,
            rgba(223, 234, 191, 0.55),
            transparent 70%
        ),
        radial-gradient(
            ellipse 40% 60% at 75% 100%,
            rgba(232, 239, 213, 0.7),
            transparent 70%
        ),
        #fafbf4;
}


/* ---------------------------------------------------------
   HALOS DÉCORATIFS
   --------------------------------------------------------- */

.page-hero::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -180px;
    top: -180px;

    border-radius: 50%;

    background: rgba(6, 148, 71, 0.07);

    filter: blur(10px);

    pointer-events: none;
}


.page-hero::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    bottom: -280px;

    border-radius: 50%;

    background: rgba(6, 148, 71, 0.06);

    filter: blur(15px);

    pointer-events: none;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.page-hero .container {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   PETIT BADGE
   --------------------------------------------------------- */

.page-hero .eyebrow {
    margin-bottom: 22px;

    background: rgba(255, 255, 255, 0.45);

    backdrop-filter: blur(6px);
}


/* ---------------------------------------------------------
   TITRE
   --------------------------------------------------------- */

.page-hero h1 {
    max-width: 900px;

    margin: 0;

    font-family: var(--bp-title);

    font-size: clamp(
        3rem,
        5.2vw,
        5.6rem
    );

    line-height: 0.98;

    letter-spacing: -0.025em;

    font-weight: 500;

    color: var(--bp-ink);
}


/* Petite touche verte sous le titre */
.page-hero h1::after {
    content: "";

    display: block;

    width: 90px;
    height: 4px;

    margin-top: 28px;

    border-radius: 999px;

    background: var(--bp-green);
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.page-hero .lead {
    max-width: 650px;

    margin-top: 24px;

    font-size: 1.1rem;

    line-height: 1.7;

    color: var(--bp-muted);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 680px) {

    .page-hero {
        padding: 55px 0 50px !important;
        min-height: 330px;
    }

    .page-hero h1 {
        font-size: clamp(2.6rem, 11vw, 4rem);
        line-height: 1;
    }

    .page-hero h1::after {
        width: 65px;
        height: 3px;
        margin-top: 22px;
    }

    .page-hero .lead {
        font-size: 1rem;
    }
}
/* =========================================================
   PAGE HERO — HAUTEUR PLUS COMPACTE
   ========================================================= */

.page-hero {
    min-height: 300px !important;
    padding: 45px 0 45px !important;
}

/* Le contenu reste bien centré verticalement */
.page-hero .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .page-hero {
        min-height: 260px !important;
        padding: 40px 0 40px !important;
    }

}
/* =========================================================
   NOS SAVOIR-FAIRE — VERSION CONTRASTE
   ========================================================= */

:root {
    --bp-savoir-faire-background: #075d34;
    --bp-savoir-faire-title: #ffffff;
    --bp-savoir-faire-text: rgba(255, 255, 255, 0.88);

    --bp-savoir-faire-card-background: #f7faf4;
    --bp-savoir-faire-card-text: #111a17;
}


/* ---------------------------------------------------------
   SECTION
   --------------------------------------------------------- */

#savoir-faire {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    background: var(--bp-savoir-faire-background) !important;
    color: var(--bp-savoir-faire-text) !important;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

#savoir-faire > .wp-block-group__inner-container {
    width: var(--bp-container) !important;
    max-width: var(--bp-container) !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ---------------------------------------------------------
   PETIT LABEL
   --------------------------------------------------------- */

#savoir-faire .eyebrow {
    color: #ffffff !important;

    border-color: rgba(255, 255, 255, 0.35) !important;

    background: rgba(255, 255, 255, 0.08) !important;
}


/* ---------------------------------------------------------
   TITRES
   --------------------------------------------------------- */

#savoir-faire h1,
#savoir-faire h2,
#savoir-faire h3,
#savoir-faire h4 {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   DESCRIPTION SOUS "NOS PRESTATIONS"
   --------------------------------------------------------- */

#savoir-faire > .wp-block-group__inner-container > p,
#savoir-faire > .wp-block-group__inner-container .lead {
    color: rgba(255, 255, 255, 0.88) !important;
}


/* Si le paragraphe est dans un groupe intermédiaire */
#savoir-faire p {
    color: rgba(255, 255, 255, 0.88);
}


/* ---------------------------------------------------------
   CARTES
   --------------------------------------------------------- */

#savoir-faire .card {
    background: var(--bp-savoir-faire-card-background) !important;

    color: var(--bp-savoir-faire-card-text) !important;

    border: 1px solid rgba(255, 255, 255, 0.18) !important;

    border-radius: 22px;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* Texte des cartes */

#savoir-faire .card h3,
#savoir-faire .card h4,
#savoir-faire .card p {
    color: var(--bp-savoir-faire-card-text) !important;
}


/* Liens des cartes */

#savoir-faire .card a {
    color: #075d34 !important;
    font-weight: 700;
}


/* Hover */

#savoir-faire .card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.18);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 680px) {

    #savoir-faire {
        width: 100vw !important;
        max-width: 100vw !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }

}
/* =========================================================
   BUCOLIA — NOUVEAUX ÉLÉMENTS VISUELS
   Assets :
   /assets/images/bucolia_elements_png/
   ========================================================= */

:root {
    --bp-elements:
        "/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/";
}


/* =========================================================
   HERO ACCUEIL
   ========================================================= */

.hero {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}


/* Le contenu passe devant les illustrations */

.hero > *,
.hero .container,
.hero .hero-copy,
.hero h1,
.hero .lead,
.hero .button-row,
.hero .hero-media {
    position: relative;
    z-index: 5;
}


/* Décorations */

.hero::before,
.hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 2;

    background-repeat: no-repeat;
    background-size: contain;
}


/* ---------------------------------------------------------
   GAUCHE DU HERO
   element_01 = feuilles
   element_07 = petite plante
   element_03 = fleur orange
   --------------------------------------------------------- */

.hero::before {
    left: calc(50% - 730px);
    top: 125px;

    width: 280px;
    height: 300px;

    background-image:
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_07.png"),
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_03.png"),
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_01.png");

    background-size:
        125px auto,
        42px auto,
        70px auto;

    background-position:
        15px 100px,
        80px 85px,
        155px 25px;
}


/* ---------------------------------------------------------
   DROITE DU HERO
   element_12 = herbes
   element_09 = fleur
   element_11 = grande feuille
   --------------------------------------------------------- */

.hero::after {
    right: calc(50% - 730px);
    top: 125px;

    width: 280px;
    height: 300px;

    background-image:
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_12.png"),
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_09.png"),
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_11.png");

    background-size:
        90px auto,
        42px auto,
        75px auto;

    background-position:
        155px 95px,
        125px 80px,
        45px 20px;
}


/* =========================================================
   NOS PRESTATIONS
   ========================================================= */

.section:has(.cards) {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}


/* Contenu devant */

.section:has(.cards) > * {
    position: relative;
    z-index: 5;
}


/* Décorations autour du titre */

.section:has(.cards)::before,
.section:has(.cards)::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 2;

    background-repeat: no-repeat;
    background-size: contain;
}


/* Gauche */

.section:has(.cards)::before {
    top: 55px;
    left: calc(50% - 500px);

    width: 100px;
    height: 100px;

    background-image:
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_02.png"),
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_05.png");

    background-size:
        75px auto,
        25px auto;

    background-position:
        left center,
        65px 25px;

    opacity: .8;
}


/* Droite */

.section:has(.cards)::after {
    top: 55px;
    right: calc(50% - 500px);

    width: 100px;
    height: 100px;

    background-image:
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_12.png"),
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_08.png");

    background-size:
        42px auto,
        48px auto;

    background-position:
        15px 35px,
        50px 5px;

    opacity: .75;
}


/* ---------------------------------------------------------
   Petits motifs dans les cartes
   --------------------------------------------------------- */

.section:has(.cards) .card {
    position: relative;
    overflow: hidden;
}


.section:has(.cards) .card::after {
    content: "";
    position: absolute;

    right: -12px;
    bottom: -15px;

    width: 75px;
    height: 70px;

    background-image:
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_06.png");

    background-repeat: no-repeat;
    background-size: contain;

    opacity: .07;

    pointer-events: none;
}


/* =========================================================
   CTA VERT
   "Parlons de votre projet"
   ========================================================= */

.cta-band {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}


/* Contenu */

.cta-band > * {
    position: relative;
    z-index: 5;
}


/* Décorations */

.cta-band::before,
.cta-band::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 2;

    background-repeat: no-repeat;
    background-size: contain;
}


/* Gauche */

.cta-band::before {
    left: -15px;
    bottom: -35px;

    width: 260px;
    height: 210px;

    background-image:
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_04.png"),
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_07.png");

    background-size:
        95px auto,
        130px auto;

    background-position:
        10px 20px,
        120px 60px;

    opacity: .9;
}


/* Droite */

.cta-band::after {
    right: -15px;
    bottom: -30px;

    width: 280px;
    height: 210px;

    background-image:
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_10.png"),
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_12.png");

    background-size:
        75px auto,
        100px auto;

    background-position:
        20px 20px,
        145px 45px;

    opacity: .9;
}


/* =========================================================
   HERO DES PAGES
   Conception / À propos / Soins des arbres / Entretien...
   ========================================================= */

.page-hero {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}


/* Contenu devant */

.page-hero > *,
.page-hero .container {
    position: relative;
    z-index: 5;
}


/* Décorations */

.page-hero::before,
.page-hero::after {
    content: "";
    position: absolute;

    pointer-events: none;
    z-index: 2;

    background-repeat: no-repeat;
    background-size: contain;
}


/* Gauche */

.page-hero::before {
    left: -35px;
    top: 30px;

    width: 240px;
    height: 300px;

    background-image:
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_01.png"),
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_08.png");

    background-size:
        120px auto,
        85px auto;

    background-position:
        20px 15px,
        105px 155px;

    opacity: .22;
}


/* Droite */

.page-hero::after {
    right: -35px;
    top: 35px;

    width: 240px;
    height: 300px;

    background-image:
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_02.png"),
        url("/wp-content/themes/bucolia-paysage-v1.3/assets/images/bucolia_elements_png/element_11.png");

    background-size:
        105px auto,
        95px auto;

    background-position:
        100px 25px,
        30px 160px;

    opacity: .20;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1250px) {

    .hero::before {
        left: -35px;
    }

    .hero::after {
        right: -35px;
    }

    .section:has(.cards)::before {
        left: 40px;
    }

    .section:has(.cards)::after {
        right: 40px;
    }
}


@media (max-width: 900px) {

    /* Hero */

    .hero::before {
        left: -55px;
        top: 150px;

        width: 190px;
        height: 230px;

        background-size:
            90px auto,
            32px auto,
            55px auto;
    }

    .hero::after {
        right: -55px;
        top: 150px;

        width: 190px;
        height: 230px;

        background-size:
            65px auto,
            32px auto,
            60px auto;
    }


    /* Prestations */

    .section:has(.cards)::before {
        left: 15px;
        width: 75px;
    }

    .section:has(.cards)::after {
        right: 15px;
        width: 75px;
    }


    /* CTA */

    .cta-band::before {
        width: 180px;
        height: 160px;
    }

    .cta-band::after {
        width: 190px;
        height: 160px;
    }


    /* Pages */

    .page-hero::before {
        left: -80px;
        opacity: .15;
    }

    .page-hero::after {
        right: -80px;
        opacity: .15;
    }
}


@media (max-width: 680px) {

    /* Hero */

    .hero::before {
        left: -55px;
        top: 170px;

        width: 130px;
        height: 170px;

        background-size:
            70px auto,
            25px auto,
            45px auto;

        opacity: .55;
    }

    .hero::after {
        right: -55px;
        top: 170px;

        width: 130px;
        height: 170px;

        background-size:
            48px auto,
            25px auto,
            48px auto;

        opacity: .55;
    }


    /* Prestations */

    .section:has(.cards)::before {
        left: 8px;
        top: 20px;

        width: 55px;
        height: 60px;
    }

    .section:has(.cards)::after {
        right: 8px;
        top: 20px;

        width: 55px;
        height: 60px;
    }


    /* CTA */

    .cta-band::before {
        left: -20px;
        bottom: -20px;

        width: 130px;
        height: 120px;
    }

    .cta-band::after {
        right: -25px;
        bottom: -20px;

        width: 140px;
        height: 120px;
    }


    /* Heroes pages */

    .page-hero::before {
        left: -75px;
        top: 15px;

        width: 150px;
        height: 200px;

        opacity: .12;
    }

    .page-hero::after {
        right: -75px;
        top: 15px;

        width: 150px;
        height: 200px;

        opacity: .12;
    }
}