/* ====================================================================
   LABAT PAYSAGES — theme.css
   Toutes les classes custom sont préfixées « lp- » pour éviter
   les collisions avec WPBakery et autres plugins.
   ==================================================================== */

/* --- 1. Variables --- */
:root{
	--lp-green-900:#04342C;
	--lp-green-800:#0F6E56;
	--lp-green-600:#1D9E75;
	--lp-green-400:#5DCAA5;
	--lp-green-200:#9FE1CB;
	--lp-green-100:#E1F5EE;
	--lp-lime-200:#C0DD97;
	--lp-ink:#1f2a26;
	--lp-muted:#5a6b64;
	--lp-white:#ffffff;
	--lp-bg-soft:#f5f9f7;
	--lp-border:rgba(15,110,86,.14);

	/* --- Réchauffement ocre (relooking 2026) --- */
	--lp-cream:#f4efe6;          /* fond hero + sections alternées */
	--lp-cream-2:#faf2e2;        /* crème ocré (cartes réassurance paires) */
	--lp-green-tint:#f0f5ea;     /* vert très clair (cartes réassurance impaires) */
	--lp-green-deep:#1f3d2b;     /* vert foncé : titres / texte / contour CTA secondaire */
	--lp-green-vif:#639922;      /* vert vif : icônes */
	--lp-ocre:#e67e15;           /* accent / CTA principal (fond) — orange plus vif */
	--lp-ocre-strong:#cc6b0c;    /* ocre survol */
	--lp-ocre-dark:#ba7517;      /* ocre foncé : icônes alternées */
	--lp-ocre-ink:#4a2b08;       /* texte SUR fond ocre (contraste AA) */
	--lp-ocre-text:#955d0e;      /* texte ocre sur fond clair (contraste AA) */

	--lp-font-display:"Fraunces",Georgia,serif;
	--lp-font-body:"Mulish",system-ui,sans-serif;

	--lp-radius:14px;
	--lp-radius-sm:10px;
	--lp-shadow:0 14px 40px -18px rgba(4,52,44,.35);
	--lp-maxw:1180px;
	--lp-gap:clamp(1rem,3vw,2rem);
}

/* --- 2. Base --- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	margin:0;
	font-family:var(--lp-font-body);
	color:var(--lp-ink);
	background:var(--lp-white);
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--lp-font-display);font-weight:500;line-height:1.15;color:var(--lp-green-900)}

/* --- 3. Layout helpers --- */
.lp-container{width:100%;max-width:var(--lp-maxw);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.lp-section{padding-block:clamp(3rem,7vw,5.5rem)}
.lp-section--soft{background:var(--lp-bg-soft)}
.lp-section--green{background:var(--lp-green-800);color:var(--lp-green-100)}
.lp-section--green h1,
.lp-section--green h2,
.lp-section--green h3{color:var(--lp-white)}
.lp-section__head{text-align:center;max-width:640px;margin-inline:auto;margin-bottom:clamp(2rem,5vw,3rem)}

.lp-eyebrow{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--lp-green-600);font-weight:700;display:block;margin-bottom:.6rem}
.lp-title{font-size:clamp(1.7rem,4vw,2.5rem)}
.lp-title--light{color:var(--lp-white)}
.lp-lead{color:var(--lp-muted);font-size:1.05rem;margin-top:.8rem}
.lp-lead--light{color:var(--lp-green-100)}

.lp-grid{display:grid;gap:var(--lp-gap)}
.lp-grid--2{grid-template-columns:repeat(2,1fr)}
.lp-grid--3{grid-template-columns:repeat(3,1fr)}
.lp-grid--4{grid-template-columns:repeat(4,1fr)}

/* --- 4. Boutons --- */
.lp-btn,
.lp-btn:visited{
	display:inline-flex;align-items:center;gap:.5rem;
	font-family:var(--lp-font-body);font-weight:700;font-size:.95rem;
	padding:.85rem 1.6rem;border-radius:var(--lp-radius-sm);
	border:2px solid transparent;cursor:pointer;transition:.25s ease;
	text-decoration:none;line-height:1;
}
.lp-btn--primary{background:var(--lp-green-600);color:var(--lp-white)}
.lp-btn--primary:hover{background:var(--lp-green-800);color:var(--lp-white)}
.lp-btn--outline{border-color:var(--lp-green-600);color:var(--lp-green-800);background:transparent}
.lp-btn--outline:hover{background:var(--lp-green-600);color:var(--lp-white)}
.lp-btn--ghost{background:var(--lp-white);color:var(--lp-green-800)}
.lp-btn--ghost:hover{background:var(--lp-green-100)}

/* --- 5. Topbar / Header / Nav --- */
.lp-topbar{background:var(--lp-green-900);color:var(--lp-green-100);font-size:.82rem}
.lp-topbar .lp-container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.4rem;padding-block:.55rem}
.lp-topbar a{color:inherit}
.lp-topbar a:hover{color:var(--lp-white)}
.lp-topbar i{margin-right:.35rem}

.lp-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--lp-border)}
.lp-header .lp-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.9rem}
.lp-brand{display:flex;align-items:center;gap:.7rem}
.lp-brand img,
.lp-brand .custom-logo{max-height:80px;width:auto}
.lp-brand__link{display:flex;align-items:center;gap:.7rem}
.lp-brand__mark{width:42px;height:42px;border-radius:50%;background:var(--lp-green-600);color:var(--lp-white);display:grid;place-items:center;font-size:1.3rem}
.lp-brand__name{font-family:var(--lp-font-display);font-weight:600;font-size:1.15rem;color:var(--lp-green-800);line-height:1}
.lp-brand__sub{font-size:.62rem;letter-spacing:.18em;color:var(--lp-green-400);text-transform:uppercase}

