/**
 * Fama habitat - Styles principaux
 */

:root {
	--color-text: #1a1a1a;
	--color-text-muted: #555;
	--color-bg: #fff;
	--color-bg-alt: #f5f5f5;
	--color-primary: #2c5282;
	--color-primary-dark: #1a365d;
	--color-zone-bg: #2c5282;
	--color-border: #e2e8f0;
	/* Vert clair (footer, boutons) */
	--color-dark: #4a9060;
	/* Barre principale : vert quasi transparent, presque invisible */
	--color-header-bg: rgba(120, 180, 140, 0.05);
	/* Overlay hero : léger voile sombre pour faire ressortir le texte */
	--color-hero-overlay: rgba(0, 0, 0, 0.35);
	--font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/* 100% et non 100vw : évite la bande blanche à droite (barre d’adresse / défilement) sur mobile */
	--container: min(1200px, calc(100% - 2rem));
	--space: 1.25rem;
	--space-lg: 2.5rem;
	--radius: 6px;
	--shadow: 0 2px 8px rgba(0,0,0,0.08);
	--shadow-hover: 0 4px 16px rgba(0,0,0,0.12);
}

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

html {
	font-size: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden;
	max-width: 100%;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 400;
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
	max-width: 100%;
	position: relative;
	/* pas overflow-x ici : évite de casser le header position: sticky sur certains navigateurs */
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-style: normal;
}

/* Garde-fou desktop: évite un wrapper global coincé en "vue mobile". */
html,
body {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
}

#page,
.site,
body > .site,
#main,
.site-main {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	overflow-x: hidden;
}

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

a {
	color: var(--color-primary);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space);
	padding-right: var(--space);
}

/* Header : fond léger sans backdrop-filter (évite les saccades au scroll) */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(120, 180, 140, 0.22);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Au scroll : fond vert-blanc opaque (pas transparent), lisible */
.site-header.is-scrolled {
	background: #f0f7f2;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.site-header.is-scrolled .header-phone,
.site-header.is-scrolled .header-email,
.site-header.is-scrolled .main-nav a,
.site-header.is-scrolled .logo-text {
	color: #1e4d2e;
	text-shadow: none;
}

.site-header.is-scrolled .header-phone:hover,
.site-header.is-scrolled .header-email:hover,
.site-header.is-scrolled .main-nav a:hover {
	color: #153d22;
}

.site-header.is-scrolled .menu-toggle span {
	background: #1e4d2e;
}

/* Grille 3 colonnes : nav | logo | contact (desktop) ; logo | burger | contact (mobile) */
.header-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0.75rem var(--space);
	gap: 0.75rem 1.25rem;
	position: relative;
}

.header-center {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.header-left {
	grid-column: 1;
	grid-row: 1;
	justify-self: end;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.9rem;
	min-width: 0;
}

.header-right {
	grid-column: 3;
	grid-row: 1;
	justify-self: start;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: nowrap;
	min-width: 0;
}

.site-logo {
	display: block;
}

.site-logo-in-nav {
	flex-shrink: 0;
}

.site-logo .logo-text {
	font-weight: 700;
	font-size: 1.75rem;
	color: #1e4d2e;
}

.site-header:not(.is-scrolled) .site-logo .logo-text {
	color: #fff;
}

.site-logo img,
.site-logo .logo-img,
.site-logo .logo-img-custom,
.header-center .custom-logo-link img {
	max-height: 144px;
	height: auto;
	width: auto;
	display: block;
}

.header-center .custom-logo-link {
	display: flex;
	align-items: center;
	line-height: 0;
}

.main-nav {
	flex-shrink: 0;
}

.main-nav .nav-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.25rem;
	align-items: center;
	flex-wrap: nowrap;
}

.main-nav .nav-menu > li {
	position: relative;
	flex-shrink: 0;
}

.main-nav .nav-menu > li > a {
	display: block;
	padding: 0.5rem 0.6rem;
	white-space: nowrap;
}

/* Sous-menus (dropdown) */
.main-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-hover);
	border: 1px solid var(--color-border);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px) scale(0.98);
	transform-origin: top left;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s ease;
	z-index: 200;
}

/* Au survol sur Nos prestations : le bloc sous-menu devient un peu plus grand */
.main-nav .nav-menu > li:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1.05);
}

.main-nav .sub-menu li {
	margin: 0;
}

.main-nav .sub-menu a {
	display: block;
	padding: 0.5rem 1rem;
	color: var(--color-text);
	font-size: 0.95rem;
	white-space: nowrap;
}

.main-nav .sub-menu a:hover {
	background: var(--color-bg-alt);
	color: var(--color-dark);
}

/* Lien parent "Nos prestations" avec indicateur */
.main-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	margin-left: 0.35em;
	vertical-align: middle;
	border: 5px solid transparent;
	border-top-color: currentColor;
	border-bottom: 0;
}

.site-header .main-nav a {
	color: #1e4d2e;
	font-weight: 500;
}

.site-header .main-nav a:hover {
	color: #153d22;
}

.main-nav a {
	color: var(--color-text);
	font-weight: 500;
}

.main-nav a:hover {
	color: var(--color-primary);
}

.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
}

.site-header .menu-toggle span {
	background: #fff;
}

.menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-text);
	margin: 4px 0;
}

.site-header .header-phone,
.site-header .header-email {
	font-size: 1.05rem;
	font-weight: 500;
	color: #1e4d2e;
	white-space: nowrap;
}

.site-header .header-phone:hover,
.site-header .header-email:hover {
	color: #153d22;
}

.header-phone,
.header-email {
	font-size: 0.95rem;
	color: var(--color-text-muted);
}

.btn {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border-radius: var(--radius);
	font-weight: 600;
	cursor: pointer;
	border: none;
	text-decoration: none;
	transition: background 0.2s, transform 0.15s;
}

.btn-primary {
	background: var(--color-primary);
	color: #fff !important;
}

.btn-primary:hover {
	background: var(--color-primary-dark);
	text-decoration: none;
}

.btn-secondary {
	background: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
	background: var(--color-primary);
	color: #fff !important;
	text-decoration: none;
}

/* Bouton Contact = même style que « Demander un devis » (vert #4a9060) */
.site-header .btn.btn-contact {
	background: #4a9060;
	color: #fff !important;
	border: 2px solid #4a9060;
	padding: 0.75rem 1.5rem;
	font-weight: 600;
}

.site-header .btn.btn-contact:hover {
	background: #fff !important;
	color: #4a9060 !important;
	border-color: #fff;
	text-decoration: none;
}

.btn-contact {
	background: var(--color-primary);
	color: #fff !important;
}

.btn-contact:hover {
	text-decoration: none;
	background: var(--color-primary-dark);
}

/* Hero */
.hero {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}

/* Home uniquement : réduire un peu la hauteur */
.hero.hero-home {
	min-height: 64vh;
}

.hero-bg {
	position: absolute;
	inset: 0;
}

.hero-bg .hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	/* L'image est un peu “atténuée” pour que les textes soient plus lisibles. */
	opacity: 0.78;
}

.hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-hero-overlay);
}

.hero-content {
	position: relative;
	z-index: 1;
	max-width: 800px;
	padding: var(--space-lg);
	color: #fff;
}

.hero-eyebrow {
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 0.5rem;
	opacity: 0.95;
}

.hero-title {
	font-size: clamp(3rem, 6vw, 4.6rem);
	/* Plus d'air entre le titre principal et le texte qui suit */
	margin: 0 0 1rem;
	line-height: 1.1;
	color: #2f6f46;
	font-family: var(--font-heading) !important;
	font-style: normal;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.hero-title .hero-title-line {
	display: block;
}

/* 1re ligne : marque */
.hero-title .hero-title-line-main {
	font-size: 1em;
	line-height: 1.05;
}

/* 2e ligne : métier */
.hero-title .hero-title-line-sub {
	font-size: clamp(2.1rem, 4.4vw, 3.2rem);
	line-height: 1.1;
	margin-top: 0.2rem;
}

.hero-title .hero-title-brand,
.hero-title .hero-title-line-main,
.hero-title .hero-title-line-sub {
	color: #2f6f46;
	font-weight: 700;
}

.hero-divider {
	display: none;
}

.hero-tagline {
	margin: 0 0 1.15rem;
	font-size: clamp(1.05rem, 2.1vw, 1.35rem);
	line-height: 1.35;
	color: #f8f6f0;
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 600;
}

.hero-subtitle {
	font-size: 1.35rem;
	line-height: 1.5;
	margin: 0 0 2rem;
	opacity: 0.95;
}

.hero-cta {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.hero-cta .btn {
	margin: 0;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
}

/* Premier bouton hero : fond vert, texte blanc → au survol : fond blanc, texte vert (inversé) */
.hero-cta .btn-primary {
	background: var(--color-dark);
	color: #fff !important;
	border: 2px solid var(--color-dark);
}

.hero-cta .btn-primary:hover {
	background: #fff;
	color: var(--color-dark) !important;
	border-color: #fff;
	text-decoration: none;
}

/* Second bouton hero : fond blanc, texte vert → au survol : fond vert, texte blanc (inversé) */
.hero-cta .btn-secondary {
	background: #fff;
	color: var(--color-dark) !important;
	border: 2px solid #fff;
}

.hero-cta .btn-secondary:hover {
	background: var(--color-dark);
	color: #fff !important;
	border-color: var(--color-dark);
	text-decoration: none;
}

/* Sections */
.section {
	padding: var(--space-lg) 0;
}

/* Home uniquement : aérer un peu entre les sections */
body.home .section {
	padding: 3.25rem 0;
}

@media (max-width: 760px) {
	body.home .section {
		padding: var(--space-lg) 0;
	}
}

.section-title {
	font-size: 1.75rem;
	margin: 0 0 var(--space-lg);
	text-align: center;
}

/* Chiffres clés (accueil) */
.chiffres-cles-section {
	background: var(--color-bg-alt);
}

.chiffres-cles-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space);
}

.chiffre-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.75rem 1.5rem;
	text-align: center;
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;
}

/* Hover tuiles "Chiffres clés" : teinte légère + couleur sous les bords */
@media (hover: hover) and (pointer: fine) {
	.chiffre-card {
		transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	}

	.chiffre-card::before,
	.chiffre-card::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.25s ease;
	}

	/* Ligne sous le bord (haut) */
	.chiffre-card::before {
		top: 0;
		height: 10px;
		background: linear-gradient(
			180deg,
			rgba(74, 144, 96, 0.35),
			rgba(74, 144, 96, 0.0)
		);
	}

	/* Teinte qui remonte sous les bords (global) */
	.chiffre-card::after {
		inset: 0;
		background: radial-gradient(
			120% 60% at 50% 0%,
			rgba(74, 144, 96, 0.16) 0%,
			rgba(74, 144, 96, 0.0) 58%
		);
	}

	.chiffre-card:hover {
		background: #f7fffa;
		border-color: rgba(74, 144, 96, 0.55);
		box-shadow: var(--shadow-hover);
	}

	.chiffre-card:hover::before,
	.chiffre-card:hover::after {
		opacity: 1;
	}

	/* Etat actif : même rendu que le hover, mais piloté par l'animation JS */
	.chiffre-card.is-active {
		background: #f7fffa;
		border-color: rgba(74, 144, 96, 0.55);
		box-shadow: var(--shadow-hover);
	}

	.chiffre-card.is-active::before,
	.chiffre-card.is-active::after {
		opacity: 1;
	}
}

.chiffre-card.is-active {
	background: #f7fffa;
	border-color: rgba(74, 144, 96, 0.55);
	box-shadow: var(--shadow-hover);
}

.chiffre-value {
	margin: 0;
	font-size: clamp(2rem, 3.2vw, 3.1rem);
	font-weight: 800;
	color: var(--color-dark);
	line-height: 1.1;
}

.chiffre-label {
	margin: 0.75rem 0 0;
	color: var(--color-text-muted);
	font-size: 1rem;
	line-height: 1.7;
}

@media (max-width: 900px) {
	.chiffres-cles-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.chiffres-cles-grid {
		grid-template-columns: 1fr;
	}
}

/* Page d'accueil : tous les h2 avec la même police design (Cormorant Garamond) */
body.home .section-title,
body.home .prestations-cards-title,
body.home .projets-section-title {
	font-family: var(--font-heading) !important;
	font-size: 3.25rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	line-height: 1.25;
}

.section-title-light {
	color: #fff;
}

/* Hors page d'accueil : titres prestations plus grands */
body:not(.home) .prestations-cards .section-title,
body:not(.home) #nos-prestations .prestations-cards-title {
	font-size: 2.5rem !important;
	font-weight: 700;
}

/* Cards prestations */
.cards-grid {
	display: grid;
	gap: var(--space);
}

.prestations-cards .cards-4,
.prestations-cards .prestations-cards-grid {
	/* Limiter à 2 tuiles par ligne (puis 1 colonne sur mobile) */
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 2.75rem !important;
}

@media (max-width: 760px) {
	.prestations-cards .cards-4,
	.prestations-cards .prestations-cards-grid {
		grid-template-columns: 1fr !important;
		gap: 1.75rem !important;
	}
}

.card {
	background: var(--color-bg-alt);
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	padding: var(--space-lg);
	box-shadow: var(--shadow);
	transition: box-shadow 0.25s ease, transform 0.35s ease, border-color 0.25s ease, opacity 0.35s ease, filter 0.35s ease;
	color: var(--color-text);
	text-decoration: none;
	display: block;
}

/* Chaque carte prestation : fond différent + encadrés plus grands */
.prestations-cards .card,
.prestations-cards .card-prestation {
	padding: 2.25rem !important;
	min-height: 220px !important;
}

/* Fonds uniformes pour toutes les cartes/slides prestations (charte Fama Habitat) */
.prestations-cards .card-prestation-1,
.prestations-cards .cards-grid .card:nth-child(1) {
	background: var(--color-dark) !important;
}

.prestations-cards .card-prestation-2,
.prestations-cards .cards-grid .card:nth-child(2) {
	background: var(--color-dark) !important;
}

.prestations-cards .card-prestation-3,
.prestations-cards .cards-grid .card:nth-child(3) {
	background: var(--color-dark) !important;
}

.prestations-cards .card-prestation-4,
.prestations-cards .cards-grid .card:nth-child(4) {
	background: var(--color-dark) !important;
}

