/* =============================================================
   Entreprise Mathieu Morin — styles du thème enfant
   Chemins relatifs à /assets/css/ (images = ../images/).
   Tokens dans theme.json ; les px en dur viennent de la maquette.
   ============================================================= */

/* Inter est variable avec un axe opsz : Chrome le cale sur le font-size et
   resserre les gros titres. La maquette utilise l'optique par défaut (14). */
body {
	font-optical-sizing: none;
}

/* Pas de blockGap racine : chaque section gère son rythme */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Les paragraphes de la maquette portent un léger interlettrage (mesuré à
   +0,019em) ; libellés, listes et titres restent à 0.
   À propos en est exclu : son corps de 16,25px cale déjà sans. */
.hero__text,
.services__lead,
.service-card__text,
.panel-text {
	letter-spacing: 0.019em;
}

/* =============================================================
   Composants partagés
   Réutilisés par plusieurs sections — à modifier ici, pas dans une section.
   ============================================================= */

/* ---- Libellé doré (le héro utilise son propre nom de classe) ---- */

.hero__label,
.section-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--gold-soft);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.478em; /* mesuré sur l'export : 5,73px entre lettres */
	line-height: 1;
	text-transform: uppercase;
}

.hero__label::before,
.section-eyebrow::before {
	content: "";
	width: 2px;
	height: 13px;
	background: var(--wp--preset--color--gold-soft);
}

/* Libellé centré (variante de .section-eyebrow) */
.section-eyebrow--center {
	justify-content: center;
}

/* ---- Titres de section ----
   ⚠ .section-title--xl doit rester JUSTE APRÈS .section-title : même spécificité
   (0,1,0) et propriétés communes, seul l'ordre source les départage. */

/* Titre commun (44px maquette) */
.section-title {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--heading);
	font-size: clamp(2rem, 1.55rem + 1.2vw, 2.75rem);
	font-weight: 700;
	line-height: 1.25;
	text-wrap: wrap; /* neutralise le balance du parent — la maquette coupe au plus large */
}

/* Grands titres centrés (Projets, Pourquoi) : 48/60 et noir pur, pas le jeton heading */
.section-title--xl {
	font-size: clamp(2rem, 1.5rem + 1.33vw, 3rem);
	line-height: 1.25;
	color: var(--wp--custom--ink);
}

/* ---- Panneaux argumentaires (Design 1:249, Espaces 1:293) ---- */

/* Libellé : pastille ronde claire + texte blanc */
.panel-eyebrow {
	display: flex;
	align-items: center;
}

.panel-chip {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--custom--surface-soft);
}

.panel-chip::before {
	content: "";
	width: 28px;
	height: 28px;
	background-color: var(--wp--preset--color--gold);
}

.panel-chip--pencil-ruler::before {
	-webkit-mask: url("../images/icon-pencil-ruler.svg") no-repeat center / contain;
	        mask: url("../images/icon-pencil-ruler.svg") no-repeat center / contain;
}

.panel-chip--pen-tool::before {
	-webkit-mask: url("../images/icon-pen-tool.svg") no-repeat center / contain;
	        mask: url("../images/icon-pen-tool.svg") no-repeat center / contain;
}

.panel-eyebrow-text {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: 16px;
	font-weight: 600;
	line-height: 23px;
}

.panel-title.section-title {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--white);
}

.panel-text {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--white);
	font-size: 16px;
	line-height: 28px;
}

/* Coches : disque blanc + coche or par-dessus (deux tons, deux pseudo-éléments) */
ul.check-list {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

.check-list li {
	position: relative;
	margin: 0;
	padding-left: 26px;
	color: var(--wp--preset--color--white);
	font-size: 16px;
	line-height: 23px;
}

.check-list li + li {
	margin-top: var(--wp--preset--spacing--10);
}

.check-list li::before,
.check-list li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 2.5px;
	width: 18px;
	height: 18px;
}

.check-list li::before {
	border-radius: 50%;
	background: var(--wp--preset--color--white);
}

.check-list li::after {
	background-color: var(--wp--preset--color--gold);
	-webkit-mask: url("../images/icon-check.svg") no-repeat center / contain;
	        mask: url("../images/icon-check.svg") no-repeat center / contain;
}

/* Bouton blanc, texte or, flèche */
.panel-actions {
	margin: var(--wp--preset--spacing--30) 0 0;
}

.btn-quote .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	padding: 17px 33px;
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--gold);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 24px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
	transition: background-color 0.25s ease;
}

.btn-quote .wp-block-button__link::after {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../images/icon-arrow-right.svg") no-repeat center / contain;
	        mask: url("../images/icon-arrow-right.svg") no-repeat center / contain;
	transition: transform 0.25s ease;
}

.btn-quote .wp-block-button__link:hover,
.btn-quote .wp-block-button__link:focus-visible {
	background: var(--wp--custom--gold-tint);
	color: var(--wp--preset--color--gold);
}

.btn-quote .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

.design a:focus-visible,
.espaces a:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.btn-quote .wp-block-button__link,
	.btn-quote .wp-block-button__link::after {
		transition: none;
	}

	.btn-quote .wp-block-button__link:hover::after {
		transform: none;
	}
}

/* =============================================================
   Header — Figma 1:652
   ============================================================= */

.site-header {
	/* Tokens locaux pour des paliers responsive lisibles */
	--emm-nav-link: var(--wp--custom--text-on-dark);   /* gris maquette, pas blanc pur */
	--emm-logo-width: 326px;
	--emm-gap: 32px;

	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: 17px;
}

.site-header__inner {
	gap: var(--emm-gap);
}

/* ---- Logo ---- */

.site-header__logo {
	margin: 0;
	line-height: 0;
	flex-shrink: 0;
}

.site-header__logo a {
	display: block;
}

