/* =========================================================================
   1001 Feuilles — CSS front maison
   Zéro framework, zéro JavaScript. Motion 100% CSS.
   DA reprise du site existant : vert forêt #215d2a, Poppins.
   ========================================================================= */

:root {
    --vert: #215d2a;
    --vert-fonce: #16401d;
    --vert-clair: #2f7d3a;
    --olive: #749a30;
    --olive-texte: #557320;    /* olive assombri pour le TEXTE sur fond clair (contraste AA ≥4.5:1) ; --olive reste pour le décoratif */
    --brun: #5e3610;
    --terre: #a85911;

    --texte: #1f2429;
    --gris: #5b6166;
    --gris-clair: #8b9197;
    --fond: #ffffff;
    --fond-alt: #f4f7f1;       /* fond de section légèrement vert */
    --fond-sombre: #16401d;
    --bordure: #e4e8e0;

    --rayon: 14px;
    --rayon-sm: 9px;
    --ombre: 0 10px 30px rgba(22, 64, 29, .10);
    --ombre-forte: 0 18px 50px rgba(22, 64, 29, .18);
    --container: 1180px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ----- Reset léger ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
    margin: 0;
    overflow-x: clip;
    max-width: 100%;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--texte);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vert); text-decoration: none; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; margin: 0 0 .5em; color: var(--texte); }
h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1rem; }
ul { margin: 0; }