/* Texte d'intro sous le h2 "Nos prestations" (accueil) */
#nos-prestations .prestations-cards-intro {
	max-width: 62ch;
	margin: calc(-1 * var(--space)) auto var(--space-lg);
	text-align: center;
	color: var(--color-text-muted);
	font-size: 1.05rem;
	line-height: 1.7;
}

/* Home - alternance fonds sections (sans toucher autres pages) */
body.home #nos-prestations {
	background: var(--color-bg-alt);
}

/* Accueil : "Nos prestations" (image nette + cartouche blanc titre) */
body.home #nos-prestations .card-prestation {
	--prestation-image-height: 230px;
	display: block;
	background: transparent !important;
	min-height: 0 !important;
	padding: 0 !important;
	padding-top: var(--prestation-image-height) !important;
	z-index: 0;
	text-align: center;
}

body.home #nos-prestations .card-prestation::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--prestation-image-height);
	background-image: var(--prestation-rotator-image, url("../img/prestations/parquet/Parquet0.jpg"));
	background-size: cover;
	background-position: center;
	filter: none;
	transform: none;
	opacity: 1;
	transition: opacity 2.4s ease-in-out;
	pointer-events: none;
	z-index: 0;
}

/* Accueil : tuile 2 ("Ponçage vitrification Parquet") -> fond depuis le dossier poncage */
body.home #nos-prestations .card-prestation-2::after {
	background-image: var(--prestation-rotator-image, url("../img/prestations/poncage-vitrification-parquet/poncage1.jpg")) !important;
}

/* Accueil : tuile 4 ("Vinyle LVT sol design") -> fond depuis le dossier vinyle */
body.home #nos-prestations .card-prestation-4::after {
	background-image: var(--prestation-rotator-image, url("../img/prestations/vinyle-lvt-sol-design/vinyle1.jpg")) !important;
}

body.home #nos-prestations .card-prestation::before {
	/* Ligne haute (évite que la zone de texte couvre la lecture de l’image) */
	display: none;
}

body.home #nos-prestations .card-content {
	position: relative;
	z-index: 2;
	background: #fff;
	padding: 1.1rem 1rem 1.2rem;
	border-radius: 0;
	width: 100%;
	max-width: 100%;
	box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.08);
	text-align: center;
	min-height: 165px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

body.home #nos-prestations .card-content .card-title {
	margin: 0 0 0.35rem;
	color: #1a1a1a !important;
	text-shadow: none;
}

body.home #nos-prestations .card-content .card-desc,
body.home #nos-prestations .card-content .card-link {
	display: block;
}

/* Page "/prestations" : même look que l'index (image nette + cartouche blanc titre) */
.page-prestations-list .card.card-prestation {
	--prestation-image-height: 230px;
	display: block;
	background: transparent !important;
	min-height: 0 !important;
	padding: 0 !important;
	padding-top: var(--prestation-image-height) !important;
	z-index: 0;
	text-align: center;
}

.page-prestations-list .card.card-prestation::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--prestation-image-height);
	background-size: cover;
	background-position: center;
	filter: none;
	transform: none;
	opacity: 1;
	transition: opacity 2.4s ease-in-out;
	pointer-events: none;
	z-index: 0;
}

/* Images identiques aux tuiles correspondantes de l'index */
.page-prestations-list .card-prestation-1::after {
	background-image: var(--prestation-rotator-image, url("../img/prestations/parquet/Parquet0.jpg")) !important;
}
.page-prestations-list .card-prestation-2::after {
	background-image: var(--prestation-rotator-image, url("../img/prestations/poncage-vitrification-parquet/poncage1.jpg")) !important;
}
.page-prestations-list .card-prestation-3::after {
	background-image: var(--prestation-rotator-image, url("../img/placeholder-hero.jpg")) !important;
}
.page-prestations-list .card-prestation-4::after {
	background-image: var(--prestation-rotator-image, url("../img/prestations/vinyle-lvt-sol-design/vinyle1.jpg")) !important;
}

/* Retirer la petite "bande" de couleur */
.page-prestations-list .card.card-prestation::before {
	display: none;
}

.page-prestations-list .card-content {
	position: relative;
	z-index: 2;
	background: #fff;
	padding: 1.1rem 1rem 1.2rem;
	border-radius: 0;
	width: 100%;
	max-width: 100%;
	text-align: center;
	box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.08);
	min-height: 165px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 760px) {
	body.home #nos-prestations .card-prestation,
	.page-prestations-list .card.card-prestation {
		--prestation-image-height: 210px;
	}
}

.page-prestations-list .card-content .card-title {
	margin: 0 0 0.35rem;
	color: #1a1a1a !important;
	text-shadow: none;
	text-align: center;
}

.page-prestations-list .card-content .card-desc,
.page-prestations-list .card-content .card-link {
	display: block;
}

/* Rotator image (carte parquet) : fondu léger pendant le switch */
.card.card-prestation[data-prestation-rotator].is-prestation-rotating::after {
	opacity: 0.28;
}

body.home #realisations {
	background: #fff;
}

/* Temporaire : masquer la section "Nos projets" sur le site */
body.home #realisations {
	display: none !important;
}

/* #qui-sommes-nous n’existe que sur l’accueil (front-page) : pas de dépendance à body.home (classe parfois absente selon réglages WP). */
#qui-sommes-nous {
	background: #fff;
}

/* « Qui sommes-nous » accueil : tuiles + animations (mobile) */
@keyframes homeAboutInFromLeft {
	from {
		opacity: 0;
		transform: translateX(-1.35rem);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes homeAboutInFromRight {
	from {
		opacity: 0;
		transform: translateX(1.35rem);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes homeAboutInFromCenter {
	from {
		opacity: 0;
		transform: scale(0.92) translateY(0.85rem);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* Accueil mobile : apparition marquée des ✓ (pseudo ::before) après le début de chaque ligne */
@keyframes homeAboutCheckPop {
	0% {
		opacity: 0;
		transform: scale(0.15) rotate(-28deg);
	}
	58% {
		opacity: 1;
		transform: scale(1.22) rotate(6deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

@media (max-width: 768px) {
	/*
	 * Tuiles : visibles + animées seulement après .home-about-reveal-on sur la section.
	 * Le JS attend ~0,75 s après que la section soit bien dans la zone utile, puis ajoute la classe.
	 */
	#qui-sommes-nous.home-about-mobile-tiles .home-about-tile {
		transition: none;
	}

	#qui-sommes-nous.home-about-mobile-tiles:not(.home-about-reveal-on) .home-about-tile {
		opacity: 0;
		pointer-events: none;
	}

	#qui-sommes-nous.home-about-mobile-tiles .about-content > .about-intro {
		background: linear-gradient(145deg, #d8ebe0 0%, #ecf6f0 100%);
		border: 2px solid rgba(74, 144, 96, 0.35);
		box-shadow: 0 8px 24px rgba(74, 144, 96, 0.12);
		border-radius: 14px;
		padding: 1.15rem 1.2rem;
		margin-bottom: 0.85rem;
		color: var(--color-text);
	}

	#qui-sommes-nous.home-about-mobile-tiles .about-content > .about-text {
		background: linear-gradient(145deg, #e4ebe6 0%, #f2f5f3 100%);
		border: 2px solid rgba(63, 115, 83, 0.28);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
		border-radius: 14px;
		padding: 1.15rem 1.2rem;
		margin-bottom: 0.85rem;
		color: var(--color-text);
	}

	#qui-sommes-nous.home-about-mobile-tiles .about-content .about-points li {
		background: #eef5f0;
		border: 1px solid rgba(102, 116, 90, 0.2);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
		border-radius: 10px;
		padding: 0.85rem 1rem 0.85rem 2rem;
		margin-bottom: 0.65rem;
		color: var(--color-text);
		font-weight: 800 !important;
		line-height: 1.5;
	}

	#qui-sommes-nous.home-about-mobile-tiles .about-content .about-points li:last-child {
		margin-bottom: 0.85rem;
	}

	#qui-sommes-nous.home-about-mobile-tiles .about-content .about-points li::before {
		left: 0.85rem;
		top: 0.9rem;
		font-weight: 800;
		font-size: 1.1em;
		color: var(--color-dark);
	}

	#qui-sommes-nous.home-about-mobile-tiles .about-content > .about-cta-link {
		width: 100%;
		justify-content: center;
		margin-top: 0.25rem;
		margin-bottom: 0;
		padding: 0.95rem 1.15rem;
		background: #fff;
		border: 2px solid var(--color-dark);
		border-radius: 12px;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
		box-sizing: border-box;
	}

	#qui-sommes-nous.home-about-mobile-tiles.home-about-reveal-on .home-about-tile {
		pointer-events: auto;
	}

	#qui-sommes-nous.home-about-mobile-tiles.home-about-reveal-on .about-content > .about-intro.home-about-tile--left {
		animation: homeAboutInFromLeft 1.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
		animation-delay: 0s;
	}

	#qui-sommes-nous.home-about-mobile-tiles.home-about-reveal-on .about-content > .about-text.home-about-tile--center {
		animation: homeAboutInFromCenter 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: 0.52s;
	}

	#qui-sommes-nous.home-about-mobile-tiles.home-about-reveal-on .about-content .about-points li.home-about-tile--left:nth-child(1) {
		animation: homeAboutInFromLeft 1.42s cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: 0.95s;
	}

	#qui-sommes-nous.home-about-mobile-tiles.home-about-reveal-on .about-content .about-points li.home-about-tile--right:nth-child(2) {
		animation: homeAboutInFromRight 1.42s cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: 1.38s;
	}

	#qui-sommes-nous.home-about-mobile-tiles.home-about-reveal-on .about-content .about-points li.home-about-tile--left:nth-child(3) {
		animation: homeAboutInFromLeft 1.42s cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: 1.82s;
	}

	#qui-sommes-nous.home-about-mobile-tiles.home-about-reveal-on .about-content > .about-cta-link.home-about-tile--right {
		animation: homeAboutInFromRight 1.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
		animation-delay: 2.32s;
	}

	#qui-sommes-nous.home-about-mobile-tiles.home-about-reveal-on .about-content .about-points li::before {
		display: block;
		transform-origin: 50% 50%;
		will-change: transform, opacity;
		animation: homeAboutCheckPop 0.82s cubic-bezier(0.34, 1.45, 0.52, 1) both;
	}

	#qui-sommes-nous.home-about-mobile-tiles.home-about-reveal-on .about-content .about-points li:nth-child(1)::before {
		animation-delay: 1.18s;
	}

	#qui-sommes-nous.home-about-mobile-tiles.home-about-reveal-on .about-content .about-points li:nth-child(2)::before {
		animation-delay: 1.62s;
	}

	#qui-sommes-nous.home-about-mobile-tiles.home-about-reveal-on .about-content .about-points li:nth-child(3)::before {
		animation-delay: 2.06s;
	}
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
	#qui-sommes-nous.home-about-mobile-tiles:not(.home-about-reveal-on) .home-about-tile,
	#qui-sommes-nous.home-about-mobile-tiles .home-about-tile {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		pointer-events: auto !important;
	}

	#qui-sommes-nous.home-about-mobile-tiles .about-content .about-points li::before {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

body.home #nos-engagements {
	background: var(--color-bg-alt);
}

/* Ligne épaisse en haut de chaque tuile (couleur sombre propre à la tuile) */
.prestations-cards .card-prestation,
.page-prestations-list .card.card-prestation {
	position: relative;
	overflow: hidden;
}