.site-header__logo img {
	display: block;
	width: var(--emm-logo-width);
	max-width: 100%;
	height: auto;
	aspect-ratio: 652 / 130; /* réserve la place avant chargement (pas de CLS) */
}

/* Nav + CTA : même rythme de 32px (Figma 1:655) */

.site-header__actions {
	gap: var(--emm-gap);
}

/* ---- Navigation ---- */

/* Le cœur double la classe (0,3,0) pour forcer color:inherit — on double aussi, plus l'ancêtre */
.site-header .site-header__nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--emm-nav-link);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.7px;
	line-height: 20px;
	text-decoration: none;
}

.site-header .site-header__nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.site-header .site-header__nav .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--gold-light);
	text-decoration: none;
}

/* ---- CTA téléphone (Figma 1:664) ---- */

.site-header .header-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	min-height: 41px;
	padding: 10px var(--wp--preset--spacing--30);
	border: 0;
	border-radius: 6px;
	color: var(--wp--preset--color--white);
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.35px;
	white-space: nowrap;
	/* Dégradé à 3 arrêts — c'est lui qui donne le reflet */
	background-image: linear-gradient(
		111.52deg,
		var(--wp--preset--color--gold) 17.87%,
		var(--wp--preset--color--gold-light) 106.03%,
		var(--wp--preset--color--gold) 119.49%
	);
	transition: filter 0.25s ease, transform 0.25s ease;
}

.site-header .header-cta .wp-block-button__link:hover,
.site-header .header-cta .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--white);
	filter: brightness(1.08);
	transform: translateY(-1px);
}

/* Icône en mask → suit la couleur du texte */
.site-header .header-cta .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../images/phone.svg") no-repeat center / contain;
	        mask: url("../images/phone.svg") no-repeat center / contain;
}

/* ---- Focus visible sur fond charbon ---- */

.site-header a:focus-visible,
.site-header button:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-light);
	outline-offset: 3px;
	border-radius: 2px;
}

/* =============================================================
   Header — responsive (pas de maquette mobile : paliers extrapolés)
   ============================================================= */
@media (max-width: 1279.98px) {
	.site-header {
		--emm-gap: 24px; /* palier de la progression 32 → 24 → 12, hors échelle */
		--emm-logo-width: 280px;
	}
}

/* Le cœur bascule le burger à 600px seulement — on remonte le seuil à 1024 */
@media (max-width: 1023.98px) {
	.site-header {
		--emm-logo-width: 240px;
	}

	.site-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.site-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Menu overlay : cibles plus grandes, plein contraste */
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
	font-size: 1.25rem;
	line-height: 1.4;
}

@media (max-width: 559.98px) {
	.site-header {
		--emm-logo-width: 200px;
		--emm-gap: 12px;
	}

	.site-header .header-cta .wp-block-button__link {
		padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	}
}

/* <480px : CTA icône seule, libellé gardé pour l'a11y, cible 44×44 */
@media (max-width: 479.98px) {
	.site-header .header-cta .wp-block-button__link {
		gap: 0;
		padding: 10px;
		font-size: 0;
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header .header-cta .wp-block-button__link {
		transition: none;
	}

	.site-header .header-cta .wp-block-button__link:hover,
	.site-header .header-cta .wp-block-button__link:focus-visible {
		transform: none;
	}
}

/* Centre le menu overlay (sinon il hérite de l'alignement droite du desktop) */
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
	justify-content: center;
	gap: 1.75rem;
}

/* C'est ce wrapper (flex-end hérité) qui collait la liste à droite */
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	align-items: center;
	padding-block: 2rem;
}

/* =============================================================
   Héro — Figma 1:166
   ============================================================= */

.hero {
	position: relative;
	min-height: clamp(560px, 43.6vw, 837px); /* 837px à 1920 */
	overflow: hidden;
}

/* Photo plein cadre, ancrée à droite comme la maquette */
.hero__bg {
	position: absolute;
	inset: 0;
	margin: 0;
	max-width: none; /* le layout contraint limite les figures à 720px */
	line-height: 0;
}

.hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%; /* même bande verticale que la maquette */
}

/* Voile : quasi opaque à gauche, photo visible à droite */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(16, 10, 12, 0.96) 0%,
		rgba(16, 10, 12, 0.82) 45%,
		rgba(16, 10, 12, 0.42) 66%,
		rgba(16, 10, 12, 0.18) 80%,
		rgba(16, 10, 12, 0.08) 100%
	);
}

.hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: clamp(56px, 7.5vw, 144px);
	padding-bottom: clamp(72px, 9.4vw, 180px);
}

.hero__content > * {
	max-width: 768px;
}



/* ---- Titre ---- */

.hero .hero__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	max-width: 710px; /* force les mêmes retours de ligne que la maquette */
	color: var(--wp--preset--color--white);
	font-size: clamp(2.25rem, 1.85rem + 1.6vw, 3.75rem); /* 60px à 1920 */
	font-weight: 700;
	line-height: 1.333;
}

/* ---- Paragraphe ---- */

.hero__text {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--white);
	font-size: 18px;
	line-height: 1.815; /* maquette : 32,7px */
}

/* ---- CTA ---- */

.hero__actions {
	gap: var(--wp--preset--spacing--20);
}

.hero .hero__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 58px;
	padding: 17px 30px;
	border: 0;
	border-radius: 6px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 24px;
	transition: filter 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

/* Bouton téléphone : même dégradé que le header */
.hero .hero__cta--phone .wp-block-button__link {
	color: var(--wp--preset--color--white);
	background-image: linear-gradient(
		111.52deg,
		var(--wp--preset--color--gold) 17.87%,
		var(--wp--preset--color--gold-light) 106.03%,
		var(--wp--preset--color--gold) 119.49%
	);
	box-shadow: 0 10px 24px rgba(193, 134, 44, 0.28);
}