.lp-nav{display:flex;align-items:center;gap:1.4rem}
.lp-nav__list,
.lp-nav__list ul{list-style:none;margin:0;padding:0}
.lp-nav__list{display:flex;align-items:center;gap:1.3rem;font-weight:600;font-size:.95rem}
.lp-nav__list>li{position:relative}
.lp-nav__list>li>a{display:flex;align-items:center;gap:.25rem;padding-block:.4rem;color:var(--lp-ink);transition:color .2s}
.lp-nav__list>li>a:hover,
.lp-nav__list>li.current-menu-item>a,
.lp-nav__list>li.current-menu-parent>a{color:var(--lp-green-600)}
.lp-nav__list .menu-item-has-children>a::after{
	content:"\ea5f";font-family:"tabler-icons";font-size:.85rem;margin-left:.25rem;
}
.lp-nav__list .sub-menu{
	position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
	background:var(--lp-white);border:1px solid var(--lp-border);border-radius:var(--lp-radius-sm);
	box-shadow:var(--lp-shadow);padding:.5rem;min-width:240px;
	opacity:0;visibility:hidden;transition:.2s ease;
}
.lp-nav__list>li:hover>.sub-menu,
.lp-nav__list>li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.lp-nav__list .sub-menu li a{display:block;padding:.55rem .8rem;border-radius:8px;font-weight:500;font-size:.9rem;color:var(--lp-ink)}
.lp-nav__list .sub-menu li a:hover{background:var(--lp-green-100);color:var(--lp-green-800)}
.lp-nav__toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--lp-green-800);cursor:pointer;line-height:1}

/* --- 6. Hero --- */
.lp-hero{position:relative;background:var(--lp-green-100);overflow:hidden}
.lp-hero .lp-container{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:var(--lp-gap);min-height:min(78vh,560px);padding-block:clamp(2.5rem,6vw,4rem)}
.lp-hero__content{max-width:520px}
.lp-hero__title{font-size:clamp(2rem,5vw,3.3rem);font-weight:600;color:var(--lp-green-900)}
.lp-hero__text{color:var(--lp-green-800);margin:1.1rem 0 1.8rem;font-size:1.1rem}
.lp-hero__actions{display:flex;flex-wrap:wrap;gap:.8rem}
.lp-hero__media{position:relative;border-radius:var(--lp-radius);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--lp-shadow)}
.lp-hero__media img{width:100%;height:100%;object-fit:cover}

/* --- 7. Barre de réassurance --- */
.lp-trust{background:var(--lp-white);border-block:1px solid var(--lp-border)}
.lp-trust .lp-container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-block:2rem}
.lp-trust__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;font-weight:600;color:var(--lp-green-800);font-size:1rem;line-height:1.2}
.lp-trust__item i{font-size:3rem;color:var(--lp-green-600);line-height:1;display:block}

/* --- 8. Cartes --- */
.lp-card{background:var(--lp-white);border:1px solid var(--lp-border);border-radius:var(--lp-radius);overflow:hidden;transition:.3s ease;display:flex;flex-direction:column;height:100%}
.lp-card:hover{transform:translateY(-6px);box-shadow:var(--lp-shadow)}
.lp-card__media{aspect-ratio:16/10;position:relative;overflow:hidden}
.lp-card__media img{width:100%;height:100%;object-fit:cover}
.lp-card__body{padding:1.4rem;display:flex;flex-direction:column;flex:1}
.lp-card__title{font-size:1.25rem;margin-bottom:.5rem}
.lp-card__text{color:var(--lp-muted);font-size:.95rem}
.lp-card__list{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.lp-chip{font-size:.78rem;font-weight:600;background:var(--lp-green-100);color:var(--lp-green-800);padding:.3rem .7rem;border-radius:50px}
.lp-card__link{margin-top:auto;padding-top:1.1rem;font-weight:700;color:var(--lp-green-600);display:inline-flex;align-items:center;gap:.3rem;transition:gap .2s}
.lp-card__link:hover{gap:.6rem}

/* --- 9. Galerie --- */
.lp-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.lp-gallery__item{aspect-ratio:1;border-radius:var(--lp-radius-sm);overflow:hidden;position:relative}
.lp-gallery__item--wide{grid-column:span 2;aspect-ratio:2/1}
.lp-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.lp-gallery__item:hover img{transform:scale(1.05)}

/* --- 10. Split (présentation) --- */
.lp-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.lp-split__media{border-radius:var(--lp-radius);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--lp-shadow)}
.lp-split__media img{width:100%;height:100%;object-fit:cover}
.lp-prose p{color:var(--lp-muted);margin-bottom:1rem}
.lp-prose .lp-title{margin-bottom:1rem}

/* --- 11. CTA --- */
.lp-cta{text-align:center}
.lp-cta .lp-container{display:flex;flex-direction:column;align-items:center;gap:1.2rem}

