/* =========================================================================
 * SAPA — Styles des blocs & patterns de la homepage
 * Rendu ISO aux maquettes Figma (fichier NO0ipSg2dS1kusNQOVeeYf).
 * Les valeurs proviennent du Design System : on consomme les tokens
 * theme.json via des alias au naming Figma (ne jamais hardcoder un hex).
 * ====================================================================== */

:root {
	/* Couleurs (alias sur les presets theme.json) */
	--color-brand-primary: var(--wp--preset--color--brand-primary);
	--color-brand-primary-hover: var(--wp--preset--color--brand-primary-hover);
	--color-brand-tint: var(--wp--preset--color--brand-tint);
	--color-text-default: var(--wp--preset--color--text-default);
	--color-text-muted: var(--wp--preset--color--text-muted);
	--color-text-subtle: var(--wp--preset--color--text-subtle);
	--color-text-on-brand: var(--wp--preset--color--text-on-brand);
	--color-text-on-inverse: var(--wp--preset--color--text-on-inverse);
	--color-text-on-inverse-muted: var(--wp--preset--color--text-on-inverse-muted);
	--color-text-on-inverse-subtle: var(--wp--preset--color--text-on-inverse-subtle);
	--color-surface-default: var(--wp--preset--color--surface-default);
	--color-surface-subtle: var(--wp--preset--color--surface-subtle);
	--color-surface-inverse: var(--wp--preset--color--surface-inverse);
	--color-surface-inverse-deep: var(--wp--preset--color--surface-inverse-deep);
	--color-surface-brand: var(--wp--preset--color--surface-brand);
	--color-surface-glass: var(--wp--preset--color--surface-glass);
	--color-surface-glass-strong: var(--wp--preset--color--surface-glass-strong);
	--color-border-default: var(--wp--preset--color--border-default);
	--color-border-brand: var(--wp--preset--color--border-brand);
	--color-border-on-inverse: var(--wp--preset--color--border-on-inverse);
	/* Fond neutre affiché derrière les images (letterbox / avant chargement) */
	--color-image-placeholder: #59544d;

	/* Rayons */
	--radius-xs: var(--wp--custom--radius--xs);
	--radius-sm: var(--wp--custom--radius--sm);
	--radius-md: var(--wp--custom--radius--md);
	--radius-lg: var(--wp--custom--radius--lg);
	--radius-xl: var(--wp--custom--radius--xl);
	--radius-2xl: var(--wp--custom--radius--2-xl);
	--radius-3xl: var(--wp--custom--radius--3-xl);
	--radius-pill: var(--wp--custom--radius--pill);

	/* Typo */
	--font-heading: var(--wp--preset--font-family--heading);
	--font-body: var(--wp--preset--font-family--body);

	/* Layout */
	--sapa-container: 1440px;
	--sapa-gutter: 60px;
}

/* --- Garde-fou responsive global --------------------------------------- */
/* Aucun débordement horizontal possible (backstop mobile/tablette). */
html { overflow-x: clip; }
.sapa-home, .sapa-page { overflow-x: clip; max-width: 100%; }
/* Les médias ne dépassent jamais leur conteneur. */
.sapa-section img:not([class*="absolute"]) { max-width: 100%; }

/* --- Pas d'encadré au clic -------------------------------------------------
 * WP core pose `:where(.wp-site-blocks :focus){outline-width:2px;outline-style:solid}`
 * sur :focus (donc AUSSI au clic souris/tactile) ; la couleur vient de
 * currentColor → orange sur les liens. On neutralise uniquement le focus
 * NON clavier : `:focus-visible` reste intact pour l'accessibilité.
 * ------------------------------------------------------------------------ */
:focus:not(:focus-visible) { outline: none; }
/* Pas de flash de surbrillance au tap sur mobile. */
a, button, summary, [role="button"], input, select, textarea { -webkit-tap-highlight-color: transparent; }

/* --- Header réellement collant ---------------------------------------------
 * `.sapa-header` est en position:sticky, mais WP l'enveloppe dans un
 * `.wp-block-template-part` qui ne fait QUE sa hauteur : un sticky ne peut
 * coller que dans son conteneur → aucune marge de manœuvre, il défilait avec
 * la page. `display:contents` supprime la boîte du wrapper : le conteneur
 * devient `.wp-site-blocks` (toute la page) et le sticky fonctionne.
 * ------------------------------------------------------------------------ */
.wp-site-blocks > .wp-block-template-part:has(> .sapa-header) { display: contents; }

/* --- Transition d'élément partagé : carte réalisation → hero détail ------
 * API View Transitions inter-documents (native, sans lib). L'image de la
 * carte cliquée (nommée « sapa-real-hero » par JS au clic) morphe vers
 * l'image plein écran du hero de la page détail (même nom, cf .sapa-hero-real__media).
 * Dégrade proprement (navigation normale) sur navigateurs non compatibles. */
@view-transition { navigation: auto; }
::view-transition-group(sapa-real-hero) {
	animation-duration: 0.55s;
	animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.45s; }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}

/* --- Helpers de section ------------------------------------------------- */
.sapa-section {
	width: 100%;
}
/* Sections jointives : chaque section gère son propre padding, aucun gap inter-sections */
.sapa-home > *,
.sapa-page > * {
	margin-block: 0;
}
/* Header collé au contenu : supprime le gap 24px que WP met entre les blocs racine */
:root .wp-site-blocks > * {
	margin-block-start: 0;
}
.sapa-section__inner {
	max-width: var(--sapa-container);
	margin-inline: auto;
	padding-inline: var(--sapa-gutter);
}

/* Eyebrow / suptitre (Barlow Condensed Bold, uppercase) */
.sapa-eyebrow {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-brand-primary);
	line-height: 1;
	margin: 0;
}

/* Bouton pill orange réutilisable (mappé sur le style bouton du DS) */
.sapa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	line-height: 1;
	padding: 14px 20px;
	border-radius: var(--radius-pill);
	background: var(--color-brand-primary);
	color: var(--color-text-default);
	text-decoration: none;
	border: 0;
	cursor: pointer;
	white-space: nowrap; /* un bouton ne doit jamais passer sur 2 lignes */
	transition: background-color 0.2s ease;
}
.sapa-btn:hover {
	background: var(--color-brand-primary-hover);
	color: var(--color-text-default);
}
.sapa-btn--ghost {
	background: transparent;
	color: var(--color-text-default);
	padding: 0;
	border-radius: 0;
}

/* =========================================================================
 * HEADER  (Figma 293:346)
 * ====================================================================== */
.sapa-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--color-surface-default);
	border-bottom: 1px solid var(--color-border-default);
	min-height: 77px;
	padding: 10px var(--sapa-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.sapa-header__logo img {
	display: block;
	width: 105px;
	height: auto;
}
/* Pas de contour au clic sur le logo ; focus clavier discret (accessibilité) */
.sapa-header__logo:focus { outline: none; }
.sapa-header__logo:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 4px; border-radius: 4px; }
.sapa-header__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 48px;
}
.sapa-header__nav a {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	color: var(--color-text-default);
	text-decoration: none;
	white-space: nowrap;
}
.sapa-header__nav a:hover {
	color: var(--color-brand-primary);
}
.sapa-header__nav a:focus { outline: none; }
.sapa-header__nav a:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 4px; border-radius: 4px; }
.sapa-header__right {
	display: flex;
	align-items: center;
	gap: 16px;
}
.sapa-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	color: var(--color-text-default);
	text-decoration: none;
	white-space: nowrap;
}
.sapa-header__phone svg,
.sapa-header__phone img {
	width: 16px;
	height: 16px;
}
.sapa-header__burger {
	display: none;
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
}

/* Responsive header */
@media (max-width: 1024px) {
	:root { --sapa-gutter: 24px; }
	.sapa-header__nav,
	.sapa-header__phone { display: none; }
	.sapa-header__burger { display: inline-flex; }
	.sapa-header.is-open .sapa-header__nav {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-surface-default);
		border-bottom: 1px solid var(--color-border-default);
		padding: 16px var(--sapa-gutter);
	}
	.sapa-header.is-open .sapa-header__nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
}
@media (max-width: 600px) {
	.sapa-header { gap: 12px; }
	.sapa-header__right { gap: 10px; }
	.sapa-header__cta { padding: 11px 16px; font-size: 14px; } /* reste sur une ligne à côté du burger */
}

/* =========================================================================
 * HERO  (Figma 212:2042)
 * ====================================================================== */
.sapa-hero {
	background: var(--color-surface-default);
}
.sapa-hero__inner {
	display: grid;
	grid-template-columns: 668fr 772fr;
	align-items: center;
	gap: 32px;
	padding-block: 40px 56px;
}
.sapa-hero__content {
	max-width: 620px;
}
.sapa-hero__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(48px, 6.1vw, 88px);
	line-height: 0.92;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-default);
	margin: 0 0 28px;
}
.sapa-hero__title .is-accent {
	color: var(--color-brand-primary);
}
.sapa-hero__lead {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.7;
	color: var(--color-text-muted);
	max-width: 540px;
	margin: 0 0 29px;
}
.sapa-hero__actions {
	display: flex;
	align-items: center;
	gap: 31px;
	margin-bottom: 29px;
	flex-wrap: wrap;
}
/* Le CTA du hero suit la maquette : Stack Sans Bold 14, texte noir */
/* .sapa-hero__cta : style standard .sapa-btn (MAJ, police titre), juste un peu
   plus haut (46px) sur le hero homepage. Spécificité 0,2,0 pour gagner partout. */
.sapa-hero__actions .sapa-hero__cta { padding-block: 15px; }
.sapa-hero__link {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	color: #1a1a18;
	text-decoration: none;
	border-bottom: 1px solid #1a1a18;
	padding-bottom: 4px;
	white-space: nowrap;
}
.sapa-hero__link:hover {
	color: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
}
.sapa-hero__divider {
	border: 0;
	height: 1px;
	background: var(--color-border-default);
	width: 530px;
	max-width: 100%;
	margin: 0 0 29px;
}
.sapa-hero__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}
.sapa-hero__stat {
	display: flex;
	flex-direction: column;
	width: 170px;
}
.sapa-hero__stat-num {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 44px;
	letter-spacing: 1px;
	line-height: 1.1;
	color: var(--color-text-default);
	text-transform: uppercase;
}
.sapa-hero__stat-label {
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.5px;
	color: var(--color-text-muted);
	text-transform: uppercase;
}

