/* ==========================
   VARIABLES
========================== */

:root{
    --bg:#f5f6f8;
    --surface:#FFFFFF;
    --section:#F3EFE6;

    --primary:#FDB008;
    --primary-hover:#E6A100;

    --text:#222;
    --text-light:#666;
    --border:#E5DED2;

    --radius:14px;
    --radius-lg:20px;

    --shadow-sm:0 2px 8px rgba(0,0,0,.04);
    --shadow:0 8px 24px rgba(0,0,0,.08);

    --space-xs:8px;
    --space-sm:16px;
    --space-md:24px;
    --space-lg:32px;
    --space-xl:48px;
}

/* ==========================
   RESET
========================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    line-height:1.7;
     padding-bottom: 130px;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

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

/* Hero */

.home .entry-hero{
    background:linear-gradient(to bottom,#FCFBF7,#F3EFE6);
    padding:70px 20px 80px;
    margin-bottom:50px;
    border-bottom:1px solid #ECE6DD;
}

.home .entry-hero h1{

    max-width:900px;

    margin:0 auto;

    text-align:center;

    font-size:clamp(2.2rem,4vw,3.4rem);

    line-height:1.15;

    font-weight:800;

    color:#222;

}


/* =========================================================
   CHOISIR SA MINI-PELLE — HERO MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       Bloc principal
       ----------------------------------------------------- */

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

        /*
         * Hauteur du hero sur mobile.
         * À ajuster si nécessaire.
         */
        min-height: 585px !important;

        /*
         * On affiche l'image sur toute la hauteur
         * plutôt que de la faire "couvrir" le bloc.
         */
        background-size: auto 100% !important;
        background-position: 80% center !important;
        background-repeat: no-repeat !important;
    }


    /* -----------------------------------------------------
       Fondu blanc au-dessus de la photo
       ----------------------------------------------------- */

   .hero-minipelle::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        /* Fondu vers le blanc en bas */
        linear-gradient(
            to bottom,
            rgba(255,255,255,0) 55%,
            rgba(255,255,255,0.35) 70%,
            rgba(255,255,255,0.75) 85%,
            rgba(255,255,255,1) 100%
        ),

        /* Fondu blanc vers la photo sur la droite */
        linear-gradient(
            110deg,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,0.99) 25%,
            rgba(255,255,255,0.92) 38%,
            rgba(255,255,255,0.70) 50%,
            rgba(255,255,255,0.35) 64%,
            rgba(255,255,255,0) 82%
        );
}

    /* -----------------------------------------------------
       Contenu au-dessus du fondu
       ----------------------------------------------------- */

    .hero-minipelle > * {
        position: relative;
        z-index: 1;
    }


    /* -----------------------------------------------------
       Boutons : empilés sur mobile
       ----------------------------------------------------- */

    .hero-minipelle .wp-block-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .hero-minipelle .wp-block-button {
        width: 100% !important;
    }

    .hero-minipelle .wp-block-button__link {
        width: 100% !important;
        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       Colonnes : une seule colonne
       ----------------------------------------------------- */

    .hero-minipelle .wp-block-columns {
        display: block !important;
    }

    .hero-minipelle .wp-block-column {
        width: 100% !important;
        margin-left: 0 !important;
    }


    /* -----------------------------------------------------
       Évite que le contenu soit trop proche des bords
       ----------------------------------------------------- */

    .hero-minipelle {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }


    /* -----------------------------------------------------
       Titres
       ----------------------------------------------------- */

    .hero-minipelle h1 {
        font-size: clamp(42px, 11vw, 58px);
        line-height: 0.98;
    }

    .hero-minipelle h2,
    .hero-minipelle h3 {
        line-height: 1.15;
    }


    /* -----------------------------------------------------
       Texte
       ----------------------------------------------------- */

    .hero-minipelle p {
        line-height: 1.45;
    }


    /* -----------------------------------------------------
       Liste des avantages
       ----------------------------------------------------- */

    .hero-minipelle .wp-block-list {
        margin-top: 24px;
    }

}