.hero .hero__cta--phone .wp-block-button__link::before {
	content: "";
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("../images/phone.svg") no-repeat center / contain;
	        mask: url("../images/phone.svg") no-repeat center / contain;
}

/* Bouton services : contour doré */
.hero .hero__cta--services .wp-block-button__link {
	color: var(--wp--preset--color--gold-soft);
	background: transparent;
	border: 1px solid rgba(197, 160, 89, 0.55);
	padding: var(--wp--preset--spacing--20) 32px;
}

.hero .hero__cta--services .wp-block-button__link::after {
	content: "";
	width: 8px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("../images/chevron-right.svg") no-repeat center / contain;
	        mask: url("../images/chevron-right.svg") no-repeat center / contain;
}

.hero .hero__cta--phone .wp-block-button__link:hover,
.hero .hero__cta--phone .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--white);
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.hero .hero__cta--services .wp-block-button__link:hover,
.hero .hero__cta--services .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--gold-light);
	border-color: var(--wp--preset--color--gold-soft);
	background: rgba(197, 160, 89, 0.08);
}

.hero a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-light);
	outline-offset: 3px;
}

/* ---- Entrée en douceur ---- */

@media (prefers-reduced-motion: no-preference) {
	.hero__content {
		animation: hero-in 0.7s ease-out both;
	}

	@keyframes hero-in {
		from { opacity: 0; transform: translateY(24px); }
		to   { opacity: 1; transform: none; }
	}
}

/* ---- Responsive ---- */

@media (max-width: 781.98px) {
	.hero__text {
		font-size: 16px;
		margin-bottom: 32px;
	}
}

@media (max-width: 599.98px) {
	.hero::before {
		/* Plus sombre partout : le texte couvre presque tout l'écran */
		background: linear-gradient(
			90deg,
			rgba(16, 10, 12, 0.94) 0%,
			rgba(16, 10, 12, 0.86) 60%,
			rgba(16, 10, 12, 0.72) 100%
		);
	}

	.hero__actions,
	.hero .hero__cta {
		width: 100%;
	}

	.hero .hero__cta .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero .hero__cta .wp-block-button__link {
		transition: none;
	}

	.hero .hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* =============================================================
   À propos — Figma 1:191
   ============================================================= */

.apropos {
	padding-top: 80px;
	padding-bottom: 80px;
}



.apropos .section-eyebrow {
	margin-bottom: 23px; /* cadre libellé 20px maquette + 16 - 13 rendus */
}

.apropos__grid {
	display: grid;
	grid-template-columns: minmax(0, 672px) minmax(0, 557px);
	justify-content: space-between;
	gap: 53px;
}

/* Colonne texte décalée pour s'aligner sur la photo */
.apropos__body {
	padding-top: 69px;
}

.apropos__body > p:not(.section-eyebrow) {
	margin: 0 0 29px;
	font-size: 16.25px; /* force les mêmes retours de ligne que la maquette */
	line-height: 29.3px;
	color: var(--wp--preset--color--body);
}

/* ---- Accréditations ---- */

.apropos__body > p:last-of-type {
	margin-bottom: 0;
}

.apropos .apropos__creds {
	margin-top: var(--wp--preset--spacing--30); /* 16 maquette + 8 de retrait interne du bloc texte */
	padding-top: 33px;
	border-top: 1px solid var(--wp--custom--text-on-dark);
	gap: 32px;
}

.apropos__cred {
	position: relative;
	padding-left: 54px;
	min-height: 42px;
}

/* Cercle doré + icône en mask */
.apropos__cred::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(197, 160, 89, 0.45);
	border-radius: 50%;
}

.apropos__cred::after {
	content: "";
	position: absolute;
	left: 9px;
	top: 9px;
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--gold-soft);
}

.apropos__cred--shield::after {
	-webkit-mask: url("../images/icon-shield-check.svg") no-repeat center / contain;
	        mask: url("../images/icon-shield-check.svg") no-repeat center / contain;
}

.apropos__cred--file::after {
	-webkit-mask: url("../images/icon-file-text.svg") no-repeat center / contain;
	        mask: url("../images/icon-file-text.svg") no-repeat center / contain;
}

.apropos__cred--award::after {
	-webkit-mask: url("../images/icon-award.svg") no-repeat center / contain;
	        mask: url("../images/icon-award.svg") no-repeat center / contain;
}

.apropos__cred-label {
	margin: 5px 0 0;
	color: var(--wp--preset--color--heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 16px;
	text-transform: uppercase;
}

.apropos__cred-value {
	margin: 0;
	color: var(--wp--preset--color--body);
	font-size: 13px;
	line-height: 16px;
}

/* ---- Photo + badge ---- */

.apropos__media {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
}

.apropos__photo {
	margin: 0;
	line-height: 0;
}

.apropos__photo img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 969 / 1204; /* réserve la place avant chargement */
	object-fit: cover;
}

.apropos .apropos__badge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 112px;
	gap: var(--wp--preset--spacing--20);
	background: linear-gradient(90deg, var(--wp--preset--color--gold) 0%, rgba(193, 134, 44, 0) 100%);
}

.apropos__badge-number {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: 50px;
	font-weight: 700;
	line-height: 62px;
}

.apropos__badge-text {
	margin: 0;
	max-width: 110px;
	color: var(--wp--preset--color--white);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 20px;
	text-transform: uppercase;
}

/* ---- Responsive ---- */

@media (max-width: 1279.98px) {
	.apropos__grid {
		gap: var(--wp--preset--spacing--40);
	}
}

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

	.apropos__body {
		padding-top: 0;
	}

	/* Photo avant le texte en colonne */
	.apropos__media {
		order: -1;
		max-width: 557px;
	}
}