/* Composition d'images à droite */
.sapa-hero__media {
	position: relative;
	min-height: 600px;
}
.sapa-hero__media-main {
	position: absolute;
	left: 3.3%;
	top: 15%;
	width: 75%;
	aspect-ratio: 580 / 555;
	border-radius: 30px;
	overflow: hidden;
}
.sapa-hero__media-main::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, 0.18);
	border-radius: 30px;
}
.sapa-hero__media-main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sapa-hero__media-inset {
	position: absolute;
	right: 0;
	top: 6%;
	width: 31%;
	aspect-ratio: 241 / 337;
	border: 10px solid #fff;
	border-radius: 25px;
	overflow: hidden;
}
.sapa-hero__media-inset img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 1024px) {
	.sapa-hero__inner {
		grid-template-columns: minmax(0, 1fr); /* piste rétrécissable : évite le débordement dû au divider 530px */
		gap: 40px;
	}
	.sapa-hero__content {
		max-width: none;
	}
	.sapa-hero__divider { width: 100%; }
	/* Média : l'image principale passe en flux normal et définit la hauteur
	   (sinon les images en position absolue débordent sous la section suivante). */
	.sapa-hero__media { min-height: 0; }
	.sapa-hero__media-main {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
	}
	.sapa-hero__media-inset {
		width: 34%;
		top: auto;
		bottom: 7%;
		right: 4%;
	}
}
@media (max-width: 600px) {
	.sapa-hero__stats {
		gap: 20px;
	}
	.sapa-hero__stat {
		width: calc(50% - 10px);
	}
	/* Mobile : une seule image dans le hero (la vignette secondaire encombre). */
	.sapa-hero__media-inset { display: none; }
}

/* =========================================================================
 * FOOTER  (Figma 293:1640) — CTA orange + colonnes sombres + barre légale
 * ====================================================================== */
.sapa-footer__cta {
	background: var(--color-surface-brand);
	border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
	padding: 44px var(--sapa-gutter);
}
.sapa-footer__cta-inner {
	max-width: var(--sapa-container);
	margin-inline: auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 32px;
}
.sapa-footer__cta-text {
	max-width: 850px;
}
.sapa-footer__cta-title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(40px, 5vw, 72px);
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-on-brand);
	margin: 0 0 24px;
}
.sapa-footer__cta-lead {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.4;
	color: var(--color-text-on-brand);
	max-width: 675px;
	margin: 0;
}
.sapa-footer__cta-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--color-surface-default);
	border: 1px solid var(--color-border-brand);
	color: var(--color-text-default);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 14px 28px 16px;
	border-radius: var(--radius-pill);
	text-decoration: none;
	white-space: nowrap;
}
.sapa-footer__cta-btn:hover {
	background: #fff;
	color: var(--color-brand-primary);
}
.sapa-footer__main {
	background: var(--color-surface-inverse);
}
.sapa-footer__cols {
	max-width: var(--sapa-container);
	margin-inline: auto;
	display: flex;
	gap: 48px;
	padding: 48px var(--sapa-gutter);
	align-items: flex-start;
}
.sapa-footer__col--about {
	flex: 1 1 0;
	min-width: 0;
}
.sapa-footer__col:nth-child(2) { width: 169px; flex-shrink: 0; }
.sapa-footer__col:nth-child(3) { width: 132px; flex-shrink: 0; }
.sapa-footer__col--contact { width: 359px; flex-shrink: 0; }
.sapa-footer__brand {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-text-on-inverse);
	margin: 0 0 16px;
}
.sapa-footer__desc {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.7;
	color: var(--color-text-on-inverse-muted);
	margin: 0 0 16px;
}
.sapa-footer__contact {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-text-on-inverse-muted);
}
.sapa-footer__contact a { color: inherit; text-decoration: none; }
.sapa-footer__contact a:hover { color: var(--color-text-on-inverse); }
.sapa-footer__col-title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-text-on-inverse);
	margin: 0 0 12px;
}
.sapa-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 14px;
}
.sapa-footer__links a,
.sapa-footer__links span { color: var(--color-text-on-inverse-muted); text-decoration: none; }
.sapa-footer__links a:hover { color: var(--color-brand-primary); }
.sapa-footer__bottom {
	background: var(--color-surface-inverse-deep);
	border-top: 1px solid var(--color-border-on-inverse);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 20px var(--sapa-gutter);
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--color-text-on-inverse-muted);
}
.sapa-footer__bottom p { margin: 0; }
.sapa-footer__legal { display: flex; gap: 16px; flex-wrap: wrap; }
.sapa-footer__legal a { color: inherit; text-decoration: none; }
.sapa-footer__legal a:hover { color: var(--color-text-on-inverse); }

@media (max-width: 1024px) {
	.sapa-footer__cta-inner { flex-direction: column; }
	.sapa-footer__cols { flex-wrap: wrap; gap: 32px 48px; }
	.sapa-footer__col:nth-child(2),
	.sapa-footer__col:nth-child(3),
	.sapa-footer__col--contact { width: calc(50% - 24px); }
	.sapa-footer__col--about { flex-basis: 100%; }
}
@media (max-width: 600px) {
	.sapa-footer__col:nth-child(2),
	.sapa-footer__col:nth-child(3),
	.sapa-footer__col--contact { width: 100%; }
}

/* =========================================================================
 * PRESTATIONS  (Figma 293:799) — grille 4×2 sur fond sombre
 * ====================================================================== */
.sapa-prestations {
	background: var(--color-surface-inverse);
	color: var(--color-text-on-inverse);
}
.sapa-prestations__inner {
	padding-block: 68px 71px;
	display: flex;
	flex-direction: column;
	gap: 56px;
}
.sapa-prestations__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
}
.sapa-prestations__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.05;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-on-inverse);
	margin: 0 0 8px;
	max-width: 700px;
}
.sapa-prestations__lead {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.7;
	color: var(--color-text-muted);
	margin: 0;
	max-width: 1130px;
}
.sapa-prestations__more {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-text-on-inverse);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}
.sapa-prestations__more:hover { color: var(--color-brand-primary); }
.sapa-prestations__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 6 services = 3 colonnes × 2 lignes */
}
.sapa-presta-card {
	display: block;
	padding: 24px;
	text-decoration: none;
}
.sapa-presta-card:nth-child(3n+1) { padding-left: 0; }
.sapa-presta-card:nth-child(3n)   { padding-right: 0; }
.sapa-presta-card:not(:nth-child(3n+1)) { border-left: 1px solid var(--color-surface-glass); }
.sapa-presta-card:nth-child(n+4) { border-top: 1px solid var(--color-surface-glass); }
.sapa-presta-card__thumb {
	width: 107px;
	height: 54px;
	object-fit: cover;
	border-radius: var(--radius-xs);
	display: block;
	margin-bottom: 16px;
}
.sapa-presta-card__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-text-on-inverse);
	margin: 0 0 8px;
}
.sapa-presta-card__desc {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-subtle);
	margin: 0 0 12px;
	max-width: 316px;
}
.sapa-presta-card__arrow {
	color: var(--color-brand-primary);
	font-size: 18px;
	line-height: 1;
	transition: transform 0.2s ease;
}
.sapa-presta-card:hover .sapa-presta-card__arrow { transform: translateX(4px); }
.sapa-presta-card:hover .sapa-presta-card__title { color: var(--color-brand-primary); }

@media (max-width: 1024px) {
	.sapa-prestations__head { flex-direction: column; gap: 16px; }
	.sapa-prestations__grid { grid-template-columns: repeat(2, 1fr); }
	.sapa-presta-card:nth-child(odd)  { padding-left: 0; padding-right: 24px; border-left: 0; }
	.sapa-presta-card:nth-child(even) { padding-right: 0; padding-left: 24px; border-left: 1px solid var(--color-surface-glass); }
	.sapa-presta-card:nth-child(n+3) { border-top: 1px solid var(--color-surface-glass); }
}
@media (max-width: 600px) {
	.sapa-prestations__grid { grid-template-columns: 1fr; }
	.sapa-presta-card { padding: 24px 0 !important; border-left: 0 !important; }
	.sapa-presta-card:nth-child(n+2) { border-top: 1px solid var(--color-surface-glass); }
}

/* =========================================================================
 * BLOC RÉALISATIONS L  (Figma 293:901) — carte vedette + grille 2×2
 * ====================================================================== */
.sapa-reals {
	background: var(--color-surface-subtle);
}
.sapa-reals__inner {
	padding-block: 56px;
	display: flex;
	flex-direction: column;
	gap: 35px;
}
.sapa-reals__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
}
.sapa-reals__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.05;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-default);
	margin: 0 0 4px;
}
.sapa-reals__subtitle {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.7;
	color: var(--color-text-muted);
	margin: 0;
}
.sapa-reals__all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	color: var(--color-brand-primary);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	padding: 14px 28px 16px;
	border-radius: var(--radius-pill);
}
.sapa-reals__all:hover { background: var(--color-brand-tint); }
.sapa-reals__layout {
	display: grid;
	grid-template-columns: 740fr 604fr;
	gap: 8px;
	align-items: stretch;
}
.sapa-reals__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 8px;
}

/* Carte réalisation (réutilisable — préfigure le CPT Chantier) */
.sapa-realcard {
	position: relative;
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
	min-height: 280px;
	box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.07);
	background: var(--color-image-placeholder);
}
.sapa-realcard--feature {
	border-radius: var(--radius-xl);
	min-height: 568px;
}
.sapa-realcard img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.sapa-realcard:hover img { transform: scale(1.04); }
.sapa-realcard__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	padding: 16px;
	background: linear-gradient(to bottom, rgba(17, 24, 39, 0) 45%, var(--color-surface-inverse));
}
.sapa-realcard__tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.sapa-badge {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	line-height: 1.3;
}
.sapa-badge--cat { background: var(--color-brand-primary); color: var(--color-text-on-brand); }
.sapa-badge--city { background: var(--color-surface-glass-strong); color: var(--color-text-default); }
.sapa-realcard__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--color-text-on-inverse);
	margin: 0;
}
.sapa-realcard--feature .sapa-realcard__title {
	font-size: 24px;
	letter-spacing: 0.5px;
	padding: 15px;
}
.sapa-realcard--feature .sapa-realcard__tags { padding: 0 15px; }

@media (max-width: 1024px) {
	.sapa-reals__head { flex-direction: column; align-items: flex-start; gap: 16px; }
	.sapa-reals__layout { grid-template-columns: 1fr; }
	.sapa-realcard--feature { min-height: 420px; }
}
@media (max-width: 600px) {
	.sapa-reals__grid { grid-template-columns: 1fr; grid-template-rows: none; }
}