/* ----- Utilitaires ----- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.section { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
/* Deux sections de MÊME fond qui se suivent : on supprime le double-padding (évite les grands vides). */
.section:not(.section--alt):not(.section--green) + .section:not(.section--alt):not(.section--green) { padding-top: 0; }
.section--alt + .section--alt { padding-top: 0; }
.section--green + .section--green { padding-top: 0; }
.section--alt { background: var(--fond-alt); }
.section--green { background: var(--fond-sombre); color: #eaf3ea; }
.section--green h2, .section--green h3 { color: #fff; }
.center { text-align: center; }
.eyebrow {
    display: inline-block;
    font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--olive-texte); margin-bottom: .75rem;
}
.lead { font-size: 1.12rem; color: var(--gris); max-width: 640px; }
.center .lead { margin-inline: auto; }

/* ----- Boutons ----- */
.btn {
    --bg: var(--vert);
    display: inline-flex; align-items: center; gap: .55rem;
    font-weight: 600; font-size: 1rem; line-height: 1;
    padding: .95rem 1.6rem; border-radius: 999px;
    background: var(--bg); color: #fff; border: 2px solid var(--bg);
    cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
    box-shadow: 0 8px 20px rgba(22,64,29,.22);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(22,64,29,.30); }
.btn--terre { --bg: var(--terre); box-shadow: 0 8px 20px rgba(195,106,21,.28); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); box-shadow: none; }
.btn--ghost:hover { background: #fff; color: var(--vert); border-color: #fff; }
.btn--outline { background: transparent; color: var(--vert); box-shadow: none; }
.btn--outline:hover { background: var(--vert); color: #fff; }
/* Sur un hero sombre (overlay vert), l'outline vert serait invisible : passage en blanc lisible. */
.hero .btn--outline { color: #fff; border-color: rgba(255,255,255,.7); }
.hero .btn--outline:hover { background: #fff; color: var(--vert); border-color: #fff; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ----- Icônes SVG ----- */
svg { flex-shrink: 0; }
.btn svg, .header-phone svg, .hero-badge svg { width: 19px; height: 19px; }
.hero-badge svg { color: #bfe0a8; }
.presta .dot svg { width: 21px; height: 21px; }
.footer-contact svg { width: 18px; height: 18px; margin-top: 3px; color: #7fb07f; }

/* ----- Bouton d'appel soigné ----- */
.btn-call {
    display: inline-flex; align-items: center; gap: .75rem;
    padding: .4rem 1.4rem .4rem .45rem; border-radius: 999px;
    background: rgba(255,255,255,.10); border: 1.5px solid rgba(255,255,255,.4); color: #fff;
    transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn-call:hover { background: #fff; color: var(--vert); transform: translateY(-3px); }
.btn-call .ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--vert); display: grid; place-items: center; transition: background .25s, color .25s; }
.btn-call:hover .ic { background: var(--vert); color: #fff; }
.btn-call .ic svg { width: 20px; height: 20px; }
.btn-call .txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.btn-call .txt small { font-size: .72rem; font-weight: 500; opacity: .9; letter-spacing: .02em; }
.btn-call .txt b { font-size: 1.15rem; font-weight: 700; white-space: nowrap; }

/* =========================================================================
   TOPBAR (barre utilitaire slim)
   ========================================================================= */
.topbar { background: var(--vert-fonce); color: #cfe3cf; font-size: .92rem; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 46px; }
.topbar a { color: #e7f1e7; display: inline-flex; align-items: center; gap: .45rem; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 16px; height: 16px; opacity: .9; }
.topbar-tagline { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.05rem; font-weight: 600; color: #fff; }
.topbar-tagline svg { width: 19px; height: 19px; opacity: 1; }
.topbar-right { display: flex; align-items: center; gap: 1.6rem; }
/* Offres d'emploi : simple lien texte dans la topbar (pas de bouton mis en avant). */
.topbar-job { color: #e7f1e7; font-weight: 500; }
.topbar-job:hover { color: #fff; }
.topbar-job svg { width: 15px; height: 15px; opacity: .9; }
@media (max-width: 1024px) { .topbar { display: none; } }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--bordure);
}
.site-header .container { display: flex; align-items: center; gap: 1.5rem; min-height: 74px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; height: 56px; width: auto; }
.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 1.6rem; list-style: none; padding: 0; margin: 0; }
.nav a { color: var(--texte); font-weight: 500; font-size: .95rem; position: relative; padding-block: .3rem; white-space: nowrap; }
.nav a::after {
    content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
    background: var(--vert); transition: width .28s var(--ease);
}
.nav a:hover::after, .nav a[aria-current]::after { width: 100%; }
.nav-contact { display: none; }
.header-cta { flex-shrink: 0; display: flex; align-items: center; }
.header-call { display: none; }

/* Burger (checkbox hack — zéro JS) */
.nav-toggle, .nav-toggle-label { display: none; }
.nav-toggle-label { cursor: pointer; padding: .5rem; }
.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
    content: ""; display: block; width: 26px; height: 2.5px; background: var(--vert); border-radius: 2px;
    transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle-label span::before { transform: translateY(-8px); }
.nav-toggle-label span::after  { transform: translateY(8px) translateX(0); }
.nav-toggle-label span::before, .nav-toggle-label span::after { position: relative; }

/* Header qui se compacte au défilement — 100 % CSS (scroll-driven animations).
   Dégradation propre : navigateurs sans support → header sticky normal, aucune casse.
   Respecte prefers-reduced-motion. */
@keyframes header-bar-shrink  { to { min-height: 56px; } }
@keyframes header-logo-shrink { to { height: 40px; } }
@keyframes header-elevate     { to { box-shadow: 0 6px 22px rgba(22,64,29,.12); } }
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
        .site-header,
        .site-header .container,
        .site-header .brand img {
            animation: linear both;
            animation-timeline: scroll(root block);
            animation-range: 0 90px;
        }
        .site-header            { animation-name: header-elevate; }
        .site-header .container { animation-name: header-bar-shrink; }
        .site-header .brand img { animation-name: header-logo-shrink; }
    }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
    position: relative; color: #fff; isolation: isolate;
    display: grid; align-items: center;
    /* Hauteur homogène sur tout le site, calée pour laisser apparaître le début de la section suivante en first view. */
    min-height: clamp(380px, 68vh, 560px);
    padding-block: clamp(1.5rem, 3vh, 2.5rem);
    overflow: hidden;
}
.hero > .container { width: 100%; }
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background-image: var(--hero-img); background-size: cover; background-position: center;
    animation: heroZoom 18s ease-in-out infinite alternate;
}
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, rgba(16,42,20,.82) 0%, rgba(16,42,20,.55) 55%, rgba(16,42,20,.25) 100%);
}
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero h1 { color: #fff; max-width: 22ch; font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3rem); }
/* Exception home : le H1 (« Paysagiste · Métropole lilloise ») reprend le look du petit eyebrow ; le grand titre visible est le .hero-title juste dessous. */
.hero--home h1 { display: inline-block; color: #bfe0a8; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; max-width: none; margin: 0 0 .75rem; }
.hero--home .hero-title { color: #fff; max-width: 24ch; font-size: clamp(1.7rem, 1.1rem + 2.5vw, 2.7rem); font-weight: 700; line-height: 1.18; margin: 0 0 .5em; }
.hero .lead { color: rgba(255,255,255,.92); font-size: 1.2rem; max-width: 52ch; }
/* Baseline de marque « Des jardins vivants, des solutions responsables » —
   signature mise en avant : sous le grand titre, taille intermédiaire, filet terre. */
.hero-baseline { display: flex; align-items: center; gap: .65rem; margin: -.2rem 0 .9rem; color: #d7ecc7; font-style: italic; font-weight: 500; font-size: clamp(1.1rem, .95rem + .6vw, 1.35rem); letter-spacing: .01em; }
.hero-baseline::before { content: ""; flex: none; width: 2.2rem; height: 2px; border-radius: 2px; background: var(--terre, #a85911); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 1.25rem 1.5rem; margin-top: 1.4rem; }
.hero-badge { display: flex; align-items: center; gap: .6rem; font-weight: 500; font-size: .95rem; }
.hero-badge b { font-weight: 700; }
/* Réassurance hero : note Google compacte (logée dans la hauteur existante du hero). */
.hero-rating {
    display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.25rem;
    padding: .4rem .8rem; border-radius: 999px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
    color: #fff; font-size: .92rem; text-decoration: none; backdrop-filter: blur(2px);
    transition: background .2s, border-color .2s;
}
.hero-rating:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.hero-rating .stars-rating { font-size: 1rem; letter-spacing: 2px; }
.hero-rating-txt b { font-weight: 700; }

/* =========================================================================
   PÔLES DE SERVICES (3 cartes)
   ========================================================================= */
.poles { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
.pole {
    position: relative; border-radius: var(--rayon); overflow: hidden; min-height: 360px;
    display: flex; align-items: flex-end; color: #fff; isolation: isolate;
    box-shadow: var(--ombre);
}
.pole img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease); }
.pole::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(16,42,20,.92) 8%, rgba(16,42,20,.15) 70%); }
.pole:hover img { transform: scale(1.08); }
.pole-body { padding: 1.6rem; }
.pole-body h3 { color: #fff; font-size: 1.5rem; margin-bottom: .3rem; }
.pole-body p { color: rgba(255,255,255,.88); font-size: .95rem; margin-bottom: 1rem; }
.pole-link { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.pole-link .arrow { transition: transform .25s var(--ease); }
.pole:hover .pole-link .arrow { transform: translateX(5px); }
.tag-spa { display: inline-block; background: var(--terre); color: #fff; font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 6px; margin-bottom: .6rem; }

/* =========================================================================
   GRILLE DE PRESTATIONS
   ========================================================================= */
.prestations { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
.presta {
    background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
    padding: 1.4rem 1.2rem; display: flex; align-items: flex-start; gap: .9rem;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.presta-body { display: flex; flex-direction: column; gap: .25rem; }
.presta-body b { font-weight: 600; font-size: 1.02rem; line-height: 1.25; }
.presta-body small { color: var(--gris); font-size: .9rem; font-weight: 400; line-height: 1.4; }
.presta:hover { transform: translateY(-4px); box-shadow: var(--ombre); border-color: transparent; }
.presta .dot { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--fond-alt); display: grid; place-items: center; color: var(--vert); }
.presta:hover .dot { background: var(--vert); color: #fff; }

/* =========================================================================
   RÉALISATIONS (galerie)
   ========================================================================= */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
.gallery a { position: relative; display: block; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4/3; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery a:hover img { transform: scale(1.07); }
.gallery a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,42,20,.5), transparent 55%); opacity: 0; transition: opacity .3s; }
.gallery a:hover::after { opacity: 1; }
.gallery .big { grid-row: span 2; aspect-ratio: auto; }

/* =========================================================================
   POURQUOI NOUS CHOISIR
   ========================================================================= */
.reasons { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.5rem; }
.reason { display: flex; gap: 1rem; align-items: flex-start; }
.reason .num { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 14px; background: rgba(255,255,255,.12); display: grid; place-items: center; font-weight: 800; color: #fff; }
.reason h3 { margin-bottom: .2rem; }
.reason p { color: rgba(255,255,255,.82); font-size: .96rem; margin: 0; }

/* =========================================================================
   AVIS CLIENTS — style Trustindex / Google (zéro JS)
   ========================================================================= */
/* Étoiles fractionnaires : remplissage doré selon --rate (sur 5) */
.stars-rating {
    --rate: 5;
    display: inline-block; font-size: 1.05rem; line-height: 1; letter-spacing: 3px;
    background: linear-gradient(90deg, #fbbc05 calc(var(--rate) / 5 * 100%), #d4d8d4 calc(var(--rate) / 5 * 100%));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stars-rating--sm { font-size: 1rem; letter-spacing: 2px; display: block; margin-bottom: .8rem; }

/* En-tête : carte de confiance (logo Google + note + avis) */
.ti-head {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 1.25rem 1.8rem; margin: 2.5rem auto 0; padding: 1.4rem 2rem;
    background: var(--fond); border: 1px solid var(--bordure); border-radius: 999px;
    box-shadow: var(--ombre); width: fit-content; max-width: 100%;
}
.ti-brand { display: flex; align-items: center; gap: .55rem; font-size: 1.1rem; color: var(--texte); }
.ti-brand b { font-weight: 700; }
.ti-divider { width: 1px; height: 38px; background: var(--bordure); }
.ti-score-block { display: flex; align-items: center; gap: .8rem; }
.ti-score { font-size: 2.4rem; font-weight: 800; line-height: 1; color: #e7711b; }
.ti-score-meta { display: flex; flex-direction: column; gap: .15rem; }
.ti-count { font-size: .85rem; color: var(--gris); }
.ti-count b { color: var(--texte); font-weight: 600; }

/* Carrousel CSS pur : scroll-snap horizontal */
.ti-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(330px, 1fr);
    gap: 1.25rem; margin-top: 2.5rem; padding: .5rem .25rem 1.25rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: thin; scrollbar-color: var(--olive) transparent;
}
.ti-track::-webkit-scrollbar { height: 8px; }
.ti-track::-webkit-scrollbar-thumb { background: var(--olive); border-radius: 99px; }
/* Le carrousel est focusable au clavier (tabindex=0) pour pouvoir le faire défiler
   aux flèches : on rend ce focus visible. */
.ti-track:focus-visible { outline: 2px solid var(--vert); outline-offset: 4px; border-radius: 8px; }
.ti-card {
    position: relative; scroll-snap-align: start; overflow: hidden;
    background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--rayon);
    padding: 1.6rem; box-shadow: var(--ombre);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.ti-card:hover { transform: translateY(-5px); box-shadow: var(--ombre-forte); border-color: transparent; }
.ti-quote { position: absolute; top: .2rem; right: 1.1rem; font-family: Georgia, serif; font-size: 4.5rem; line-height: 1; color: var(--fond-alt); z-index: 0; }
.ti-card-head, .ti-card .stars-rating, .ti-card p { position: relative; z-index: 1; }
.ti-card-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.ti-avatar-wrap { position: relative; flex: 0 0 auto; }
.ti-avatar { width: 46px; height: 46px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.15rem; }
.ti-avatar-g { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.ti-avatar-g svg { width: 13px; height: 13px; }
.ti-card-meta { display: flex; flex-direction: column; line-height: 1.25; }
.ti-card-meta b { font-weight: 600; font-size: 1rem; }
.ti-card-meta span { font-size: .82rem; color: var(--gris-clair); }
.ti-card p { color: var(--gris); margin: 0; font-size: .96rem; line-height: 1.6; }

/* =========================================================================
   PAGE SERVICE (gabarit intérieur)
   ========================================================================= */
.container--narrow { max-width: 820px; }

/* Hero intérieur : plus court que le hero d'accueil, et sans zoom (évite l'effet « trop zoomé ») */
/* Hero de page intérieure : hauteur UNIFORME sur tout le site (même bandeau quelle que soit la page),
   contenu centré verticalement. Les pages riches (service : CTA + points clés) sont resserrées pour
   tenir dans la même hauteur que les pages simples. */
.hero--page { padding-block: 1.5rem; }
.hero--page > .container { width: 100%; }
.hero--page .hero-actions { margin-top: 1.1rem; }
.hero--page .hero-badges { margin-top: .9rem; gap: .55rem 1.2rem; font-size: .9rem; }
.hero--page::before { animation: none; background-position: center 35%; }
/* Mobile : le contenu s'empile (hauteur naturelle plus grande) — on n'impose pas le bandeau desktop. */
@media (max-width: 768px) { .hero { min-height: clamp(340px, 62vh, 480px); } }
.hero--page h1 { max-width: 22ch; }
.breadcrumb { font-size: .9rem; color: rgba(255,255,255,.8); margin-bottom: 1rem; }
.breadcrumb a { color: rgba(255,255,255,.8); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { color: #fff; }

/* Bloc image + texte alterné */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.split-media img { border-radius: var(--rayon); box-shadow: var(--ombre); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split-body h2 { margin-top: .2rem; }
.split-body .btn { margin-top: 1rem; }

/* Grille de cartes prestations — auto-adaptative (3, 4 ou 8 cartes) */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
/* Variante 4 offres alignées sur une ligne en desktop (ex. packs conception) :
   4-up → 2×2 en tablette → 1 colonne en mobile, sans carte orpheline. */
.cards-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.cards-grid--4 .card-svc { padding: 1.5rem 1.35rem; }
@media (max-width: 1080px) { .cards-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cards-grid--4 { grid-template-columns: 1fr; } }
.card-svc {
    background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--rayon);
    padding: 1.8rem; box-shadow: var(--ombre);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.card-svc:hover { transform: translateY(-5px); box-shadow: var(--ombre-forte); border-color: transparent; }
.card-svc-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--fond-alt); color: var(--vert); margin-bottom: 1rem; }
.card-svc:hover .card-svc-ico { background: var(--vert); color: #fff; }
.card-svc h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.card-svc p { color: var(--gris); margin: 0; font-size: .97rem; }
.card-svc-list { list-style: none; margin: .85rem 0 0; padding: 0; display: grid; gap: .5rem; }
.card-svc-list li { position: relative; padding-left: 1.3rem; color: var(--gris); font-size: .92rem; line-height: 1.45; }
.card-svc-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--vert); }

/* Liste à coches */
.check-list { list-style: none; padding: 0; display: grid; gap: .9rem; margin: 1.5rem 0 0; }
.check-list li { display: flex; align-items: flex-start; gap: .7rem; }
.check-list li svg { flex: 0 0 auto; color: #bfe0a8; margin-top: 2px; }
.check-list--grid { margin-top: 2.5rem; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; max-width: 820px; margin-inline: auto; }
/* Liste générique des blocs `liste` (ex. « Nos interventions ») — checklist propre
   (coche verte sur pastille claire) au lieu des puces brutes du navigateur. */
.block-list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .8rem; }
.block-list li { position: relative; padding-left: 2.1rem; line-height: 1.55; }
.block-list li::before {
    content: ""; position: absolute; left: 0; top: .05em; width: 1.45rem; height: 1.45rem;
    border-radius: 50%; background: #e9f3e2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23215d2a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: .85rem .85rem;
}

/* Carte avantage fiscal */
.fiscal-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--rayon); padding: 2rem; }
.fiscal-badge { display: inline-block; background: var(--terre); color: #fff; font-weight: 800; font-size: 1.3rem; padding: .35rem 1rem; border-radius: 999px; margin-bottom: 1rem; }
.fiscal-card h3 { color: #fff; }
.fiscal-card p { color: rgba(255,255,255,.85); font-size: .97rem; }
.fiscal-card .btn { margin-top: .5rem; }

/* Chips villes */
.chips { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 2.5rem; }
.chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--fond); border: 1px solid var(--bordure); border-radius: 999px;
    padding: .55rem 1.1rem; font-size: .92rem; font-weight: 500; color: var(--texte);
    transition: border-color .2s, color .2s, transform .2s var(--ease);
}
.chip svg { color: var(--olive); }
.chip:hover { border-color: var(--vert); color: var(--vert); transform: translateY(-2px); }

/* FAQ — accordéon natif <details> (zéro JS) */
.faq { margin-top: 2.5rem; display: grid; gap: .9rem; }
.faq-item { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--rayon-sm); overflow: hidden; }
.faq-item summary {
    list-style: none; cursor: pointer; padding: 1.15rem 1.3rem; font-weight: 600; color: var(--texte);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-sign { flex: 0 0 auto; position: relative; width: 18px; height: 18px; }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; background: var(--vert); border-radius: 2px; transition: transform .25s var(--ease), opacity .25s; }
.faq-sign::before { top: 8px; left: 0; width: 18px; height: 2.5px; }
.faq-sign::after  { left: 8px; top: 0; width: 2.5px; height: 18px; }
.faq-item[open] .faq-sign::after { transform: rotate(90deg); opacity: 0; }
.faq-body { padding: 0 1.3rem 1.25rem; }
.faq-body p { margin: 0; color: var(--gris); }
.faq-item[open] summary { color: var(--vert); }

/* =========================================================================
   PROSE (pages éditoriales : qui-sommes-nous…)
   ========================================================================= */
.prose p { color: var(--gris); }
.prose .prose-intro { font-size: 1.3rem; font-weight: 600; color: var(--vert); margin-bottom: 1.5rem; }
.prose h2 { margin-top: 2.5rem; }
.prose-list { list-style: none; padding: 0; display: grid; gap: .7rem; margin: 1rem 0 1.5rem; }
.prose-list li { position: relative; padding-left: 1.6rem; color: var(--gris); }
.prose-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--olive); }

/* =========================================================================
   OFFRES D'EMPLOI
   ========================================================================= */
.job-list { display: grid; gap: 1.25rem; }
.job-card { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1.6rem 1.8rem; box-shadow: var(--ombre); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.job-card:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: transparent; }
.job-meta time { display: inline-block; font-size: .82rem; font-weight: 600; color: var(--olive-texte); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .4rem; }
.job-card h2 { font-size: 1.25rem; margin: 0 0 .5rem; }
.job-card h2 a { color: var(--texte); }
.job-card h2 a:hover { color: var(--vert); }
.job-card p { color: var(--gris); margin: 0 0 1rem; }
.job-link { font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.job-link .arrow { transition: transform .25s var(--ease); }
.job-card:hover .job-link .arrow { transform: translateX(5px); }

/* =========================================================================
   PORTFOLIO RÉALISATIONS
   ========================================================================= */
.portfolio { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.75rem; }
.folio { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.folio:hover { transform: translateY(-5px); box-shadow: var(--ombre-forte); border-color: transparent; }
.folio-media { display: block; aspect-ratio: 4/3; overflow: hidden; }
.folio-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.folio:hover .folio-media img { transform: scale(1.07); }
.folio-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.folio-body h2 { font-size: 1.18rem; line-height: 1.3; margin: 0 0 .6rem; }
.folio-body h2 a { color: var(--texte); }
.folio-body h2 a:hover { color: var(--vert); }
.folio-body p { color: var(--gris); font-size: .94rem; line-height: 1.55; margin: 0 0 1rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.folio-link { margin-top: auto; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.folio-link .arrow { transition: transform .25s var(--ease); }
.folio:hover .folio-link .arrow { transform: translateX(5px); }

/* =========================================================================
   GRILLE PHOTO (galeries)
   ========================================================================= */
/* Mosaïque « masonry » 100% CSS : chaque photo garde ses proportions réelles
   (fini le recadrage carré qui coupait fleurs & terrasses). */
.photo-grid { column-count: 4; column-gap: .9rem; }
@media (max-width: 1200px) { .photo-grid { column-count: 3; } }
@media (max-width: 780px)  { .photo-grid { column-count: 2; } }
@media (max-width: 460px)  { .photo-grid { column-count: 1; } }
.photo-item {
    position: relative; display: block; break-inside: avoid; margin-bottom: .9rem;
    overflow: hidden; border-radius: var(--rayon-sm); box-shadow: var(--ombre); cursor: zoom-in;
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.photo-item img { width: 100%; height: auto; display: block; transition: transform .6s var(--ease); }
.photo-item::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(12,22,13,.5), rgba(12,22,13,0) 55%);
    opacity: 0; transition: opacity .3s var(--ease);
}
.photo-item:hover { box-shadow: var(--ombre-forte); transform: translateY(-3px); }
.photo-item:hover img { transform: scale(1.06); }
.photo-item:hover::before { opacity: 1; }
.photo-zoom {
    position: absolute; right: .7rem; bottom: .7rem; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--vert); background: rgba(255,255,255,.94);
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    opacity: 0; transform: translateY(8px) scale(.85);
    transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s;
}
.photo-item:hover .photo-zoom { opacity: 1; transform: translateY(0) scale(1); }
.photo-item:hover .photo-zoom { background: #fff; }
/* Accessibilité clavier : l'overlay apparaît aussi au focus de la vignette. */
.photo-item:focus-visible::before { opacity: 1; }
.photo-item:focus-visible .photo-zoom { opacity: 1; transform: translateY(0) scale(1); }

/* Visionneuse plein écran — 100% CSS via :target (zéro JS) */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vmin, 3rem); background: rgba(12, 22, 13, .94); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease); }
.lightbox:target { opacity: 1; visibility: visible; }
.lightbox-backdrop { position: absolute; inset: 0; cursor: zoom-out; }
.lightbox-figure { position: relative; margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; }
.lightbox-figure img { max-width: 92vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: var(--rayon-sm); box-shadow: 0 12px 50px rgba(0,0,0,.55); }
.lightbox-figure figcaption { color: rgba(255,255,255,.75); font-size: .9rem; text-align: center; margin-top: .8rem; }
.lightbox-close, .lightbox-nav { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.45); border-radius: 50%; text-decoration: none; line-height: 1; transition: background .2s var(--ease), transform .2s var(--ease); }
.lightbox-close:hover, .lightbox-nav:hover { background: var(--terre); transform: scale(1.08); }
.lightbox-close { top: 3vmin; right: 3vmin; width: 48px; height: 48px; font-size: 2rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 2.6rem; padding-bottom: 4px; }
.lightbox-nav:hover { transform: translateY(-50%) scale(1.08); }
.lightbox-prev { left: 3vmin; }
.lightbox-next { right: 3vmin; }
@media (max-width: 600px) { .lightbox-nav { width: 44px; height: 44px; font-size: 2.1rem; } .lightbox-close { width: 42px; height: 42px; } }

/* =========================================================================
   FORMULAIRES (contact / devis) — zéro JS
   ========================================================================= */
.form-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: start; }
/* color explicite : sur la page devis la carte est posée dans .devis-hero (color:#fff) ;
   sans ça les libellés héritent du blanc → invisibles sur le fond blanc de la carte. */
.form-main { background: var(--fond); color: var(--texte); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--ombre); }
.field { margin-bottom: 1.2rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .4rem; }
.field label span { color: var(--terre); }
.field input, .field select, .field textarea {
    width: 100%; font: inherit; color: var(--texte);
    padding: .8rem 1rem; border: 1.5px solid var(--bordure); border-radius: var(--rayon-sm);
    background: #fff; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px rgba(33,93,42,.12);
}
.field textarea { resize: vertical; }
.field--err input, .field--err select, .field--err textarea { border-color: #d64545; }
.field--err small { display: block; margin-top: .35rem; color: #c62828; font-size: .85rem; }
.form-main .btn { margin-top: .5rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   ACCESSIBILITÉ (WCAG 2.1 AA / RGAA)
   ========================================================================= */
/* Focus clavier visible sur tous les éléments interactifs (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--terre);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Lien d'évitement « Aller au contenu » (WCAG 2.4.1) */
.skip-link {
    position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
    z-index: 1000; background: var(--vert-fonce); color: #fff;
    padding: .7rem 1.2rem; border-radius: 0 0 var(--rayon-sm) var(--rayon-sm);
    font-weight: 600; text-decoration: none; transition: transform .15s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.alert { border-radius: var(--rayon-sm); padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-weight: 500; }
.alert--ok { background: #e7f5e9; border: 1px solid #b6dcbd; color: #1c5b29; }
.alert--err { background: #fbeaea; border: 1px solid #efc3c3; color: #a32626; }

.form-aside { background: var(--fond-alt); border-radius: var(--rayon); padding: 2rem; }
.form-aside h2 { font-size: 1.25rem; }
.contact-info { list-style: none; padding: 0; display: grid; gap: 1rem; margin: 0 0 1.5rem; }
.contact-info li { color: var(--gris); }
.contact-info b { color: var(--texte); }

/* =========================================================================
   PAGE DEVIS — hero-formulaire (conversion : form visible dès l'arrivée)
   ========================================================================= */
.devis-hero { --htop: clamp(1.75rem, 1.25rem + 2.5vw, 3rem); position: relative; isolation: isolate; color: #fff; overflow: hidden; padding-block: var(--htop); }
.devis-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background-image: var(--hero-img); background-size: cover; background-position: center;
}
.devis-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, rgba(16,42,20,.94) 0%, rgba(16,42,20,.78) 42%, rgba(16,42,20,.55) 100%);
}
/* align-items: start → l'argumentaire de gauche s'aligne EN HAUT avec le
   formulaire (très long) au lieu d'être centré verticalement et de flotter
   dans un grand vide. Les deux colonnes sont désormais de hauteur comparable. */
.devis-hero__grid {
    display: grid; grid-template-columns: 1fr 1.05fr; align-items: start;
    gap: 1.75rem clamp(1.5rem, 1rem + 3vw, 3.5rem);
    grid-template-areas: "intro form" "proof form";
}
.devis-hero__intro { grid-area: intro; }
.devis-hero__form  { grid-area: form; }
.devis-hero__proof { grid-area: proof; }
.devis-hero__proof > :first-child { margin-top: 0; }
/* Fond sombre dédié (desktop) : masqué par défaut → en mobile le hero porte son
   propre fond plein hauteur (::before/::after). Activé dans le bloc min-901. */
.devis-hero__bg { display: none; }

.devis-hero__intro .breadcrumb { color: rgba(255,255,255,.8); margin-bottom: .6rem; }
.devis-hero__intro .breadcrumb a { color: rgba(255,255,255,.85); }
.devis-hero__intro h1 { color: #fff; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem); max-width: 16ch; }
.devis-hero__intro .lead { color: rgba(255,255,255,.92); max-width: 44ch; }

/* Garanties en checklist verticale (remplace les chips éparpillés) */
.devis-hero__points { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .9rem; }
.devis-hero__points li { display: flex; align-items: center; gap: .7rem; font-size: 1.02rem; color: rgba(255,255,255,.95); }
.devis-hero__points b { font-weight: 700; color: #fff; }
.devis-hero__points svg { flex: 0 0 auto; color: #bfe0a8; }

/* Avis Google mis en avant — carte « verre » sur le fond sombre du hero */
.devis-hero__review {
    margin: 1.75rem 0 0; padding: 1.4rem 1.5rem;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--rayon); backdrop-filter: blur(4px);
}
/* Note globale (au-dessus des avis) */
.devis-hero__rating { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.devis-hero__rating b { font-weight: 800; color: #fff; font-size: 1.05rem; }
.devis-hero__rating .stars-rating { font-size: 1rem; letter-spacing: 1px; display: inline-block; margin: 0; }
.devis-hero__rating .rev-count { font-size: .85rem; color: rgba(255,255,255,.75); }

.devis-hero__review-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.devis-hero__review-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.devis-hero__review-avatar--mono { display: grid; place-items: center; background: rgba(255,255,255,.22); color: #fff; font-weight: 700; font-size: 1.05rem; }
.devis-hero__review-who { display: flex; flex-direction: column; min-width: 0; }
.devis-hero__review-name { font-weight: 700; color: #fff; font-size: .95rem; line-height: 1.2; }
.devis-hero__review-sub { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .2rem; }
.devis-hero__review-sub .stars-rating { display: inline-block; margin: 0; font-size: .9rem; letter-spacing: 1px; }
.devis-hero__review .rev-note { font-weight: 700; color: #fff; font-size: .85rem; }
.devis-hero__review-sub .rev-count { font-size: .8rem; color: rgba(255,255,255,.7); }
.devis-hero__review-g { flex: 0 0 auto; margin-left: auto; align-self: flex-start; }
.devis-hero__review blockquote {
    margin: 0; font-size: .98rem; line-height: 1.6; color: rgba(255,255,255,.92);
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.devis-hero__review figcaption { margin-top: .8rem; font-weight: 600; font-size: .9rem; color: rgba(255,255,255,.85); }
.devis-hero__alt { margin: 1.4rem 0 0; font-size: .95rem; color: rgba(255,255,255,.9); }

/* ── Bande sombre PILOTÉE PAR LE CONTENU + formulaire « à cheval » (desktop) ──
   Le formulaire est très long ; au lieu d'étirer toute la 1ʳᵉ section en sombre,
   le fond coloré est porté par l'INTRO (titre + accroche + garanties) : sa
   hauteur = celle de l'intro, donc il couvre TOUJOURS pile les garanties quelle
   que soit leur hauteur (≠ valeur fixe qui coupait la 4ᵉ ligne). Le fond est mis
   en pleine largeur (100vw) par-dessous. La carte formulaire reste dans le flux
   mais est à cheval (haut sur le sombre, bas sur le blanc) → effet flottant.
   L'avis Google passe sous la bande, sur le blanc (texte sombre). */
@media (min-width: 901px) {
    /* On désactive le fond plein hauteur (utilisé par le mobile) */
    .devis-hero::before, .devis-hero::after { display: none; }

    /* Grille : 3ᵉ rangée souple qui ABSORBE le surplus de hauteur du formulaire
       (qui s'étire sur les 3 rangées) → la rangée de l'intro garde sa hauteur de
       contenu et l'avis se place JUSTE sous les garanties (fini le vide à gauche). */
    .devis-hero__grid {
        grid-template-areas: "intro form" "proof form" "fill form";
        grid-template-rows: max-content max-content 1fr;
    }

    /* Fond sombre : élément étalé sur la rangée 1 ENTIÈRE (les deux colonnes) → sa
       hauteur suit l'intro+garanties (donc couvre TOUJOURS pile les garanties), et
       comme il occupe toute la largeur du conteneur centré, le pseudo se met en
       pleine largeur viewport via 100vw. */
    .devis-hero__bg {
        display: block; grid-column: 1 / -1; grid-row: 1; align-self: stretch;
        position: relative; z-index: -1; pointer-events: none;
    }
    .devis-hero__bg::before {
        content: ""; position: absolute;
        top: calc(-1 * var(--htop)); bottom: -1.5rem;
        left: 50%; width: 100vw; margin-left: -50vw;
        background: linear-gradient(115deg, rgba(16,42,20,.94) 0%, rgba(16,42,20,.78) 42%, rgba(16,42,20,.58) 100%), var(--hero-img);
        background-size: cover; background-position: center;
    }

    /* Seul l'avis (proof) repasse en thème CLAIR (il est désormais sous la bande) */
    .devis-hero__review {
        background: #fff; border-color: var(--bordure); backdrop-filter: none; box-shadow: var(--ombre);
    }
    .devis-hero__review blockquote { color: var(--texte); }
    .devis-hero__review figcaption { color: var(--gris); }
    .devis-hero__review-head b { color: var(--texte); }
    .devis-hero__review-head .rev-count { color: var(--gris); }
    /* Note globale + méta avis repassent en texte sombre sur le blanc */
    .devis-hero__rating b { color: var(--texte); }
    .devis-hero__rating .rev-count { color: var(--gris); }
    .devis-hero__review-name { color: var(--texte); }
    .devis-hero__review .rev-note { color: var(--vert); }
    .devis-hero__review-sub .rev-count { color: var(--gris); }
    .devis-hero__review-avatar--mono { background: var(--vert); color: #fff; }
    .devis-hero__alt { color: var(--gris); }
    .devis-hero__alt a { color: var(--vert); }
}
.devis-hero__alt a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Carte formulaire posée sur le hero — réutilise .form-main (fond blanc/ombre) */
.devis-hero__form { margin: 0; }
.devis-form__title { font-size: 1.4rem; margin: 0 0 1.2rem; }

/* Réassurance sous le bouton d'envoi */
.form-reassure { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; font-size: .85rem; color: var(--gris); }
.form-reassure svg { flex: 0 0 auto; color: var(--vert); }

@media (max-width: 900px) {
    /* Mobile : ordre intro → formulaire → preuves (le form remonte au-dessus des garanties). */
    .devis-hero__grid { grid-template-columns: 1fr; grid-template-areas: "intro" "form" "proof"; }
    .devis-hero__intro h1, .devis-hero__intro .lead { max-width: none; }
    .devis-hero__proof { margin-top: .5rem; }
    /* Un seul avis sur mobile (les autres ne servent qu'à combler la colonne desktop). */
    .devis-hero__proof .devis-hero__review:nth-of-type(n+2) { display: none; }
}

/* Mention « (facultatif) » discrète sur les libellés de champs non requis */
.field label .opt { font-weight: 400; color: var(--gris); font-size: .82rem; }
/* Bouton d'envoi pleine largeur : cible tactile maximale = plus de conversions */
.btn--block { width: 100%; justify-content: center; }

/* ── Bande « Comment ça se passe » : 4 étapes numérotées, reliées par un trait ── */
.devis-process .center { margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.devis-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.devis-step { position: relative; text-align: center; padding: 0 .5rem; }
/* Trait de liaison entre les pastilles (masqué sur le dernier item) */
.devis-step:not(:last-child)::after {
    content: ""; position: absolute; top: 26px; left: calc(50% + 30px); right: calc(-50% + 30px);
    height: 2px; background: var(--bordure); z-index: 0;
}
.devis-step__num {
    position: relative; z-index: 1;
    display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 1rem;
    border-radius: 50%; background: var(--vert); color: #fff;
    font-weight: 700; font-size: 1.25rem;
    box-shadow: 0 8px 18px -6px rgba(22,64,29,.45);
}
.devis-step h3 { font-size: 1.1rem; margin: 0 0 .4rem; color: var(--vert-fonce, #16401d); }
.devis-step p { margin: 0; color: var(--gris); font-size: .95rem; line-height: 1.55; }

@media (max-width: 900px) {
    .devis-steps { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
    .devis-step:not(:last-child)::after { display: none; }
}
@media (max-width: 520px) {
    .devis-steps { grid-template-columns: 1fr; }
}

/* =========================================================================
   CTA FINALE
   ========================================================================= */
.cta-band { background: linear-gradient(120deg, var(--vert) 0%, var(--vert-clair) 100%); color: #fff; border-radius: var(--rayon); padding: clamp(2.5rem, 1.5rem + 4vw, 4rem); text-align: center; box-shadow: var(--ombre-forte); }
.cta-band h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.cta-band .hero-actions { justify-content: center; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { background: #11331a; color: #c8d6c8; padding-block: 3.5rem 1.5rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.5fr 1.1fr 1.1fr 1.3fr; align-items: start; }
.site-footer h2 { color: #fff; font-size: 1rem; margin-bottom: 1rem; font-weight: 700; }
.site-footer a { color: #c8d6c8; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; }
/* Téléphone du footer : icône DANS le lien (cohérent mobile + desktop), pas en
   icône autonome. Sur ordinateur, la pastille « Afficher le numéro » (.pr-pill,
   spécificité supérieure) reprend la main pour le style bouton. */
.footer-phone { display: inline-flex; gap: .6rem; align-items: flex-start; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .88rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; color: #9fb29f; }

/* =========================================================================
   MOTION — révélation au scroll (CSS pur, progressive enhancement)
   N'est active que si le navigateur supporte les scroll-driven animations,
   sinon le contenu est visible normalement (aucun risque de page vide).
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .reveal {
            animation: reveal-up linear both;
            animation-timeline: view();
            /* Termine l'animation dès que l'élément est entièrement visible.
               « cover 28% » exigeait de l'amener au centre de l'écran — impossible
               pour le dernier bloc avant le footer, qui restait bloqué à mi-opacité
               (effet « flou/fondu » sur la bande devis). */
            animation-range: entry 0% entry 100%;
        }
        @keyframes reveal-up {
            from { opacity: 0; transform: translateY(34px); }
            to   { opacity: 1; transform: translateY(0); }
        }
    }
}

/* =========================================================================
   SHOWROOM / JARDIN EXPO (accueil)
   ========================================================================= */
.showroom { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.showroom-text h2 { margin: .3rem 0 .7rem; }
.showroom-text .lead { margin-bottom: 1.4rem; }
.showroom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.showroom-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; aspect-ratio: 4 / 3; display: block; }

/* =========================================================================
   QUI SOMMES-NOUS : chiffres-clés, valeurs, photo équipe
   ========================================================================= */
.about-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.25rem; text-align: center; }
.about-stat { padding: 1.6rem 1rem; border: 1px solid var(--bordure); border-radius: 16px; background: var(--fond-alt); }
.about-stat__value { display: block; font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--vert); }
.about-stat__label { display: block; margin-top: .5rem; color: var(--gris); font-size: .98rem; }
.about-intro { margin-top: 2.75rem; }
.values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-top: 2.5rem; }
.value { padding: 1.6rem; border: 1px solid var(--bordure); border-radius: 14px; border-left: 4px solid var(--vert); }
.value h3 { margin: 0 0 .5rem; color: var(--vert); }
.value p { margin: 0; color: var(--gris); }
/* Photo d'équipe : source native 674px → plafonnée pour rester NETTE (pas d'upscale),
   présentée en cadre photo blanc centré. */
.about-team { max-width: 700px; margin: 1.5rem auto 0; background: #fff; padding: 10px;
    border: 1px solid var(--bordure); border-radius: 18px; box-shadow: var(--ombre-forte); }
.about-team img { width: 100%; border-radius: 11px; display: block; }
.about-team figcaption { margin: .9rem .4rem .2rem; text-align: center; color: var(--gris); font-style: italic; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
    .prestations { grid-template-columns: repeat(2, 1fr); }
    .poles { grid-template-columns: 1fr; }
    .showroom { grid-template-columns: 1fr; }
    .showroom-grid { order: -1; }
    .reviews, .reasons { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .split { grid-template-columns: 1fr; }
    .split-media { order: -1; }
    .check-list--grid { grid-template-columns: 1fr; }
    .form-layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .field-row { grid-template-columns: 1fr; }
    .values { grid-template-columns: 1fr; }
    .about-stat__value { font-size: 2rem; }
    .showroom-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    /* Menu mobile plein écran via checkbox hack */
    .nav-toggle-label { display: block; }
    /* Case à cocher accessible au clavier : présente mais masquée visuellement (≠ display:none) */
    .nav-toggle {
        display: block; position: absolute; width: 1px; height: 1px;
        margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0);
    }
    /* Focus clavier reporté sur le bouton burger visible */
    .nav-toggle:focus-visible ~ .nav-toggle-label {
        outline: 3px solid var(--terre); outline-offset: 2px; border-radius: 3px;
    }
    .header-cta { margin-left: auto; }
    .nav {
        position: fixed; inset: 74px 0 auto 0; margin: 0;
        background: #fff; border-bottom: 1px solid var(--bordure);
        max-height: 0; overflow: hidden; transition: max-height .35s var(--ease);
        box-shadow: var(--ombre);
    }
    .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.25rem 1.5rem; }
    .nav li { border-bottom: 1px solid var(--bordure); }
    .nav a { display: block; padding: .95rem 0; font-size: 1.05rem; }
    .nav-contact { display: block; }
    .nav-contact a { color: var(--vert); font-weight: 700; }
    .nav-toggle:checked ~ .nav { max-height: calc(100vh - 74px); overflow-y: auto; }
    .nav-toggle:checked ~ .nav-toggle-label span { background: transparent; }
    .nav-toggle:checked ~ .nav-toggle-label span::before { transform: rotate(45deg); }
    .nav-toggle:checked ~ .nav-toggle-label span::after  { transform: rotate(-45deg); }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .prestations { grid-template-columns: 1fr; }
    .reviews, .reasons, .gallery, .footer-grid { grid-template-columns: 1fr; }
    .site-header .container { gap: .8rem; }
    .brand img { height: 48px; }
    /* Sur smartphone : bouton d'appel direct + burger, le devis passe dans le menu */
    .header-cta { display: none; }
    .header-call {
        display: grid; place-items: center; margin-left: auto;
        width: 44px; height: 44px; border-radius: 50%;
        background: var(--vert); color: #fff;
        box-shadow: 0 6px 16px rgba(22,64,29,.28);
    }
    .hero-actions .btn, .hero-actions .btn-call { width: 100%; justify-content: center; }
}

/* ── Blocs médias (couche 2 : image seule + galerie) ───────────────────────── */
.media-figure { margin: 0; }
.media-figure img { width: 100%; height: auto; border-radius: 10px; display: block; }
.media-figure figcaption { margin-top: .6rem; font-size: .9rem; color: #6b7a6b; text-align: center; }
/* auto-fit (et non auto-fill) : avec peu d'images (ex. 2), elles s'étirent pour
   remplir la ligne au lieu de rester petites et collées à gauche. */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }

/* Sections de contenu éditorial (blocs texte / image_texte) : padding vertical
   réduit vs le .section générique — ces blocs portent peu de contenu, donc le
   grand padding des pages services y crée un vide énorme. N'affecte PAS les
   services (qui utilisent exclusivement les blocs svc_*). */
.section--flow { padding-block: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); }

/* Bloc vidéo (YouTube/Vimeo) — iframe responsive 16:9, sans JS dans la page. */
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 32px -14px rgba(22, 64, 29, .35); background: #0c1a10; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-caption { text-align: center; color: #5b6b5c; font-size: .95rem; margin-top: .75rem; }

/* ── Bande « Service à la personne » (badge crédit d'impôt 50 %) ─────────────
   Bloc sap_credit : encart discret sur les pages d'entretien et la home.
   Badge autoporteur (transparent) → pas de puce blanche ici, il pose sur le
   fond clair de la section. */
.sap-band { display: flex; align-items: center; gap: 1.3rem;
    background: var(--fond-alt); border: 1px solid var(--bordure);
    border-left: 3px solid var(--terre); border-radius: var(--rayon-sm);
    padding: 1rem 1.3rem; }
.sap-band__chip { flex: 0 0 auto; display: inline-flex; align-items: center; }
.sap-band__chip img { display: block; width: 168px; height: auto; }
.sap-band__text { margin: 0; color: var(--texte); line-height: 1.5; font-size: 1.02rem; max-width: 64ch; }
.sap-band__text strong { color: var(--vert); font-weight: 700; }
@media (max-width: 640px) {
    .sap-band { flex-direction: column; align-items: flex-start; gap: .9rem; }
}

/* Puce labels du footer (logo SAP sur chip blanc, fond footer sombre). */
.footer-labels { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem;
    margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.12); }
.footer-labels__cap { color: #cdd9cd; font-size: .92rem; }
.footer-labels__cap strong { color: #fff; }
.footer-labels__chip { display: inline-flex; background: #fff; border-radius: var(--rayon-sm); padding: .5rem .8rem; }
.footer-labels__chip img { display: block; width: 140px; height: auto; }

/* ===== Bandeau de réassurance (ex. arrivée depuis la fiche Google « Félix ») ===== */
.brand-banner { display: flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .65rem 1rem; background: var(--terre, #a85911); color: #fff;
    font-size: .95rem; font-weight: 500; text-align: center; line-height: 1.35; }
.brand-banner svg { flex-shrink: 0; }