/* --- 12. Footer --- */
.lp-footer{background:var(--lp-green-900);color:var(--lp-green-200);font-size:.9rem}
.lp-footer .lp-container{padding-block:clamp(2.5rem,5vw,3.5rem)}
.lp-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.lp-footer__title,
.lp-footer h3{color:var(--lp-white);font-size:1.1rem;margin-bottom:1rem}
.lp-footer ul,
.lp-footer__list{list-style:none;margin:0;padding:0}
.lp-footer li{margin-bottom:.5rem;display:flex;align-items:center;gap:.45rem}
.lp-footer a{color:inherit}
.lp-footer a:hover{color:var(--lp-white)}
.lp-footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:1.4rem;text-align:center;font-size:.82rem;color:var(--lp-green-400)}
.lp-footer__bottom a{color:inherit}
.lp-footer__bottom a:hover{color:var(--lp-white)}

/* --- 13. Pages génériques --- */
.lp-page{max-width:760px;margin-inline:auto}
.lp-page__head{text-align:center;margin-bottom:2rem}
.lp-page__title{font-size:clamp(2rem,4vw,2.8rem)}
.lp-page__content p{margin-bottom:1rem;color:var(--lp-muted)}

/* --- 14. Responsive --- */
@media(max-width:900px){
	.lp-grid--3,.lp-grid--4{grid-template-columns:repeat(2,1fr)}
	.lp-hero .lp-container,
	.lp-split{grid-template-columns:1fr}
	.lp-hero__media{order:-1}
	.lp-footer__grid{grid-template-columns:1fr 1fr}
	.lp-gallery{grid-template-columns:repeat(2,1fr)}

	/* Menu mobile */
	.lp-nav__list{
		display:none;position:absolute;top:100%;left:0;right:0;
		background:var(--lp-white);flex-direction:column;align-items:stretch;gap:0;
		padding:1rem;border-bottom:1px solid var(--lp-border);
		box-shadow:var(--lp-shadow);
	}
	.lp-nav.is-open .lp-nav__list{display:flex}
	.lp-nav__list>li{width:100%}
	.lp-nav__list>li>a{padding:.7rem .5rem}
	.lp-nav__list .sub-menu{
		position:static;transform:none;opacity:1;visibility:visible;
		box-shadow:none;border:none;padding-left:1rem;background:transparent;
		min-width:0;display:none;
	}
	.lp-nav__list>li.is-open>.sub-menu{display:block}
	.lp-nav__toggle{display:block}
	.lp-nav__cta{display:none}
}
@media(max-width:560px){
	.lp-grid--3,.lp-grid--4,.lp-grid--2{grid-template-columns:1fr}
	.lp-footer__grid{grid-template-columns:1fr}
	.lp-trust .lp-container{justify-content:flex-start}
	.lp-gallery{grid-template-columns:1fr}
	.lp-gallery__item--wide{grid-column:auto;aspect-ratio:1}
}

/* ====================================================================
   15. Ajustements WPBakery
   On rend chaque vc_row capable de jouer le rôle de « section + container ».
   Backgrounds full-width via pseudo-élément (clip-path) — pas besoin du JS
   WPBakery `stretch_row` qui posait des problèmes.
   ==================================================================== */

.wpb-content-wrapper{overflow:hidden}

/* Chaque vc_row de la page d'accueil est centré et contraint en largeur */
.lp-front .vc_row,
.lp-front .wpb_row{
	max-width:var(--lp-maxw);
	margin-inline:auto !important;
	padding-inline:clamp(1rem,4vw,2rem);
	width:100%;
	display:flex;
	flex-wrap:wrap;
	gap:var(--lp-gap);
	box-sizing:border-box;
	position:relative;
}

/* Colonnes en flex (par défaut WPBakery utilise des floats Bootstrap) */
.lp-front .vc_row>.wpb_column{
	float:none;
	display:flex;
	flex-direction:column;
	min-width:0;
}
.lp-front .vc_row>.vc_col-sm-12{flex:1 1 100%;max-width:100%}
.lp-front .vc_row>.vc_col-sm-6 {flex:1 1 calc(50% - var(--lp-gap)/2);max-width:calc(50% - var(--lp-gap)/2)}
.lp-front .vc_row>.vc_col-sm-4 {flex:1 1 calc(33.333% - var(--lp-gap)*2/3);max-width:calc(33.333% - var(--lp-gap)*2/3)}
.lp-front .vc_row>.vc_col-sm-3 {flex:1 1 calc(25% - var(--lp-gap)*3/4);max-width:calc(25% - var(--lp-gap)*3/4)}

.lp-front .vc_column-inner{flex:1;display:flex;flex-direction:column;padding:0 !important}
.lp-front .wpb_wrapper{display:flex;flex-direction:column;gap:1rem;flex:1}

/* Resets margins WPBakery */
.lp-front .wpb_content_element,
.lp-front .wpb_text_column,
.lp-front .wpb_single_image,
.lp-front .vc_btn3-container{margin-bottom:0 !important}
.lp-front .wpb_text_column .wpb_wrapper>:last-child{margin-bottom:0}

/* Backgrounds full-width — pseudo-élément qui déborde du container */
.lp-front .vc_row.lp-hero,
.lp-front .vc_row.lp-trust,
.lp-front .vc_row.lp-section--soft,
.lp-front .vc_row.lp-section--green{position:relative;isolation:isolate}
.lp-front .vc_row.lp-hero::before,
.lp-front .vc_row.lp-trust::before,
.lp-front .vc_row.lp-section--soft::before,
.lp-front .vc_row.lp-section--green::before{
	content:"";position:absolute;top:0;bottom:0;
	left:calc(50% - 50vw);right:calc(50% - 50vw);
	z-index:-1;
}
.lp-front .vc_row.lp-hero::before        {background:var(--lp-green-100)}
.lp-front .vc_row.lp-trust::before       {background:var(--lp-white);border-top:1px solid var(--lp-border);border-bottom:1px solid var(--lp-border)}
.lp-front .vc_row.lp-section--soft::before {background:var(--lp-bg-soft)}
.lp-front .vc_row.lp-section--green::before{background:var(--lp-green-800)}