/* Bouton secondaire (contour orange) — réutilisable */
.sapa-btn-outline {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--color-surface-default);
	border: 1px solid var(--color-border-brand);
	color: var(--color-brand-primary);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	line-height: 1;
	padding: 13px 28px;
	border-radius: var(--radius-pill);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.sapa-btn-outline:hover { background: var(--color-brand-primary); color: var(--color-text-on-brand); }
.sapa-btn-outline svg { flex-shrink: 0; }

/* =========================================================================
 * BLOC DOCUMENTS  (Figma 293:1085) — 3 cartes PDF
 * ====================================================================== */
.sapa-docs { background: var(--color-surface-default); }
.sapa-docs__inner {
	padding-block: 80px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.sapa-docs__head {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.sapa-docs__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.05;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-default);
	margin: 0;
}
.sapa-docs__title .is-accent { color: var(--color-brand-primary); }
.sapa-docs__subtitle {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-text-muted);
	margin: 0;
}
.sapa-docs__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 421px));
	gap: 32px;
	justify-content: center;
}
.sapa-doc-card {
	background: var(--color-surface-subtle);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.sapa-doc-card__tag {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-brand-tint);
	color: var(--color-brand-primary);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: var(--radius-pill);
}
.sapa-doc-card__text { display: flex; flex-direction: column; gap: 8px; }
.sapa-doc-card__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 24px;
	text-transform: uppercase;
	color: var(--color-text-default);
	margin: 0;
}
.sapa-doc-card__desc {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-default);
	margin: 0;
}
.sapa-doc-card__btn { margin-top: auto; width: 100%; }

@media (max-width: 900px) {
	.sapa-docs__row { grid-template-columns: 1fr; max-width: 421px; margin-inline: auto; }
}

/* =========================================================================
 * BLOC PROFILS LIGHT  (Figma 293:1226) — syndics / architectes / foncières
 * ====================================================================== */
.sapa-profils { background: var(--color-surface-subtle); }
.sapa-profils__inner {
	padding-block: 61px;
	display: flex;
	flex-direction: column;
	gap: 43px;
}
.sapa-profils__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.05;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-default);
	margin: 0 0 4px;
	max-width: 787px;
}
.sapa-profils__title .is-accent { color: var(--color-brand-primary); }
.sapa-profils__lead {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.7;
	color: var(--color-text-muted);
	margin: 0;
	max-width: 787px;
}
.sapa-profils__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.sapa-profil-card {
	position: relative;
	background: var(--color-surface-default);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	padding: 32px 28px 16px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	min-height: 260px;
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
}
/* Barre d'accent orange en haut (statique — reste à 4px, même au survol). */
.sapa-profil-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--color-brand-primary);
}
/* Survol = affordance « toute la carte est cliquable », sobre : la carte se
   soulève et s'ombre, et le titre s'accentue. Pas de remplissage, pas de
   contour, pas de swap de couleur du texte. */
.sapa-profil-card:hover,
.sapa-profil-card:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 18px 34px -18px rgba(17, 24, 39, 0.22);
}
.sapa-profil-card__title { transition: color 0.25s ease; }
.sapa-profil-card:hover .sapa-profil-card__title,
.sapa-profil-card:focus-visible .sapa-profil-card__title { color: var(--color-brand-primary); }
.sapa-profil-card__head { display: flex; flex-direction: column; gap: 10px; }
.sapa-profil-card__titlerow { display: flex; align-items: center; gap: 10px; }
.sapa-profil-card__icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--color-brand-primary); }
.sapa-profil-card__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 30px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-text-default);
	margin: 0;
}
.sapa-profil-card__desc {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.7;
	color: var(--color-text-muted);
	margin: 0;
}
.sapa-profil-card__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-brand-primary);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
}
.sapa-profil-card:hover .sapa-profil-card__link { gap: 16px; }
@media (prefers-reduced-motion: reduce) {
	.sapa-profil-card, .sapa-profil-card::before, .sapa-profil-card__title { transition: none; }
	.sapa-profil-card:hover, .sapa-profil-card:focus-visible { transform: none; }
}

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

/* Variante bouton « soft » (orange, Stack Sans, sans majuscules) */
.sapa-btn--soft {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.3px;
	text-transform: none;
}

/* =========================================================================
 * BLOC IMAGE TEXTE  (Figma 293:1383) — « À propos »
 * ====================================================================== */
.sapa-imgtext { background: var(--color-surface-default); }
.sapa-imgtext__inner {
	padding-block: 48px;
	display: grid;
	grid-template-columns: 620fr 600fr;
	gap: 56px;
	align-items: center;
}
.sapa-imgtext__media {
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.07);
	aspect-ratio: 620 / 567;
	background: var(--color-image-placeholder);
}
.sapa-imgtext__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sapa-imgtext__content { display: flex; flex-direction: column; gap: 32px; }
.sapa-imgtext__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(34px, 3.6vw, 50px);
	line-height: 1.05;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-default);
	margin: 0 0 -8px;
}
.sapa-imgtext__lead {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.8;
	color: var(--color-text-muted);
	margin: 0;
}
.sapa-imgtext__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.sapa-imgtext__points li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-text-default);
}
.sapa-imgtext__bullet {
	width: 6px;
	height: 6px;
	background: var(--color-brand-primary);
	flex-shrink: 0;
}
.sapa-imgtext__btn { align-self: flex-start; }

@media (max-width: 1024px) {
	.sapa-imgtext__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* =========================================================================
 * BLOC TÉMOIGNAGE  (Figma 293:1415)
 * ====================================================================== */
.sapa-testimonial { background: var(--color-surface-inverse); min-height: 450px; display: flex; align-items: center; }
.sapa-testimonial__inner {
	width: 100%;
	max-width: 700px;
	margin-inline: auto;
	padding: 40px var(--sapa-gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}
.sapa-testimonial__mark {
	width: 46px;
	height: 28px;
	color: var(--color-brand-primary);
}
.sapa-testimonial__quote {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.2;
	letter-spacing: 0.5px;
	color: var(--color-text-on-inverse);
	margin: 0;
}
.sapa-testimonial__quote .is-accent { color: var(--color-brand-primary); }
.sapa-testimonial__author { display: flex; flex-direction: column; gap: 6px; }
.sapa-testimonial__name {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	color: var(--color-text-on-inverse);
	margin: 0;
}
.sapa-testimonial__role {
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--color-text-on-inverse-subtle);
	margin: 0;
}

/* =========================================================================
 * BLOC BLOG  (Figma 293:1498) — 3 dernières actualités
 * ====================================================================== */
.sapa-blog { background: var(--color-surface-default); }
.sapa-blog__inner {
	padding-block: 56px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.sapa-blog__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}
.sapa-blog__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-default);
	margin: 0;
}
.sapa-blog__all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	color: var(--color-brand-primary);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	padding: 14px 28px 16px;
	border-radius: var(--radius-pill);
}
.sapa-blog__all:hover { background: var(--color-brand-tint); }
.sapa-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.sapa-article-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 16px;
	text-decoration: none;
}
.sapa-article-card::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--color-brand-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s ease;
}
.sapa-article-card:hover::after { transform: scaleX(1); }
.sapa-article-card__media {
	height: 200px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.05);
	background: #e8e3de;
}
.sapa-article-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.sapa-article-card:hover .sapa-article-card__media img { transform: scale(1.04); }
.sapa-article-card__cat {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--color-brand-primary);
}
.sapa-article-card__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.3px;
	color: var(--color-text-default);
	margin: 0;
}
.sapa-article-card:hover .sapa-article-card__title { color: var(--color-brand-primary); }
.sapa-article-card__date {
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--color-text-subtle);
}

@media (max-width: 900px) {
	.sapa-blog__grid { grid-template-columns: 1fr; max-width: 460px; }
	.sapa-blog__head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* =========================================================================
 * BLOC PARTENAIRES  (Figma 293:1550) — slider de logos
 * ====================================================================== */
.sapa-partners {
	background: var(--color-surface-default);
	border-top: 1px solid var(--color-border-default);
}
.sapa-partners__inner {
	padding-block: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}
.sapa-partners__eyebrow {
	font-family: var(--font-body);
	font-size: 14px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--color-text-muted);
	text-align: center;
	margin: 0;
}
.sapa-partners__slider {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
}
.sapa-partners__arrow {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-brand-primary);
	color: var(--color-text-on-brand);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-2xl);
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.sapa-partners__arrow:hover { background: var(--color-brand-primary-hover); }
.sapa-partners__track {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.sapa-partners__track::-webkit-scrollbar { display: none; }
.sapa-partners__card {
	flex: 1 0 0;
	min-width: 160px;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--color-surface-default);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
}
.sapa-partners__card img {
	max-width: 100%;
	max-height: 80px;
	object-fit: contain;
}

/* Duplicata des logos : utile uniquement pour la boucle du défilement mobile. */
.sapa-partners__card--clone { display: none; }

@media (max-width: 700px) {
	.sapa-partners__arrow { display: none; }
	/* Logos plus petits pour en voir plusieurs d'un coup. */
	.sapa-partners__card {
		flex: 0 0 auto;
		min-width: 0;
		width: 112px;
		height: 88px;
		padding: 12px;
	}
	.sapa-partners__card img { max-height: 48px; }
	.sapa-partners__card--clone { display: flex; }
	/* Défilement automatique (marquee) : le duplicata permet une boucle sans saut. */
	.sapa-partners__slider { overflow: hidden; }
	.sapa-partners__track {
		gap: 16px;
		/* `flex:0 0 auto` OBLIGATOIRE : la règle de base met `flex:1 1 0`, qui
		   écrase `width:max-content` → la piste ferait la largeur de l'écran et
		   le décalage de -50% serait calculé sur la mauvaise référence
		   (l'animation semblait revenir sur le même logo). */
		flex: 0 0 auto;
		width: max-content;
		overflow-x: visible;
		/* ~100 px/s. NB : la piste parcourt 1540px par cycle — une durée plus
		   courte accélère très vite (5s ≈ 308 px/s, jugé trop rapide). */
		animation: sapa-marquee 15s linear infinite;
	}
}
/* Décalage = moitié de la piste + moitié du gap → raccord invisible. */
@keyframes sapa-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - 8px)); }
}
@media (prefers-reduced-motion: reduce) {
	.sapa-partners__track { animation: none; }
}