@media (max-width: 639.98px) {
	.apropos {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.apropos .apropos__creds {
		flex-direction: column;
		gap: 20px;
	}

	.apropos .apropos__badge {
		height: 88px;
	}

	.apropos__badge-number {
		font-size: 38px;
		line-height: 46px;
	}
}

/* =============================================================
   Services — Figma 1:233
   ============================================================= */

.services {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}



.services .section-eyebrow {
	margin-bottom: var(--wp--preset--spacing--20);
}

.services .section-title {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Le titre déborde de la colonne 768 dans la maquette — seule l'intro est bornée */
.services__lead {
	margin: var(--wp--preset--spacing--30) auto 0; /* 16 + 8 de retrait interne — les marges fusionnent avec le H2 */
	max-width: 768px;
	color: var(--wp--custom--text-muted);
	font-size: 16px;
	line-height: 28px;
}

/* ---- Grille 2×2 ---- */

.services .services__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 626px));
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
}

/* ---- Carte ---- */

.service-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 400px;
	border-radius: 12px;
	overflow: hidden;
}

.service-card__bg {
	position: absolute;
	inset: 0;
	margin: 0;
	max-width: none; /* le layout contraint plafonne les figures */
	line-height: 0;
}

.service-card__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.service-card:hover .service-card__bg img {
	transform: scale(1.04);
}

/* Voile : photo légèrement voilée en haut, presque noire en bas */
.service-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(4, 6, 10, 0.30) 0%,
		rgba(3, 4, 7, 0.72) 45%,
		rgba(0, 0, 0, 0.94) 100%
	);
}

.service-card__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 32px;
}

.service-card__head {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.service-card__chip {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	background: var(--wp--preset--color--gold);
}

.service-card__chip::before {
	content: "";
	width: 28px;
	height: 28px;
	background-color: var(--wp--preset--color--white);
}

.service-card__chip--utensils::before {
	-webkit-mask: url("../images/icon-utensils.svg") no-repeat center / contain;
	        mask: url("../images/icon-utensils.svg") no-repeat center / contain;
}

.service-card__chip--bath::before {
	-webkit-mask: url("../images/icon-bath.svg") no-repeat center / contain;
	        mask: url("../images/icon-bath.svg") no-repeat center / contain;
}

.service-card__chip--sofa::before {
	-webkit-mask: url("../images/icon-sofa.svg") no-repeat center / contain;
	        mask: url("../images/icon-sofa.svg") no-repeat center / contain;
}

.service-card__chip--hammer::before {
	-webkit-mask: url("../images/icon-hammer.svg") no-repeat center / contain;
	        mask: url("../images/icon-hammer.svg") no-repeat center / contain;
}

.service-card__label {
	margin: 0;
	color: var(--wp--preset--color--gold-soft);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 20px;
	text-transform: uppercase;
}

.service-card .service-card__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--white);
	font-size: 24px;
	font-weight: 700;
	line-height: 30px;
}

/* Description repliée (0fr), dépliée au survol ou au focus clavier */
.service-card .service-card__reveal {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.service-card__reveal-inner {
	overflow: hidden; /* min-size auto à 0, sinon 0fr ne replie pas */
	opacity: 0;
	transition: opacity 0.3s ease;
}

.service-card:hover .service-card__reveal,
.service-card:focus-within .service-card__reveal {
	grid-template-rows: 1fr;
}

.service-card:hover .service-card__reveal-inner,
.service-card:focus-within .service-card__reveal-inner {
	opacity: 1;
}

.service-card__text {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--custom--text-on-dark);
	font-size: 15px;
	line-height: 24px;
}

.service-card .service-card__bullets {
	margin: 6px 0 0;
	padding-left: 20px;
	color: var(--wp--custom--text-on-dark);
	font-size: 15px;
	line-height: 24.5px;
}

.service-card__bullets li {
	margin: 0;
}

.service-card .service-card__more {
	margin: 18px 0 0;
}

.service-card__more a {
	display: inline-flex;
	align-items: center;
	gap: 0; /* 8px une fois le libellé déplié */
	color: var(--wp--preset--color--gold-soft);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 20px;
	text-transform: uppercase;
	text-decoration: none;
	transition: gap 0.35s ease;
}

/* Seule la flèche reste visible au repos */
.service-card__more-label {
	display: inline-block;
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: max-width 0.35s ease, opacity 0.3s ease;
}

.service-card:hover .service-card__more a,
.service-card:focus-within .service-card__more a {
	gap: var(--wp--preset--spacing--10);
}

.service-card:hover .service-card__more-label,
.service-card:focus-within .service-card__more-label {
	max-width: 220px;
	opacity: 1;
}

.service-card__more a::after {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../images/icon-arrow-right.svg") no-repeat center / contain;
	        mask: url("../images/icon-arrow-right.svg") no-repeat center / contain;
	transition: transform 0.25s ease;
}

.service-card__more a:hover,
.service-card__more a:focus-visible {
	color: var(--wp--preset--color--gold-light);
	text-decoration: none;
}

.service-card__more a:hover::after {
	transform: translateX(4px);
}

.services a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* Sans survol (tactile) : tout est visible en permanence */
@media (hover: none) {
	.service-card .service-card__reveal {
		grid-template-rows: 1fr;
	}

	.service-card__reveal-inner {
		opacity: 1;
	}

	.service-card__more a {
		gap: var(--wp--preset--spacing--10);
	}

	.service-card__more-label {
		max-width: none;
		opacity: 1;
	}
}

/* ---- Responsive ---- */

@media (max-width: 1023.98px) {
	.services .services__grid {
		grid-template-columns: minmax(0, 626px);
	}
}