/* Padding vertical par type de section */
/* Hero : FOND pleine largeur, CONTENU cadré et centré.
   La rangée s'étend sur toute la largeur (on lève le max-width 1180px et la
   marge auto hérités de .vc_row) et porte le fond vert → fond bord à bord.
   Le contenu est ramené à 1180px centré via un padding latéral calculé
   « max(marge, (100% - 1180px)/2) ». Méthode fiable, sans dépendre du ::before. */
.lp-front .vc_row.lp-hero       {
	max-width:none;
	margin-inline:0 !important;
	overflow:visible;
	background:var(--lp-green-100);
	padding-block:clamp(2.5rem,6vw,4rem);
	padding-inline:max(clamp(1rem,4vw,2rem), calc((100% - var(--lp-maxw)) / 2));
	align-items:center;
	min-height:min(78vh,560px);
}
.lp-front .vc_row.lp-trust      {padding-block:2rem; align-items:center}
.lp-front .vc_row.lp-trust::after{content:none;display:none}
.lp-front .vc_row.lp-section,
.lp-front .vc_row.lp-section--soft,
.lp-front .vc_row.lp-section--green{padding-block:clamp(2rem,4vw,3rem)}

/* Texte en blanc pour la section verte */
.lp-front .vc_row.lp-section--green,
.lp-front .vc_row.lp-section--green h1,
.lp-front .vc_row.lp-section--green h2,
.lp-front .vc_row.lp-section--green h3,
.lp-front .vc_row.lp-section--green p{color:var(--lp-green-100)}
.lp-front .vc_row.lp-section--green h1,
.lp-front .vc_row.lp-section--green h2,
.lp-front .vc_row.lp-section--green h3{color:var(--lp-white)}

/* CTA : centrer le contenu */
.lp-front .vc_row.lp-cta .wpb_wrapper{align-items:center;text-align:center;gap:.6rem}
.lp-front .vc_row.lp-cta{text-align:center}
.lp-front .vc_row.lp-cta h2{margin-bottom:0 !important}

/* CTA vert (« Un projet de jardin… ») : FOND pleine largeur, CONTENU centré.
   Même technique que le hero : la rangée s'étend bord à bord et porte le fond,
   le contenu est ramené à 1180px via padding-inline calculé. */
.lp-front .vc_row.lp-section--green{
	max-width:none;
	margin-inline:0 !important;
	overflow:visible;
	background:var(--lp-green-800);
	padding-inline:max(clamp(1rem,4vw,2rem), calc((100% - var(--lp-maxw)) / 2));
}

/* vc_row_inner imbriqué (cartes prestations) : reset, pas de container imbriqué */
.lp-front .vc_inner.vc_row,
.lp-front .vc_row_inner{
	max-width:100%;padding-inline:0;margin-inline:0 !important;
}

/* Hero — espacement resserré autour du titre.
   Le h1 gardait les marges par défaut du navigateur (~2rem) et le texte
   sa marge maquette (1.1rem/1.8rem) : on les neutralise, l'espacement est
   désormais géré uniquement par le gap du conteneur (.wpb_wrapper). */
.lp-front .vc_row.lp-hero .lp-eyebrow,
.lp-front .vc_row.lp-hero .lp-hero__title,
.lp-front .vc_row.lp-hero .lp-hero__text{margin:0}

/* Hero — image avec ombre arrondie (toutes les pages) */
.lp-front .vc_row.lp-hero .wpb_single_image{height:100%;width:100%}
.lp-front .vc_row.lp-hero .wpb_single_image .vc_figure,
.lp-front .vc_row.lp-hero .wpb_single_image .vc_figure a{
	display:block;width:100%;
}
.lp-front .vc_row.lp-hero .wpb_single_image .vc_single_image-wrapper,
.lp-front .vc_row.lp-hero .wpb_single_image img{
	border-radius:var(--lp-radius);box-shadow:var(--lp-shadow);
	aspect-ratio:4/3;object-fit:cover;width:100% !important;height:auto;max-width:none !important;display:block;
}

/* Trust — 4 items répartis (ancienne structure avec wrapper) */
.lp-front .lp-trust__inner{
	display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;width:100%;
}
/* Trust — nouvelle structure : 4 colonnes WPBakery 1/4 */
.lp-front .vc_row.lp-trust .vc_column-inner{
	justify-content:center;align-items:center;
}
.lp-front .vc_row.lp-trust .wpb_wrapper{
	align-items:center;justify-content:center;
}
.lp-front .vc_row.lp-trust .wpb_text_column{
	margin-bottom:0 !important;
}