/* =========================================================================
 * APPARITION AU SCROLL (premium) — appliqué à toutes les pages du thème.
 * Caché dès le 1er paint via .sapa-js (anti-flash) ; révélé par IntersectionObserver.
 * Cibles génériques : *__head, *__content, *__media, les cartes, + [data-reveal].
 * Désactivé si l'utilisateur préfère moins d'animations.
 * ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
	/* --- Titres & textes de section : fondu + léger flou, très smooth (pas d'à-coup) --- */
	.sapa-js :is(
		.sapa-hero__content,
		.sapa-heros__text,
		.sapa-prestations__head,
		.sapa-reals__head,
		.sapa-docs__head,
		.sapa-profils__head,
		.sapa-blog__head,
		.sapa-services__head,
		.sapa-methodo__head,
		.sapa-engagement__title,
		.sapa-imgtext__content,
		.sapa-testimonial__inner,
		.sapa-footer__cta
	) {
		opacity: 0;
		transform: translateY(12px);
		filter: blur(8px);
		transition:
			opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
			transform 1s cubic-bezier(0.22, 1, 0.36, 1),
			filter 1s cubic-bezier(0.22, 1, 0.36, 1);
		will-change: opacity, transform, filter;
	}
	.sapa-js :is(
		.sapa-hero__content,
		.sapa-heros__text,
		.sapa-prestations__head,
		.sapa-reals__head,
		.sapa-docs__head,
		.sapa-profils__head,
		.sapa-blog__head,
		.sapa-services__head,
		.sapa-methodo__head,
		.sapa-engagement__title,
		.sapa-imgtext__content,
		.sapa-testimonial__inner,
		.sapa-footer__cta
	).is-visible {
		opacity: 1;
		transform: none;
		filter: none;
	}

	/* --- Cartes, médias & items : glissement doux --- */
	.sapa-js :is(
		[data-reveal],
		.sapa-hero__media,
		.sapa-imgtext__media,
		.sapa-presta-card,
		.sapa-doc-card,
		.sapa-profil-card,
		.sapa-article-card,
		.sapa-realcard,
		.sapa-service-card,
		.sapa-projet-card,
		.sapa-featured,
		.sapa-engagement__item,
		.sapa-methodo__step,
		.sapa-partners__inner
	) {
		opacity: 0;
		transform: translateY(24px);
		transition:
			opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
			transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
		will-change: opacity, transform;
	}
	.sapa-js :is(
		[data-reveal],
		.sapa-hero__media,
		.sapa-imgtext__media,
		.sapa-presta-card,
		.sapa-doc-card,
		.sapa-profil-card,
		.sapa-article-card,
		.sapa-realcard,
		.sapa-service-card,
		.sapa-projet-card,
		.sapa-featured,
		.sapa-engagement__item,
		.sapa-methodo__step,
		.sapa-partners__inner
	).is-visible {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================================
 * HERO S — pages internes (Figma 293:2013)
 * ====================================================================== */
.sapa-heros { background: var(--color-surface-inverse); }
.sapa-heros__inner {
	padding-block: 100px 80px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.sapa-heros__crumb {
	display: flex;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 14px;
}
.sapa-heros__crumb a { color: var(--color-text-on-inverse-muted); text-decoration: none; }
.sapa-heros__crumb a:hover { color: var(--color-text-on-inverse); }
.sapa-heros__crumb span[aria-hidden] { color: var(--color-text-on-inverse-subtle); }
.sapa-heros__current { color: var(--color-brand-primary); font-weight: 700; }
.sapa-heros__text { display: flex; flex-direction: column; gap: 16px; }
.sapa-heros__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(48px, 6vw, 88px);
	line-height: 0.95;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-on-inverse);
	margin: 0;
}
.sapa-heros__title .is-accent { color: var(--color-brand-primary); }
.sapa-heros__subtitle {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.7;
	color: var(--color-text-on-inverse);
	max-width: 588px;
	margin: 0;
}

/* =========================================================================
 * SERVICES — grille Card prestation (Figma 212:3050)
 * ====================================================================== */
.sapa-services { background: var(--color-surface-default); }
.sapa-services__inner { padding-block: 70px; display: flex; flex-direction: column; gap: 48px; }
.sapa-services__head { display: flex; flex-direction: column; gap: 12px; }
.sapa-services__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.05;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-default);
	margin: 0;
}
.sapa-services__subtitle {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-text-muted);
	max-width: 600px;
	margin: 0;
}
.sapa-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* 6 savoir-faire = 3×2 */
.sapa-service-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface-inverse);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.sapa-service-card__media { height: 220px; }
.sapa-service-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.sapa-service-card:hover .sapa-service-card__media img { transform: scale(1.04); }
.sapa-service-card__body { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 24px; flex: 1 1 auto; }
.sapa-service-card__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-text-on-inverse);
	margin: 0;
}
.sapa-service-card__desc {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-subtle);
	margin: 0;
}
.sapa-service-card__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	color: var(--color-brand-primary);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
}
.sapa-service-card__link:hover { gap: 14px; }

/* =========================================================================
 * BLOC ENGAGEMENT (Figma 293:245)
 * ====================================================================== */
.sapa-engagement { background: var(--color-surface-inverse); }
.sapa-engagement__inner { padding-block: 100px; display: flex; flex-direction: column; gap: 64px; }
.sapa-engagement__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(32px, 4vw, 52px);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-on-inverse);
	text-align: center;
	margin: 0;
}
.sapa-engagement__row { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
.sapa-engagement__item { flex: 1 1 0; min-width: 160px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sapa-engagement__icon {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-3xl);
	background: var(--color-brand-tint);
	color: var(--color-brand-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sapa-engagement__label {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(28px, 3vw, 44px);
	text-transform: uppercase;
	color: var(--color-text-on-inverse);
	margin: 0;
	text-align: center;
}

/* =========================================================================
 * BLOC MÉTHODOLOGIE (Figma 293:2273)
 * ====================================================================== */
.sapa-methodo { background: var(--color-surface-default); }
.sapa-methodo__inner { padding-block: 80px; display: flex; flex-direction: column; gap: 48px; }
.sapa-methodo__head { display: flex; flex-direction: column; gap: 12px; }
.sapa-methodo__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.05;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-default);
	margin: 0;
}
.sapa-methodo__subtitle {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-text-muted);
	max-width: 600px;
	margin: 0;
}
.sapa-methodo__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sapa-methodo__step { display: flex; flex-direction: column; }
.sapa-methodo__indicator { display: flex; align-items: center; margin-bottom: 24px; }
.sapa-methodo__num {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: var(--radius-2xl);
	background: var(--color-brand-primary);
	color: var(--color-text-on-brand);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sapa-methodo__connector {
	flex: 1 1 auto;
	height: 0;
	border-top: 2px dashed var(--color-brand-primary);
	opacity: 0.6;
}
.sapa-methodo__step.is-last .sapa-methodo__connector { display: none; }
.sapa-methodo__step-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-text-default);
	margin: 0 0 8px;
}
.sapa-methodo__step-desc {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin: 0;
}

@media (max-width: 1000px) {
	.sapa-services__grid { grid-template-columns: repeat(2, 1fr); }
	.sapa-methodo__row { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
	.sapa-methodo__connector { display: none; }
}
@media (max-width: 600px) {
	.sapa-services__grid { grid-template-columns: 1fr; }
	.sapa-methodo__row { grid-template-columns: 1fr; }
	.sapa-engagement__item { min-width: calc(50% - 16px); }
}

/* =========================================================================
 * PAGE RÉALISATIONS — filtres + grille Card projet + pagination (Figma 212:2354)
 * ====================================================================== */
.sapa-filters { background: var(--color-surface-subtle); }
.sapa-filters__inner {
	padding-block: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.sapa-filter {
	padding: 12px 24px;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	background: var(--color-surface-default);
	border: 1px solid var(--color-border-default);
	color: var(--color-text-default);
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.sapa-filter:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.sapa-filter.is-active {
	background: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
	color: var(--color-text-on-brand);
}

.sapa-archive { background: var(--color-surface-default); }
.sapa-archive__inner { padding-block: 40px 56px; display: flex; flex-direction: column; gap: 24px; }
.sapa-archive__count {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-text-muted);
	margin: 0;
}
.sapa-archive__empty {
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--color-text-muted);
	padding: 24px 0;
	margin: 0;
}
.sapa-projets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sapa-projet-card {
	position: relative;
	display: block;
	height: 420px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.05);
	background: var(--color-image-placeholder);
}
/* Pas de contour au clic sur une réalisation ; focus clavier discret */
.sapa-projet-card:focus,
.sapa-realcard:focus { outline: none; }
.sapa-projet-card:focus-visible,
.sapa-realcard:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; }
.sapa-projet-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.sapa-projet-card:hover img { transform: scale(1.04); }
.sapa-projet-card__info {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
	padding: 20px;
	background: linear-gradient(to top, rgba(17, 24, 39, 0.83) 20%, rgba(17, 24, 39, 0) 75%);
}
.sapa-projet-card__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.sapa-badge--loc { background: var(--color-surface-subtle); color: var(--color-text-default); }
.sapa-projet-card__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 24px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--color-text-on-inverse);
	margin: 0;
}

.sapa-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding-top: 32px; }
.sapa-pagination a,
.sapa-pagination span {
	min-width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-text-default);
	text-decoration: none;
}
.sapa-pagination a:hover { background: var(--color-surface-subtle); }
.sapa-pagination .is-current { background: var(--color-brand-primary); color: var(--color-text-on-brand); }
.sapa-pagination__dots { color: var(--color-text-subtle); }