@media (max-width: 639.98px) {
	.services {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.services .services__grid {
		margin-top: var(--wp--preset--spacing--40);
	}

	.service-card__content {
		padding: var(--wp--preset--spacing--30);
	}
}

@media (prefers-reduced-motion: reduce) {
	.service-card__bg img,
	.service-card__more a::after,
	.service-card .service-card__reveal,
	.service-card__reveal-inner,
	.service-card__more a,
	.service-card__more-label {
		transition: none; /* la révélation reste, sans animation */
	}

	.service-card:hover .service-card__bg img {
		transform: none;
	}
}

/* =============================================================
   Design et élégance — Figma 1:249
   ============================================================= */

.design {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

/* Deux colonnes égales : (1280 - 48) / 2 = 616, la valeur de la maquette */
.design .design__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	align-items: center;
}

.design .panel-eyebrow {
	gap: var(--wp--preset--spacing--20);
}

/* ---- Curseur avant/après ---- */

.ba-slider {
	--ba: 50%;
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	aspect-ratio: 618 / 484;
}

.ba-slider__before,
.ba-slider__after img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* L'après est rogné à gauche par --ba */
.ba-slider__after {
	position: absolute;
	inset: 0;
	clip-path: inset(0 0 0 var(--ba));
}

.ba-slider__bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--ba);
	width: 3px;
	margin-left: -1.5px;
	background: var(--wp--preset--color--white);
	pointer-events: none;
}

.ba-slider__knob {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: var(--wp--preset--color--white) url("../images/ba-arrows.svg") no-repeat center / 24px 17px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.ba-slider__tag {
	position: absolute;
	bottom: 12px; /* 11.5 mesuré — plus serré que l'inset gauche de 16 */
	padding: var(--wp--preset--spacing--10) 18px;
	border-radius: 999px;
	color: var(--wp--preset--color--white);
	font-size: 14px;
	font-weight: 600;
	line-height: 21px;
	pointer-events: none;
}

.ba-slider__tag--avant {
	left: 16px;
	background: var(--wp--custom--ink);
}

.ba-slider__tag--apres {
	right: 16px;
	background: var(--wp--preset--color--gold);
}

/* Le range invisible couvre tout : clavier, souris et tactile natifs */
.ba-slider__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
}

.ba-slider__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 46px;
	height: 46px;
}

.ba-slider__range::-moz-range-thumb {
	width: 46px;
	height: 46px;
	border: 0;
}

.ba-slider:focus-within .ba-slider__knob {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* ---- Responsive ---- */

/* Même seuil que « Espaces » : les deux sections jumelles s'empilent ensemble */
@media (max-width: 1199.98px) {
	.design .design__grid {
		grid-template-columns: minmax(0, 626px);
		justify-content: center;
		gap: var(--wp--preset--spacing--40);
	}

	/* Le visuel d'abord sur mobile, comme À propos */
	.design__media {
		order: -1;
	}
}

@media (max-width: 639.98px) {
	.design {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

/* =============================================================
   Espaces harmonieux — Figma 1:293
   Miroir de la section Design : photo pleine hauteur à gauche,
   panneau sombre à droite. Deux demis pleine largeur.
   ============================================================= */

.espaces {
	min-height: 676px;
}

.espaces .espaces__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: inherit;
}

.espaces__media {
	margin: 0;
	max-width: none; /* le layout contraint plafonne les figures */
	line-height: 0;
}

.espaces__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Le contenu s'arrête sur le bord droit du conteneur 1280 (73 + 568 + 319 à 1920) */
.espaces__panel {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30) 79px 73px;
	background: var(--wp--custom--panel-dark);
}

.espaces__inner {
	width: 100%;
	max-width: 568px;
}

.espaces .panel-eyebrow {
	gap: 12px;
}

/* ---- Responsive ---- */

/* En dessous de 1200 le panneau n'a plus la place du texte : on empile. */
@media (max-width: 1199.98px) {
	.espaces {
		min-height: 0;
	}

	.espaces .espaces__grid {
		grid-template-columns: 1fr;
	}

	.espaces__media {
		aspect-ratio: 960 / 676;
	}

	.espaces__panel {
		padding: 56px var(--wp--preset--spacing--30);
	}

	.espaces__inner {
		max-width: 626px;
		margin: 0 auto;
	}
}

/* =============================================================
   Projets en vedette — Figma 1:327
   ============================================================= */

.projets {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.projets .projets__head {
	max-width: 925px;
	margin: 0 auto;
}

.projets .section-eyebrow {
	margin-bottom: var(--wp--preset--spacing--20);
}

.projets .projets__title {
	margin: 0;
}

.projets__gallery {
	margin-top: var(--wp--preset--spacing--50);
}

/* ---- Onglets ---- */

.projets__tabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.projets__tab {
	padding: 22px 4px 20px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--wp--custom--ink);
	font-family: inherit;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	text-align: center;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.projets__tab[aria-selected="true"] {
	border-bottom-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	font-weight: 500;
}

.projets__tab:hover {
	color: var(--wp--preset--color--gold);
}

.projets__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: -4px;
}

/* ---- Grille 4×2 ---- */

.projets__panel[hidden] {
	display: none;
}

.projets__panel:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

.projets .projets__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px var(--wp--preset--spacing--30);
	margin: 41px 0 0;
	padding: 0;
	list-style: none;
}

.projets__grid li {
	margin: 0;
}

.projets__grid img {
	display: block;
	width: 100%;
	height: 240px;
	border-radius: 8px;
	object-fit: cover;
}

/* ---- Pied : note + bouton ---- */

.projets__foot {
	margin-top: 53px;
}

.projets .projets__note {
	margin: 0;
	color: var(--wp--custom--text-muted);
	font-size: 14px;
	letter-spacing: -0.02em; /* mesuré : 373px d'encre sur l'export */
	line-height: 23px;
}

.projets .projets__actions {
	margin-top: var(--wp--preset--spacing--10);
}

/* 158×44 mesuré : 24 à gauche, 18 à droite (l'icône porte son propre blanc) */
.projets__more .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px 10px var(--wp--preset--spacing--30);
	border-radius: 6px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--white);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 24px;
	transition: background-color 0.25s ease;
}

