/*============= Variables =============*/
:root{
    --color-bg:#F9F9F9; --color-text:#2B2B2B;
    --color-heading:#1E5631; --color-link:#1E5631; --color-link-h:#A3D9A5;
    --color-btn-bg:#1E5631; --color-btn-txt:#FFFFFF; --color-btn-h:#A3D9A5;
    --color-footer:#2B2B2B; --color-sec-bg1:#E8E8E8; --color-sec-bg2:#DFF2E1; --color-card-bg:#DFF2E1;

    --radius:.75rem; --shadow-sm:0 2px 6px rgba(0,0,0,.06); --shadow-md:0 10px 24px rgba(0,0,0,.12);
    --header-h:76px;

    /* HERO : règle ces 2 valeurs pour calibrer l'effet */
    --hero-pin-extra: 0vh;   /* «temps de pin» supplémentaire */
    --hero-content-top: 18vh;  /* remonte/descend le texte */
    --hero-overlay: rgba(0,0,0,.55);
}

/*============= Reset & Base =============*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);}
body{padding-top:var(--header-h);font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6;background:var(--color-bg);color:var(--color-text);}
h1,h2,h3,h4,h5,h6{font-family:"Manrope","Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--color-heading);margin-bottom:1rem;line-height:1.2;}
p{margin-bottom:1rem;}
a{color:var(--color-link);text-decoration:none;transition:color .25s ease,background-color .25s ease,border-color .25s ease;}
a:hover{color:var(--color-link-h);}
.container{width:90%;max-width:1240px;margin:0 auto;}
.text-center{text-align:center;}
.lead{max-width:42rem;margin:0 auto 2rem;}
.text-muted{color:#000;opacity:.9;}

/*============= Header (fixed) =============*/
.site-header{position:fixed;top:0;left:0;right:0;z-index:9999;height:var(--header-h);display:flex;align-items:center;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);box-shadow:var(--shadow-sm);}
.header-inner{width:100%;display:grid;align-items:center;gap:1rem;grid-template-columns:auto 1fr auto;}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--color-text);}
.brand__logo{height:40px;width:auto;}
.brand__text{font-weight:800;font-size:1.25rem;letter-spacing:.2px;}
.brand__accent{color:var(--color-heading);}
.main-nav{display:none;align-items:center;justify-content:center;}
@media (min-width:1024px){.main-nav{display:flex;}}
.main-nav__list{display:flex;align-items:center;gap:1.75rem;}
.main-nav__link{font-weight:600;color:#3A3A3A;padding:.5rem .25rem;border-radius:.375rem;position:relative;}
.main-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:transparent;transition:background-color .25s ease;}
.main-nav__link:hover{color:var(--color-link);}
.main-nav__link:hover::after{background:var(--color-link-h);}
.header-actions{display:flex;align-items:center;gap:.75rem;}
.btn-cta{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1rem;border-radius:999px;font-weight:800;background:var(--color-btn-bg);color:var(--color-btn-txt);border:2px solid transparent;box-shadow:var(--shadow-sm);}
.btn-cta:hover{background:var(--color-btn-h);color:var(--color-text);}
.btn-cta--header i{font-size:1rem;}
.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:.6rem;font-size:1.25rem;color:#333;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:var(--shadow-sm);}
@media (min-width:1024px){.menu-toggle{display:none;}}
.site-header.is-scrolled{box-shadow:0 8px 20px rgba(0,0,0,.12);}