@media (max-width: 1000px) {
	.sapa-projets-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.sapa-projets-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
 * PAGE BLOG — article vedette (Card L) + grille (Card S) (Figma 212:3241)
 * ====================================================================== */
.sapa-blog-list { background: var(--color-surface-default); }
.sapa-blog-list__inner { padding-block: 56px; display: flex; flex-direction: column; gap: 48px; }

.sapa-featured { display: grid; grid-template-columns: 1fr 500px; gap: 48px; align-items: center; text-decoration: none; }
.sapa-featured__media { height: 420px; border-radius: var(--radius-lg); overflow: hidden; background: #e8e3de; }
.sapa-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.sapa-featured:hover .sapa-featured__media img { transform: scale(1.03); }
.sapa-featured__body { display: flex; flex-direction: column; gap: 20px; }
.sapa-featured__eyebrow { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.sapa-featured__eyebrow span:first-child { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-brand-primary); }
.sapa-featured__rule { height: 2px; background: var(--color-brand-primary); width: 100%; }
.sapa-featured__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(30px, 3.5vw, 40px); line-height: 1.1; color: var(--color-text-default); margin: 0; }
.sapa-featured:hover .sapa-featured__title { color: var(--color-brand-primary); }
.sapa-featured__date { font-family: var(--font-body); font-size: 12px; color: var(--color-text-subtle); }
.sapa-featured__excerpt { font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: var(--color-text-muted); margin: 0; }
.sapa-featured__link { display: inline-flex; align-items: center; gap: 10px; color: var(--color-brand-primary); font-family: var(--font-body); font-weight: 500; font-size: 14px; }
.sapa-featured:hover .sapa-featured__link { gap: 14px; }

.sapa-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sapa-article-card__excerpt {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.7;
	color: var(--color-text-muted);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sapa-blog-empty { font-family: var(--font-body); font-size: 16px; color: var(--color-text-muted); }

@media (max-width: 1000px) {
	.sapa-featured { grid-template-columns: 1fr; gap: 24px; }
	.sapa-featured__media { height: 320px; }
	.sapa-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.sapa-blog-grid { grid-template-columns: 1fr; max-width: 400px; }
}

/* =========================================================================
 * SINGLE ARTICLE
 * ====================================================================== */
.sapa-single__cat, .sapa-single .sapa-single__cat a {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--color-brand-primary);
	text-decoration: none;
}
.sapa-single__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.1;
	color: var(--color-text-default);
}
.sapa-single__date { font-family: var(--font-body); font-size: 14px; color: var(--color-text-subtle); }
.sapa-single__image img { width: 100%; border-radius: var(--radius-lg); }
.sapa-single .wp-block-post-content { line-height: 1.8; color: var(--color-text-default); }
.sapa-single__back a { color: var(--color-brand-primary); text-decoration: none; font-weight: 500; }
.sapa-single__back a:hover { text-decoration: underline; }

/* =========================================================================
 * PAGE À PROPOS
 * ====================================================================== */

/* Hero L (Figma 293:2375) */
.sapa-herol {
	position: relative;
	min-height: 600px;
	display: flex;
	align-items: flex-end;
	background-image: var(--sapa-herol-img);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.sapa-herol__overlay { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.5); }
.sapa-herol__inner { position: relative; z-index: 1; width: 100%; padding-block: 100px 80px; display: flex; flex-direction: column; gap: 24px; }
/* Fil d'Ariane toujours en haut à gauche du hero (sur image plein cadre) */
.sapa-herol__crumb-bar { position: absolute; top: 40px; left: 0; right: 0; z-index: 2; }
.sapa-herol__crumb-bar .sapa-herol__crumb { max-width: var(--sapa-container); margin-inline: auto; padding-inline: var(--sapa-gutter); }
.sapa-herol__crumb { display: flex; gap: 8px; font-family: var(--font-body); font-size: 14px; color: var(--color-text-on-inverse); }
.sapa-herol__crumb a { color: var(--color-text-on-inverse); text-decoration: none; }
.sapa-herol__current { color: var(--color-brand-primary); font-weight: 700; }
.sapa-herol__text { display: flex; flex-direction: column; gap: 24px; }
.sapa-herol__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(44px, 6vw, 88px);
	line-height: 0.92;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-on-inverse);
	margin: 0;
}
.sapa-herol__title .is-accent { color: var(--color-brand-primary-hover); }
.sapa-herol__subtitle { font-family: var(--font-body); font-size: 20px; line-height: 1.6; color: var(--color-text-on-inverse); max-width: 685px; margin: 0; }

/* Chiffres clefs (Figma 293:2411) */
.sapa-stats { background: var(--color-surface-default); }
.sapa-stats__inner { padding-block: 90px; display: flex; align-items: center; gap: 56px; }
.sapa-stats__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.05;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-default);
	margin: 0;
	flex-shrink: 0;
	max-width: 395px;
}
.sapa-stats__divider { width: 1px; align-self: stretch; background: var(--color-border-default); }
.sapa-stats__grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; }
.sapa-stats__item { display: flex; flex-direction: column; gap: 12px; }
.sapa-stats__num {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(48px, 5vw, 75px);
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--color-brand-primary-hover);
}
.sapa-stats__label {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-text-default);
}

/* Timeline (Figma 293:2837) */
.sapa-timeline { background: var(--color-surface-default); }
.sapa-timeline__inner { padding-block: 100px; display: flex; flex-direction: column; gap: 64px; }
.sapa-timeline__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(34px, 4vw, 52px);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-default);
	margin: 0;
}
.sapa-timeline__body { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.sapa-timeline__list { list-style: none; margin: 0; padding: 0; }
.sapa-timeline__item { position: relative; padding-left: 36px; padding-bottom: 28px; }
.sapa-timeline__item::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-brand-primary); z-index: 1; }
.sapa-timeline__item::after { content: ""; position: absolute; left: 6px; top: 4px; bottom: 0; width: 2px; background: var(--color-border-default); }
.sapa-timeline__item:last-child { padding-bottom: 0; }
.sapa-timeline__item:last-child::after { display: none; }
.sapa-timeline__year { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 32px; letter-spacing: 1px; line-height: 1; color: var(--color-brand-primary-hover); margin-bottom: 8px; }
.sapa-timeline__step-title { font-family: var(--font-heading); font-weight: 700; font-size: 20px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-text-default); margin: 0 0 8px; }
.sapa-timeline__step-desc { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--color-text-muted); margin: 0; }
.sapa-timeline__media { position: sticky; top: 100px; border-radius: var(--radius-2xl); overflow: hidden; height: 472px; }
.sapa-timeline__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Profils — variante sombre (Figma 293:3090) */
.sapa-profils--dark { background: var(--color-surface-inverse); }
.sapa-profils--dark .sapa-profils__title { color: var(--color-text-on-inverse); }

/* Contact L (Figma 293:3176) */
.sapa-contact { background: var(--color-surface-default); }
.sapa-contact .sapa-section__inner { padding-block: 80px; }
.sapa-contact__card { display: grid; grid-template-columns: 668fr 648fr; border: 1px solid var(--color-border-default); border-radius: var(--radius-3xl); overflow: hidden; min-height: 431px; }
.sapa-contact__left { position: relative; background: var(--color-surface-inverse); padding: 72px 52px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; overflow: hidden; }
.sapa-contact__left-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; max-width: 345px; }
.sapa-contact__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4vw, 52px); letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-on-inverse); margin: 0; }
.sapa-contact__subtitle { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--color-text-on-inverse-muted); margin: 0; }
.sapa-contact__cta {
	position: relative; z-index: 1; align-self: flex-start;
	background: var(--color-brand-primary); color: var(--color-text-on-brand);
	font-family: var(--font-heading); font-weight: 700; font-size: 18px; letter-spacing: 0.3px; text-transform: uppercase;
	padding: 16px 28px; border-radius: var(--radius-pill); text-decoration: none;
	transition: background-color 0.2s ease;
}
.sapa-contact__cta:hover { background: var(--color-brand-primary-hover); }
.sapa-contact__portrait { position: absolute; right: 0; bottom: 0; height: 92%; width: auto; object-fit: contain; object-position: bottom right; z-index: 0; pointer-events: none; }
.sapa-contact__right { background: var(--color-surface-subtle); padding: 72px; display: flex; flex-direction: column; gap: 24px; }
.sapa-contact__company { display: flex; flex-direction: column; gap: 8px; }
.sapa-contact__logo { width: 105px; height: auto; }
.sapa-contact__addr { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-text-muted); margin: 0; }
.sapa-contact__details { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sapa-contact__details li { display: flex; align-items: center; gap: 12px; padding-block: 14px; }
.sapa-contact__ic { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-lg); background: var(--color-surface-brand); color: var(--color-text-on-brand); display: flex; align-items: center; justify-content: center; }
.sapa-contact__details a, .sapa-contact__details span { font-family: var(--font-body); font-size: 16px; color: var(--color-text-default); text-decoration: none; }
.sapa-contact__details a:hover { color: var(--color-brand-primary); }

/* Réalisations S (Figma 293:3283) */
.sapa-reals-s { background: var(--color-surface-subtle); }
.sapa-reals-s__inner { padding-block: 100px; display: flex; flex-direction: column; gap: 56px; }
.sapa-reals-s__head { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.sapa-reals-s__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4vw, 52px); letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-default); margin: 0; }
.sapa-reals-s__all { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--color-brand-primary); text-decoration: none; white-space: nowrap; flex-shrink: 0; padding: 14px 28px 16px; border-radius: var(--radius-pill); }
.sapa-reals-s__all:hover { background: var(--color-brand-tint); }
.sapa-reals-s__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

@media (max-width: 1000px) {
	.sapa-stats__inner { flex-direction: column; align-items: flex-start; gap: 40px; }
	.sapa-stats__divider { display: none; }
	.sapa-stats__grid { width: 100%; }
	.sapa-timeline__body { grid-template-columns: 1fr; }
	.sapa-timeline__media { position: static; height: 360px; order: -1; }
	.sapa-contact__card { grid-template-columns: 1fr; }
	.sapa-contact__portrait { display: none; }
	.sapa-reals-s__grid { grid-template-columns: repeat(2, 1fr); }
	.sapa-reals-s__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
	.sapa-stats__grid { grid-template-columns: repeat(2, 1fr); }
	.sapa-reals-s__grid { grid-template-columns: 1fr; }
}

/* À propos — Notre expertise (Figma 293:2437) */
.sapa-expertise { background: var(--color-surface-default); }
.sapa-expertise__inner { padding-block: 48px; display: grid; grid-template-columns: 620fr 600fr; gap: 56px; align-items: center; }
.sapa-expertise__media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 14px 32px -12px rgba(0,0,0,0.07); aspect-ratio: 620 / 567; background: var(--color-image-placeholder); }
.sapa-expertise__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sapa-expertise__content { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sapa-expertise__badge { background: var(--color-brand-primary); color: var(--color-text-on-brand); font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: 4px; }
.sapa-expertise__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.05; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-default); margin: 0; }
.sapa-expertise__lead { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--color-text-default); margin: 0; }
.sapa-expertise__points { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.sapa-expertise__points li { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--color-text-default); }
.sapa-expertise__bullet { width: 6px; height: 6px; background: var(--color-brand-primary); flex-shrink: 0; }
.sapa-expertise__note { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--color-text-default); margin: 0; }
.sapa-expertise__tagline { display: flex; align-items: center; gap: 16px; font-family: var(--font-heading); font-weight: 700; font-size: 16px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-text-default); margin-top: 20px; }
.sapa-expertise__rule { width: 40px; height: 2px; background: var(--color-surface-brand); flex-shrink: 0; }
.sapa-expertise__btn { margin-top: 12px; }
@media (max-width: 1024px) { .sapa-expertise__inner { grid-template-columns: 1fr; gap: 40px; } }