.projets__more .wp-block-button__link::after {
	content: "";
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("../images/icon-arrow-right.svg") no-repeat center / 16px;
	        mask: url("../images/icon-arrow-right.svg") no-repeat center / 16px;
	transition: transform 0.25s ease;
}

.projets__more .wp-block-button__link:hover,
.projets__more .wp-block-button__link:focus-visible {
	background: var(--wp--custom--gold-hover);
	color: var(--wp--preset--color--white);
}

.projets__more .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* ---- Responsive ---- */

/* En dessous de 1200, 4 colonnes rendraient les vignettes presque carrées */
@media (max-width: 1199.98px) {
	.projets .projets__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 781.98px) {
	.projets .projets__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px var(--wp--preset--spacing--20);
	}

	/* Onglets défilables plutôt qu'écrasés */
	.projets__tabs {
		display: flex;
		gap: var(--wp--preset--spacing--10);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.projets__tabs::-webkit-scrollbar {
		display: none;
	}

	.projets__tab {
		flex: 0 0 auto;
		padding: 14px 12px 12px;
		white-space: nowrap;
	}
}

@media (max-width: 639.98px) {
	.projets {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.projets__gallery {
		margin-top: var(--wp--preset--spacing--40);
	}

	.projets .projets__grid {
		margin-top: var(--wp--preset--spacing--30);
	}

	.projets__grid img {
		height: 180px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.projets__tab,
	.projets__more .wp-block-button__link,
	.projets__more .wp-block-button__link::after {
		transition: none;
	}

	.projets__more .wp-block-button__link:hover::after {
		transform: none;
	}
}

/* =============================================================
   Pourquoi nous choisir — Figma 1:342
   ============================================================= */

.pourquoi {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.pourquoi .section-eyebrow {
	margin-bottom: var(--wp--preset--spacing--20);
}

.pourquoi .section-title--xl {
	margin: 0;
}

.pourquoi .pourquoi__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}

.pourquoi__item {
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30); /* le texte est borné à 254 sur 302 */
	text-align: center;
}

/* Pastille ronde claire, icône Lucide dorée 28px */
.pourquoi__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--wp--custom--surface-soft);
}

.pourquoi__chip::before {
	content: "";
	width: 28px;
	height: 28px;
	background-color: var(--wp--preset--color--gold-soft);
}

.pourquoi__chip--key::before {
	-webkit-mask: url("../images/icon-key.svg") no-repeat center / contain;
	        mask: url("../images/icon-key.svg") no-repeat center / contain;
}

.pourquoi__chip--shield-check::before {
	-webkit-mask: url("../images/icon-shield-check.svg") no-repeat center / contain;
	        mask: url("../images/icon-shield-check.svg") no-repeat center / contain;
}

.pourquoi__chip--file-text::before {
	-webkit-mask: url("../images/icon-file-text.svg") no-repeat center / contain;
	        mask: url("../images/icon-file-text.svg") no-repeat center / contain;
}

.pourquoi__chip--circle-check::before {
	-webkit-mask: url("../images/icon-circle-check.svg") no-repeat center / contain;
	        mask: url("../images/icon-circle-check.svg") no-repeat center / contain;
}

.pourquoi__chip--award::before {
	-webkit-mask: url("../images/icon-award.svg") no-repeat center / contain;
	        mask: url("../images/icon-award.svg") no-repeat center / contain;
}

.pourquoi__chip--users::before {
	-webkit-mask: url("../images/icon-users.svg") no-repeat center / contain;
	        mask: url("../images/icon-users.svg") no-repeat center / contain;
}

.pourquoi__chip--heart::before {
	-webkit-mask: url("../images/icon-heart.svg") no-repeat center / contain;
	        mask: url("../images/icon-heart.svg") no-repeat center / contain;
}

.pourquoi__chip--map-pin::before {
	-webkit-mask: url("../images/icon-map-pin.svg") no-repeat center / contain;
	        mask: url("../images/icon-map-pin.svg") no-repeat center / contain;
}

.pourquoi .pourquoi__titre {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--heading);
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
}

.pourquoi .pourquoi__texte {
	margin: 12px auto 0;
	max-width: var(--pq-texte, 254px);
	color: var(--wp--custom--text-muted);
	font-size: 13px;
	line-height: 23px;
}

/* ---- Responsive ---- */

@media (max-width: 1199.98px) {
	.pourquoi .pourquoi__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30);
		max-width: 720px;
		margin-inline: auto;
	}

	/* Hors maquette desktop, les largeurs de texte au cas par cas n'ont plus de sens */
	.pourquoi .pourquoi__texte {
		max-width: 254px;
	}
}

@media (max-width: 639.98px) {
	.pourquoi {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.pourquoi .pourquoi__grid {
		grid-template-columns: minmax(0, 1fr);
		margin-top: var(--wp--preset--spacing--40);
	}

	.pourquoi__item {
		padding: 0;
	}
}

/* =============================================================
   Témoignages — Figma 1:432
   Les cartes de la maquette sont du faux texte : le widget Elfsight
   (avis Google) prend leur place et apporte son propre gabarit.
   ============================================================= */

.temoignages {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.temoignages .section-eyebrow {
	margin-bottom: var(--wp--preset--spacing--10);
}

.temoignages .section-title--xl {
	margin: 0;
}

/* 262 = hauteur des cartes de la maquette : évite le saut de mise en page */
.temoignages__avis {
	margin-top: var(--wp--preset--spacing--50);
	min-height: 262px;
}

@media (max-width: 639.98px) {
	.temoignages {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.temoignages__avis {
		margin-top: var(--wp--preset--spacing--40);
	}
}

/* =============================================================
   Commencez votre projet — Figma 1:503
   Photo de chantier + voile ; colonnes 758 + 524 = 1282 (les deux
   cadres sont masqués dans la maquette, leurs largeurs donnent la grille).
   ============================================================= */

.contact {
	position: relative;
	isolation: isolate;
	min-height: 683px;
	display: flex;
	align-items: center;
	padding-top: 80px;
	padding-bottom: 80px;
	overflow: hidden;
}

.contact__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
	max-width: none; /* le layout contraint plafonne les figures */
	line-height: 0;
}

.contact__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Voile résolu sur l'export : la photo garde 24 % de sa luminosité */
.contact__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 11, 3, 0.76);
}