/* Cartes : la colonne devient la carte */
.lp-front .vc_column_container.lp-card>.vc_column-inner{
	background:var(--lp-white);
	border:1px solid var(--lp-border);
	border-radius:var(--lp-radius);
	overflow:hidden;
	transition:.3s ease;
	height:100%;
}
.lp-front .vc_column_container.lp-card>.vc_column-inner:hover{transform:translateY(-6px);box-shadow:var(--lp-shadow)}
.lp-front .vc_column_container.lp-card .wpb_wrapper{padding:0;gap:0}
.lp-front .vc_column_container.lp-card .wpb_single_image{margin:0 !important;width:100% !important;}
.lp-front .vc_column_container.lp-card .wpb_single_image .vc_figure,
.lp-front .vc_column_container.lp-card .wpb_single_image .vc_figure a,
.lp-front .vc_column_container.lp-card .wpb_single_image .vc_single_image-wrapper{
	display:block;width:100% !important;height:220px;overflow:hidden;
}
.lp-front .vc_column_container.lp-card .wpb_single_image img{
	width:100% !important;height:100% !important;object-fit:cover;display:block;max-width:none !important;
}
.lp-front .vc_column_container.lp-card .wpb_text_column{padding:1.4rem;flex:1;display:flex;flex-direction:column}
.lp-front .vc_column_container.lp-card .wpb_text_column .wpb_wrapper{flex:1;display:flex;flex-direction:column;gap:0}

/* Split (présentation) — image arrondie */
.lp-front .vc_row.lp-section--soft .wpb_single_image .vc_single_image-wrapper,
.lp-front .vc_row.lp-section--soft .wpb_single_image img{
	border-radius:var(--lp-radius);box-shadow:var(--lp-shadow);
	aspect-ratio:4/3;object-fit:cover;width:100%;
}
.lp-front .vc_row.lp-section--soft{
	align-items:center;
	max-width:none;
	margin-inline:0 !important;
	background:var(--lp-bg-soft);
	padding-inline:max(clamp(1rem,4vw,2rem), calc((100% - var(--lp-maxw)) / 2));
}

/* Galerie WPBakery — flex wrap, max 4 images par rangée, centré */
.lp-front .wpb_gallery.lp-gallery{
	width:100%;
	display:grid;
	grid-template-columns:repeat(1,1fr);
}
.lp-front .wpb_gallery.lp-gallery .wpb_gallery_slides{
	display:flex !important;
	flex-wrap:wrap;
	gap:.75rem;
	justify-content:center;
}
.lp-front .wpb_gallery.lp-gallery .wpb_image_grid_ul{
	display:contents;list-style:none;margin:0;padding:0;
}
.lp-front .wpb_gallery.lp-gallery .isotope-item{
	position:static !important;
	flex:0 0 calc(25% - .75rem * 3 / 4);
	margin:0;padding:0;
	border-radius:var(--lp-radius-sm);
	overflow:hidden;
	aspect-ratio:4/3;
}
.lp-front .wpb_gallery.lp-gallery .isotope-item a,
.lp-front .wpb_gallery.lp-gallery .isotope-item img{
	display:block;width:100% !important;height:100% !important;object-fit:cover;
	transition:transform .3s ease;max-width:100%;
}
.lp-front .wpb_gallery.lp-gallery .isotope-item:hover img{transform:scale(1.05)}

/* Responsive WPBakery */
@media(max-width:900px){
	.lp-front .vc_row>.vc_col-sm-6,
	.lp-front .vc_row>.vc_col-sm-4,
	.lp-front .vc_row>.vc_col-sm-3{
		flex:1 1 100%;max-width:100%;
	}
	.lp-front .wpb_gallery.lp-gallery .wpb_gallery_slides{grid-template-columns:repeat(2,1fr)}
	.lp-front .wpb_gallery.lp-gallery .isotope-item:first-child{grid-column:1 / -1;grid-row:auto;aspect-ratio:16/10}
}
@media(max-width:560px){
	.lp-front .wpb_gallery.lp-gallery .wpb_gallery_slides{grid-template-columns:1fr}
	.lp-front .wpb_gallery.lp-gallery .isotope-item:first-child{grid-column:auto;grid-row:auto;aspect-ratio:1}
}

/* -----------------------------------------------------------------------
   Contact Form 7 — styles cohérents avec le thème
   ----------------------------------------------------------------------- */
.wpcf7-form{display:flex;flex-direction:column;gap:1.2rem}
.wpcf7-form p{margin:0}

/* Labels */
.wpcf7-form label{
	display:block;
	font-size:.875rem;
	font-weight:600;
	color:var(--lp-green-900);
	margin-bottom:.4rem;
	font-family:var(--lp-font-body);
}