/* =========================================================================
 * FORMULAIRE (devis/contact) — Figma 293:3801
 * ====================================================================== */
.sapa-form { background: var(--color-surface-subtle); }
.sapa-form__inner { padding-block: 80px; display: grid; grid-template-columns: 1fr 720px; gap: 80px; align-items: start; }
.sapa-form__info { display: flex; flex-direction: column; gap: 48px; }
.sapa-form__intro { display: flex; flex-direction: column; gap: 20px; }
.sapa-form__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(32px, 4vw, 42px); text-transform: uppercase; color: var(--color-text-default); margin: 0; }
.sapa-form__lead { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--color-text-muted); margin: 0; }
.sapa-form__benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 32px; }
.sapa-form__benefits li { display: flex; gap: 16px; align-items: flex-start; }
.sapa-form__benefit-ic { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-2xl); background: var(--color-brand-tint); color: var(--color-brand-primary); display: flex; align-items: center; justify-content: center; }
.sapa-form__benefit-txt { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }
.sapa-form__benefit-txt strong { font-family: var(--font-heading); font-weight: 700; font-size: 18px; text-transform: uppercase; color: var(--color-text-default); }
.sapa-form__card { background: var(--color-surface-default); border: 1px solid var(--color-border-default); border-radius: var(--radius-2xl); padding: 48px; display: flex; flex-direction: column; gap: 24px; }
.sapa-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sapa-form__field { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--color-text-default); }
.sapa-form__field input, .sapa-form__field select, .sapa-form__field textarea {
	font-family: var(--font-body); font-weight: 400; font-size: 16px; color: var(--color-text-default);
	background: var(--color-surface-default); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm);
	padding: 12px 16px; width: 100%; box-sizing: border-box;
}
.sapa-form__field textarea { resize: vertical; min-height: 120px; }
.sapa-form__field input::placeholder, .sapa-form__field textarea::placeholder { color: var(--color-text-muted); }
.sapa-form__field input:focus, .sapa-form__field select:focus, .sapa-form__field textarea:focus { outline: none; border-color: var(--color-brand-primary); }
.sapa-form__rgpd { display: flex; gap: 12px; align-items: flex-start; font-family: var(--font-body); font-size: 14px; color: var(--color-text-muted); }
.sapa-form__rgpd input { margin-top: 2px; width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--color-brand-primary); }
.sapa-form__submit { background: var(--color-brand-primary); color: var(--color-text-on-brand); font-family: var(--font-heading); font-weight: 700; font-size: 18px; text-transform: uppercase; border: 0; border-radius: var(--radius-pill); padding: 18px; cursor: pointer; width: 100%; transition: background-color 0.2s ease; }
.sapa-form__submit:hover { background: var(--color-brand-primary-hover); }

/* =========================================================================
 * FAQ (Figma 212:3673) — accordéon natif + sidebar contact
 * ====================================================================== */
.sapa-faq { background: var(--color-surface-default); }
.sapa-faq__inner { padding-block: 56px 100px; display: grid; grid-template-columns: 1fr 420px; gap: 80px; align-items: start; }
.sapa-faq__item { border-bottom: 1px solid var(--color-border-default); }
.sapa-faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 0; font-family: var(--font-heading); font-weight: 700; font-size: 24px; text-transform: uppercase; color: var(--color-text-default); }
.sapa-faq__q::-webkit-details-marker { display: none; }
/* Pas de contour noir au clic ; focus clavier discret en orange (accessibilité) */
.sapa-faq__q:focus { outline: none; }
.sapa-faq__q:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 4px; border-radius: 4px; }
.sapa-faq__icon { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.sapa-faq__icon::before, .sapa-faq__icon::after { content: ""; position: absolute; background: var(--color-brand-primary); }
.sapa-faq__icon::before { left: 0; top: 11px; width: 24px; height: 2px; }
.sapa-faq__icon::after { left: 11px; top: 0; width: 2px; height: 24px; transition: opacity 0.2s ease; }
.sapa-faq__item[open] .sapa-faq__icon::after { opacity: 0; }
.sapa-faq__a { padding-bottom: 32px; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--color-text-muted); max-width: 815px; }

/* Sidebar Contact S (Figma 293:4045) */
.sapa-contact-s { background: var(--color-surface-inverse); border-radius: var(--radius-xl); padding: 40px; display: flex; flex-direction: column; gap: 32px; }
.sapa-contact-s__title { font-family: var(--font-heading); font-weight: 700; font-size: 32px; text-transform: uppercase; color: var(--color-text-on-inverse); margin: 0; }
.sapa-contact-s__intro { display: flex; gap: 20px; align-items: center; }
.sapa-contact-s__portrait { width: 126px; height: auto; flex-shrink: 0; border-radius: var(--radius-md); }
.sapa-contact-s__intro p { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--color-text-subtle); margin: 0; }
.sapa-contact-s__details { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.sapa-contact-s__details li { display: flex; align-items: center; gap: 12px; color: var(--color-brand-primary); }
.sapa-contact-s__details a { font-family: var(--font-body); font-size: 16px; color: var(--color-text-on-inverse); text-decoration: none; }
.sapa-contact-s__details a:hover { color: var(--color-brand-primary); }
.sapa-contact-s__cta { background: var(--color-brand-primary); color: var(--color-text-on-brand); font-family: var(--font-heading); font-weight: 700; font-size: 18px; text-transform: uppercase; text-align: center; padding: 18px; border-radius: var(--radius-pill); text-decoration: none; transition: background-color 0.2s ease; }
.sapa-contact-s__cta:hover { background: var(--color-brand-primary-hover); }

@media (max-width: 1024px) {
	.sapa-form__inner { grid-template-columns: 1fr; gap: 48px; }
	.sapa-faq__inner { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 600px) {
	.sapa-form__row { grid-template-columns: 1fr; }
	.sapa-form__card { padding: 28px; }
}

/* =========================================================================
 * DÉTAIL RÉALISATION (Figma 212:2843)
 * ====================================================================== */
.sapa-hero-real { position: relative; min-height: 600px; display: flex; align-items: flex-end; overflow: hidden; }
/* Calque image dédié : sert de cible à la transition partagée (carte → hero) */
.sapa-hero-real__media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; view-transition-name: sapa-real-hero; }
.sapa-hero-real__inner { position: relative; z-index: 1; width: 100%; padding-block: 60px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sapa-hero-real__tags { display: flex; gap: 8px; }
.sapa-hero-real__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(38px, 6vw, 88px); line-height: 0.95; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-on-inverse); margin: 0; }
.sapa-hero-real .sapa-herol__crumb a { color: var(--color-text-on-inverse-muted); }

.sapa-projet { background: var(--color-surface-default); }
.sapa-projet__inner { padding-block: 100px; display: grid; grid-template-columns: 1fr 427px; gap: 80px; align-items: start; }
.sapa-projet__main { display: flex; flex-direction: column; gap: 56px; }
.sapa-projet__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(32px, 4vw, 42px); line-height: 1.1; text-transform: uppercase; color: var(--color-text-default); margin: 0; max-width: 600px; }
.sapa-projet__text { display: flex; flex-direction: column; gap: 24px; font-family: var(--font-body); font-size: 18px; line-height: 1.8; color: var(--color-text-muted); }
.sapa-projet__text p { margin: 0; }
.sapa-projet__stats { display: flex; gap: 40px; border-top: 1px solid var(--color-border-default); padding-top: 40px; flex-wrap: wrap; }
.sapa-projet__stat { flex: 1 1 0; min-width: 120px; display: flex; flex-direction: column; gap: 4px; }
.sapa-projet__stat-num { font-family: var(--font-heading); font-weight: 800; font-size: 44px; line-height: 1; text-transform: uppercase; color: var(--color-text-default); }
.sapa-projet__stat-label { font-family: var(--font-body); font-weight: 600; font-size: 12px; text-transform: uppercase; color: var(--color-text-muted); }

.sapa-fiche { background: var(--color-surface-inverse); border-radius: var(--radius-xl); padding: 32px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 100px; }
.sapa-fiche__title { font-family: var(--font-heading); font-weight: 700; font-size: 28px; text-transform: uppercase; color: var(--color-text-on-inverse); margin: 0; }
.sapa-fiche__list { margin: 0; }
.sapa-fiche__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-border-on-inverse); }
.sapa-fiche__row dt { font-family: var(--font-body); font-size: 14px; color: var(--color-text-subtle); margin: 0; }
.sapa-fiche__row dd { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--color-text-on-inverse); margin: 0; }
.sapa-fiche__cta { background: var(--color-brand-primary); color: var(--color-text-on-brand); font-family: var(--font-heading); font-weight: 700; font-size: 18px; text-transform: uppercase; text-align: center; padding: 18px; border-radius: var(--radius-pill); text-decoration: none; margin-top: 8px; transition: background-color 0.2s ease; }
.sapa-fiche__cta:hover { background: var(--color-brand-primary-hover); }

.sapa-gallery { background: var(--color-surface-inverse); }
.sapa-gallery__inner { padding-block: 100px; display: flex; flex-direction: column; gap: 64px; }
.sapa-gallery__head { display: flex; flex-direction: column; gap: 16px; }
.sapa-gallery__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4vw, 52px); letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-on-inverse); margin: 0; }
.sapa-gallery__rule { width: 80px; height: 4px; background: var(--color-brand-primary); }
.sapa-gallery__grid { display: grid; grid-template-columns: 961fr 352fr; gap: 16px; align-items: start; }
.sapa-gallery__main { display: flex; flex-direction: column; gap: 16px; }
.sapa-gallery__row { display: grid; grid-template-columns: 598fr 347fr; gap: 16px; }
.sapa-gallery__side { display: flex; flex-direction: column; gap: 16px; }
.sapa-gallery__cell { border-radius: var(--radius-md); overflow: hidden; background: var(--color-image-placeholder); }
.sapa-gallery__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sapa-gallery__a { aspect-ratio: 961 / 346; }
.sapa-gallery__d { aspect-ratio: 598 / 408; }
.sapa-gallery__e { aspect-ratio: 347 / 408; }
.sapa-gallery__b { aspect-ratio: 352 / 416; }
.sapa-gallery__f { aspect-ratio: 352 / 338; }