.contact .contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 758fr) minmax(0, 524fr);
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
}

.contact .section-eyebrow {
	margin-bottom: var(--wp--preset--spacing--30);
}

.contact .contact__title {
	margin: 0;
	color: var(--wp--preset--color--white);
}

.contact .contact__texte {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 605px;
	color: var(--wp--custom--text-on-dark);
	font-size: 16px;
	letter-spacing: 0.019em;
	line-height: 28px;
}

.contact .contact__actions {
	margin-top: 48px;
}

/* 284×58 : icône téléphone 20px, puis 12 de gouttière */
.contact__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 17px 30px;
	border-radius: 8px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--white);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 24px;
	transition: background-color 0.25s ease;
}

.contact__cta .wp-block-button__link::before {
	content: "";
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("../images/phone.svg") no-repeat center / contain;
	        mask: url("../images/phone.svg") no-repeat center / contain;
}

.contact__cta .wp-block-button__link:hover,
.contact__cta .wp-block-button__link:focus-visible {
	background: var(--wp--custom--gold-hover);
	color: var(--wp--preset--color--white);
}

.contact a:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

/* Le formulaire Jotform insère son iframe juste après son script */
.contact__form {
	min-height: 434px;
}

/* Fond transparent : la maquette pose les champs à même la photo */
.contact__form iframe {
	width: 100% !important;
	max-width: 100%;
	border: 0;
	background: transparent;
}

/* ---- Responsive ---- */

/* Même seuil que les autres sections à deux colonnes */
@media (max-width: 1199.98px) {
	.contact .contact__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.contact {
		min-height: 0;
		padding-top: var(--wp--preset--spacing--50);
		padding-bottom: var(--wp--preset--spacing--50);
	}

	/* Empilé, le formulaire pleine largeur serait démesuré */
	.contact__form {
		width: 100%;
		max-width: 560px;
		margin-inline: auto;
	}
}

@media (max-width: 639.98px) {
	.contact {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.contact .contact__actions {
		margin-top: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.contact__cta .wp-block-button__link {
		transition: none;
	}
}

/* =============================================================
   Footer — Figma 1:546
   ============================================================= */

.site-footer {
	--emm-footer-text: var(--wp--custom--text-faint);   /* texte et liens */
	--emm-footer-muted: var(--wp--custom--text-muted);  /* libellés + copyright */
	--emm-footer-icon: var(--wp--preset--color--gold-soft);   /* icônes contact dorées (couleur des exports Figma) */

	border-top: 1px solid rgba(255, 255, 255, 0.05);
	padding-top: 65px;
	padding-bottom: var(--wp--preset--spacing--50);
	font-size: 13px;
	line-height: 20px;
	color: var(--emm-footer-text);
}

/* ---- Grille 4 colonnes ---- */

.site-footer .site-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 48px;
}

/* ---- Titres de colonnes ---- */

.site-footer .site-footer__heading {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.7px;
	line-height: 20px;
	text-transform: uppercase;
}

/* ---- Colonne marque ---- */

.site-footer__logo {
	margin: 0;
	line-height: 0;
}

.site-footer__logo img {
	display: block;
	width: 283px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 652 / 130; /* réserve la place avant chargement */
}

.site-footer__blurb {
	color: var(--emm-footer-text);
	font-size: 13px;
	line-height: 22.75px; /* maquette : 13 × 1.75 */
}

.site-footer__socials {
	display: flex;
	gap: var(--wp--preset--spacing--20);
}

.site-footer__social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	transition: background-color 0.2s ease;
}

.site-footer__social::before {
	content: "";
	width: 20px;
	height: 20px;
	background-color: var(--emm-footer-text);
	transition: background-color 0.2s ease;
}

.site-footer__social--facebook::before {
	-webkit-mask: url("../images/facebook.svg") no-repeat center / contain;
	        mask: url("../images/facebook.svg") no-repeat center / contain;
}

.site-footer__social--instagram::before {
	-webkit-mask: url("../images/instagram.svg") no-repeat center / contain;
	        mask: url("../images/instagram.svg") no-repeat center / contain;
}

.site-footer__social:hover,
.site-footer__social:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}

.site-footer__social:hover::before,
.site-footer__social:focus-visible::before {
	background-color: var(--wp--preset--color--gold-light);
}

/* ---- Listes de liens (Services / Contact) ---- */

/* Pas de reset margin ici : le blockGap du cœur gère le rythme vertical */
.site-footer .wp-block-list {
	padding: 0;
	list-style: none;
}

.site-footer .wp-block-list li {
	margin: 0;
}

.site-footer .site-footer__links li + li {
	margin-top: 12px;
}