.prestations-cards .card-prestation-1,
.page-prestations-list .card-prestation-1 { --prestation-accent: #3f7353; }
.prestations-cards .card-prestation-2,
.page-prestations-list .card-prestation-2 { --prestation-accent: #8b6a45; }
.prestations-cards .card-prestation-3,
.page-prestations-list .card-prestation-3 { --prestation-accent: #66745a; }
.prestations-cards .card-prestation-4,
.page-prestations-list .card-prestation-4 { --prestation-accent: #9a5f5a; }

.prestations-cards .card-prestation::before,
.page-prestations-list .card.card-prestation::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 10px;
	background: var(--prestation-accent);
	opacity: 0.95;
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
	transition: opacity 0.25s ease, filter 0.25s ease;
	pointer-events: none;
}

.prestations-cards .card-prestation:hover::before,
.page-prestations-list .card.card-prestation:hover::before {
	opacity: 1;
	filter: brightness(0.98) saturate(1.08);
}

/* Page Prestations (template) : titre centré, cartes colorées, CTA */
.page-prestations-list .page-prestations-list-header {
	text-align: center;
	margin-bottom: var(--space-lg);
}

.page-prestations-list .page-prestations-list-title {
	font-size: 2.5rem;
	font-weight: 700;
	margin: 0;
}

.page-prestations-list .prestations-list-cards.cards-4 {
	/* Limiter à 2 tuiles par ligne (puis 1 colonne sur mobile) */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.75rem;
}

@media (max-width: 760px) {
	.page-prestations-list .prestations-list-cards.cards-4 {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

.page-prestations-list .card.card-prestation {
	padding: 2.25rem;
	min-height: 220px;
}

/* Nos prestations (accueil) : entrée lente en alternance gauche / droite au scroll */
@keyframes prestationsTileInFromLeft {
	from {
		opacity: 0;
		transform: translateX(-2.75rem);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes prestationsTileInFromRight {
	from {
		opacity: 0;
		transform: translateX(2.75rem);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Pas de transition sur transform ici : elle entrerait en conflit avec l’animation d’entrée (saccades). */
body.home .prestations-cards .card-prestation {
	opacity: 1;
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Pas de transition sur transform tant que la carte est « visible » : évite un 2e mouvement après l’animation. */
body.home .prestations-cards .card-prestation.is-prestations-visible {
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

body.home .prestations-cards .card-prestation.is-prestations-visible:hover,
body.home .prestations-cards .card-prestation.is-prestations-visible:focus-visible {
	transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.35s ease;
}

/* Avant déclenchement : hors écran latéralement (évite un flash entre classes JS) */
body.home .prestations-cards .card-prestation.is-prestations-from-left:not(.is-prestations-visible) {
	opacity: 0;
	transform: translateX(-2.75rem);
	pointer-events: none;
}

body.home .prestations-cards .card-prestation.is-prestations-from-right:not(.is-prestations-visible) {
	opacity: 0;
	transform: translateX(2.75rem);
	pointer-events: none;
}

/*
 * Uniquement l’animation (pas d’opacity/transform statiques) : sinon le navigateur applique
 * la position finale tout de suite puis relance les keyframes → saccades.
 * both = état « from » pendant l’attente + état final conservé après.
 */
body.home .prestations-cards .card-prestation.is-prestations-visible.is-prestations-from-left {
	pointer-events: auto;
	animation: prestationsTileInFromLeft 3.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

body.home .prestations-cards .card-prestation.is-prestations-visible.is-prestations-from-right {
	pointer-events: auto;
	animation: prestationsTileInFromRight 3.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@media (max-width: 768px) {
	body.home .prestations-cards .card-prestation.is-prestations-visible.is-prestations-from-left,
	body.home .prestations-cards .card-prestation.is-prestations-visible.is-prestations-from-right {
		animation-duration: 3.55s;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home .prestations-cards .card-prestation {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		pointer-events: auto !important;
	}
}

.page-prestations-list .card-prestation-1 { background: #e8f0eb; }
.page-prestations-list .card-prestation-2 { background: #f5efe6; }
.page-prestations-list .card-prestation-3 { background: #eef2e8; }
.page-prestations-list .card-prestation-4 { background: #f0ebe3; }

.page-prestations-list .prestations-list-cta {
	text-align: center;
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--color-border);
}

.page-prestations-list .prestations-list-cta-text {
	max-width: 42ch;
	margin: 0 auto 1.5rem;
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.page-prestations-list .btn-cta-large {
	display: inline-block;
	padding: 1rem 2.5rem;
	font-size: 1.25rem;
	border-radius: var(--radius);
	background: var(--color-dark);
	color: #fff !important;
	border: 2px solid var(--color-dark);
	font-weight: 700;
	transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.35s ease;
}

.page-prestations-list .btn-cta-large:hover {
	background: #fff;
	color: var(--color-dark) !important;
	border-color: var(--color-dark);
	text-decoration: none;
}

.page-prestations-list .btn-cta-large.btn-cta-grow:hover {
	transform: scale(1.35);
}

.prestations-cards .card:hover,
.prestations-cards .card:focus-visible,
.page-prestations-list .card.card-prestation:hover,
.page-prestations-list .card.card-prestation:focus-visible {
	box-shadow: var(--shadow-hover);
	transform: translateY(-4px) scale(1.01);
	border-color: var(--color-dark);
	filter: none;
	text-decoration: none;
	color: var(--color-text);
}

@media (hover: none) and (pointer: coarse) {
	.prestations-cards .card:active,
	.page-prestations-list .card.card-prestation:active {
		transform: translateY(-4px) scale(1.05);
		border-color: var(--color-dark);
		filter: brightness(0.98);
	}
}

.card-title {
	margin: 0 0 0.5rem;
	font-family: "Montserrat", var(--font-sans);
	font-weight: 300;
	letter-spacing: 1.5px;
	font-size: clamp(18px, 1.2vw, 20px);
	line-height: 1.35;
}

.card-desc {
	margin: 0 0 0.75rem;
	font-weight: 400;
	color: var(--color-text-muted);
	font-size: 0.95rem;
}

.card-link {
	color: var(--color-primary);
	font-weight: 400;
	font-size: 0.9rem;
}

/* Cartes prestations : pas de bleu, charte anthracite/vert uniquement */
.prestations-cards .card-prestation .card-title,
.page-prestations-list .card.card-prestation .card-title,
.page-prestations-list .card.card-prestation .card-link {
	color: #1a1a1a !important;
}

.prestations-cards .card-prestation .card-link,
.page-prestations-list .card.card-prestation .card-link {
	color: var(--color-dark) !important;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 400;
}

/* Carousel */
/* Panneau projets : défilement doux gauche → droite (les cartes défilent vers la gauche) */
.carousel-section {
	background: var(--color-bg-alt);
	padding: var(--space-lg) 0;
}

/* Titre carousel (hors page d'accueil) */
body:not(.home) .carousel-section .section-title,
body:not(.home) .carousel-section .carousel-section-title {
	font-size: 2.5rem !important;
	font-weight: 700;
	margin-bottom: var(--space-lg);
	text-align: center;
}

.carousel-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 100%;
}

.carousel-track-container {
	flex: 1;
	overflow: hidden;
	min-width: 0;
}

.carousel-track {
	display: flex;
	gap: var(--space);
	will-change: transform;
}

/* Cartes projet : taille doublée (desktop) ; sur mobile/tablette pas de min-width fixe → pas de scroll horizontal page */
.carousel-track .carousel-slide {
	flex: 0 0 600px;
	min-width: 560px;
}

@media (max-width: 900px) {
	.carousel-track .carousel-slide {
		flex: 0 0 min(560px, 100%);
		min-width: 0;
		max-width: 100%;
	}
}

.carousel-slide a {
	display: block;
	color: var(--color-text);
	text-decoration: none;
	background: #fff;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.carousel-slide a:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-4px);
}

.carousel-slide img {
	width: 100%;
	height: 400px;
	min-height: 400px;
	object-fit: cover;
	border-radius: 0;
	display: block;
	background: var(--color-bg-alt);
}

.carousel-slide-title {
	display: block;
	padding: 1.25rem 1.25rem 1.5rem;
	font-weight: 600;
	font-size: 1.25rem;
}

/* Titre carrousel "Nos projets" (home) : centrage + police plus soignée */
body.home .carousel-slide-title {
	text-align: center;
	font-family: var(--font-heading) !important;
	font-weight: 700;
	font-size: 1.45rem;
	line-height: 1.2;
	padding-left: 1rem;
	padding-right: 1rem;
}

.carousel-btn {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 2px solid var(--color-primary);
	background: #fff;
	color: var(--color-primary);
	font-size: 2.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.carousel-btn:hover {
	background: var(--color-primary);
	color: #fff;
}

/* Section Nos projets (liste déroulante) */
.projets-section {
	background: var(--color-bg-alt);
	padding: var(--space-lg) 0;
}

/* Titres projets (hors page d'accueil) */
body:not(.home) .projets-section .section-title,
body:not(.home) .projets-section-title {
	font-size: 2.5rem !important;
	font-weight: 700;
	margin-bottom: 1rem;
	text-align: center;
}

.projets-section-intro-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 2rem;
}

.projets-section-intro {
	max-width: 485px;
	margin: 0;
	text-align: center;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--color-text);
}

.projets-dropdown-wrap {
	max-width: 480px;
	margin: 0 auto 2rem;
}

.projets-select {
	width: 100%;
	padding: 0.85rem 1.25rem;
	font-size: 1rem;
	font-family: inherit;
	color: var(--color-text);
	background: #fff;
	border: 2px solid var(--color-border);
	border-radius: var(--radius);
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1.25rem;
	padding-right: 2.75rem;
}

.projets-select:hover,
.projets-select:focus {
	border-color: var(--color-dark);
	outline: none;
}

.projets-section-cta {
	text-align: center;
	margin: 0;
}

/* Zone carousel pleine largeur (flèches + piste) */
.projets-carousel-full {
	width: 100%;
	padding: 2rem var(--space);
	box-sizing: border-box;
}

.projets-carousel-full .carousel-wrapper {
	margin: 0;
	max-width: none;
	width: 100%;
	gap: 1.25rem;
}

/* Nos projets (accueil) — mobile : image pleine largeur, titre en dégradé, flèches compactes en overlay */
@media (max-width: 768px) {
	body.home .projets-carousel-full {
		padding: 0;
		margin: 0;
		width: 100%;
	}

	body.home .projets-carousel-full .carousel-wrapper {
		display: block;
		position: relative;
		width: 100%;
		max-width: none;
		gap: 0;
	}

	body.home .projets-carousel-full .carousel-track-container {
		width: 100%;
		overflow: hidden;
	}

	body.home .projets-carousel-full .carousel-track {
		gap: 0.5rem;
	}

	body.home .projets-carousel-full .carousel-track .carousel-slide {
		flex: 0 0 100%;
		min-width: 100%;
		max-width: 100%;
	}

	body.home .projets-carousel-full .carousel-slide a {
		border-radius: 0;
		box-shadow: none;
		position: relative;
		overflow: hidden;
	}

	body.home .projets-carousel-full .carousel-slide a:hover {
		transform: none;
		box-shadow: none;
	}

	body.home .projets-carousel-full .carousel-slide img {
		width: 100%;
		height: min(56vh, 400px);
		min-height: 210px;
		object-fit: cover;
	}

	body.home .projets-carousel-full .carousel-slide-title {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		padding: 2.25rem 0.9rem 0.9rem;
		background: linear-gradient(
			to top,
			rgba(18, 28, 22, 0.92) 0%,
			rgba(18, 28, 22, 0.45) 45%,
			transparent 100%
		);
		color: #f8faf8;
		font-size: 1.05rem;
		font-weight: 600;
		text-align: left;
		font-family: var(--font-sans);
		line-height: 1.25;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	}

	body.home .projets-carousel-full .carousel-btn {
		position: absolute;
		top: max(0.45rem, env(safe-area-inset-top, 0px));
		z-index: 4;
		width: 2.35rem;
		height: 2.35rem;
		min-width: 2.35rem;
		padding: 0;
		border-radius: 999px;
		border: 1px solid rgba(30, 77, 46, 0.12);
		background: rgba(255, 255, 255, 0.94);
		color: #1e4d2e;
		font-size: 0.9rem;
		font-weight: 700;
		line-height: 1;
		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	body.home .projets-carousel-full .carousel-btn:hover,
	body.home .projets-carousel-full .carousel-btn:focus-visible {
		background: #fff;
		color: var(--color-dark);
		border-color: rgba(74, 144, 96, 0.35);
	}

	body.home .projets-carousel-full .carousel-prev {
		left: max(0.45rem, env(safe-area-inset-left, 0px));
	}

	body.home .projets-carousel-full .carousel-next {
		right: max(0.45rem, env(safe-area-inset-right, 0px));
	}
}

.projets-section-cta .btn {
	margin: 0;
}

/* About */
.about-section {
	position: relative;
	overflow: hidden;
	padding-bottom: 2rem;
}

.about-section .container {
	position: relative;
	z-index: 1;
}

/* Logo en fond à droite, bas de section (fond transparent) */
.about-section-logo-bg {
	position: absolute;
	right: 0;
	bottom: 0;
	width:  min(480px, 52vw);
	height: min(260px, 32vw);
	min-width: 280px;
	min-height: 140px;
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: contain;
	opacity: 0.42;
	pointer-events: none;
	z-index: 0;
}

/* Fallback si pas d'image : texte « Fama habitat » en filigrane */
.about-section-logo-bg:not([style*="background-image"]) {
	background-image: none;
	opacity: 0.18;
}

.about-section-logo-bg:not([style*="background-image"])::before {
	content: "Fama habitat";
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: clamp(2rem, 6vw, 4rem);
	font-weight: 700;
	color: var(--color-dark);
	line-height: 1;
	white-space: nowrap;
}

.about-content {
	max-width: 720px;
	margin: 0;
	position: relative;
	z-index: 1;
}

/* Mise en page Qui sommes-nous (texte + image) */
.about-layout {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-lg);
}

.about-text {
	margin: 0 0 1.25rem;
	color: var(--color-text-muted);
	font-size: 1.05rem;
	line-height: 1.75;
}

.about-image-wrap {
	/* Réduction ~20% de la colonne image */
	flex: 0 0 min(340px, 34vw);
	max-width: 340px;
}

.about-image {
	width: 100%;
	height: auto;
	/* Image plus longue sur desktop (accueil) */
	max-height: 360px;
	object-fit: cover;
	object-position: center top;
	/* Format plus premium : coins très discrets */
	border-radius: 4px;
	/* Ombre légère */
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
	display: block;
}

.about-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

@media (max-width: 900px) {
	.about-layout {
		flex-direction: column;
	}

	.about-image-wrap {
		flex: 0 0 auto;
		max-width: 100%;
		width: 100%;
	}

	.about-image {
		/* Sur mobile, on privilégie la lisibilité sans contrainte de hauteur */
		max-height: none;
	}
}

.about-intro {
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
}

.about-points {
	list-style: none;
	padding: 0;
	margin: 0;
}

.about-points li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.75rem;
}

.about-points li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-dark);
	font-weight: bold;
}

/* Section "Qui sommes-nous" : bouton aligné sur la charte (vert logo) */
.about-section .about-cta-link.btn.btn-secondary {
	background: #fff;
	color: var(--color-dark) !important;
	border: 2px solid var(--color-dark);
}

.about-section .about-cta-link.btn.btn-secondary:hover {
	background: var(--color-dark);
	color: #fff !important;
	border-color: var(--color-dark);
	text-decoration: none;
}

/* Zone */
.zone-bg {
	background: #f9f9f7;
	color: var(--color-text);
}

.zone-bg .section-title-light {
	color: var(--color-text) !important;
	font-family: "Montserrat", var(--font-sans) !important;
	font-style: normal !important;
	font-weight: 300 !important;
	letter-spacing: 1.5px;
	text-align: center !important;
}

.zone-bg .zone-intro {
	color: var(--color-text-muted);
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.zone-intro {
	text-align: center;
	max-width: 600px;
	margin: 0 auto var(--space-lg);
	opacity: 0.95;
}

.zone-select-wrap {
	text-align: center;
	margin-bottom: var(--space-lg);
}

.zone-select-label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: #fff;
}

.zone-secteur-select {
	padding: 0.6rem 2rem 0.6rem 1rem;
	font-size: 1rem;
	font-family: inherit;
	color: var(--color-text);
	background: #fff;
	border: 2px solid rgba(255,255,255,0.5);
	border-radius: var(--radius);
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	background-size: 1.25rem;
}

.zone-secteur-select:hover,
.zone-secteur-select:focus {
	border-color: #fff;
	outline: none;
}

.zone-map-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: var(--space-lg);
}

.zone-svg {
	max-width: 400px;
	width: 100%;
	height: auto;
}

.zone-map-points-wrap,
.zone-google-map-wrap {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.zone-intervention-map,
.zone-mymaps-iframe {
	display: block;
	width: 100%;
	height: 450px;
	min-height: 300px;
	border: 0;
}

/* Masquer la barre « FAMA Habitat » de l’embed My Maps en rognant le haut de l’iframe */
.zone-mymaps-iframe {
	height: calc(450px + 65px);
	margin-top: -65px;
	pointer-events: auto;
}

.zone-intervention-map .leaflet-popup-content-wrapper {
	border-radius: var(--radius);
}

.zone-google-map {
	display: block;
	width: 100%;
	height: 400px;
	border: 0;
}

.zone-ville[data-zone] {
	cursor: pointer;
	transition: fill 0.2s, filter 0.2s;
}

.zone-ville[data-zone]:hover {
	fill: #e8f5e9;
	filter: drop-shadow(0 0 4px rgba(255,255,255,0.8));
}

.zone-ville[data-zone].is-selected {
	fill: var(--color-dark);
	filter: drop-shadow(0 0 6px rgba(255,255,255,0.9));
}

.zone-label {
	fill: #fff;
	font-size: 11px;
	font-family: var(--font-sans);
	pointer-events: none;
}

/* Contact quick – bloc CTA, fond blanc */
body.home section.contact-quick.contact-quick-cta {
	background: var(--color-bg-alt) !important;
	border-top: none;
	border-bottom: none;
	color: var(--color-text);
}

body.home section.contact-quick .contact-quick-inner {
	text-align: center !important;
	max-width: 900px;
	margin: 0 auto;
	padding: var(--space-lg);
	background: var(--color-dark);
	color: #fff;
	border-radius: var(--radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

body.home section.contact-quick .contact-quick-intro {
	text-align: center;
	margin-bottom: 1.25rem;
	font-size: 1.1rem;
	color: rgba(255,255,255,0.88);
}

body.home section.contact-quick .contact-quick-coords {
	text-align: center;
	margin-bottom: 1.75rem;
	font-size: 1.05rem;
}

body.home section.contact-quick .contact-quick-coords a {
	color: #fff !important;
	font-weight: 600;
}

body.home section.contact-quick .contact-quick-coords a:hover {
	text-decoration: underline;
}

body.home section.contact-quick .btn.btn-cta-large {
	display: inline-block !important;
	width: auto !important;
	margin: 0 auto;
	padding: 1rem 2.5rem !important;
	font-size: 1.25rem !important;
	border: 2px solid #fff !important;
	background: #fff !important;
	color: var(--color-dark) !important;
	border-radius: var(--radius);
	transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.home section.contact-quick .btn.btn-cta-large:hover {
	background: transparent !important;
	color: #fff !important;
	border-color: #fff !important;
	text-decoration: none;
}

body.home section.contact-quick .btn.btn-cta-grow:hover {
	transform: scale(1.2) !important;
}

/* CTA Home : pas de scale au survol (pas d'animation) */
body.home section.contact-quick.contact-quick-cta .contact-cta-buttons .btn.btn-cta-grow:hover {
	transform: none !important;
}

/* CTA Home : bouton secondaire contrasté */
body.home section.contact-quick.contact-quick-cta .contact-cta-buttons .btn.btn-secondary.btn-cta-large {
	background: transparent !important;
	color: #fff !important;
	border-color: #fff !important;
}

body.home section.contact-quick.contact-quick-cta .contact-cta-buttons .btn.btn-secondary.btn-cta-large:hover {
	background: #fff !important;
	color: var(--color-dark) !important;
	text-decoration: none !important;
}

body.home section.contact-quick.contact-quick-cta .section-title {
	color: #fff !important;
	font-family: "Montserrat", var(--font-sans) !important;
	font-style: normal !important;
	font-weight: 300 !important;
	letter-spacing: 1.5px;
	font-size: clamp(1.45rem, 2.6vw, 2.1rem) !important;
	line-height: 1.3;
}

/* CTA Home - boutons et texte */
.contact-cta-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}

body.home .contact-cta-bottom {
	margin: 0;
	text-align: center;
	color: rgba(255,255,255,0.9);
	font-size: 1.05rem;
	line-height: 1.7;
}

/* Notre façon de travailler (engagements) */
.engagements-section {
	background: var(--color-bg-alt);
}

.engagements-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
}

.engagement-card {
	background: #fff;
	border: 1px solid var(--color-border);
	padding: 2rem;
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;
}

.engagement-card-title {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: #1a1a1a;
	display: block;
}

.engagement-symbol {
	display: none;
}

.engagement-symbol svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.engagement-card-text {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 1rem;
	line-height: 1.75;
}

/* Accent couleurs sur le symbole (3 cartes) */
.engagements-grid .engagement-card:nth-child(1) .engagement-symbol {
	background: transparent;
	border-color: transparent;
}

.engagements-grid .engagement-card:nth-child(2) .engagement-symbol {
	background: transparent;
	border-color: transparent;
}

.engagements-grid .engagement-card:nth-child(3) .engagement-symbol {
	background: transparent;
	border-color: transparent;
}

/* Engagements : entrée type « Nos prestations » (alternance gauche / droite, sans styles finaux en dur) */
@keyframes engagementsTileInFromLeft {
	from {
		opacity: 0;
		transform: translateX(-2.4rem);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes engagementsTileInFromRight {
	from {
		opacity: 0;
		transform: translateX(2.4rem);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Mobile : même logique + léger relief 3D à l’arrivée */
@keyframes engagementsTile3DInFromLeft {
	from {
		opacity: 0;
		transform: perspective(920px) translateX(-2.15rem) rotateX(9deg) rotateY(-7deg) translateZ(-18px);
	}
	to {
		opacity: 1;
		transform: perspective(920px) translateX(0) rotateX(0deg) rotateY(0deg) translateZ(0);
	}
}

@keyframes engagementsTile3DInFromRight {
	from {
		opacity: 0;
		transform: perspective(920px) translateX(2.15rem) rotateX(9deg) rotateY(7deg) translateZ(-18px);
	}
	to {
		opacity: 1;
		transform: perspective(920px) translateX(0) rotateX(0deg) rotateY(0deg) translateZ(0);
	}
}

.engagements-section .engagement-card.is-engagements-from-left:not(.is-engagements-visible) {
	opacity: 0;
	transform: translateX(-2.4rem);
	pointer-events: none;
}

.engagements-section .engagement-card.is-engagements-from-right:not(.is-engagements-visible) {
	opacity: 0;
	transform: translateX(2.4rem);
	pointer-events: none;
}

.engagements-section .engagement-card.is-engagements-visible.is-engagements-from-left {
	pointer-events: auto;
	animation: engagementsTileInFromLeft 2.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.engagements-section .engagement-card.is-engagements-visible.is-engagements-from-right {
	pointer-events: auto;
	animation: engagementsTileInFromRight 2.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@media (max-width: 768px) {
	.engagements-section .engagements-grid {
		perspective: 1200px;
		perspective-origin: 50% 40%;
		row-gap: 1.35rem;
	}

	.engagements-section .engagement-card {
		transform-style: preserve-3d;
		backface-visibility: hidden;
		overflow: visible;
		border-radius: 14px;
		box-shadow:
			0 14px 36px rgba(0, 0, 0, 0.12),
			0 4px 12px rgba(0, 0, 0, 0.06),
			inset 0 1px 0 rgba(255, 255, 255, 0.85);
	}

	/* Une tuile sur deux : léger fond vert (charte) */
	.engagements-section .engagements-grid .engagement-card:nth-child(even) {
		background: linear-gradient(165deg, #e6f2ea 0%, #dceee3 55%, #d4e9dc 100%);
		border-color: rgba(74, 144, 96, 0.22);
	}

	.engagements-section .engagements-grid .engagement-card:nth-child(odd) {
		background: #fff;
	}

	.engagements-section .engagement-card.is-engagements-from-left:not(.is-engagements-visible) {
		transform: perspective(920px) translateX(-2.15rem) rotateX(9deg) rotateY(-7deg) translateZ(-18px);
	}

	.engagements-section .engagement-card.is-engagements-from-right:not(.is-engagements-visible) {
		transform: perspective(920px) translateX(2.15rem) rotateX(9deg) rotateY(7deg) translateZ(-18px);
	}

	.engagements-section .engagement-card.is-engagements-visible.is-engagements-from-left {
		animation-name: engagementsTile3DInFromLeft;
		animation-duration: 2.65s;
		animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
	}

	.engagements-section .engagement-card.is-engagements-visible.is-engagements-from-right {
		animation-name: engagementsTile3DInFromRight;
		animation-duration: 2.65s;
		animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.engagements-section .engagement-card {
		transform: none !important;
		animation: none !important;
	}

	.engagements-section .engagement-card.is-engagements-from-left:not(.is-engagements-visible),
	.engagements-section .engagement-card.is-engagements-from-right:not(.is-engagements-visible),
	.engagements-section .engagement-card.is-engagements-visible {
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
	}
}

@media (max-width: 900px) {
	.engagements-grid {
		grid-template-columns: 1fr;
	}
}

/* Page content */
.page-content {
	padding: var(--space-lg) 0;
}

/* Qui sommes-nous : supprimer la bande blanche sous le CTA */
.page-content.page-qui-sommes-nous {
	background: #f3f5f4;
	padding-top: 44px;
	padding-bottom: 0;
}

/* Supprime le gap blanc avant le footer (margin-top du footer + fond body) */
body:has(.page-content.page-qui-sommes-nous) {
	background: #f3f5f4;
}

body:has(.page-content.page-qui-sommes-nous) .site-footer {
	margin-top: 0;
}

@media (max-width: 900px) {
	.page-content.page-qui-sommes-nous {
		padding-top: 24px;
	}
}

.page-header {
	margin-bottom: var(--space-lg);
}

.page-title {
	font-size: 2rem;
	margin: 0;
}

.page-body.entry-content,
.page-intro.entry-content,
.projet-content.entry-content {
	max-width: 72ch;
}

/* Page dédiée : on permet un layout avec image à droite */
.page-qui-sommes-nous .page-body.entry-content {
	max-width: none;
}

/* Layout pleine largeur (sections) */
.page-qui-sommes-nous .qui-section-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Padding vertical important : 80px desktop / 40px mobile */
.page-qui-sommes-nous .about-section,
.page-qui-sommes-nous .about-promise-section,
.page-qui-sommes-nous .about-mission-section,
.page-qui-sommes-nous .about-cta-final {
	width: 100%;
	padding: 80px 0;
	margin: 0;
}

@media (max-width: 900px) {
	.page-qui-sommes-nous .about-section,
	.page-qui-sommes-nous .about-promise-section,
	.page-qui-sommes-nous .about-mission-section,
	.page-qui-sommes-nous .about-cta-final {
		padding: 40px 0;
	}
}

/* Engagements - page Qui sommes-nous */
.page-qui-sommes-nous .engagements-extended-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
	margin-top: var(--space);
}

/* Qui sommes-nous - nouvelle mise en page */
.page-qui-sommes-nous .about-founder-hero {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	grid-template-areas: "content image";
	gap: 3rem;
	/* On étire la colonne image pour qu'elle fasse la même hauteur que le bloc contenu */
	align-items: stretch;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

.page-qui-sommes-nous .about-founder-content {
	grid-area: content;
}

.page-qui-sommes-nous .about-founder-image {
	/* Image : pas dominante et jamais pleine largeur desktop */
	grid-area: image;
	border-radius: 12px;
	overflow: hidden;
	max-width: 450px;
	width: 100%;
	justify-self: end;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
	align-self: stretch;
	height: 100%;
	/* Permet d'éviter une coupe trop agressive du visage */
	min-height: 580px;
	display: block;
}

.page-qui-sommes-nous .about-founder-img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: inherit;
	/* L'image doit couvrir toute la hauteur du conteneur */
	max-height: none;
	object-fit: cover;
	/* Garde le haut du visage visible même si on rogne un peu */
	object-position: center top;
	/* Empêche la "coupe" du haut du visage selon l'aspect photo */
	transform: translateY(-12px);
	height: 100%;
}

.page-qui-sommes-nous .about-founder-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.page-qui-sommes-nous .about-founder-content .page-title {
	font-family: var(--font-heading) !important;
	font-size: 2.65rem;
	font-weight: 700;
	line-height: 1.15;
	text-align: left;
	margin: 0;
}

.page-qui-sommes-nous .about-founder-text {
	margin: 1rem 0 0;
	color: var(--color-text-muted);
	font-size: 1.05rem;
	line-height: 1.75;
}

.page-qui-sommes-nous .about-founder-stats {
	margin-top: 2.5rem;
	display: grid;
	/* 2 colonnes desktop pour laisser le texte respirer */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.85rem;
}

@media (max-width: 900px) {
	.page-qui-sommes-nous .about-founder-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.page-qui-sommes-nous .about-founder-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.15rem;
	}
}

.page-qui-sommes-nous .about-stat {
	background: #fff;
	border: 1px solid rgba(74, 144, 96, 0.25);
	border-radius: 16px;
	padding: 1.6rem 1.35rem;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06);
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 145px;
	gap: 0.25rem;
}

.page-qui-sommes-nous .about-stat-value {
	font-size: 2rem;
	font-weight: 800;
	color: var(--color-dark);
	line-height: 1.1;
	margin-bottom: 0.65rem;
}

.page-qui-sommes-nous .about-stat-label {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
	/* Eviter un texte cassé sur beaucoup de lignes */
	display: -webkit-box;
	/* Plus de place sur desktop (2 colonnes) */
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Mini-animation fond vert, tuiles "chiffres clés" séquentielles */
.page-qui-sommes-nous .about-founder-stats .about-stat {
	position: relative;
}

.page-qui-sommes-nous .about-founder-stats .about-stat::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(74, 144, 96, 0.12);
	opacity: 0;
	border-radius: 16px;
	z-index: 0;
}

.page-qui-sommes-nous .about-founder-stats .about-stat .about-stat-value,
.page-qui-sommes-nous .about-founder-stats .about-stat .about-stat-label {
	position: relative;
	z-index: 1;
}

@keyframes aboutStatBgPulse {
	0% {
		opacity: 0;
	}
	45% {
		opacity: 0.35;
	}
	100% {
		opacity: 0;
	}
}

.page-qui-sommes-nous .about-founder-stats .about-stat.is-about-visible::before {
	/* Boucle très légère (évite de surcharger le compositeur avec les autres effets) */
	animation: aboutStatBgPulse 4.5s ease-in-out infinite;
}

.page-qui-sommes-nous .about-founder-stats .about-stat:nth-child(1).is-about-visible::before {
	animation-delay: 0ms;
}
.page-qui-sommes-nous .about-founder-stats .about-stat:nth-child(2).is-about-visible::before {
	animation-delay: 120ms;
}
.page-qui-sommes-nous .about-founder-stats .about-stat:nth-child(3).is-about-visible::before {
	animation-delay: 240ms;
}
.page-qui-sommes-nous .about-founder-stats .about-stat:nth-child(4).is-about-visible::before {
	animation-delay: 360ms;
}

@media (prefers-reduced-motion: reduce) {
	.page-qui-sommes-nous .about-founder-stats .about-stat.is-about-visible::before {
		animation: none !important;
		opacity: 0 !important;
	}
}

/* Fade-in au scroll (page Qui sommes-nous) */
.page-qui-sommes-nous .about-stat.is-about-hidden,
.page-qui-sommes-nous .about-promise-card.is-about-hidden,
.page-qui-sommes-nous .about-highlight.is-about-hidden,
.page-qui-sommes-nous .about-cta-inner.is-about-hidden {
	opacity: 0;
	transform: none;
	filter: none;
	transition: opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.page-qui-sommes-nous .about-stat.is-about-visible,
.page-qui-sommes-nous .about-promise-card.is-about-visible,
.page-qui-sommes-nous .about-highlight.is-about-visible,
.page-qui-sommes-nous .about-cta-inner.is-about-visible {
	opacity: 1;
	transform: none;
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.page-qui-sommes-nous .about-stat,
	.page-qui-sommes-nous .about-promise-card,
	.page-qui-sommes-nous .about-highlight,
	.page-qui-sommes-nous .about-cta-inner {
		/* Si on affiche sans JS (ou si reduced motion), on ne bloque pas */
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}

/* Mobile : paragraphes « Qui sommes-nous » en cartouches + apparition lente depuis le bas */
@keyframes aboutParaRevealUp {
	from {
		opacity: 0;
		transform: translateY(2.25rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 768px) {
	/* Premier bloc intro hero : fond plus marqué */
	.page-qui-sommes-nous .about-founder-text {
		background: rgba(255, 255, 255, 0.96);
		border: 1px solid rgba(74, 144, 96, 0.22);
		border-radius: 14px;
		padding: 1.2rem 1.15rem;
		box-shadow: 0 10px 32px rgba(0, 0, 0, 0.07);
		color: var(--color-text);
		margin-top: 1.15rem;
	}

	.page-qui-sommes-nous .about-section .qui-section-inner > p,
	.page-qui-sommes-nous .about-mission-inner > p,
	.page-qui-sommes-nous .about-cta-inner > p {
		background: rgba(255, 255, 255, 0.82);
		border: 1px solid rgba(0, 0, 0, 0.07);
		border-radius: 12px;
		padding: 1.05rem 1.1rem;
		margin-top: 1rem;
		margin-bottom: 0;
		box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05);
		color: var(--color-text);
	}

	/* Premier paragraphe sous chaque h2 : un peu plus de présence */
	.page-qui-sommes-nous .about-section .qui-section-inner > p:first-of-type,
	.page-qui-sommes-nous .about-mission-inner > p:first-of-type,
	.page-qui-sommes-nous .about-cta-inner > p:first-of-type {
		background: rgba(255, 255, 255, 0.94);
		border-color: rgba(74, 144, 96, 0.18);
		margin-top: 1.2rem;
	}

	.page-qui-sommes-nous .about-section .qui-section-inner > p + p,
	.page-qui-sommes-nous .about-mission-inner > p + p {
		margin-top: 0.85rem;
	}

	.page-qui-sommes-nous .about-founder-text.is-about-para-hidden,
	.page-qui-sommes-nous .about-section .qui-section-inner > p.is-about-para-hidden,
	.page-qui-sommes-nous .about-mission-inner > p.is-about-para-hidden,
	.page-qui-sommes-nous .about-cta-inner > p.is-about-para-hidden {
		opacity: 0;
		transform: translateY(2.25rem);
		pointer-events: none;
	}

	.page-qui-sommes-nous .about-founder-text.is-about-para-visible,
	.page-qui-sommes-nous .about-section .qui-section-inner > p.is-about-para-visible,
	.page-qui-sommes-nous .about-mission-inner > p.is-about-para-visible,
	.page-qui-sommes-nous .about-cta-inner > p.is-about-para-visible {
		pointer-events: auto;
		animation: aboutParaRevealUp 1.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
		animation-delay: var(--about-para-delay, 0ms);
	}
}

@media (min-width: 769px) {
	.page-qui-sommes-nous .about-founder-text.is-about-para-hidden,
	.page-qui-sommes-nous .about-section .qui-section-inner > p.is-about-para-hidden,
	.page-qui-sommes-nous .about-mission-inner > p.is-about-para-hidden,
	.page-qui-sommes-nous .about-cta-inner > p.is-about-para-hidden,
	.page-qui-sommes-nous .about-founder-text.is-about-para-visible,
	.page-qui-sommes-nous .about-section .qui-section-inner > p.is-about-para-visible,
	.page-qui-sommes-nous .about-mission-inner > p.is-about-para-visible,
	.page-qui-sommes-nous .about-cta-inner > p.is-about-para-visible {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		pointer-events: auto !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-qui-sommes-nous .about-founder-text,
	.page-qui-sommes-nous .about-section .qui-section-inner > p,
	.page-qui-sommes-nous .about-mission-inner > p,
	.page-qui-sommes-nous .about-cta-inner > p {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		pointer-events: auto !important;
	}
}

/* Alternance fonds (Sections) */
.page-qui-sommes-nous .about-section.about-section-1 { background: #fff; }
.page-qui-sommes-nous .about-section.about-section-2 { background: #f7f7f7; }
.page-qui-sommes-nous .about-section.about-section-3 { background: #fff; }

.about-promise-section {
	background: #eaf6ec;
	color: var(--color-text);
}

.page-qui-sommes-nous .about-section h2 {
	margin-bottom: var(--space);
}

.page-qui-sommes-nous .about-highlight {
	margin-top: var(--space);
	padding: 1.6rem 1.6rem;
	background: rgba(74, 144, 96, 0.06);
	border: 1px solid rgba(74, 144, 96, 0.28);
	border-radius: 16px;
	color: #153d22;
	font-family: var(--font-heading);
	font-style: italic;
	line-height: 1.85;
	text-align: center;
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.08);
	position: relative;
	font-size: clamp(1.12rem, 1.85vw, 1.38rem);
	font-weight: 800;
}

.page-qui-sommes-nous .about-highlight::before {
	content: "\201C";
	position: absolute;
	top: -0.8rem;
	left: 1rem;
	font-size: 4rem;
	line-height: 1;
	color: rgba(74, 144, 96, 0.22);
	font-style: normal;
	pointer-events: none;
}

.page-qui-sommes-nous .about-highlight-quote {
	margin: 0;
	font-weight: inherit;
}

.page-qui-sommes-nous .about-highlight-author {
	display: block;
	margin-top: 1rem;
	font-family: var(--font-sans);
	font-style: normal;
	font-weight: 700;
	color: var(--color-dark);
	font-size: clamp(1rem, 1.6vw, 1.1rem);
}

@media (max-width: 900px) {
	.page-qui-sommes-nous .about-highlight {
		padding: 1.35rem 1.1rem;
		font-size: 1.05rem;
	}

	.page-qui-sommes-nous .about-highlight::before {
		top: -0.7rem;
		left: 0.85rem;
		font-size: 3.2rem;
	}
}

.about-mission-section {
	/* Même fond que le CTA (plus harmonieux) */
	background: #f3f5f4;
}

/* Sécurité : si un style plus ancien bloque le fond */
.page-qui-sommes-nous .about-mission-section {
	background: #f3f5f4 !important;
}

.about-mission-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

.about-mission-inner h2 {
	margin-bottom: var(--space);
}

.about-promise-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

.about-promise-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.95;
}

.about-promise-title {
	font-family: var(--font-heading) !important;
	font-size: 2.4rem;
	margin: 0 0 2rem;
	line-height: 1.1;
}

.about-promise-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.75rem;
}

.about-promise-card {
	background: #fff;
	border: 1px solid rgba(74, 144, 96, 0.18);
	border-radius: 16px;
	padding: 1.7rem 1.6rem;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.05);
}

.about-promise-card h3 {
	margin: 0 0 0.85rem;
	font-size: 1.25rem;
	font-weight: 800;
	font-family: var(--font-heading) !important;
	color: var(--color-dark);
}

.about-promise-card p {
	margin: 0;
	color: var(--color-text-muted);
	line-height: 1.65;
	/* Réduit la hauteur perçue des cartes */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 40ch;
	margin-left: auto;
	margin-right: auto;
}

.page-qui-sommes-nous .about-cta-final {
	background: #fff;
	text-align: center;
	border: 0;
	box-shadow: none;
}

.page-qui-sommes-nous .about-cta-inner {
	/* Carte CTA distincte, centrée */
	background: #fff;
	border: 1px solid rgba(74, 144, 96, 0.25);
	border-radius: 16px;
	padding: 3.2rem 2rem;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--color-text);
}

.page-qui-sommes-nous .about-cta-final h2 {
	margin: 0 0 0.75rem;
	font-size: 2rem;
	font-family: var(--font-heading) !important;
}

.page-qui-sommes-nous .about-cta-inner h2 {
	color: var(--color-dark);
}

.page-qui-sommes-nous .about-cta-final p {
	margin: 0 0 1.25rem;
	color: var(--color-text-muted);
	font-size: 1.05rem;
	line-height: 1.7;
}

.page-qui-sommes-nous .about-cta-inner p {
	color: var(--color-text-muted);
}

.page-qui-sommes-nous .about-cta-final-sub {
	margin-top: 1.25rem;
}

.page-qui-sommes-nous .about-cta-inner .btn.btn-cta-large {
	background: #fff !important;
	color: var(--color-dark) !important;
	border: 2px solid rgba(74, 144, 96, 0.9) !important;
}

.page-qui-sommes-nous .about-cta-inner .btn.btn-cta-large:hover {
	background: var(--color-dark) !important;
	color: #fff !important;
	border-color: var(--color-dark) !important;
	text-decoration: none;
}

.page-qui-sommes-nous .about-cta-final .btn-cta-large {
	padding: 1.25rem 3rem;
	font-size: 1.3rem;
	border-radius: 14px;
}

.page-qui-sommes-nous .about-cta-final .btn-cta-grow:hover {
	transform: none !important;
}

@media (max-width: 900px) {
	.page-qui-sommes-nous .about-founder-hero {
		grid-template-columns: 1fr;
		grid-template-areas:
			"image"
			"content";
		gap: 1.75rem;
		align-items: start;
	}

	.page-qui-sommes-nous .about-founder-image {
		max-width: 100%;
		justify-self: center;
		align-self: auto;
		height: auto;
		min-height: unset;
	}

	.page-qui-sommes-nous .about-founder-img {
		transform: none;
		object-position: center top;
	}

	.page-qui-sommes-nous .about-founder-content .page-title {
		font-size: 2.25rem;
		text-align: center;
	}

	.page-qui-sommes-nous .about-founder-text {
		text-align: center;
	}

	.page-qui-sommes-nous .about-founder-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.about-promise-cards {
		grid-template-columns: 1fr;
	}
}

.page-qui-sommes-nous .engagements-extended-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 2rem;
	box-shadow: var(--shadow);
}

.page-qui-sommes-nous .engagements-extended-card h3 {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-dark);
}

.page-qui-sommes-nous .engagements-extended-card p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 1rem;
	line-height: 1.8;
}

@media (max-width: 900px) {
	.page-qui-sommes-nous .engagements-extended-grid {
		grid-template-columns: 1fr;
	}
}

.page-qui-sommes-nous .about-hero-layout {
	display: flex;
	gap: var(--space-lg);
	align-items: flex-start;
	justify-content: space-between;
}

.page-qui-sommes-nous .about-hero-text {
	flex: 1;
	max-width: 720px;
}

.page-qui-sommes-nous .about-hero-subtitle {
	margin: 0.75rem 0 0;
	color: var(--color-text-muted);
	font-size: 1.05rem;
	line-height: 1.7;
}

.page-qui-sommes-nous .about-hero-image {
	flex: 0 0 min(420px, 40vw);
	max-width: 420px;
}

.page-qui-sommes-nous .about-hero-img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	display: block;
}

.page-qui-sommes-nous .about-main {
	max-width: 78ch;
	margin: var(--space-lg) auto 0;
}

.page-qui-sommes-nous .about-cta-final {
	/* Legacy block : on harmonise avec la nouvelle mise en page */
	margin-top: 0;
	background: #f3f5f4;
	border: 0;
	border-radius: 0;
	padding: 80px 0;
	text-align: center;
	box-shadow: none;
}

.page-qui-sommes-nous .about-cta-final h2 {
	margin: 0 0 0.75rem;
	font-size: 2rem;
}

.page-qui-sommes-nous .about-cta-final-sub {
	margin: 1.25rem 0 0;
	color: var(--color-text-muted);
}

.page-qui-sommes-nous .engagements-page-grid {
	margin-top: var(--space);
}

@media (max-width: 900px) {
	.page-qui-sommes-nous .about-hero-layout {
		flex-direction: column;
	}

	.page-qui-sommes-nous .about-hero-text,
	.page-qui-sommes-nous .about-hero-image {
		max-width: 100%;
		flex: 1 1 auto;
	}

	.page-qui-sommes-nous .about-cta-final {
		padding: 40px 0;
	}
}

.entry-content ul {
	padding-left: 1.5rem;
}

.entry-content h2 {
	font-size: 1.35rem;
	margin: 1.5em 0 0.75rem;
	color: var(--color-text);
	font-family: var(--font-heading) !important;
	line-height: 1.3;
}

.entry-content h2:first-child {
	margin-top: 0;
}

.entry-content p {
	margin: 0 0 1em;
}

.entry-content h3 {
	font-family: var(--font-heading) !important;
	color: var(--color-text) !important;
	line-height: 1.3;
	margin: 1.25em 0 0.75rem;
	font-size: 1.15rem;
}

/* Page prestation : titre centré */
.page-prestation .page-prestation-header {
	text-align: center;
	margin-bottom: var(--space-lg);
}

.page-prestation .page-prestation-title {
	font-size: 2.5rem;
	font-weight: 700;
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-heading) !important;
}

/* Layout 2 colonnes : gauche = galerie (1 grande + 3 petites), droite = descriptif */
.prestation-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: start;
	margin-top: var(--space-lg);
}

.prestation-layout .prestation-text-col:only-child {
	grid-column: 1 / -1;
}

@media (max-width: 768px) {
	.prestation-layout {
		grid-template-columns: 1fr;
	}
}

/* Colonne gauche : 1 grande image, en dessous 3 petites (même largeur que la grande) */
.prestation-gallery-col .prestation-gallery-main {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	margin-bottom: var(--space);
}

.prestation-gallery-col .prestation-gallery-main img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	max-height: 380px;
}

.prestation-gallery-col .prestation-gallery-main:hover {
	opacity: 0.95;
}

.prestation-gallery-col .prestation-gallery-arrow {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(74, 144, 96, 0.35);
	border-radius: 999px;
	background: #fff;
	color: var(--color-dark);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.45s ease, background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}

.prestation-gallery-col .prestation-gallery-arrow:hover {
	background: var(--color-dark);
	color: #fff;
	border-color: var(--color-dark);
	transform: translateY(-1px);
}

.prestation-gallery-col .prestation-gallery-main img {
	transition: transform 0.46s ease, opacity 0.46s ease;
}

.prestation-gallery-col.is-gallery-moving-left .prestation-gallery-main img {
	transform: translateX(-8px);
}

.prestation-gallery-col.is-gallery-moving-right .prestation-gallery-main img {
	transform: translateX(8px);
}

.prestation-gallery-col .prestation-gallery-main img.is-gallery-fading {
	opacity: 0.32;
}

.prestation-gallery-col .prestation-gallery-thumbs {
	display: grid;
	grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto;
	align-items: center;
	gap: var(--space);
}

.prestation-gallery-col .prestation-gallery-thumbs .prestation-gallery-arrow-prev {
	grid-column: 1;
}

.prestation-gallery-col .prestation-gallery-thumbs .prestation-gallery-arrow-next {
	grid-column: 5;
}

.prestation-gallery-col .prestation-gallery-thumbs a {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.prestation-gallery-col .prestation-gallery-thumbs a:hover {
	box-shadow: var(--shadow-hover);
}

.prestation-gallery-col .prestation-gallery-thumbs img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	display: block;
}

/* Parquet massif : vignettes supplémentaires cachées mais présentes pour navigation lightbox */
.prestation-gallery-col .prestation-gallery-extra-thumb {
	display: none !important;
}

/* Colonne droite : descriptif */
.prestation-text-col.prestation-detail {
	max-width: none;
}

.prestation-detail .prestation-section {
	margin-bottom: var(--space-lg);
}

.prestation-detail .prestation-section:last-child {
	margin-bottom: 0;
}

/* CTA inline (dans le contenu) pour la page prestation */
.page-prestation .prestation-inline-cta {
	background: var(--color-dark);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius);
	padding: 2.1rem 2rem;
	margin: var(--space-lg) 0;
	color: #fff;
	/* Fait "prendre" toute la largeur (2 colonnes) malgré le fait que le bloc soit dans la colonne texte */
	width: calc(200% + 2.5rem);
	margin-left: calc(-100% - 2.5rem);
	position: relative;
	z-index: 2;
}

@media (max-width: 900px) {
	.page-prestation .prestation-inline-cta {
		width: 100% !important;
		margin-left: 0 !important;
		box-sizing: border-box;
	}
}

.page-prestation .prestation-inline-cta p {
	margin: 0 0 1rem;
	color: #fff;
	line-height: 1.7;
}

.page-prestation .prestation-inline-cta a.btn {
	padding: 0.65rem 1.25rem;
}

/* Bouton : fond blanc, texte vert foncé */
.page-prestation .prestation-inline-cta a.btn-primary {
	background: #fff !important;
	color: var(--color-dark) !important;
	border: 2px solid rgba(74, 144, 96, 0.9) !important;
}

.page-prestation .prestation-inline-cta a.btn-primary:hover {
	background: var(--color-dark) !important;
	color: #fff !important;
	border-color: var(--color-dark) !important;
	text-decoration: none !important;
}

/* Prestation "parquet-massif" : mise en page moderne (scopée, sans toucher au design global) */
.prestation-parquet-massif-modern .parquet-modern {
	max-width: 1100px;
	margin: 0 auto;
	/* Evite un décalage horizontal : le parent '.container' gère déjà le padding */
	padding: 0;
}

.parquet-modern-sections .prestation-inline-cta {
	width: auto !important;
	margin-left: 0 !important;
	position: relative !important;
	left: auto !important;
	right: auto !important;
}

/* Ajustements scoppés : parquet-massif (alignement + hover tuiles + CTA) */
.page-prestation-parquet-massif .prestation-layout {
	max-width: 1100px;
	margin: 0 auto;
}

.page-prestation-parquet-massif .parquet-modern-sections .prestation-inline-cta {
	max-width: 760px;
	margin: 1.75rem auto 0 !important;
	padding: 1.5rem 1.25rem !important;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.page-prestation-parquet-massif .parquet-modern-sections .prestation-inline-cta p {
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.35;
	margin-bottom: 1.2rem;
}

.page-prestation-parquet-massif .parquet-modern-sections .prestation-inline-cta a.btn {
	margin-left: auto;
	margin-right: auto;
}

.page-prestation-parquet-massif .parquet-modern-subtitle {
	font-family: var(--font-heading) !important;
	font-weight: 900;
	color: var(--color-dark) !important;
	font-size: 2.05rem;
	line-height: 1.15;
	background: rgba(74, 144, 96, 0.08);
	border: 1px solid rgba(74, 144, 96, 0.18);
	padding: 0.7rem 1.05rem;
	border-radius: 14px;
	display: inline-block;
}

.page-prestation-parquet-massif .parquet-card {
	transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}

.page-prestation-parquet-massif .parquet-card:hover {
	transform: translateY(-3px) scale(1.03);
	background: rgba(74, 144, 96, 0.06);
	border-color: rgba(74, 144, 96, 0.28);
}

.prestation-parquet-massif-modern .parquet-modern-intro p {
	margin: 0 0 1rem;
	color: var(--color-text-muted);
	line-height: 1.85;
	font-size: 1.05rem;
}

.prestation-parquet-massif-modern .parquet-modern-subtitle {
	margin: 0 0 1.25rem;
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--color-text);
}

/* Override quand la page est scopee parquet-massif (pour que la taille soit vraiment > chapitre suivant) */
.page-prestation-parquet-massif .prestation-parquet-massif-modern .parquet-modern-subtitle {
	font-size: 2.05rem;
	color: var(--color-dark);
	background: rgba(74, 144, 96, 0.08);
	border: 1px solid rgba(74, 144, 96, 0.18);
	padding: 0.7rem 1.05rem;
	border-radius: 14px;
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	/* Plus d'espace entre images et titre */
	margin: 3rem auto 1.6rem;
}

@media (max-width: 760px) {
	.page-prestation-parquet-massif .prestation-parquet-massif-modern .parquet-modern-subtitle {
		margin-top: 2rem;
	}
}

.prestation-parquet-massif-modern .parquet-modern-block {
	margin: 3rem 0;
}

.prestation-parquet-massif-modern .parquet-modern-title {
	margin: 0 0 1.35rem;
	font-family: var(--font-heading) !important;
	font-size: 1.75rem;
	color: var(--color-text);
	line-height: 1.25;
	text-align: left;
}

.prestation-parquet-massif-modern .parquet-types-grid,
.prestation-parquet-massif-modern .parquet-finitions-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.prestation-parquet-massif-modern .parquet-card {
	background: linear-gradient(180deg, rgba(74, 144, 96, 0.055), rgba(255, 255, 255, 0.94));
	border: 1px solid rgba(74, 144, 96, 0.16);
	border-radius: 14px;
	padding: 1.35rem 1.3rem;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
}

/* Apparition des tuiles sections parquet (desktop + mobile) */
.page-prestation-parquet-massif .parquet-card.is-parquet-stagger-card {
	opacity: 0;
	transition: opacity 1.75s ease, transform 1.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-prestation-parquet-massif .parquet-card.is-parquet-stagger-card.is-parquet-from-left {
	transform: translateX(-34px);
}

.page-prestation-parquet-massif .parquet-card.is-parquet-stagger-card.is-parquet-from-right {
	transform: translateX(34px);
}

.page-prestation-parquet-massif .parquet-card.is-parquet-stagger-card.is-parquet-stagger-visible {
	opacity: 1;
	transform: translateX(0);
}

@media (max-width: 760px) {
	.page-prestation-parquet-massif .parquet-card.is-parquet-stagger-card.is-parquet-from-left {
		transform: translateX(-28px);
	}

	.page-prestation-parquet-massif .parquet-card.is-parquet-stagger-card.is-parquet-from-right {
		transform: translateX(28px);
	}

	.page-prestation-parquet-massif .parquet-card.is-parquet-stagger-card {
		transition: opacity 1.9s ease, transform 1.9s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.page-prestation-parquet-massif .parquet-card.is-parquet-stagger-card.is-parquet-stagger-visible {
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-prestation-parquet-massif .parquet-card.is-parquet-stagger-card,
	.page-prestation-parquet-massif .parquet-card.is-parquet-stagger-card.is-parquet-stagger-visible {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

.prestation-parquet-massif-modern .parquet-card-title {
	margin: 0 0 0.75rem;
	font-size: 1.15rem;
	color: var(--color-text);
	font-family: var(--font-heading) !important;
	line-height: 1.25;
}

.prestation-parquet-massif-modern .parquet-card-text {
	margin: 0;
	color: var(--color-text-muted);
	line-height: 1.75;
	/* Réduit l'effet "long texte" visuellement */
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.prestation-parquet-massif-modern .parquet-card-ideal {
	margin-top: 1rem;
	font-weight: 800;
	color: var(--color-dark);
	line-height: 1.55;
}

.prestation-parquet-massif-modern .parquet-modern-lead {
	margin: 0 0 1.35rem;
	color: var(--color-text-muted);
	line-height: 1.8;
	font-size: 1.05rem;
}

.prestation-parquet-massif-modern .parquet-editorial {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: 16px;
	padding: 1.8rem 1.6rem;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.04);
}

.prestation-parquet-massif-modern .parquet-editorial-intro {
	margin: 0 0 1rem;
	color: var(--color-text-muted);
	line-height: 1.8;
	font-size: 1.05rem;
	font-weight: 700;
}

.prestation-parquet-massif-modern .parquet-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.9rem;
}

.prestation-parquet-massif-modern .parquet-checklist li {
	position: relative;
	padding-left: 1.7rem;
	color: var(--color-text-muted);
	line-height: 1.8;
	font-size: 1.02rem;
	/* Prépare une animation "in" sur toute la phrase (pas juste le ✓) */
	opacity: 0;
	transform: translateX(-10px);
}

.prestation-parquet-massif-modern .parquet-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.15rem;
	color: var(--color-dark);
	font-weight: 900;
	/* Par défaut : on prépare l'animation "in" */
	opacity: 0;
	transform: translateX(-10px);
}

@keyframes parquetChecklistArrowIn {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Déclenché via JS quand la checklist devient visible */
.page-prestation-parquet-massif .parquet-checklist.is-parquet-checklist-visible li {
	animation: parquetChecklistArrowIn 1.65s ease-out both;
}

.page-prestation-parquet-massif .parquet-checklist.is-parquet-checklist-visible li:nth-child(1) {
	animation-delay: 0ms;
}
.page-prestation-parquet-massif .parquet-checklist.is-parquet-checklist-visible li:nth-child(2) {
	animation-delay: 420ms;
}
.page-prestation-parquet-massif .parquet-checklist.is-parquet-checklist-visible li:nth-child(3) {
	animation-delay: 840ms;
}

.page-prestation-parquet-massif .parquet-checklist.is-parquet-checklist-visible li::before {
	animation: parquetChecklistArrowIn 1.65s ease-out both;
}

.page-prestation-parquet-massif .parquet-checklist.is-parquet-checklist-visible li:nth-child(1)::before {
	animation-delay: 0ms;
}
.page-prestation-parquet-massif .parquet-checklist.is-parquet-checklist-visible li:nth-child(2)::before {
	animation-delay: 420ms;
}
.page-prestation-parquet-massif .parquet-checklist.is-parquet-checklist-visible li:nth-child(3)::before {
	animation-delay: 840ms;
}

@media (prefers-reduced-motion: reduce) {
	.page-prestation-parquet-massif .parquet-checklist li::before {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	.page-prestation-parquet-massif .parquet-checklist li {
		opacity: 1 !important;
		transform: none !important;
	}
}

@media (max-width: 760px) {
	.prestation-gallery-col .prestation-gallery-thumbs {
		gap: 0.6rem;
	}

	.prestation-gallery-col .prestation-gallery-arrow {
		width: 38px;
		height: 38px;
		font-size: 1.05rem;
	}

	.prestation-parquet-massif-modern .parquet-types-grid,
	.prestation-parquet-massif-modern .parquet-finitions-grid {
		grid-template-columns: 1fr;
	}

	.prestation-parquet-massif-modern .parquet-modern-block {
		margin: 2.25rem 0;
	}

	.prestation-parquet-massif-modern .parquet-modern-title {
		font-size: 1.45rem;
		text-align: center;
	}

	.prestation-parquet-massif-modern .parquet-editorial {
		padding: 1.5rem 1.2rem;
	}
}

@media (max-width: 768px) {
	.page-prestation .prestation-inline-cta {
		width: auto;
		margin-left: 0;
	}
}

/* CTA en bas : texte (1re ligne en gras, grande, effet) + bouton */
.prestation-cta {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--color-border);
	text-align: center;
}

.prestation-cta-text {
	max-width: 36ch;
	margin: 0 auto 1.5rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.prestation-cta-lead {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-dark);
	margin-bottom: 0.35em;
	letter-spacing: 0.02em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.prestation-cta .prestation-cta-devis {
	display: inline-block;
	padding: 1rem 2rem;
	font-size: 1.15rem;
	font-weight: 700;
	background: var(--color-dark);
	color: #fff !important;
	border: 2px solid var(--color-dark);
	border-radius: var(--radius);
	transition: transform 0.35s ease;
}

.prestation-cta .prestation-cta-devis:hover {
	transform: scale(1.25);
	text-decoration: none;
	color: #fff !important;
	background: var(--color-dark);
	border-color: var(--color-dark);
}

/* Galerie (ancien layout en secours si utilisé ailleurs) */
.prestation-gallery-section {
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.prestation-gallery-main {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.prestation-gallery-main img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	max-height: 420px;
}

.prestation-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--space);
}

.prestation-gallery-thumbs a {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.prestation-gallery-thumbs a:hover {
	box-shadow: var(--shadow-hover);
}

.prestation-gallery-thumbs img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

/* Archive projets */
.projets-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-lg);
}

.projet-card {
	margin: 0;
}

.projet-card a {
	color: var(--color-text);
	text-decoration: none;
	display: block;
}

.projet-card a:hover {
	text-decoration: none;
}

.projet-card img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: var(--radius);
}

.projet-card-content {
	padding: 1rem 0;
}

.projet-card-title {
	margin: 0 0 0.25rem;
	font-size: 1.15rem;
}

.projet-card-meta,
.projet-card-type {
	margin: 0;
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

/* Pagination */
.pagination,
.nav-links {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var(--space-lg);
}

.pagination a,
.pagination span,
.nav-links a,
.nav-links span {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	text-decoration: none;
}

.pagination a:hover,
.nav-links a:hover {
	background: var(--color-bg-alt);
}

/* Single projet */
.projet-header {
	margin-bottom: var(--space);
}

.projet-title {
	margin: 0 0 0.5rem;
	font-size: 2rem;
}

.projet-meta {
	display: flex;
	gap: 1rem;
	font-size: 0.95rem;
	color: var(--color-text-muted);
}

.projet-featured {
	margin-bottom: var(--space-lg);
	border-radius: var(--radius);
	overflow: hidden;
}

.projet-featured img {
	width: 100%;
	height: auto;
}

.projet-gallery {
	margin-top: var(--space-lg);
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space);
}

.gallery-item {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
}

.gallery-item img {
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.projet-cta {
	text-align: center;
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

/* Single Projet - version moderne (single-projet.php) */
.projet-modern .projet-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

.projet-modern .projet-section {
	width: 100%;
	padding: 80px 0;
}

.projet-modern .projet-hero {
	padding: 96px 0 72px;
	text-align: center;
	background: #fff;
}

.projet-modern .projet-hero-title {
	margin: 0;
	font-family: var(--font-heading) !important;
	font-weight: 700;
	font-size: clamp(2.2rem, 5vw, 3.25rem);
	letter-spacing: 0.01em;
}

.projet-modern .projet-hero-subtitle {
	margin: 1.1rem 0 0;
	font-size: 1.1rem;
	color: var(--color-text-muted);
	font-weight: 500;
}

.projet-modern .projet-hero-accroche {
	max-width: 720px;
	margin: 1.05rem auto 0;
	color: var(--color-text);
	font-size: 1.05rem;
	line-height: 1.7;
	font-weight: 600;
	text-align: center;
}

.projet-modern .projet-intro-text p {
	margin: 0 0 1.05rem;
}

.projet-modern .projet-intro-text p:last-child {
	margin-bottom: 0;
}

.projet-modern .projet-intro-context {
	margin: 0 0 1.1rem;
	color: var(--color-text-muted);
	font-weight: 600;
	line-height: 1.7;
}

.projet-modern .projet-hero-intro {
	max-width: 800px;
	margin: 2.15rem auto 0;
	text-align: left;
	color: var(--color-text-muted);
	font-size: 1.05rem;
	line-height: 1.75;
}

.projet-modern .projet-hero-intro p {
	margin: 0 0 1.05rem;
}

.projet-modern .projet-hero-intro p:last-child {
	margin-bottom: 0;
}

.projet-modern .projet-intro-grid {
	display: grid;
	grid-template-columns: 1fr 0.95fr;
	gap: 3rem;
	align-items: start;
	grid-template-areas: "text media";
}

.projet-modern .projet-intro-text {
	grid-area: text;
}

.projet-modern .projet-intro-media {
	grid-area: media;
}

.projet-modern .projet-main-image {
	width: 100%;
	max-width: 980px;
	aspect-ratio: 16 / 10;
	max-height: 720px;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
	display: block;
}

.projet-modern .projet-gallery-section {
	background: #f7f7f7;
}

.projet-modern .projet-infos-section {
	background: #f7f7f7;
}

.projet-modern .projet-infos-card {
	max-width: 900px;
	margin: 0 auto;
	background: #fff;
	border-radius: var(--radius);
	padding: 2rem;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.projet-modern .projet-infos-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 2rem;
}

.projet-modern .projet-infos-item {
	padding: 0.25rem 0;
}

.projet-modern .projet-infos-label {
	font-weight: 800;
	color: var(--color-dark);
	margin-bottom: 0.35rem;
}

.projet-modern .projet-infos-value {
	color: var(--color-text);
	line-height: 1.7;
}

/* Vidéo projet */
.projet-modern .projet-video-section {
	background: #f7f7f7;
}

.projet-modern .projet-video-title {
	font-family: var(--font-heading) !important;
	margin: 0 0 1.2rem;
	font-size: 2rem;
	color: var(--color-dark);
	text-align: center;
}

.projet-modern .projet-video-wrap {
	max-width: 900px;
	margin: 0 auto;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
	background: #fff;
}

.projet-modern .projet-video-iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	display: block;
	border: 0;
	border-radius: 0;
}

.projet-modern .projet-video-element {
	width: 100%;
	height: auto;
	display: block;
	border: 0;
	border-radius: 0;
}

/* Le <video> gère son propre ratio, mais on force le centrage/largeur propre */
.projet-modern .projet-video-wrap video {
	max-width: 100%;
}

.projet-modern .projet-avantages-section {
	background: #fff;
}

.projet-modern .projet-avantages-title {
	font-family: var(--font-heading) !important;
	margin: 0 0 1.2rem;
	font-size: 2rem;
	color: var(--color-dark);
	text-align: center;
}

.projet-modern .projet-avantages-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.85rem;
}

.projet-modern .projet-avantages-item {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 1rem 1.1rem;
	border-radius: 12px;
	background: rgba(74, 144, 96, 0.06);
	border: 1px solid rgba(74, 144, 96, 0.18);
}

.projet-modern .projet-avantages-check {
	color: var(--color-dark);
	font-weight: 800;
	line-height: 1.4;
	margin-top: 0.1rem;
}

.projet-modern .projet-avantages-text {
	color: var(--color-text-muted);
	line-height: 1.7;
}

.projet-modern .projet-gallery-title {
	font-family: var(--font-heading) !important;
	margin: 0 0 1.2rem;
	font-size: 2rem;
	color: var(--color-dark);
	text-align: center;
}

.projet-modern .projet-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
}

.projet-modern .projet-gallery-item {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
	background: #fff;
}

/* Carrousel galerie projet (3 visuels max desktop / 1 mobile) */
.projet-modern .projet-gallery-carousel {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
}

.projet-modern .projet-gallery-viewport {
	overflow-x: auto;
	scrollbar-width: none; /* Firefox */
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding-bottom: 6px;
}

.projet-modern .projet-gallery-viewport::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

.projet-modern .projet-gallery-track {
	display: flex;
	gap: var(--space);
}

.projet-modern .projet-gallery-slide {
	flex: 0 0 calc((100% - (2 * var(--space))) / 3);
	scroll-snap-align: start;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
	background: #fff;
	display: block;
}

.projet-modern .projet-gallery-slide img {
	width: 100%;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.projet-modern .projet-gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: rgba(255, 255, 255, 0.88);
	color: var(--color-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.projet-modern .projet-gallery-arrow:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.projet-modern .projet-gallery-arrow.projet-gallery-arrow-prev {
	left: 0.75rem;
}

.projet-modern .projet-gallery-arrow.projet-gallery-arrow-next {
	right: 0.75rem;
}

.projet-modern .projet-gallery-item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.projet-modern .projet-travaux-section {
	background: #fff;
}

.projet-modern .projet-travaux-title {
	font-family: var(--font-heading) !important;
	margin: 0 0 1.2rem;
	font-size: 2rem;
	color: var(--color-dark);
	text-align: center;
}

.projet-modern .projet-travaux-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.projet-modern .projet-travaux-item {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 1rem 1.1rem;
	border-radius: 12px;
	background: rgba(74, 144, 96, 0.06);
	border: 1px solid rgba(74, 144, 96, 0.18);
}

/* Animation légère des tuiles projet (ajoutée via JS), sans filtre flou (coût GPU) */
.projet-modern .projet-tile-anim {
	opacity: 0;
	transform: translate3d(var(--projet-tiles-x, 0px), var(--projet-tiles-y, 12px), 0) scale(var(--projet-tiles-scale, 0.99));
	transition:
		opacity 0.55s ease,
		transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
	transition-delay: var(--projet-tiles-delay, 0ms);
}

.projet-modern .projet-tile-anim.is-projet-tile-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.projet-modern .projet-travaux-check {
	color: var(--color-dark);
	font-weight: 800;
	line-height: 1.4;
	margin-top: 0.1rem;
}

.projet-modern .projet-travaux-text {
	color: var(--color-text-muted);
	line-height: 1.7;
}

.projet-modern .projet-explication-section {
	background: rgba(74, 144, 96, 0.08);
}

.projet-modern .projet-explication-title {
	font-family: var(--font-heading) !important;
	margin: 0 0 1.1rem;
	font-size: 2rem;
	color: var(--color-dark);
	text-align: center;
}

.projet-modern .projet-explication-content {
	max-width: 78ch;
	margin: 0 auto;
	color: var(--color-text);
}

.projet-modern .projet-cta-final {
	background: #f7f7f7;
}

.projet-modern .projet-cta-wrap {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	background: var(--color-dark);
	color: #fff;
	padding: 2.6rem 2rem;
	border-radius: var(--radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.projet-modern .projet-cta-title {
	margin: 0 0 1rem;
	font-family: var(--font-heading) !important;
	font-style: italic;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.1;
	font-size: clamp(1.85rem, 3.2vw, 2.7rem);
	color: #fff;
}

.projet-modern .projet-cta-sub {
	margin: 0 0 1.75rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.05rem;
	line-height: 1.7;
}

.projet-modern .projet-cta-intro {
	margin: 0 0 1.1rem;
	color: rgba(255, 255, 255, 0.95);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.projet-modern .projet-cta-buttons {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.projet-modern .projet-cta-buttons .btn.btn-cta-large {
	display: inline-block !important;
	width: auto !important;
	margin: 0 auto;
	padding: 1rem 2.5rem !important;
	font-size: 1.25rem !important;
	border: 2px solid #fff !important;
	background: #fff !important;
	color: var(--color-dark) !important;
	border-radius: var(--radius);
	transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.projet-modern .projet-cta-buttons .btn.btn-cta-large:hover {
	background: transparent !important;
	color: #fff !important;
	border-color: #fff !important;
	text-decoration: none !important;
}

.projet-modern .projet-cta-wrap {
	/* ancienne définition conservée uniquement si un override précédent existait */
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

.projet-modern .projet-cta-text {
	margin: 0 0 1.25rem;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--color-text);
}

body:has(article.single-projet.projet-modern) {
	background: #f7f7f7;
}

body:has(article.single-projet.projet-modern) .site-footer {
	background: #f7f7f7;
	margin-top: 0;
}

/* Variante robuste sans :has() (classes WP standard) */
body.single-projet {
	background: #f7f7f7;
}

body.single-projet .site-footer {
	background: #f7f7f7;
	margin-top: 0;
}

.projet-modern .projet-cta-btn {
	padding: 1.1rem 2.8rem;
	font-size: 1.25rem;
	border-radius: 14px;
}

@media (max-width: 760px) {
	.projet-modern .projet-section {
		padding: 40px 0;
	}

	.projet-modern .projet-hero {
		padding: 72px 0 48px;
	}

	.projet-modern .projet-intro-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"media"
			"text";
		gap: 1.75rem;
	}

	.projet-modern .projet-main-image {
		max-width: none;
		max-height: 520px;
	}

	.projet-modern .projet-hero-intro {
		margin-top: 1.55rem;
		font-size: 1.02rem;
	}

	.projet-modern .projet-gallery-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.projet-modern .projet-gallery-carousel {
		padding: 0 44px; /* pour laisser de la place aux flèches */
	}

	.projet-modern .projet-infos-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.projet-modern .projet-gallery-track {
		gap: 1rem;
	}

	.projet-modern .projet-gallery-slide {
		flex: 0 0 100%;
	}

	.projet-modern .projet-gallery-arrow.projet-gallery-arrow-prev {
		left: 0.5rem;
	}

	.projet-modern .projet-gallery-arrow.projet-gallery-arrow-next {
		right: 0.5rem;
	}

	.projet-modern .projet-explication-content {
		max-width: 100%;
	}

	.projet-modern .projet-avantages-list {
		grid-template-columns: 1fr;
	}
}

/* Contact form */
.contact-intro {
	margin-bottom: 1.5rem;
}

.contact-form {
	max-width: 560px;
}

.form-row {
	margin-bottom: 1rem;
}

.form-row label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 500;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row textarea {
	width: 100%;
	padding: 0.6rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 1rem;
}

.form-row-hp {
	position: absolute;
	left: -9999px;
}

.contact-message {
	padding: 1rem;
	border-radius: var(--radius);
	margin-bottom: 1.5rem;
}

.contact-success {
	background: #c6f6d5;
	color: #22543d;
}

.contact-error {
	background: #fed7d7;
	color: #742a2a;
}

/* Footer : même fond et verts que la barre du menu (header) */
.site-footer {
	background: #f3f4f6;
	color: var(--color-text);
	padding: var(--space-lg) 0 var(--space);
	margin-top: var(--space-lg);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Page d'accueil : supprimer le petit gap blanc entre la dernière section et le footer */
body.home .site-footer {
	margin-top: 0;
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-lg);
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--space);
}

.footer-title {
	font-size: 1rem;
	margin: 0 0 0.75rem;
	color: #1e4d2e;
}

.footer-col,
.footer-col p {
	color: #1e4d2e;
}

.footer-col a {
	color: #1e4d2e;
}

.footer-col a:hover {
	color: #153d22;
	text-decoration: underline;
}

.footer-bottom {
	text-align: center;
	margin-top: var(--space-lg);
	padding-top: var(--space);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 0.9rem;
	opacity: 0.95;
	color: #1e4d2e;
}

.footer-bottom .footer-copyright {
	margin: 0 0 0.25rem;
	color: #1e4d2e;
}

.footer-bottom .footer-credits {
	margin: 0;
	font-size: 0.85rem;
	color: #1e4d2e;
}

.footer-credits a {
	color: #1e4d2e;
	text-decoration: underline;
}

.footer-credits a:hover {
	color: #153d22;
}

/* Modale consentement cookies : centrée, overlay, apparaît au chargement */
.cookie-consent {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.cookie-consent.is-visible {
	opacity: 1;
	visibility: visible;
}

.cookie-consent.is-hidden {
	display: none;
}

.cookie-consent-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.cookie-consent-box {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 2rem;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.cookie-consent-title {
	margin: 0 0 1rem;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--color-dark);
}

.cookie-consent-text {
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--color-text);
}

.cookie-consent-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.cookie-consent-actions .btn,
.cookie-consent-actions .cookie-consent-preferences {
	margin: 0;
	padding: 0.65rem 1.25rem;
	font-size: 0.9rem;
	text-decoration: none;
}

.cookie-consent-actions .btn-primary {
	background: var(--color-dark);
	color: #fff !important;
	border: 2px solid var(--color-dark);
}

.cookie-consent-actions .btn-primary:hover {
	background: #3d7a4d;
	border-color: #3d7a4d;
	text-decoration: none;
}

.cookie-consent-actions .btn-secondary,
.cookie-consent-actions .cookie-consent-preferences {
	background: #fff;
	color: var(--color-text);
	border: 2px solid var(--color-border);
}

.cookie-consent-actions .btn-secondary:hover,
.cookie-consent-actions .cookie-consent-preferences:hover {
	background: #f5f5f5;
	border-color: var(--color-dark);
	color: var(--color-dark);
	text-decoration: none;
}

.cookie-consent-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--color-border);
}

.cookie-consent-link {
	font-size: 0.9rem;
	color: var(--color-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cookie-consent-link:hover {
	text-decoration: none;
	opacity: 0.85;
}

/* Mobile */
@media (max-width: 768px) {
	/* Barre toujours lisible (plus de traits blancs sur fond clair) */
	.site-header {
		background: #f0f7f2 !important;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	/* Icône burger : traits noirs */
	.site-header .menu-toggle span,
	.site-header.is-scrolled .menu-toggle span {
		background: #1a1a1a !important;
	}

	/* Liens navigation (y compris menu déplié) : texte noir */
	.site-header .main-nav .nav-menu > li > a,
	.site-header .main-nav.is-open .nav-menu > li > a,
	.site-header .main-nav.is-open .sub-menu a {
		color: #1a1a1a !important;
		text-shadow: none;
	}

	.site-header .main-nav .nav-menu > li > a:hover,
	.site-header .main-nav.is-open a:hover {
		color: #000 !important;
	}

	/* Nom en texte si pas d’image : noir sur mobile (plus de blanc) */
	.site-header:not(.is-scrolled) .site-logo .logo-text,
	.site-header.is-scrolled .site-logo .logo-text {
		color: #1a1a1a !important;
		text-shadow: none;
	}

	/* Flex : deux espaces égaux logo ⟷ burger ⟷ Contact (évite 1fr qui écrase tout à gauche) */
	.header-inner {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 0;
		padding-left: max(var(--space), env(safe-area-inset-left, 0));
		padding-right: max(var(--space), env(safe-area-inset-right, 0));
	}

	.header-center {
		flex: 0 1 auto;
		min-width: 0;
		overflow: visible;
		justify-self: unset;
	}

	.header-center .site-logo {
		min-width: 2.5rem;
		-webkit-tap-highlight-color: transparent;
	}

	.header-left {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		justify-self: unset;
	}

	.header-right {
		flex: 0 0 auto;
		justify-self: unset;
	}

	.site-logo img,
	.site-logo .logo-img,
	.site-logo .logo-img-custom,
	.header-center .custom-logo-link img {
		max-height: 64px;
		max-width: min(260px, 70vw);
		width: auto;
		height: auto;
		object-fit: contain;
	}

	.header-right .header-phone,
	.header-right .header-email {
		display: none;
	}

	.menu-toggle {
		display: block;
	}

	.main-nav {
		display: none;
	}

	.main-nav.is-open .nav-menu {
		flex-direction: column;
		align-items: stretch;
	}

	.main-nav.is-open .nav-menu > li {
		border-bottom: 1px solid var(--color-border);
	}

	.main-nav.is-open .nav-menu > li:last-child {
		border-bottom: 0;
	}

	.main-nav.is-open .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		border-radius: 0;
		background: var(--color-bg-alt);
		padding-left: 1rem;
		margin-bottom: 0.5rem;
	}

	.main-nav.is-open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-bg);
		padding: var(--space);
		border-bottom: 1px solid var(--color-border);
		z-index: 150;
	}

	/* Liste des articles (template index.php) */
	.container.page-content > .page-title {
		font-size: clamp(1.35rem, 5.5vw, 1.9rem);
		line-height: 1.25;
		margin-bottom: var(--space);
	}

	.container.page-content article {
		padding: 1.1rem 0;
		border-bottom: 1px solid var(--color-border);
	}

	.container.page-content article:last-of-type {
		border-bottom: 0;
	}

	.container.page-content article header h2 {
		font-size: 1.12rem;
		line-height: 1.3;
		margin: 0 0 0.45rem;
	}

	.container.page-content article header h2 a {
		color: var(--color-text);
		text-decoration: none;
	}

	.container.page-content article .entry-content {
		font-size: 0.95rem;
		color: var(--color-text-muted);
		line-height: 1.55;
	}

	.site-header .btn.btn-contact {
		padding: 0.45rem 0.75rem;
		font-size: 0.88rem;
		white-space: nowrap;
	}
}

/* Lightbox : image centrée, croix à droite, bouton Fermer en bas */
.lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 2rem;
	box-sizing: border-box;
}

.lightbox-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	cursor: default;
	max-width: 100%;
	position: relative;
	padding-left: 4.25rem;
	padding-right: 4.25rem;
}

.lightbox-image {
	max-width: 90vw;
	max-height: 75vh;
	object-fit: contain;
	cursor: default;
	border-radius: var(--radius);
}

.lightbox-overlay img {
	/* fallback si certaines images n'ont pas la class lightbox-image */
	max-width: 90vw;
	max-height: 75vh;
	object-fit: contain;
	cursor: default;
	border-radius: var(--radius);
}

.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.7rem;
	line-height: 1;
	transition: background 0.2s, border-color 0.2s;
}

.lightbox-nav:hover {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.55);
}

.lightbox-nav-prev {
	left: 0.2rem;
}

.lightbox-nav-next {
	right: 0.2rem;
}

@media (max-width: 900px) {
	.lightbox-content {
		padding-left: 3.2rem;
		padding-right: 3.2rem;
	}

	.lightbox-nav {
		width: 44px;
		height: 44px;
		font-size: 1.45rem;
	}

	.lightbox-nav-prev {
		left: 0;
	}

	.lightbox-nav-next {
		right: 0;
	}
}

.lightbox-content .lightbox-btn-close {
	/* on garde le bouton "Fermer" bas */
	margin-top: 0.75rem;
}

.lightbox-overlay .lightbox-close {
	/* croix à droite */
	background: #fff;
	border: none;
}

.lightbox-overlay .lightbox-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: #fff;
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 1.75rem;
	cursor: pointer;
	line-height: 1;
	color: var(--color-text);
	transition: background 0.2s, color 0.2s;
}

.lightbox-overlay .lightbox-close:hover {
	background: var(--color-dark);
	color: #fff;
}

.lightbox-overlay .lightbox-btn-close {
	margin-top: 0.25rem;
	padding: 0.6rem 1.5rem;
	background: #fff;
	color: var(--color-text);
	border: 2px solid #fff;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.lightbox-overlay .lightbox-btn-close:hover {
	background: var(--color-dark);
	color: #fff;
	border-color: var(--color-dark);
}

/* Modal Contact / Devis : adaptée à l’écran + entrée douce du bas vers le haut */
.contact-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 max(var(--space), env(safe-area-inset-left, 0px)) env(safe-area-inset-bottom, 0px)
		max(var(--space), env(safe-area-inset-right, 0px));
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.contact-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.contact-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.contact-modal-box {
	position: relative;
	width: 100%;
	max-width: 520px;
	min-width: 0;
	/* Taille utile : tout le formulaire reste dans le viewport, scroll interne si besoin */
	max-height: min(92vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1rem));
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--color-bg);
	border-radius: var(--radius) var(--radius) 0 0;
	box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
	padding: 1.75rem 1.25rem max(1.25rem, env(safe-area-inset-bottom, 0px));
	margin: 0;
	/* Fermé : sous l’écran ; ouvert : à sa place */
	transform: translate3d(0, 110%, 0);
	opacity: 0;
	transition:
		transform 0.52s cubic-bezier(0.32, 0.72, 0, 1),
		opacity 0.38s ease;
}

.contact-modal.is-open .contact-modal-box {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}

/* Smartphone : carte centrée, marges visibles sur l’overlay, hauteur max = fenêtre */
@media (max-width: 599px) {
	.contact-modal {
		align-items: center;
		justify-content: center;
		padding: max(0.75rem, env(safe-area-inset-top, 0px))
			max(0.75rem, env(safe-area-inset-right, 0px))
			max(0.75rem, env(safe-area-inset-bottom, 0px))
			max(0.75rem, env(safe-area-inset-left, 0px));
		transition: opacity 0.75s ease, visibility 0.75s ease;
	}

	.contact-modal-overlay {
		transition: opacity 0.75s ease;
	}

	.contact-modal-box {
		width: 100%;
		max-width: min(520px, 100%);
		min-width: 0;
		min-height: 0;
		max-height: min(
			90vh,
			calc(
				100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1.75rem
			)
		);
		max-height: min(
			90dvh,
			calc(
				100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1.75rem
			)
		);
		border-radius: var(--radius);
		border: 1px solid var(--color-border);
		box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
		padding: 1.35rem 0.9rem max(1rem, env(safe-area-inset-bottom, 0px));
		box-sizing: border-box;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transition:
			transform 1.15s cubic-bezier(0.2, 0.85, 0.25, 1),
			opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.contact-modal-title {
		font-size: 1.2rem;
		line-height: 1.3;
		padding-right: 2.75rem;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.contact-modal-intro {
		font-size: 0.875rem;
		line-height: 1.45;
		margin-bottom: 1rem;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	.contact-modal-close {
		top: 0.65rem;
		right: 0.65rem;
	}

	.contact-modal .contact-form {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow: visible;
		padding-bottom: 0.25rem;
		box-sizing: border-box;
	}

	.contact-modal .form-row {
		max-width: 100%;
	}

	.contact-modal .form-row label {
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
		line-height: 1.35;
		font-size: 0.9rem;
	}

	.contact-modal .form-row input[type="text"],
	.contact-modal .form-row input[type="email"],
	.contact-modal .form-row input[type="tel"],
	.contact-modal .form-row input[type="number"],
	.contact-modal .form-row textarea {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
		font-size: 16px;
	}

	.contact-modal .form-row textarea {
		resize: vertical;
		min-height: 5.5rem;
	}

	.contact-modal .form-row.form-row-captcha {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.35rem;
	}

	.contact-modal .form-row.form-row-captcha input[type="number"] {
		width: 100%;
		max-width: 8rem;
	}

	.contact-modal .form-row.form-submit .btn {
		display: block;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
}

@media (min-width: 600px) {
	.contact-modal {
		align-items: center;
		padding: var(--space);
		padding-left: max(var(--space), env(safe-area-inset-left, 0px));
		padding-right: max(var(--space), env(safe-area-inset-right, 0px));
		padding-top: max(var(--space), env(safe-area-inset-top, 0px));
		padding-bottom: max(var(--space), env(safe-area-inset-bottom, 0px));
	}

	.contact-modal-box {
		border-radius: var(--radius);
		box-shadow: var(--shadow-hover);
		padding: 2rem;
		max-height: min(90vh, calc(100dvh - 2 * var(--space)));
	}

	/* Grand écran : léger glissement depuis le bas (pas hors écran à 110 %) */
	.contact-modal:not(.is-open) .contact-modal-box {
		transform: translate3d(0, 28px, 0);
		opacity: 0;
	}

	.contact-modal.is-open .contact-modal-box {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

.contact-modal .contact-form {
	max-width: none;
}

@media (prefers-reduced-motion: reduce) {
	.contact-modal {
		transition: opacity 0.15s ease, visibility 0.15s ease;
	}

	.contact-modal-box {
		transition: opacity 0.15s ease;
		transform: none !important;
	}

	.contact-modal:not(.is-open) .contact-modal-box {
		opacity: 0;
	}

	.contact-modal.is-open .contact-modal-box {
		opacity: 1;
	}
}

.contact-modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: none;
	background: transparent;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--color-text-muted);
	cursor: pointer;
	border-radius: var(--radius);
	transition: color 0.2s, background 0.2s;
}

.contact-modal-close:hover {
	color: var(--color-text);
	background: var(--color-bg-alt);
}

.contact-modal-title {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
}

.contact-modal-intro {
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
	color: var(--color-text-muted);
}

.contact-form .form-row-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form .form-row-captcha input[type="number"] {
	width: 4rem;
}

/* Message après envoi formulaire contact */
.contact-form-notice {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1rem var(--space);
	background: var(--color-dark);
	color: #fff;
	box-shadow: var(--shadow);
	transform: translateY(-100%);
	opacity: 0;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.contact-form-notice.is-visible {
	transform: translateY(0);
	opacity: 1;
}

.contact-form-notice.is-error {
	background: #c53030;
}

.contact-form-notice-text {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
}

.contact-form-notice-close {
	position: absolute;
	top: 50%;
	right: var(--space);
	transform: translateY(-50%);
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: none;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--radius);
	transition: background 0.2s;
}

.contact-form-notice-close:hover {
	background: rgba(255, 255, 255, 0.3);
}