@media (max-width: 1024px) {
	.sapa-projet__inner { grid-template-columns: 1fr; gap: 48px; }
	.sapa-fiche { position: static; }
	.sapa-gallery__grid { grid-template-columns: 1fr; }
	.sapa-gallery__side { flex-direction: row; }
	.sapa-gallery__side .sapa-gallery__cell { flex: 1; }
	.sapa-gallery__b, .sapa-gallery__f { aspect-ratio: 4 / 3; }
}

/* =========================================================================
 * ÉDITORIAL (syndics) + ARTICLE 2 COLONNES
 * ====================================================================== */
.sapa-editorial { background: var(--color-surface-default); }
.sapa-editorial__inner { padding-block: 80px; display: grid; grid-template-columns: 560fr 660fr; gap: 64px; align-items: center; }
.sapa-editorial__media { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 14px 32px -12px rgba(0,0,0,0.07); background: var(--color-image-placeholder); }
.sapa-editorial__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sapa-editorial__content { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.sapa-editorial__eyebrow { font-family: var(--font-heading); font-weight: 700; font-size: 16px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-brand-primary); }
.sapa-editorial__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; text-transform: uppercase; color: var(--color-text-default); margin: 0; }
.sapa-editorial__lead { font-family: var(--font-body); font-size: 16px; line-height: 1.8; color: var(--color-text-muted); margin: 0; }
.sapa-editorial__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.sapa-editorial__points li { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--color-text-default); }
.sapa-editorial__bullet { width: 6px; height: 6px; background: var(--color-brand-primary); flex-shrink: 0; }
.sapa-editorial__cta { margin-top: 8px; }

.sapa-single__inner { max-width: var(--sapa-container); margin-inline: auto; padding: 56px var(--sapa-gutter) 80px; display: grid; grid-template-columns: 1fr 380px; gap: 80px; align-items: start; }
.sapa-single__main { max-width: 820px; }
.sapa-single__cat, .sapa-single__cat a { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-brand-primary); text-decoration: none; }
.sapa-single__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; color: var(--color-text-default); margin: 12px 0; }
.sapa-single__date { font-family: var(--font-body); font-size: 14px; color: var(--color-text-subtle); }
.sapa-single__cover img { width: 100%; border-radius: var(--radius-lg); margin-block: 24px; }
.sapa-single__content { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: var(--color-text-default); }
/* Rythme du corps. Spécificité renforcée (.sapa-single …) car le `blockGap:0`
   du <main> pousse WP à mettre margin-block:0 sur chaque bloc du contenu
   (même spécificité que .sapa-single__content) → sinon espacements à 0. */
.sapa-single .sapa-single__content > * { margin-block: 0; }
.sapa-single .sapa-single__content > * + * { margin-block-start: 24px; }
.sapa-single__content p { margin: 0; }
.sapa-single__content strong { font-weight: 700; }
.sapa-single__content a { color: var(--color-brand-primary); text-decoration: underline; }
.sapa-single__content ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.sapa-single__content li { line-height: 1.6; }
/* Titres de section : Barlow 32px uppercase + filet orange à gauche (Figma 293:5860). */
.sapa-single__content h2,
.sapa-single__content h3 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-text-default);
	border-left: 4px solid var(--color-border-brand);
	padding-left: 20px;
	margin-top: 48px;
}
/* Espace AVANT un titre = 48px (respiration entre sections), spécificité
   renforcée pour battre le blockGap:0 et le `> * + *` ci-dessus. */
.sapa-single .sapa-single__content > :is( h2, h3 ) { margin-block-start: 48px; }
.sapa-single .sapa-single__content > :is( h2, h3 ):first-child { margin-block-start: 0; }
.sapa-single__back { margin-top: 40px; }
.sapa-single__back a { color: var(--color-brand-primary); text-decoration: none; font-weight: 500; }

.sapa-artside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; }
.sapa-artside__cta { background: var(--color-surface-inverse); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.sapa-artside__cta h3 { font-family: var(--font-heading); font-weight: 700; font-size: 24px; text-transform: uppercase; color: var(--color-text-on-inverse); margin: 0; }
.sapa-artside__cta p { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--color-text-subtle); margin: 0; }
.sapa-artside__cta-btn { margin-top: 8px; background: var(--color-brand-primary); color: var(--color-text-on-brand); font-family: var(--font-heading); font-weight: 700; font-size: 16px; text-transform: uppercase; text-align: center; padding: 14px; border-radius: var(--radius-pill); text-decoration: none; }
.sapa-artside__recent { border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); padding: 28px; }
.sapa-artside__recent-title { font-family: var(--font-heading); font-weight: 700; font-size: 20px; text-transform: uppercase; color: var(--color-text-default); margin: 0 0 16px; }
.sapa-artside__recent ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.sapa-artside__recent li a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.sapa-artside__recent-cat { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-brand-primary); }
.sapa-artside__recent-t { font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--color-text-default); }
.sapa-artside__recent li a:hover .sapa-artside__recent-t { color: var(--color-brand-primary); }

@media (max-width: 1024px) {
	.sapa-editorial__inner { grid-template-columns: 1fr; gap: 40px; }
	.sapa-single__inner { grid-template-columns: 1fr; gap: 48px; }
	.sapa-artside { position: static; }
}

/* =========================================================================
 * PAGES PROFIL (syndics / architectes / foncières) — Figma 212:4999
 * ====================================================================== */
/* Bloc text + contact */
.sapa-tc { background: var(--color-surface-default); }
.sapa-tc__inner { padding-block: 80px; display: grid; grid-template-columns: 733fr 420fr; gap: 100px; align-items: start; }
.sapa-tc__text { display: flex; flex-direction: column; gap: 32px; }
.sapa-tc__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-default); margin: 0; }
.sapa-tc__body { display: flex; flex-direction: column; gap: 24px; font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: var(--color-text-default); }
.sapa-tc__body p { margin: 0; }

/* Bloc cards « pourquoi nous font confiance » */
.sapa-whycards { background: var(--color-surface-subtle); }
.sapa-whycards__inner { padding-block: 100px; display: flex; flex-direction: column; gap: 64px; }
.sapa-whycards__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4vw, 52px); letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-default); text-align: center; margin: 0; }
.sapa-whycards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sapa-whycard { background: var(--color-surface-default); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.sapa-whycard__icon { width: 32px; height: 32px; color: var(--color-brand-primary); margin-bottom: 8px; }
.sapa-whycard__title { font-family: var(--font-heading); font-weight: 700; font-size: 22px; text-transform: uppercase; color: var(--color-text-default); margin: 0; }
.sapa-whycard__desc { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--color-text-default); margin: 0; }

/* Bloc texte long */
.sapa-longtext { background: var(--color-surface-default); }
.sapa-longtext__inner { max-width: 900px; margin-inline: auto; padding: 80px var(--sapa-gutter); display: flex; flex-direction: column; gap: 24px; }
.sapa-longtext__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 3.5vw, 40px); letter-spacing: -0.8px; text-transform: uppercase; color: var(--color-text-default); margin: 0; }
.sapa-longtext__body { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: var(--color-text-default); }
.sapa-longtext__body p { margin: 0 0 1em; }
.sapa-longtext__body ul { margin: 0; padding-left: 1.5em; }
.sapa-longtext__body li { margin-bottom: 0.4em; }
.sapa-longtext__body strong { font-weight: 700; }

/* Bloc photo pleine largeur */
.sapa-bigphoto { background: var(--color-surface-default); }
.sapa-bigphoto__inner { max-width: 960px; margin-inline: auto; padding: 0 var(--sapa-gutter) 80px; }
.sapa-bigphoto__media { border-radius: var(--radius-2xl); overflow: hidden; aspect-ratio: 914 / 534; background: var(--color-image-placeholder); }
.sapa-bigphoto__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Méthodologie — variante sombre */
.sapa-methodo--dark { background: var(--color-surface-inverse); }
.sapa-methodo--dark .sapa-methodo__title { color: var(--color-text-on-inverse); }
.sapa-methodo--dark .sapa-methodo__subtitle,
.sapa-methodo--dark .sapa-methodo__step-desc { color: var(--color-text-subtle); }
.sapa-methodo--dark .sapa-methodo__step-title { color: var(--color-text-on-inverse); }

/* Méthodologie — variante « Devis » : intitulé à gauche, étapes reliées à droite (Figma 293:3916) */
.sapa-methodo--devis .sapa-methodo__inner {
	flex-direction: row;
	align-items: flex-start;
	gap: 56px;
	padding-block: 100px;
}
.sapa-methodo--devis .sapa-methodo__head {
	width: 374px;
	flex-shrink: 0;
	gap: 16px;
}
.sapa-methodo--devis .sapa-methodo__title .is-accent { color: var(--color-brand-primary); }
.sapa-methodo--devis .sapa-methodo__subtitle {
	/* Figma indique 15px — arrondi à 16px (règle SAPA : tailles toujours paires) */
	max-width: none;
}
.sapa-methodo--devis .sapa-methodo__row {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	gap: 0;
}
.sapa-methodo--devis .sapa-methodo__step {
	flex: 1 1 0;
	min-width: 0;
}
.sapa-methodo--devis .sapa-methodo__num { font-size: 20px; }
.sapa-methodo--devis .sapa-methodo__step-desc {
	/* Figma indique 13px — arrondi à 14px (règle SAPA : tailles toujours paires) */
	max-width: 200px;
}

@media (max-width: 1000px) {
	.sapa-methodo--devis .sapa-methodo__inner { flex-direction: column; gap: 40px; padding-block: 72px; }
	.sapa-methodo--devis .sapa-methodo__head { width: auto; }
	.sapa-methodo--devis .sapa-methodo__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; row-gap: 40px; }
	.sapa-methodo--devis .sapa-methodo__step-desc { max-width: none; }
}
@media (max-width: 600px) {
	.sapa-methodo--devis .sapa-methodo__inner { padding-block: 56px; }
	.sapa-methodo--devis .sapa-methodo__row { grid-template-columns: 1fr; }
}

/* FAQ pleine largeur (sans sidebar) */
.sapa-faq--full .sapa-section__inner { padding-block: 100px; }
.sapa-faq__heading { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4vw, 52px); letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-default); text-align: center; margin: 0 0 32px; }
.sapa-faq--full .sapa-faq__list { max-width: 900px; margin-inline: auto; }