/* Contenu */

.home .content-area{

    max-width:1280px;

    margin:auto;

    padding:0 20px;

}

.single-post.content-width-narrow .content-container.site-container,
.page.content-width-narrow .content-container.site-container {
    max-width: var(--global-content-width);
}

/* Premier bloc */

.home .entry-content{

    background:#fff;

    border-radius:18px;

    padding:50px;

    border:1px solid #E5DED2;

    box-shadow:0 6px 20px rgba(0,0,0,.05);

}

/* Titre */

.home .entry-content h2{

    position:relative;

    padding-left:18px;

    margin-bottom:25px;

}

.home .entry-content h2:before{

    content:"";

    position:absolute;

    left:0;

    top:3px;

    width:5px;

    height:34px;

    border-radius:5px;

    background:#FDB008;

}

/* Paragraphes */

.home .entry-content p{

    font-size:1.08rem;

    line-height:1.9;

    color:#333;

}

/* Liens */

.home .entry-content a{

    color:#222;

    font-weight:600;

    text-decoration:none;

    border-bottom:2px solid #FDB008;

    transition:.2s;

}

.home .entry-content a:hover{

    color:#FDB008;

}

/* Séparateurs */

.home .wp-block-separator{

    border:none;

    height:1px;

    background:#ECE6DD;

    margin:60px auto;

}

/* Boutons */

.home .wp-block-button__link{

    background:#FDB008;

    color:#222;

    border-radius:10px;

    padding:14px 26px;

    font-weight:700;

    transition:.2s;

}

.home .wp-block-button__link:hover{

    background:#E4A300;

    transform:translateY(-2px);

}

/* Images */

.home img{

    border-radius:14px;

}

/* Mobile */

@media(max-width:768px){

.home .entry-hero{

    padding:45px 20px;

}

.home .entry-content{

    padding:28px;

}

}

/* FAQ (bloc Accordéon natif WordPress) */

.wp-block-accordion{
    margin:0;
    padding:0;
    border:none;
    background:transparent;
}

.wp-block-accordion-item{
    margin:0 0 14px;
    padding:0;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    box-shadow:inset 4px 0 0 0 transparent;
    transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.wp-block-accordion-item:last-child{
    margin-bottom:0;
}

.wp-block-accordion-item:not(.is-open):hover{
    border-color:var(--primary);
    background:#FFF8E7;
}

.wp-block-accordion-item.is-open{
    background:#FFF8E7;
    box-shadow:inset 4px 0 0 0 var(--primary);
}

.wp-block-accordion-heading{
    margin:0;
}

.wp-block-accordion-heading__toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding:18px 20px;
    background:none;
    border:none;
    text-align:left;
    font-size:18px;
    font-weight:700;
    color:#222;
    cursor:pointer;
}

.wp-block-accordion-heading__toggle:focus,
.wp-block-accordion-heading__toggle:focus-visible,
.wp-block-accordion-heading__toggle:active{
    background:none;
    color:#222;
    outline:2px solid var(--primary);
    outline-offset:-2px;
}

.wp-block-accordion-heading__toggle-title{
    flex:1;
    min-width:0;
}

.wp-block-accordion-heading__toggle-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid #e5e7eb;
    font-size:0;
    transform:none;
}

.wp-block-accordion-heading__toggle-icon::before{
    content:"+";
    font-size:18px;
    font-weight:600;
    line-height:1;
    color:#222;
    transform:none;
}

.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::before{
    content:"\2212";
}

.wp-block-accordion-panel{
    padding:16px 20px 20px;
    border-top:1px solid #eef0f3;
    color:#374151;
    font-size:15px;
    line-height:1.8;
}

.wp-block-accordion-panel p{
    margin:0 0 14px;
}

.wp-block-accordion-panel p:last-child{
    margin-bottom:0;
}

@media(max-width:600px){

.wp-block-accordion-heading__toggle{
    padding:14px 16px;
    font-size:16px;
}

.wp-block-accordion-panel{
    padding:12px 16px 16px;
}

}