/* Les liens sont dorés globalement (theme.json) — gris ici */
.site-footer .wp-block-list a {
	color: var(--emm-footer-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-footer .wp-block-list a:hover,
.site-footer .wp-block-list a:focus-visible {
	color: var(--wp--preset--color--gold-light);
	text-decoration: none;
}

/* ---- Lignes contact avec icônes ---- */

.site-footer__contact .site-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.site-footer__contact .site-footer__contact-item + .site-footer__contact-item {
	margin-top: var(--wp--preset--spacing--20);
}

.site-footer__contact-item::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background-color: var(--emm-footer-icon);
}

.site-footer__contact-item--phone::before {
	-webkit-mask: url("../images/phone.svg") no-repeat center / contain;
	        mask: url("../images/phone.svg") no-repeat center / contain;
}

.site-footer__contact-item--mail::before {
	-webkit-mask: url("../images/mail.svg") no-repeat center / contain;
	        mask: url("../images/mail.svg") no-repeat center / contain;
}

.site-footer__contact-item--address::before {
	-webkit-mask: url("../images/map-pin.svg") no-repeat center / contain;
	        mask: url("../images/map-pin.svg") no-repeat center / contain;
}

/* Adresse limitée comme la maquette → retour sur 2 lignes */
.site-footer__contact-item--address {
	max-width: 208px; /* 20 icon + 12 gap + 176 text */
}

/* ---- Qualifications ---- */

.site-footer__qual-label {
	color: var(--emm-footer-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	line-height: 16px;
	text-transform: uppercase;
}

.site-footer__qual-value {
	color: var(--wp--preset--color--white);
	font-size: 13px;
	line-height: 20px;
}

/* ---- Barre du bas ---- */

.site-footer .site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: var(--wp--preset--spacing--30);
}

.site-footer__rdpq {
	margin: 0;
	line-height: 0;
}

.site-footer__rdpq img {
	display: block;
	width: 99px;
	height: 32px;
}

.site-footer__copyright {
	color: var(--emm-footer-muted);
	font-size: 13px;
	line-height: 20px;
}

/* ---- Focus visible (comme le header) ---- */

.site-footer a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-light);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---- Responsive ---- */

@media (max-width: 1023.98px) {
	.site-footer .site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 639.98px) {
	.site-footer {
		padding-top: 48px;
		padding-bottom: var(--wp--preset--spacing--40);
	}

	.site-footer .site-footer__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.site-footer .site-footer__bottom {
		flex-direction: column;
		justify-content: center;
		gap: var(--wp--preset--spacing--20);
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-footer__social,
	.site-footer__social::before,
	.site-footer .wp-block-list a {
		transition: none;
	}
}

/* =============================================================
   Page Merci — Figma 1:749
   Page autonome (modèle page-merci) : hors du flux de l'accueil,
   d'où sa place après le footer plutôt que dans l'ordre des sections.
   ============================================================= */

.merci {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* 888 dans la maquette ; on remplit l'écran quand il est plus haut */
	min-height: 888px;
	min-height: max(888px, calc(100dvh - 78px));
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
}

/* ---- Photo de fond + voile ---- */

.merci__bg {
	position: absolute;
	inset: 0;
	margin: 0;
	max-width: none; /* le layout contraint limite les figures à 720px */
	line-height: 0;
}

.merci__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Le cadre Figma laisse dépasser le bas de la photo (1132 pour 888) */
	object-position: center top;
}

/* Second fond du calque image dans la maquette : noir à 40 % */
.merci__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
}

/* ---- Carte centrale ---- */

.merci .merci__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	width: 576px;
	max-width: 100%;
	min-height: 461px;
	padding: 48px;
	border-radius: 8px;
	background: var(--wp--preset--color--charcoal);
	text-align: center;
}

.merci__logo {
	margin: 0;
	line-height: 0;
}

.merci__logo img {
	display: block;
	width: 326px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 652 / 130; /* réserve la place : pas de saut de mise en page */
}

/* ---- Titre et texte ---- */

.merci .merci__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	width: 464px;
	max-width: 100%;
}

.merci__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 54.34px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 57.06px;
}

.merci__lead {
	margin: 0;
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 25.2px;
}

/* ---- Bouton téléphone ---- */

.merci .merci__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--20);
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--white);
	/* La maquette fixe la boîte du libellé à 160 : le bouton fait 222,7, le
	   surplus tombe à droite. Sans ça notre Inter, plus étroit que celui de
	   Figma, raccourcirait le bouton de 10 px. */
	min-width: 222.7px;
	max-width: 100%;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 28px;
	white-space: nowrap;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

/* Combiné plein, plus épais que l'icône filaire du header */
.merci .merci__cta .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 22.7px;
	height: 22.7px;
	background-color: currentColor;
	-webkit-mask: url("../images/phone-solid.svg") no-repeat center / contain;
	        mask: url("../images/phone-solid.svg") no-repeat center / contain;
}

.merci .merci__cta .wp-block-button__link:hover,
.merci .merci__cta .wp-block-button__link:focus-visible {
	background: var(--wp--custom--gold-hover);
	color: var(--wp--preset--color--white);
	transform: translateY(-1px);
}

.merci a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-light);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---- Barre dorée du bas ---- */

.merci-bar {
	padding-top: 23px;
	padding-bottom: 23px;
}

.merci-bar .merci-bar__inner {
	min-height: 32px;
}

.merci-bar__rdpq {
	margin: 0;
	line-height: 0;
}

.merci-bar__rdpq img {
	display: block;
	width: 99px;
	height: 32px;
}

.merci-bar__copyright {
	margin: 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13.1px;
	line-height: 20px;
}

/* ---- Responsive (aucun cadre mobile dans la maquette) ---- */

@media (max-width: 781.98px) {
	.merci {
		min-height: 620px;
		min-height: max(620px, calc(100dvh - 78px));
	}
}

@media (max-width: 559.98px) {
	.merci .merci__card {
		/* 461 laisserait trop de vide entre les trois blocs sur un écran étroit */
		min-height: 380px;
		padding: 32px var(--wp--preset--spacing--30);
	}

	.merci__title {
		font-size: 40px;
		line-height: 44px;
	}

	.merci__logo img {
		width: 260px;
	}
}

@media (max-width: 479.98px) {
	.merci-bar .merci-bar__inner {
		flex-direction: column;
		justify-content: center;
		gap: var(--wp--preset--spacing--20);
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.merci .merci__cta .wp-block-button__link {
		transition: none;
	}

	.merci .merci__cta .wp-block-button__link:hover,
	.merci .merci__cta .wp-block-button__link:focus-visible {
		transform: none;
	}
}