@media (max-width: 1024px) {
	.sapa-tc__inner { grid-template-columns: 1fr; gap: 48px; }
	.sapa-whycards__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.sapa-whycards__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
 * AJUSTEMENTS — retours Alice (2026-07-20)
 * ====================================================================== */

/* --- Fil d'Ariane : toujours aligné à gauche, retour à la ligne propre ----
 * En flex `nowrap` les items se compriment et leur texte se casse au milieu
 * (effet « centré / en escalier »). On autorise le wrap et on cale à gauche.
 * Vaut pour TOUTES les pages (Hero S + Hero L / détail réalisation).
 * ------------------------------------------------------------------------ */
.sapa-heros__crumb,
.sapa-herol__crumb {
	flex-wrap: wrap;
	justify-content: flex-start;
	row-gap: 4px;
}

/* --- Article de blog : le texte à la même largeur que le reste ------------
 * WP ajoute le « root padding » (60px) aux groupes en layout `constrained`.
 * La gouttière est déjà gérée par `.sapa-single__inner` → on annule ce
 * padding, sinon le contenu est doublement rentré (222px de large sur 390).
 * ------------------------------------------------------------------------ */
.sapa-single__main { padding-inline: 0; }

@media (max-width: 700px) {
	/* --- Filtres réalisations : une seule ligne glissable ------------------
	 * Empilés verticalement ils mangeaient toute la hauteur de l'écran. */
	.sapa-filters { position: relative; }
	.sapa-filters__inner {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-block: 24px;
	}
	.sapa-filters__inner::-webkit-scrollbar { display: none; }
	.sapa-filter { flex: 0 0 auto; }
	/* Dégradé sur le bord droit = indice visuel « ça glisse ». */
	.sapa-filters::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 40px;
		pointer-events: none;
		background: linear-gradient(to right, transparent, var(--color-surface-subtle));
	}

	/* --- Aperçu réalisations : le bouton passe SOUS les cartes -------------
	 * `display:contents` sort le titre et le lien de leur bandeau pour
	 * pouvoir les ordonner individuellement dans la colonne. */
	.sapa-reals-s__inner { gap: 32px; }
	.sapa-reals-s__head { display: contents; }
	.sapa-reals-s__title { order: 1; }
	.sapa-reals-s__grid { order: 2; }
	.sapa-reals-s__all { order: 3; align-self: flex-start; padding-inline: 0; }

	/* --- Devis : le formulaire d'abord, l'argumentaire ensuite ------------- */
	.sapa-form__info { order: 2; }
}

/* =========================================================================
 * BLOG — séparateur de filtres (catégories | profils) + HERO D'ARTICLE
 * Design ISO maquette (Figma article 393:4104 / bloc texte 293:5860).
 * ====================================================================== */

/* Séparateur vertical entre filtres « sujet » et filtres « cible ». */
.sapa-filters__sep {
	width: 1px;
	height: 24px;
	align-self: center;
	background: var(--color-border-default);
	flex: 0 0 auto;
}

/* --- Hero d'article : texte à gauche, image à droite, fond clair ---------- */
.sapa-arthero { background: var(--color-surface-subtle); }
.sapa-arthero__inner {
	padding-block: 64px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.sapa-arthero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.sapa-arthero__crumb { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-body); font-size: 14px; color: var(--color-text-muted); }
.sapa-arthero__crumb a { color: var(--color-text-muted); text-decoration: none; }
.sapa-arthero__crumb a:hover { color: var(--color-brand-primary); }
.sapa-arthero__crumb span[aria-hidden] { color: var(--color-text-subtle); }
.sapa-arthero__current { color: var(--color-brand-primary); font-weight: 600; }
.sapa-arthero__badges { display: flex; align-items: center; gap: 16px; }
.sapa-arthero__profil { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-muted); }
.sapa-arthero__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-default); margin: 0; }
.sapa-arthero__excerpt { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: var(--color-text-muted); margin: 0; max-width: 560px; }
.sapa-arthero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-family: var(--font-body); font-size: 14px; color: var(--color-text-muted); }
.sapa-arthero__author { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--color-text-default); }
.sapa-arthero__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--color-brand-primary); color: var(--color-text-on-brand); font-family: var(--font-heading); font-weight: 800; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.sapa-arthero__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-text-subtle); flex-shrink: 0; }
.sapa-arthero__media { border-radius: var(--radius-2xl); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.18); }
.sapa-arthero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Le contenu démarre sous le hero : on allège le padding haut. */
.sapa-single .sapa-single__inner { padding-top: 56px; }

@media (max-width: 900px) {
	.sapa-arthero__inner { grid-template-columns: 1fr; gap: 28px; padding-block: 48px; }
	.sapa-arthero__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
	.sapa-single__content h2,
	.sapa-single__content h3 { padding-left: 16px; }
}

/* =========================================================================
 * PAGES LÉGALES (mentions légales / confidentialité / CGU)
 * Colonne de lecture étroite, look SAPA. Le `blockGap:0` du <main> impose
 * de re-régler l'espacement du contenu (cf. article, même gotcha).
 * ====================================================================== */
.sapa-legal__inner { max-width: 860px; margin-inline: auto; padding: 64px var(--sapa-gutter) 96px; }
.sapa-legal__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.05;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-default);
	margin: 0 0 32px;
}
.sapa-legal__content { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--color-text-default); }
.sapa-legal .sapa-legal__content > * { margin-block: 0; }
.sapa-legal .sapa-legal__content > * + * { margin-block-start: 18px; }
.sapa-legal .sapa-legal__content > h2 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-text-default);
	margin-block-start: 44px;
}
.sapa-legal .sapa-legal__content > h2:first-child { margin-block-start: 0; }
.sapa-legal__content strong { font-weight: 700; }
.sapa-legal__content a { color: var(--color-brand-primary); text-decoration: underline; }
.sapa-legal__content ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.sapa-legal__content li { line-height: 1.6; }
/* Les mentions « à compléter » ressortent (repère pour SAPA). */
.sapa-legal__content mark {
	background: var(--color-brand-tint);
	color: var(--color-brand-primary-hover);
	padding: 1px 6px;
	border-radius: var(--radius-xs);
	font-weight: 600;
}

/* --- Formulaire : messages de confirmation + honeypot anti-spam --------- */
.sapa-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sapa-form__notice { margin: 0 0 4px; padding: 14px 16px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 16px; line-height: 1.5; }
.sapa-form__notice--ok { background: #e7f6ec; color: #1a7f3c; border: 1px solid #b7e3c4; }
.sapa-form__notice--error { background: #fdecec; color: #b42318; border: 1px solid #f5c2c0; }

/* --- Footer : bouton « Nous contacter » (colonne Contact) --------------- */
.sapa-footer__col--contact { display: flex; flex-direction: column; align-items: flex-start; }
.sapa-footer__contact-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
	padding: 12px 24px;
	background: var(--color-brand-primary);
	color: var(--color-text-default);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border-radius: var(--radius-pill);
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.sapa-footer__contact-btn:hover { background: var(--color-brand-primary-hover); color: var(--color-text-default); }

/* ── Bloc steps (étapes numérotées dans les articles) — ISO maquette ──
   À plat (pas de carte, pas de filet) : carré arrondi orange numéroté +
   titre gras aligné au chiffre + desc grise. Sélecteurs scopés .sapa-single__content
   pour battre la règle des titres h2/h3 (filet orange, uppercase, 32px). */
.sapa-single__content ol.sapa-steps { list-style: none; margin: 32px 0 36px; padding: 0; display: flex; flex-direction: column; gap: 24px; }
/* espace titre → 1re étape (bat la règle > * + * de spécificité 0,2,0) */
.sapa-single .sapa-single__content > .sapa-steps { margin-block-start: 32px; }
.sapa-single__content .sapa-steps__item { display: flex; gap: 16px; align-items: flex-start; margin: 0; }
.sapa-single__content .sapa-steps__num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px; background: var(--color-brand-primary, #ff6918); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.sapa-single__content .sapa-steps__body { flex: 1 1 auto; min-width: 0; padding-top: 4px; }
.sapa-single__content .sapa-steps__title { font-family: var(--font-body); font-weight: 700; font-size: 18px; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--color-text-default, #16233d); border-left: 0; padding-left: 0; margin: 0 0 4px; }
.sapa-single__content .sapa-steps__desc { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-text-muted); margin: 0; }

/* ── Page 404 ───────────────────────────────────────────────────────── */
.sapa-404__inner { text-align: center; padding: 96px 0 112px; max-width: 640px; margin-inline: auto; }
.sapa-404__code { font-family: var(--font-heading); font-weight: 800; font-size: clamp(72px, 16vw, 140px); line-height: 1; color: var(--color-brand-primary, #ff6918); margin: 0; letter-spacing: 1px; }
.sapa-404__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(28px, 5vw, 40px); text-transform: uppercase; color: var(--color-text-default); margin: 8px 0 12px; }
.sapa-404__text { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--color-text-muted); margin: 0 auto 32px; max-width: 480px; }
.sapa-404__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* =========================================================================
 * Raffinements mobile / UX (retours client — oct. 2026)
 * ====================================================================== */

/* P5 — carte entièrement cliquable (lien étiré sur toute la carte) */
.sapa-profil-card,
.sapa-service-card { position: relative; }
.sapa-profil-card__link::after,
.sapa-service-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* P3 — bouton « Toutes les réalisations » : en-tête sur desktop, bas de bloc sur mobile */
.sapa-reals__all--bottom { display: none; }
@media (max-width: 1024px) {
	.sapa-reals__all--top { display: none; }
	.sapa-reals__all--bottom {
		display: inline-flex;
		margin-top: 20px;
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 600px) {
	/* P1 — boutons alignés sur la proportion de .sapa-btn-outline (padding 13px 28px) */
	.sapa-btn { padding: 13px 28px; font-size: 16px; }

	/* P2 — réduit les grands espaces verticaux entre blocs */
	.sapa-engagement__inner,
	.sapa-methodo__inner,
	.sapa-services__inner,
	.sapa-form__inner { padding-block: 48px; }

	/* P4 — formulaire pleine largeur (plus de carte qui le rétrécit) */
	.sapa-form__card {
		background: transparent;
		border: 0;
		border-radius: 0;
		padding: 0;
	}

	/* P6 — fil d'Ariane plus haut et centré dans le hero détail */
	.sapa-herol__crumb-bar { top: 20px; }
	.sapa-herol__crumb { justify-content: center; flex-wrap: wrap; }
}