/* Champs texte, email, tel, textarea */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea{
	width:100%;
	padding:.75rem 1rem;
	border:1.5px solid var(--lp-border);
	border-radius:var(--lp-radius-sm);
	background:var(--lp-white);
	font-family:var(--lp-font-body);
	font-size:.95rem;
	color:var(--lp-ink);
	transition:border-color .2s,box-shadow .2s;
	outline:none;
	box-sizing:border-box;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus{
	border-color:var(--lp-green-600);
	box-shadow:0 0 0 3px rgba(29,158,117,.15);
}
.wpcf7-form textarea{min-height:140px;resize:vertical}

/* Bouton submit */
.wpcf7-form input[type="submit"],
.wpcf7-submit{
	align-self:flex-start;
	padding:.75rem 2rem;
	background:var(--lp-green-800);
	color:var(--lp-white);
	border:none;
	border-radius:var(--lp-radius-sm);
	font-family:var(--lp-font-body);
	font-size:.95rem;
	font-weight:700;
	cursor:pointer;
	transition:background .2s,transform .15s;
	letter-spacing:.02em;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-submit:hover{background:var(--lp-green-900);transform:translateY(-1px)}

/* Messages de validation */
.wpcf7-not-valid-tip{font-size:.8rem;color:#d63838;margin-top:.25rem;display:block}
.wpcf7-response-output{
	margin-top:1rem;padding:.75rem 1rem;
	border-radius:var(--lp-radius-sm);
	font-size:.9rem;border:none !important;
}
.wpcf7-mail-sent-ok{background:#e6f7f0;color:var(--lp-green-800)}
.wpcf7-validation-errors,.wpcf7-mail-sent-ng{background:#fdecea;color:#c0392b}

/* CF7 — placeholders */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder{
	color:var(--lp-muted);
	opacity:1;
}
/* CF7 — supprimer les <p> superflus autour des champs */
.wpcf7-form .wpcf7-form-control-wrap{display:block;width:100%}
.wpcf7-form br{display:none}

/* ====================================================================
   16. RÉCHAUFFEMENT OCRE — relooking 2026
   Bloc additif placé en fin de fichier : il surcharge la palette froide
   par une ambiance vert + ocre, sans modifier les règles précédentes.
   Le contenu reste 100 % éditable dans WPBakery.
   ==================================================================== */

/* 16.1 — Titres en vert foncé chaleureux */
h1,h2,h3,h4{color:var(--lp-green-deep)}
.lp-hero__title{color:var(--lp-green-deep)}

/* 16.2 — Sur-titre (eyebrow) en ocre lisible (AA sur fond clair) */
.lp-eyebrow{color:var(--lp-ocre-text)}

/* 16.3 — Boutons
   Primaire : fond ocre + texte foncé (contraste AA).
   Secondaire (outline) : contour vert foncé. */
.lp-btn--primary{background:var(--lp-ocre);color:#fff}
.lp-btn--primary:hover{background:var(--lp-ocre-strong);color:#fff}
.lp-btn--outline{border-color:var(--lp-green-deep);color:var(--lp-green-deep);background:transparent}
.lp-btn--outline:hover{background:var(--lp-green-deep);color:var(--lp-white)}

/* 16.4 — Hero : fond crème (au lieu du vert d'eau).
   On surcharge les 3 endroits où le fond était défini. */
.lp-hero{background:var(--lp-cream)}
.lp-front .vc_row.lp-hero{background:var(--lp-cream)}
.lp-front .vc_row.lp-hero::before{background:var(--lp-cream)}
.lp-hero__text{color:var(--lp-green-deep)}

/* 16.5 — Sections douces : crème (rythme blanc / crème) */
.lp-section--soft{background:var(--lp-cream)}
.lp-front .vc_row.lp-section--soft{background:var(--lp-cream)}
.lp-front .vc_row.lp-section--soft::before{background:var(--lp-cream)}

/* 16.6 — Bande de réassurance → cartes à fond doux alterné
   Cartes 1 & 3 : vert très clair + icône verte.
   Cartes 2 & 4 : crème ocré + icône ocre. */
.lp-front .vc_row.lp-trust .vc_column-inner{
	border-radius:var(--lp-radius);
	/* !important pour battre la règle générale .lp-front .vc_column-inner{padding:0 !important} */
	padding:20px 18px !important;
	height:100%;
}
.lp-front .vc_row.lp-trust>.wpb_column:nth-child(4n+1) .vc_column-inner,
.lp-front .vc_row.lp-trust>.wpb_column:nth-child(4n+3) .vc_column-inner{background:var(--lp-green-tint)}
.lp-front .vc_row.lp-trust>.wpb_column:nth-child(4n+2) .vc_column-inner,
.lp-front .vc_row.lp-trust>.wpb_column:nth-child(4n)   .vc_column-inner{background:var(--lp-cream-2)}
.lp-trust__item i{font-size:1.6rem;line-height:1}
.lp-front .vc_row.lp-trust>.wpb_column:nth-child(4n+1) .lp-trust__item i,
.lp-front .vc_row.lp-trust>.wpb_column:nth-child(4n+3) .lp-trust__item i{color:var(--lp-green-vif)}
.lp-front .vc_row.lp-trust>.wpb_column:nth-child(4n+2) .lp-trust__item i,
.lp-front .vc_row.lp-trust>.wpb_column:nth-child(4n)   .lp-trust__item i{color:var(--lp-ocre-dark)}
/* Libellés : vert foncé sur cartes vertes, ocre foncé sur cartes crème */
.lp-front .vc_row.lp-trust>.wpb_column:nth-child(4n+1) .lp-trust__item,
.lp-front .vc_row.lp-trust>.wpb_column:nth-child(4n+3) .lp-trust__item{color:#3b6d11}
.lp-front .vc_row.lp-trust>.wpb_column:nth-child(4n+2) .lp-trust__item,
.lp-front .vc_row.lp-trust>.wpb_column:nth-child(4n)   .lp-trust__item{color:#854f0b}

/* 16.7 — Cartes : accent ocre au survol + lien ocre.
   La colonne WPBakery .lp-card héritait du composant générique .lp-card
   (bordure + fond + radius) EN PLUS de son .vc_column-inner → double bordure
   visible au survol (le .vc_column-inner se soulève de 6px et découvre la
   bordure basse de la colonne). On neutralise la carte au niveau de la
   colonne : seul le .vc_column-inner porte la bordure. */
.lp-front .vc_column_container.lp-card{
	border:0;background:transparent;border-radius:0;overflow:visible;
}
.lp-card__link{color:var(--lp-ocre-text)}
/* Survol des cartes : bordure ocre + ombre douce.
   L'ancienne ombre (--lp-shadow : spread -18px + fort offset bas) se concentrait
   sous la carte → elle apparaissait comme une « barre » sombre carrée en bas.
   On la remplace par une ombre douce et homogène, qui suit bien l'arrondi. */
.lp-front .vc_column_container.lp-card>.vc_column-inner:hover{
	border-color:var(--lp-ocre);
	box-shadow:0 14px 30px -12px rgba(31,61,43,.22);
}
.lp-chip{background:var(--lp-cream-2);color:var(--lp-ocre-text)}

/* 16.8 — Hero mosaïque (1 grande + 2 petites)
   Le client place 3 images (vc_single_image) dans la colonne média du hero
   et ajoute la classe « lp-hero__mosaic » à cette colonne (champ Extra class).
   Avec 1 seule image, l'affichage reste celui d'origine. */
.lp-front .vc_row.lp-hero .lp-hero__mosaic>.vc_column-inner>.wpb_wrapper{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:.7rem;
	padding:0;
	align-content:center;
}
.lp-front .vc_row.lp-hero .lp-hero__mosaic .wpb_single_image{margin:0 !important}
.lp-front .vc_row.lp-hero .lp-hero__mosaic .wpb_single_image:first-child{grid-column:1 / -1}
.lp-front .vc_row.lp-hero .lp-hero__mosaic .wpb_single_image .vc_figure,
.lp-front .vc_row.lp-hero .lp-hero__mosaic .wpb_single_image .vc_figure a,
.lp-front .vc_row.lp-hero .lp-hero__mosaic .wpb_single_image .vc_single_image-wrapper{
	display:block;width:100%;
}
/* La hauteur est pilotée par un RATIO fixe (pas height:100%), pour éviter
   que les photos portrait ne débordent. La grande en 16/11, les petites carrées. */
.lp-front .vc_row.lp-hero .lp-hero__mosaic .wpb_single_image img{
	width:100% !important;height:auto !important;max-width:none !important;display:block;
	aspect-ratio:16/11;object-fit:cover;
	border-radius:var(--lp-radius);box-shadow:var(--lp-shadow);
}
.lp-front .vc_row.lp-hero .lp-hero__mosaic .wpb_single_image:not(:first-child) img{
	aspect-ratio:1/1;
}

/* 16.9 — Section vidéo responsive 16:9
   Le client ajoute un élément « Video Player » WPBakery (YouTube/Vimeo/MP4)
   et lui donne la classe « lp-video ». Le bloc reste invisible tant qu'aucune
   vidéo n'est insérée. */
.lp-video,
.lp-front .lp-video .wpb_video_wrapper{
	position:relative;width:100%;max-width:960px;margin-inline:auto;
	aspect-ratio:16/9;border-radius:var(--lp-radius);overflow:hidden;
	box-shadow:var(--lp-shadow);background:#000;
}
.lp-video iframe,.lp-video video,
.lp-front .lp-video .wpb_video_wrapper iframe,
.lp-front .lp-video .wpb_video_wrapper video{
	position:absolute;inset:0;width:100% !important;height:100% !important;border:0;object-fit:cover;
}

/* 16.10 — Animations discrètes au scroll (progressive enhancement)
   La classe .lp-reveal n'est ajoutée que par le JS : sans JS, tout reste visible. */
.lp-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;will-change:opacity,transform}
.lp-reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
	.lp-reveal{opacity:1 !important;transform:none !important;transition:none}
}

/* ====================================================================
   17. HERO IMMERSIF plein écran — shortcode [labat_hero]
   Section pleine largeur (déborde de tout container WPBakery),
   photo de fond + overlay dégradé + contenu aligné à gauche.
   ==================================================================== */
.lp-fhero{
	position:relative;display:flex;align-items:center;overflow:hidden;isolation:isolate;
	width:100%;
	height:80vh;min-height:480px;max-height:680px;
	background:var(--lp-green-deep);
}
/* Rangée hôte du hero en pleine largeur (même technique éprouvée que .lp-hero,
   sans 100vw : pas de barre de défilement horizontale). */
.lp-front .vc_row.lp-hero-row{
	max-width:none;margin-inline:0 !important;padding-inline:0;width:100%;
	gap:0 !important;
}
.lp-front .vc_row.lp-hero-row>.wpb_column,
.lp-front .vc_row.lp-hero-row .vc_column-inner,
.lp-front .vc_row.lp-hero-row .wpb_wrapper{padding:0 !important;margin:0 !important;gap:0}
.lp-fhero__bg{
	position:absolute;inset:0;z-index:-2;
	background-size:cover;background-position:center;background-repeat:no-repeat;
}
.lp-fhero--noimg{background:linear-gradient(120deg,var(--lp-green-deep),var(--lp-green-800))}
/* Overlay : lisibilité du texte blanc à gauche (WCAG AA) */
.lp-fhero__overlay{
	position:absolute;inset:0;z-index:-1;
	background:linear-gradient(90deg,rgba(20,40,25,.78) 0%,rgba(20,40,25,.45) 45%,rgba(20,40,25,.05) 100%);
}
.lp-fhero__inner{position:relative;width:100%}
.lp-fhero__content{max-width:58%;color:#fff;animation:lpFheroIn .6s ease both}
.lp-fhero__eyebrow{
	display:block;color:#ecc873;text-transform:uppercase;letter-spacing:.2em;
	font-weight:700;font-size:.8rem;margin-bottom:.8rem;
}
.lp-fhero__title{
	color:#fff;font-family:var(--lp-font-display);font-weight:600;line-height:1.1;
	font-size:clamp(2rem,4.8vw,3.4rem);margin:0;
}
.lp-fhero__text{color:#e6efe4;font-size:1.12rem;line-height:1.6;margin:1rem 0 1.7rem;max-width:48ch}
.lp-fhero__actions{display:flex;flex-wrap:wrap;gap:.8rem}
.lp-fhero__cta1{background:var(--lp-ocre);color:#fff}
.lp-fhero__cta1:hover{background:var(--lp-ocre-strong);color:#fff}
.lp-fhero__cta2{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7);color:#fff}
.lp-fhero__cta2:hover{background:rgba(255,255,255,.22);color:#fff}

@keyframes lpFheroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes lpFheroZoom{from{transform:scale(1)}to{transform:scale(1.06)}}
/* Zoom lent de la photo */
.lp-fhero__bg{animation:lpFheroZoom 20s ease-out both}

@media(max-width:780px){
	.lp-fhero{height:60vh;min-height:420px}
	.lp-fhero__content{max-width:100%}
	/* Overlay plus dense et uniforme sur mobile */
	.lp-fhero__overlay{background:rgba(20,40,25,.6)}
}
@media(prefers-reduced-motion:reduce){
	.lp-fhero__content,.lp-fhero__bg{animation:none}
}

/* ====================================================================
   18. Ajustements d'espacement & topbar
   ==================================================================== */
/* Pas de marge autour du hero — neutralisation forte de toute la chaîne
   au-dessus de la bannière (main → article → wrapper → row → hero). */
.lp-main{margin:0 !important;padding-top:0 !important}
.lp-front{margin-top:0 !important;padding-top:0 !important}
.lp-front>.wpb-content-wrapper{margin-top:0 !important;padding-top:0 !important}
.lp-header{margin-bottom:0 !important}
.lp-front .vc_row.lp-hero-row{margin-top:0 !important;margin-bottom:0 !important;padding-top:0 !important}
.lp-front .vc_row.lp-hero-row .vc_column-inner,
.lp-front .vc_row.lp-hero-row .wpb_wrapper{padding-top:0 !important;margin-top:0 !important}
.lp-fhero{margin-top:0 !important}
/* Marge réduite sous la bannière : le haut des cartes de réassurance
   apparaît juste sous le hero pour inciter à scroller. */
.lp-front .vc_row.lp-trust{padding-top:1.1rem}
/* Topbar : vert forêt foncé */
.lp-topbar{background:#23321c;color:#f3e9d8}
.lp-topbar a:hover{color:#fff}

/* ====================================================================
   19. Section « prestations » (Tout pour votre jardin) :
   apparition en cascade des cartes (fond abstrait retiré)
   ==================================================================== */
/* Apparition en cascade des 3 cartes (déclenchée par .is-visible du scroll) */
.lp-front .vc_row.lp-prestations .lp-card{
	opacity:0;transform:translateY(24px);
	transition:opacity .6s ease, transform .6s ease;
}
.lp-front .vc_row.lp-prestations.is-visible .lp-card{opacity:1;transform:none}
.lp-front .vc_row.lp-prestations.is-visible .vc_row_inner>.lp-card:nth-child(1){transition-delay:.10s}
.lp-front .vc_row.lp-prestations.is-visible .vc_row_inner>.lp-card:nth-child(2){transition-delay:.24s}
.lp-front .vc_row.lp-prestations.is-visible .vc_row_inner>.lp-card:nth-child(3){transition-delay:.38s}

@media(prefers-reduced-motion:reduce){
	.lp-front .vc_row.lp-prestations .lp-card{opacity:1 !important;transform:none !important;transition:none}
}

/* ====================================================================
   20. Harmonisation des accents : survol du menu + pied de page
   (remplace les anciens verts d'eau froids par l'ocre / le vert forêt)
   ==================================================================== */
/* Menu : survol et onglet actif en ocre (accent du site) */
.lp-nav__list>li>a:hover,
.lp-nav__list>li.current-menu-item>a,
.lp-nav__list>li.current-menu-parent>a{color:var(--lp-ocre-text)}
.lp-nav__list .sub-menu li a:hover{background:var(--lp-cream-2);color:var(--lp-ocre-text)}

/* Pied de page : même vert forêt que le bandeau du haut + texte réchauffé,
   survol des liens en doré (comme le sur-titre du hero) */
.lp-footer{background:#23321c;color:#cdd5c0}
.lp-footer__bottom{color:#94a085}
.lp-footer a:hover{color:#ecc873}

/* ====================================================================
   21. Section CTA « Un projet de jardin… » accordée :
   vert vif froid -> dégradé vert forêt chaud, plus clair que le footer
   pour rester distinct. Bouton blanc en texte vert foncé chaud.
   ==================================================================== */
.lp-section--green,
.lp-front .vc_row.lp-section--green,
.lp-front .vc_row.lp-section--green::before{
	background:linear-gradient(160deg,#34593f 0%, #274c36 100%);
}
.lp-section--green .lp-btn--ghost{color:var(--lp-green-deep)}
.lp-section--green .lp-btn--ghost:hover{background:var(--lp-cream)}