/*============= Menu mobile (fixed) =============*/
.mobile-menu{position:fixed;top:var(--header-h);left:0;right:0;z-index:9998;background:#fff;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;max-height:calc(100vh - var(--header-h));overflow-y:auto;}
.mobile-menu__link{padding:1rem;border-bottom:1px solid rgba(0,0,0,.06);color:var(--color-text);font-weight:600;}
.mobile-menu__link:hover{background:var(--color-sec-bg1);color:var(--color-link);}
.mobile-menu__cta{background:var(--color-btn-bg);color:var(--color-btn-txt);text-align:center;font-weight:800;}
.mobile-menu__cta:hover{background:var(--color-btn-h);color:var(--color-text);}

/*============= HERO (image fixe derrière + contenu) =============*/
.hero-fixed{
    position: fixed;
    inset: 0;
    z-index: -1; /* clé : tout le contenu passe devant, plus besoin de JS pour masquer */
    background-image:
            linear-gradient(var(--hero-overlay), var(--hero-overlay)),
            url('/assets/images/interieur.jpeg');
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

.hero-fixed__content{
    position: relative;
    z-index: 1;
    min-height: 100vh; /* l’écran plein */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: calc(var(--header-h) + var(--hero-content-top));
    padding-bottom: calc(6vh + var(--hero-pin-extra)); /* ajoute du « pin » sans JS */
    text-align: center;
}
.hero-title{color:#fff;font-size:clamp(2rem,4vw,3.25rem);font-weight:800;margin-bottom:1rem;}
.hero-subtitle{color:#fff;font-size:clamp(1.05rem,2vw,1.25rem);opacity:.95;max-width:48rem;margin:0 auto 2rem;}
.hero-actions{display:flex;flex-direction:column;gap:.75rem;align-items:center;justify-content:center;}
@media (min-width:640px){.hero-actions{flex-direction:row;}}
.btn-primary{background:var(--color-btn-bg);color:var(--color-btn-txt);padding:.85rem 1.4rem;border-radius:.65rem;font-weight:800;letter-spacing:.2px;box-shadow:var(--shadow-sm);border:2px solid transparent;}
.btn-primary:hover{background:var(--color-btn-h);color:var(--color-text);}
.btn-secondary{background:transparent;color:#fff;border:2px solid #fff;padding:.85rem 1.4rem;border-radius:.65rem;font-weight:800;letter-spacing:.2px;}
.btn-secondary:hover{background:#fff;color:var(--color-text);}
.btn-tertiaire{background:transparent;color: #a89595;border:2px solid #fff;padding:.85rem 1.4rem;border-radius:.65rem;font-weight:800;letter-spacing:.2px;}
.btn-tertiaire:hover{background:#fff;color:var(--color-text);}
@media (max-width:640px){ :root{ --hero-content-top: 12vh; } }

/*============= Sections & éléments =============*/
.section--light{background:var(--color-sec-bg1);}
.section--soft{background:var(--color-sec-bg2);}
.section-title{font-size:1.875rem;font-weight:800;margin-bottom:.75rem;}
.badge-ico{background:var(--color-link-h);color:var(--color-link);width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;margin-right:.75rem;}

/*============= Services cards =============*/
.service-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease;}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.icon{background:transparent;height:12rem;display:flex;align-items:center;justify-content:center;}
.icon__i{font-size:3rem;color:var(--color-heading);padding:1rem;border-radius:999px;box-shadow:0 0 0 8px rgba(30,86,49,0.06);}
.card{background:#fff;padding:2rem;border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.card-title{color:var(--color-heading);font-weight:800;}
.card-ico{color:var(--color-heading);margin-right:.75rem;font-size:1.1rem;}
.li-ico{color:var(--color-heading);margin-right:.5rem;}
.link-more{font-weight:700;color:var(--color-link);}
.link-more:hover{color:var(--color-link-h);}

/*============= Gallery =============*/
.gallery-item{position:relative;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.gallery-item img{width:100%;height:16rem;object-fit:cover;transition:transform .5s ease;}
.gallery-item:hover img{transform:scale(1.06);}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .3s ease;}
.gallery-item:hover .overlay{opacity:1;}
.overlay__content{text-align:center;padding:1rem;}

/*============= FAQ (accordéon) =============*/
.faq{max-width:900px;margin:0 auto;}
.faq__item{margin:.6rem 0;}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;padding:1rem 1.2rem;border-radius:.6rem;border:1px solid #d9d9d9;background:#fff;font-weight:700;cursor:pointer;}
.faq__q:hover{border-color:var(--color-link-h);}
.faq__icon{transition:transform .25s ease;color:var(--color-heading);}
.faq__q[aria-expanded="true"] .faq__icon{transform:rotate(180deg);}
.faq__a{overflow:hidden;max-height:0;background:#fff;border:1px solid #e5e5e5;border-top:none;border-radius:0 0 .6rem .6rem;padding:0 1.2rem;transition:max-height .3s ease;}
.faq__a p{margin:1rem 0 1.2rem;}

/*============= Form =============*/
.contact-form{background:#fff;padding:2rem;border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.form-label{display:block;margin-bottom:.5rem;font-weight:700;color:var(--color-text);}
.form-control{width:100%;padding:.75rem 1rem;border:1px solid #ccc;border-radius:.5rem;background:#fff;color:var(--color-text);transition:border-color .2s ease,box-shadow .2s ease;font-weight:500;}
.form-control:focus{outline:none;border-color:var(--color-link-h);box-shadow:0 0 0 3px rgba(163,217,165,.45);}
.alert{margin-top:.75rem;text-align:center;font-weight:700;display:none;}
.alert.alert--show{display:block;}
.alert--success{color:var(--color-heading);}
.alert--error{color:#B00020;}

/*============= Bloc liens légaux =============*/
.legal-links{background:var(--color-sec-bg1);padding:.25rem 0;border-top:1px solid rgba(0,0,0,.06);}
.legal-link{display:block;background:#fff;border:1px solid #e5e5e5;border-radius:.5rem;padding:.1rem 1rem;font-weight:700;box-shadow:var(--shadow-sm);}
.legal-link:hover{border-color:var(--color-link-h);color:var(--color-link);}

/*============= Footer =============*/
.site-footer{background:var(--color-footer);color:#fff;padding:3rem 0;}
.footer-title,.footer-subtitle{color:#fff;font-weight:800;letter-spacing:.2px;margin-bottom:.95rem;}
.footer-title::after,.footer-subtitle::after{content:"";display:block;width:42px;height:3px;background:var(--color-link-h);border-radius:2px;margin-top:.35rem;}
.footer-link{color:#f4e0e0;}
.footer-link:hover{color:var(--color-link-h);}
.text-footer{color:#f4e0e0;opacity:.95;}
.social-btn{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--color-link-h);color:#fff;}
.social-btn:hover{background:var(--color-link-h);color:var(--color-text);}

/*============= Cookies banner =============*/
.cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:99999;background:#fff;border:1px solid #e5e5e5;border-radius:.75rem;box-shadow:var(--shadow-md);padding:1rem;}
.cookie__inner{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.cookie__actions{display:flex;gap:.5rem;align-items:center;}
.cookie__panel{border-top:1px solid #e5e5e5;margin-top:.75rem;padding-top:.75rem;}
.cookie__opt{display:block;margin:.25rem 0;}
.hidden{display:none !important;}

/*============= Back to Top =============*/
.btn-fab{position:fixed;bottom:2rem;right:2rem;background:var(--color-btn-bg);color:var(--color-btn-txt);width:3rem;height:3rem;border-radius:999px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease,visibility .25s ease,transform .25s ease;border:2px solid transparent;}
.btn-fab.visible{opacity:1;visibility:visible;transform:translateY(0);}
.btn-fab:hover{background:var(--color-btn-h);color:var(--color-text);}

/*============= Responsive helpers =============*/
@media (min-width:768px){nav{display:flex;}#mobile-menu{display:none;}}

/*============= Reveal on scroll (Services & co) =============*/
@media (prefers-reduced-motion: no-preference){
    [data-reveal]{opacity:0;transform: translateY(18px) scale(.98);filter: blur(2px);transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease;transition-delay: var(--reveal-delay, 0ms);will-change: opacity, transform, filter;}
    [data-reveal].is-visible{opacity:1;transform:none;filter:none;}
    [data-reveal-parent] > *:nth-child(1)  { --reveal-delay: 0ms; }
    [data-reveal-parent] > *:nth-child(2)  { --reveal-delay: 90ms; }
    [data-reveal-parent] > *:nth-child(3)  { --reveal-delay: 180ms; }
    [data-reveal-parent] > *:nth-child(4)  { --reveal-delay: 270ms; }
    [data-reveal-parent] > *:nth-child(5)  { --reveal-delay: 360ms; }
    [data-reveal-parent] > *:nth-child(6)  { --reveal-delay: 450ms; }
    [data-reveal-parent] > *:nth-child(7)  { --reveal-delay: 540ms; }
    [data-reveal-parent] > *:nth-child(8)  { --reveal-delay: 630ms; }
    [data-reveal-parent] > *:nth-child(9)  { --reveal-delay: 720ms; }
    [data-reveal-parent] > *:nth-child(10) { --reveal-delay: 810ms; }
    [data-reveal-parent] > *:nth-child(11) { --reveal-delay: 900ms; }
    [data-reveal-parent] > *:nth-child(12) { --reveal-delay: 990ms; }
}

/*============= Méthode (cards animées) =============*/
.method-grid { position: relative; }
@media (min-width:1024px){
    .method-grid::before{
        content:""; position:absolute; left:0; right:0; top:30px; height:2px;
        background: linear-gradient(90deg, rgba(163,217,165,.0) 0%, rgba(163,217,165,.6) 12%, rgba(163,217,165,.6) 88%, rgba(163,217,165,.0) 100%);
        pointer-events:none;
    }
}
.method-card{ text-align:left; transition: transform .25s ease, box-shadow .25s ease; }
.method-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.method-card .card-title{ margin-top:.25rem; margin-bottom:.35rem; }
.method-step{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; font-weight:800; background: var(--color-link-h); color: var(--color-link); box-shadow: 0 0 0 6px rgba(30,86,49,0.06); margin-bottom:.35rem; }
@media (min-width:1024px){ .method-step{ margin-top:-10px; } }

/* Fond “base” pour occulter l'image du hero là où nécessaire */
.section--base{ background: var(--color-bg); }

/* Séparateur hairline discret, non transparent */
.sep-hairline{
    border: 0;
    height: 1px;
    width: clamp(220px, 40%, 560px); /* plus étroit qu’avant */
    margin: 10px auto 30px;
    background-color: rgba(0,0,0,.14); /* plein, pas de transparence vers le hero */
    border-radius: 1px;
}

/* Fondu aux extrémités – optionnel */
@supports (mask-image: linear-gradient(#000,#000)){
    .sep-hairline{
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    }
}

/* Modificateurs de teinte (à utiliser si le <hr> n’est pas dans la section) */
.sep--light { background-color: rgba(0,0,0,.16); } /* pour séparer deux .section--light */
.sep--soft  { background-color: rgba(0,0,0,.12); } /* pour .section--soft */


/* Hairline pinned at the very top of a section (no reveal of the hero) */
.has-top-hairline{ position: relative; }
.has-top-hairline::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform: translateX(-50%);
    height:1px;
    width: clamp(220px, 80%, 560px); /* fin et étroit */
    background: rgba(0,0,0,.16);     /* opaque, pas transparent */
    border-radius: 1px;
}

/* Option: nuance selon le fond de la section */
.section--soft.has-top-hairline::before  { background: rgba(0,0,0,.12); }
.section--light.has-top-hairline::before { background: rgba(0,0,0,.16); }
.section--base.has-top-hairline::before  { background: rgba(0,0,0,.14); }


/* ==== Carousel dans la galerie : défilement horizontal + contrôles ==== */
.gallery-item { position: relative; height: 16rem; }
@media (min-width:1024px){ .gallery-item{ height: 14rem; } }

.gallery-item.carousel { overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* Piste horizontale */
.carousel__viewport{ position:relative; width:100%; height:100%; overflow:hidden; }
.carousel__track{
    display:flex; width:100%; height:100%;
    transform: translateX(0%); transition: transform .55s cubic-bezier(.22,.7,.15,1);
    will-change: transform;
}
.carousel__slide{ flex: 0 0 100%; height:100%; position:relative; }
.carousel__slide img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Effet zoom doux au survol sur la diapo visible */
.gallery-item.carousel:hover .carousel__slide:nth-child(n) img{ transition: transform .6s ease; }
.gallery-item.carousel:hover .carousel__slide:nth-child(n){ }
.gallery-item.carousel:hover .carousel__slide.is-current img{ transform: scale(1.06); }

/* Overlay au-dessus + clics sous l’overlay */
.gallery-item.carousel .overlay{ z-index: 3; pointer-events: none; }

/* Flèches */
.carousel__nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:999px;
    background:#fff; color:#2B2B2B; border:1px solid rgba(0,0,0,.12);
    display:flex; align-items:center; justify-content:center;
    box-shadow: var(--shadow-sm);
    opacity:.0; transition: opacity .25s ease, background-color .25s ease;
    z-index:4; cursor:pointer;
}
.carousel__prev{ left:10px; }
.carousel__next{ right:10px; }
.gallery-item.carousel:hover .carousel__nav{ opacity:1; }
.carousel__nav:hover{ background:var(--color-link-h); color:var(--color-text); }

/* Puces */
.carousel__dots{
    position:absolute; left:0; right:0; bottom:10px;
    display:flex; justify-content:center; gap:8px; z-index:4;
    pointer-events:auto;
}
.carousel__dot{
    width:8px; height:8px; border-radius:999px;
    background: rgba(255,255,255,.85);
    border:1px solid rgba(0,0,0,.15);
    transition: transform .2s ease, background-color .2s ease;
}
.carousel__dot:hover{ transform: scale(1.15); }
.carousel__dot.is-active{ background: var(--color-link); border-color: transparent; }

/* (déjà défini) Overlay foncé au survol */
.overlay{ pointer-events:none; } /* important pour laisser cliquer les flèches */

/* hauteur du cadre (ajuste ici si besoin) */
.gallery-item { position: relative; height: 16rem; } /* change 16rem si tu veux plus/moins haut */

/* === Toggle cover/contain via une classe === */
.carousel{ --carv-fit: cover; --carv-bg: #fff; }     /* défaut = comme aujourd’hui */
.carousel--contain{ --carv-fit: contain; --carv-bg: #fff; } /* montre toute l’image, pas de crop */

.carousel__slide{ flex:0 0 100%; height:100%; position:relative; background: var(--carv-bg); }
.carousel__slide img{
    width:100%;
    height:100%;
    object-fit: var(--carv-fit);   /* ← le switch est ici */
    display:block;
}

/* Mobile: keep text but keep the CTA inside the header */
@media (max-width:640px){
    .btn-cta--header{
        font-size:.9rem;
        padding:.45rem .7rem;
        white-space:nowrap;   /* stop line breaks */
        max-height:44px;      /* never grow taller than header */
    }
}

/* === Messages de feedback formulaire === */
#response-message {
  white-space: pre-line;   /* gère les retours à la ligne si besoin */
  margin-top: .75rem;
  font-weight: 700;
}

.alert.alert--show {
  display: block !important; /* lève tout conflit éventuel */
}