/* =========================================================================
   Solutions Vitrages & Covering — Design system v3 (refonte totale 2026-07-30)
   Geist sans+mono · palette ink/white/stone + accent orange
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
	color-scheme: light;

	/* --- Constantes de marque : ne basculent jamais --- */
	/* Rouge de marque : preleve directement sur le logo (design-sans-titre-1.png,
	   21 113 px sur 250 000 — le reste du fichier n'est que de l'anticrenelage).
	   #E72915 donne 4,44:1 sur blanc : suffisant pour un aplat de bouton avec
	   libelle gras, insuffisant pour du petit texte. D'ou les deux variantes. */
	--accent: #E72915;          /* aplats, boutons, filets, puces */
	--accent-hover: #C4200F;
	--accent-text: #C4200F;     /* petit texte sur fond clair — 5,9:1 */
	--accent-on-dark: #FF5A44;  /* petit texte sur fond noir — 6,3:1 */
	--fixed-ink: #0A0A0B;
	--fixed-white: #FFFFFF;

	/* --- Tokens semantiques : seuls ceux-ci sont redefinis en theme sombre --- */
	--bg: #FFFFFF;
	--fg: #0A0A0B;
	--fg-2: #17171A;
	--fg-muted: #57534E;
	--fg-subtle: #78716C;
	--surface-1: #FAFAF9;
	--surface-2: #F5F5F4;
	--surface-3: #E7E5E4;
	--surface-4: #D6D3D1;
	--border: rgba(10, 10, 11, 0.08);
	--border-strong: rgba(10, 10, 11, 0.15);
	--accent-soft: #FDEFED;
	--header-bg: rgba(255, 255, 255, 0.82);
	--shadow-color: rgba(10, 10, 11, 0.06);
	--ring: rgba(10, 10, 11, 0.08);
	--band-bg: #0A0A0B;
	--success: #027A48;
	--success-bg: #ECFDF3;
	--success-border: #ABEFC6;
	--error: #B42318;
	--error-bg: #FEF3F2;
	--error-border: #FECDCA;

	/* --- Alias de compatibilite : les composants v3 utilisent ces noms.
	   L'indirection var() se resout a l'usage, donc ils suivent le theme actif. --- */
	--ink: var(--fg);
	--ink-2: var(--fg-2);
	--white: var(--bg);
	--stone-50: var(--surface-1);
	--stone-100: var(--surface-2);
	--stone-200: var(--surface-3);
	--stone-300: var(--surface-4);
	--muted: var(--fg-muted);
	--muted-2: var(--fg-subtle);
	--accent-2: var(--accent-soft);
	--line: var(--border);
	--line-strong: var(--border-strong);

	/* Typographies — Geist (sans + mono) */
	--font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-mono: "Geist Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

	/* Fluid type — extra generous */
	--fs-xs: 0.75rem;      /* 12 */
	--fs-sm: 0.875rem;     /* 14 */
	--fs-base: 1rem;       /* 16 */
	--fs-md: 1.125rem;     /* 18 */
	--fs-lg: 1.375rem;     /* 22 */
	--fs-xl: 1.75rem;      /* 28 */
	--fs-h4: clamp(1.375rem, 2vw, 1.75rem);
	--fs-h3: clamp(1.75rem, 3vw, 2.5rem);
	--fs-h2: clamp(2.25rem, 5vw, 3.75rem);
	--fs-h1: clamp(2.75rem, 7vw, 5.5rem);
	--fs-display: clamp(3.25rem, 10vw, 8rem);

	/* Spacing — scale 4pt */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 96px;
	--sp-10: 128px;
	--sp-11: 160px;

	/* Layout */
	--container: 1200px;
	--container-wide: 1400px;
	--container-narrow: 720px;
	--gutter: clamp(20px, 4vw, 32px);
	--radius-sm: 4px;
	--radius: 8px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--header-h: 64px;

	/* Motion */
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 180ms;
	--dur: 260ms;
	--dur-slow: 420ms;

	/* Compat blocs Gutenberg (fallbacks) */
	--wp--preset--color--foreground: var(--ink);
	--wp--preset--color--background: var(--white);
	--wp--preset--color--primary: var(--accent);
	--wp--preset--spacing--10: 10px;
	--wp--preset--spacing--20: 20px;
	--wp--preset--spacing--30: 30px;
	--wp--preset--spacing--40: 40px;
	--wp--preset--spacing--50: 50px;
	--wp--preset--spacing--60: 60px;
	--wp--custom--gap--horizontal: var(--gutter);
	--wp--style--root--padding-right: var(--gutter);
	--wp--style--root--padding-left: var(--gutter);
	--wp--style--global--content-size: var(--container-narrow);
	--wp--style--global--wide-size: var(--container);
}


/* ---------- Theme sombre ----------
   Trois etats :
     1. aucun attribut  -> prefers-color-scheme decide
     2. data-theme=dark -> force sombre (choix explicite, pose avant paint)
     3. data-theme=light -> force clair, meme si le systeme est en sombre
   Seuls les tokens semantiques sont redefinis : les alias de compatibilite
   (--ink, --white, --stone-*) suivent automatiquement. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--bg: #0B0B0D;
		--fg: #F2F2F0;
		--fg-2: #DEDEDA;
		--fg-muted: #A8A29E;
		--fg-subtle: #8A857F;
		--surface-1: #141416;
		--surface-2: #1B1B1E;
		--surface-3: #2A2A2E;
		--surface-4: #3A3A3F;
		--border: rgba(255, 255, 255, 0.10);
		--border-strong: rgba(255, 255, 255, 0.18);
		--accent-soft: #2B100C;
		--header-bg: rgba(11, 11, 13, 0.82);
		--shadow-color: rgba(0, 0, 0, 0.5);
		--ring: rgba(255, 255, 255, 0.14);
		--band-bg: #1B1B1E;
		--success: #6CE9A6;
		--success-bg: #052A1B;
		--success-border: #0A4A2E;
		--error: #FDA29B;
		--error-bg: #2E1110;
		--error-border: #5A2320;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #0B0B0D;
	--fg: #F2F2F0;
	--fg-2: #DEDEDA;
	--fg-muted: #A8A29E;
	--fg-subtle: #8A857F;
	--surface-1: #141416;
	--surface-2: #1B1B1E;
	--surface-3: #2A2A2E;
	--surface-4: #3A3A3F;
	--border: rgba(255, 255, 255, 0.10);
	--border-strong: rgba(255, 255, 255, 0.18);
	--accent-soft: #2B100C;
	--header-bg: rgba(11, 11, 13, 0.82);
	--shadow-color: rgba(0, 0, 0, 0.5);
	--ring: rgba(255, 255, 255, 0.14);
	--band-bg: #1B1B1E;
	--success: #6CE9A6;
	--success-bg: #052A1B;
	--success-border: #0A4A2E;
	--error: #FDA29B;
	--error-bg: #2E1110;
	--error-border: #5A2320;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: 1.55;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "ss03", "cv11";
}

img, svg, video { display: block; max-width: 100%; height: auto; }
/* Les <img> sont enveloppes dans un <picture> par inc/webp.php. display:contents
   supprime la boite du <picture> : l'<img> redevient enfant direct en flux et en
   flex/grid, donc toutes les regles ".parent img" continuent de s'appliquer
   exactement comme avant l'ajout du WebP. */
picture { display: contents; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
::selection { background: var(--ink); color: var(--white); }

h1, h2, h3, h4 {
	font-family: var(--font-sans);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0 0 var(--sp-4);
	color: var(--ink);
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.045em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.04em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.03em; }
h4 { font-size: var(--fs-h4); letter-spacing: -0.02em; }
h5, h6 {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	margin: 0 0 var(--sp-3);
}

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

*:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link {
	position: absolute; left: -9999px; top: 20px; z-index: 100000;
	padding: 10px 16px; background: var(--ink); color: var(--white);
	border-radius: var(--radius); font-family: var(--font-sans); font-weight: 500;
}
.skip-link:focus { left: 20px; }

/* ---------- Layout utilities ---------- */
.container       { max-width: var(--container);        margin: 0 auto; padding: 0 var(--gutter); }
.container-wide  { max-width: var(--container-wide);   margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow{ max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }

.section    { padding: var(--sp-10) 0; }
.section-sm { padding: var(--sp-7) 0; }
.section-lg { padding: var(--sp-11) 0; }
@media (max-width: 780px) {
	.section    { padding: var(--sp-8) 0; }
	.section-sm { padding: var(--sp-6) 0; }
	.section-lg { padding: var(--sp-9) 0; }
}

/* ---------- Pills / tags ---------- */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--muted);
	background: var(--white);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.pill-accent { color: var(--accent); border-color: var(--accent-2); background: var(--accent-2); }

/* ---------- Chip icons ---------- */
.chip-icon {
	width: 40px; height: 40px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
	background: var(--white);
}
.chip-icon svg { width: 18px; height: 18px; }
.chip-icon.is-accent { color: var(--accent); border-color: transparent; background: var(--accent-2); }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: var(--radius);
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: var(--fs-sm);
	letter-spacing: -0.005em;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
	white-space: nowrap;
	line-height: 1;
	min-height: 44px;
	text-decoration: none;
}
.btn svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.btn:hover svg { transform: translateX(2px); }
.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { background: var(--ink-2); color: var(--white); }
/* Le libelle sur un aplat rouge reste blanc en toutes circonstances : dans une
   .band-dark, var(--white) vaut le noir de la bande, ce qui donnerait du texte
   noir sur rouge. */
.btn-accent { background: var(--accent); color: var(--fixed-white); }
.btn-accent:hover { background: var(--accent-hover); color: var(--fixed-white); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); background: var(--stone-100); }
.btn-light { background: var(--white); color: var(--ink); border-color: var(--line-strong); }
.btn-light:hover { background: var(--stone-100); }
.btn-lg { padding: 14px 22px; font-size: var(--fs-base); min-height: 48px; }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: var(--fs-sm);
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
}
.link-arrow svg { width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover { color: var(--accent); border-bottom-color: var(--accent); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--header-bg);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur-fast) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--sp-5);
	height: var(--header-h);
}
.site-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
}
.site-brand-mark {
	width: 28px; height: 28px;
	background: var(--ink);
	color: var(--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.site-brand-logo {
	height: 36px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	display: block;
}
.footer-brand-mark .site-brand-logo { height: 44px; max-width: 160px; }
@media (max-width: 560px) {
	.site-brand-logo { height: 30px; max-width: 110px; }
}
.site-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.site-brand-name {
	font-family: var(--font-sans);
	font-weight: 500;
	color: var(--ink);
	font-size: 0.9rem;
	letter-spacing: -0.015em;
}
.site-brand-place {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 2px;
}

.primary-nav { display: flex; justify-content: center; }
.primary-nav-list {
	display: flex;
	align-items: center;
	gap: var(--sp-6);
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-nav-list a {
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink);
	padding: 8px 4px;
}
.primary-nav-list a:hover { color: var(--accent); }

.nav-has-submenu { position: relative; }
.nav-submenu {
	position: absolute;
	top: calc(100% + 8px);
	left: -12px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 6px;
	min-width: 240px;
	box-shadow: 0 12px 32px var(--shadow-color);
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.nav-has-submenu:hover .nav-submenu,
.nav-has-submenu:focus-within .nav-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.nav-submenu li a {
	display: block;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: var(--fs-sm);
	color: var(--ink);
}
.nav-submenu li a:hover { background: var(--stone-100); color: var(--ink); }

.header-cta {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--sp-3);
}
.header-phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--muted);
}
.header-phone svg { width: 12px; height: 12px; }
.header-phone:hover { color: var(--ink); }

.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--ink);
	padding: 0;
	align-items: center;
	justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 960px) {
	.site-header-inner { grid-template-columns: 1fr auto; }
	/* Tiroir de navigation mobile.
	   ATTENTION : .site-header porte un backdrop-filter, ce qui en fait le BLOC
	   CONTENEUR de ses descendants en position:fixed (au meme titre qu'un
	   transform). Un `position:fixed; inset:var(--header-h) 0 0 0` ne se calait
	   donc pas sur la fenetre mais sur les 64 px du header : le tiroir mesurait
	   48 px de haut, translateY(-100%) ne le sortait pas de l'ecran, et il
	   restait affiche par-dessus le header — on n'y voyait que « Expertises ».
	   On positionne donc explicitement par rapport au header (top:100%) avec une
	   hauteur donnee, au lieu de compter sur l'etirement top/bottom. */
	.primary-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: calc(100vh - var(--header-h));
		height: calc(100dvh - var(--header-h));
		background: var(--white);
		display: block;
		padding: var(--sp-5) var(--gutter);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateY(-100%);
		/* visibility bascule a 0s MAIS apres la translation, sinon le tiroir
		   disparait d'un coup au lieu de remonter. */
		transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
		visibility: hidden;
		z-index: 99;
	}
	.primary-nav.is-open {
		visibility: visible;
		transition: transform var(--dur) var(--ease), visibility 0s linear 0s;
	}
	.primary-nav.is-open { transform: translateY(0); }
	.primary-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
	.primary-nav-list > li { border-bottom: 1px solid var(--line); }
	.primary-nav-list a { padding: 16px 0; font-size: var(--fs-md); }
	.nav-submenu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 var(--sp-3);
		min-width: 0;
		background: transparent;
	}
	.nav-submenu li a { padding: 8px 0; font-size: var(--fs-sm); color: var(--muted); }
	.header-cta .btn { display: none; }
	.header-phone { display: none; }
	.nav-toggle { display: inline-flex; }
	body.nav-open { overflow: hidden; }
}

/* ---------- Hero ---------- */
.hero {
	padding-top: var(--sp-9);
	padding-bottom: var(--sp-10);
	position: relative;
	overflow: hidden;
	background: var(--white);
}
.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--sp-6);
}
.hero-eyebrow .pill-dot { background: var(--accent); }
.hero-grid {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	gap: var(--sp-9);
	align-items: end;
}
.hero-title {
	font-size: var(--fs-display);
	line-height: 0.95;
	letter-spacing: -0.05em;
	font-weight: 500;
	margin: 0 0 var(--sp-6);
	color: var(--ink);
}
.hero-sub {
	font-size: var(--fs-md);
	color: var(--muted);
	line-height: 1.55;
	max-width: 520px;
	margin: 0 0 var(--sp-7);
}
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-visual {
	aspect-ratio: 4/5;
	overflow: hidden;
	border-radius: var(--radius-md);
	border: 1px solid var(--line);
	background: var(--stone-100);
	position: relative;
}
.hero-visual img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.hero-visual-badge {
	position: absolute;
	left: var(--sp-4);
	bottom: var(--sp-4);
	padding: 8px 12px;
	background: rgba(10, 10, 11, 0.7);
	backdrop-filter: blur(8px);
	color: var(--fixed-white);
	border-radius: var(--radius);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
@media (max-width: 900px) {
	.hero { padding-top: var(--sp-7); padding-bottom: var(--sp-8); }
	.hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
	.hero-visual { aspect-ratio: 4/3; }
}

/* ---------- Numbers strip ---------- */
.numbers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.number-tile {
	padding: var(--sp-6) var(--sp-5);
	border-right: 1px solid var(--line);
}
.number-tile:last-child { border-right: 0; }
.number-tile .num {
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.number-tile .lab {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--muted);
	margin-top: var(--sp-3);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
@media (max-width: 780px) {
	.numbers { grid-template-columns: repeat(2, 1fr); }
	.number-tile:nth-child(2n) { border-right: 0; }
	.number-tile:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------- Section head ---------- */
.sec-head { max-width: 640px; margin-bottom: var(--sp-8); }
.sec-head h2 { max-width: 16ch; margin-bottom: var(--sp-4); }
.sec-head p { color: var(--muted); font-size: var(--fs-md); line-height: 1.55; }
.sec-head-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--sp-5);
	align-items: end;
	margin-bottom: var(--sp-8);
}
.sec-head-row .sec-head { margin-bottom: 0; }
@media (max-width: 780px) { .sec-head-row { grid-template-columns: 1fr; } }

/* ---------- Features grid (services) ---------- */
.features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.feature {
	padding: var(--sp-7) var(--sp-6);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--white);
	transition: background var(--dur-fast) var(--ease);
	display: flex;
	flex-direction: column;
	color: var(--ink);
	min-height: 280px;
}
.feature:hover { background: var(--stone-50); color: var(--ink); }
.feature-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--sp-6);
}
.feature-tag .n { color: var(--accent); font-weight: 600; }
.feature h3 {
	font-size: var(--fs-xl);
	margin-bottom: var(--sp-3);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.feature p {
	font-size: var(--fs-sm);
	color: var(--muted);
	line-height: 1.55;
	margin: 0 0 var(--sp-5);
	flex: 1;
}
.feature-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink);
}
.feature-cta svg { width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease); }
.feature:hover .feature-cta { color: var(--accent); }
.feature:hover .feature-cta svg { transform: translateX(3px); }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* ---------- Showcase (image + list numérotée) ---------- */
.showcase {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-8);
	align-items: center;
}
.showcase-visual {
	aspect-ratio: 4/5;
	overflow: hidden;
	border-radius: var(--radius-md);
	border: 1px solid var(--line);
	background: var(--stone-100);
}
.showcase-visual img { width: 100%; height: 100%; object-fit: cover; }
.showcase-body h2 { max-width: 14ch; margin-bottom: var(--sp-5); }
.showcase-body .lead { color: var(--muted); font-size: var(--fs-md); line-height: 1.55; margin-bottom: var(--sp-6); }
.showcase-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--sp-6);
	border-top: 1px solid var(--line);
}
.showcase-list li {
	padding: var(--sp-4) 0;
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: var(--sp-4);
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-sm);
	color: var(--ink);
	line-height: 1.5;
}
.showcase-list .item-num {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--muted);
	padding-top: 2px;
	letter-spacing: 0.04em;
}
.showcase-list .item-body strong {
	display: block;
	color: var(--ink);
	font-weight: 500;
	margin-bottom: 4px;
	font-size: var(--fs-base);
	letter-spacing: -0.01em;
}
.showcase-list .item-body span { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 900px) {
	.showcase { grid-template-columns: 1fr; gap: var(--sp-6); }
	.showcase-visual { aspect-ratio: 4/3; }
}

/* ---------- Cases (use cases avec image) ---------- */
.cases {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-5);
}
.case {
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--white);
	transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
	display: flex;
	flex-direction: column;
	color: var(--ink);
}
.case:hover { border-color: var(--ink); transform: translateY(-2px); color: var(--ink); }
.case-media {
	aspect-ratio: 4/3;
	overflow: hidden;
	background: var(--stone-100);
}
.case-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--ease);
}
.case:hover .case-media img { transform: scale(1.03); }
.case-body {
	padding: var(--sp-5);
	flex: 1;
	display: flex;
	flex-direction: column;
}
.case-tag {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--sp-3);
}
.case-tag .n { color: var(--accent); font-weight: 600; }
.case h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); font-weight: 500; letter-spacing: -0.02em; }
.case p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; flex: 1; margin-bottom: var(--sp-4); }
.case-link {
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.case-link svg { width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease); }
.case:hover .case-link { color: var(--accent); }
.case:hover .case-link svg { transform: translateX(3px); }
@media (max-width: 900px) { .cases { grid-template-columns: 1fr; } }

/* ---------- Quotes / testimonials ---------- */
.quotes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.quote {
	padding: var(--sp-7);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	background: var(--white);
	transition: background var(--dur-fast) var(--ease);
}
.quote:hover { background: var(--stone-50); }
.quote-text {
	font-size: var(--fs-lg);
	line-height: 1.4;
	color: var(--ink);
	letter-spacing: -0.02em;
	margin: 0;
	font-weight: 400;
}
.quote-author {
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	color: var(--muted);
	display: flex;
	align-items: center;
	gap: 10px;
}
.quote-author strong { color: var(--ink); font-weight: 500; }
.quote-author::before {
	content: '';
	width: 24px; height: 1px; background: var(--muted);
}
@media (max-width: 780px) {
	.quotes { grid-template-columns: 1fr; }
	.quote { padding: var(--sp-6); }
}

/* ---------- Logos strip ---------- */
.logos {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.logos-item {
	padding: var(--sp-5);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	background: var(--white);
	transition: background var(--dur-fast) var(--ease);
}
.logos-item:nth-child(6n) { border-right: 0; }
.logos-item:nth-last-child(-n+6) { border-bottom: 0; }
.logos-item:hover { background: var(--stone-50); }
.logos-item img {
	/* Hauteur DEFINIE (et non max-height) : combinee a l'aspect-ratio issu des
	   attributs width/height, elle donne a l'image une boite des le rendu
	   initial. Sans cela, une image lazy en flex reste a 0x0, n'intersecte
	   jamais le viewport et ne se charge donc jamais. */
	height: 40px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: grayscale(100%) contrast(0.7) brightness(0.85);
	opacity: 0.55;
	transition: filter var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.logos-item:hover img { filter: none; opacity: 1; }
@media (max-width: 900px) {
	.logos { grid-template-columns: repeat(3, 1fr); }
	.logos-item:nth-child(6n) { border-right: 1px solid var(--line); }
	.logos-item:nth-child(3n) { border-right: 0; }
	.logos-item:nth-last-child(-n+6) { border-bottom: 1px solid var(--line); }
	.logos-item:nth-last-child(-n+3) { border-bottom: 0; }
}
@media (max-width: 560px) {
	.logos { grid-template-columns: repeat(2, 1fr); }
	.logos-item:nth-child(3n) { border-right: 1px solid var(--line); }
	.logos-item:nth-child(2n) { border-right: 0; }
	.logos-item:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
	.logos-item:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ---------- CTA final band (avant footer) ---------- */
.cta-final {
	padding: var(--sp-11) 0;
	background: var(--band-bg);
	color: var(--fixed-white);
	position: relative;
	overflow: hidden;
}
.cta-final::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 15% 15%, rgba(231, 41, 21, 0.30), transparent 45%),
		radial-gradient(circle at 85% 85%, rgba(231, 41, 21, 0.14), transparent 40%);
	pointer-events: none;
}
.cta-final .container { position: relative; z-index: 1; }
.cta-final .pill {
	background: rgba(255, 255, 255, 0.06);
	color: var(--fixed-white);
	border-color: rgba(255, 255, 255, 0.15);
}
.cta-final .pill-dot { background: var(--accent); }
.cta-final h2 {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	color: var(--fixed-white);
	letter-spacing: -0.045em;
	max-width: 18ch;
	margin: var(--sp-5) 0 var(--sp-7);
	line-height: 0.98;
	font-weight: 500;
}
.cta-final-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--sp-9); }
.cta-final-actions .btn-primary { background: var(--fixed-white); color: var(--fixed-ink); }
.cta-final-actions .btn-primary:hover { background: #E7E5E4; color: var(--fixed-ink); }
.cta-final-actions .btn-ghost { color: var(--fixed-white); border-color: rgba(255, 255, 255, 0.25); }
.cta-final-actions .btn-ghost:hover { border-color: var(--fixed-white); background: rgba(255, 255, 255, 0.06); color: var(--fixed-white); }
.cta-final-meta {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-6);
	padding-top: var(--sp-7);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cta-final-meta-item .lbl {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 6px;
}
.cta-final-meta-item .val { font-size: var(--fs-md); font-weight: 500; color: var(--white); }
.cta-final-meta-item .val a { color: var(--white); }
.cta-final-meta-item .val a:hover { color: var(--accent); }
@media (max-width: 780px) {
	.cta-final { padding: var(--sp-9) 0; }
	.cta-final-meta { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ---------- Footer (blanc, minimal) ---------- */
.site-footer {
	padding: var(--sp-9) 0 var(--sp-5);
	background: var(--white);
	color: var(--ink);
}
.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.2fr;
	gap: var(--sp-7);
	padding-bottom: var(--sp-7);
	border-bottom: 1px solid var(--line);
}
.footer-brand-mark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--sp-4);
}
.footer-brand-name {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: var(--fs-md);
	color: var(--ink);
	letter-spacing: -0.015em;
}
.footer-brand p {
	max-width: 340px;
	font-size: var(--fs-sm);
	color: var(--muted);
	line-height: 1.55;
	margin-bottom: var(--sp-4);
}
.footer-social { display: inline-flex; gap: 8px; }
.footer-social a {
	width: 36px; height: 36px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.footer-social a:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.footer-social svg { width: 16px; height: 16px; }
.footer-col h4 {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 500;
	margin: 0 0 var(--sp-4);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col ul a { font-size: var(--fs-sm); color: var(--ink); }
.footer-col ul a:hover { color: var(--accent); }
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-contact li { font-size: var(--fs-sm); color: var(--ink); line-height: 1.5; }
.footer-contact li a { color: var(--ink); }
.footer-contact li a:hover { color: var(--accent); }
.footer-contact li .lbl {
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 2px;
}
.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: var(--sp-5);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--muted);
	letter-spacing: 0.02em;
}
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--ink); }
.footer-bottom-links { display: flex; gap: var(--sp-5); }
@media (max-width: 900px) {
	.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
	.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.footer-grid { grid-template-columns: 1fr; }
	.footer-bottom { flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
}

/* ---------- Page hero (pages internes) ---------- */
.page-hero {
	padding: var(--sp-10) 0 var(--sp-8);
	border-bottom: 1px solid var(--line);
	background: var(--white);
}
.page-hero .breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--sp-5);
}
.page-hero .breadcrumb a { color: var(--muted); }
.page-hero .breadcrumb a:hover { color: var(--ink); }
.page-hero .breadcrumb span.sep { color: var(--stone-300); }
.page-hero h1 { max-width: 20ch; margin-bottom: var(--sp-5); }
.page-hero .lead { max-width: 640px; font-size: var(--fs-md); color: var(--muted); line-height: 1.55; }
@media (max-width: 780px) { .page-hero { padding: var(--sp-7) 0 var(--sp-6); } }

/* ---------- Prose ---------- */
.prose {
	max-width: var(--container-narrow);
	margin: 0 auto;
	font-size: var(--fs-base);
	line-height: 1.7;
	color: var(--ink);
}
.prose h2 { margin-top: var(--sp-8); margin-bottom: var(--sp-4); font-size: var(--fs-h3); }
.prose h3 { margin-top: var(--sp-7); margin-bottom: var(--sp-3); font-size: var(--fs-lg); }
.prose p, .prose ul, .prose ol { margin-bottom: var(--sp-4); }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-hover); }

/* ---------- FAQ ---------- */
.faq {
	max-width: 880px;
	margin: 0 auto;
	border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	padding: var(--sp-5) 0;
	cursor: pointer;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: var(--fs-md);
	list-style: none;
	color: var(--ink);
	letter-spacing: -0.015em;
	min-height: 48px;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
	content: '';
	margin-left: auto;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0B' stroke-width='2' stroke-linecap='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>") center/contain no-repeat;
	transition: transform var(--dur-fast) var(--ease);
}
.faq-item[open] .faq-question::after { transform: rotate(45deg); }
.faq-question:hover { color: var(--accent); }
.faq-answer { padding: 0 0 var(--sp-5); color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; }

/* ---------- Références grid ---------- */
.refs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.ref-item {
	padding: var(--sp-5);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	aspect-ratio: 5/4;
	background: var(--white);
	transition: background var(--dur-fast) var(--ease);
	text-align: center;
}
.ref-item:hover { background: var(--stone-50); }
.ref-item img {
	/* Meme raison que .logos-item img : hauteur definie (le parent a un
	   aspect-ratio, donc 60% est resoluble) pour que l'image lazy ait une boite. */
	height: 60%;
	width: auto;
	max-width: 90%;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.7;
	transition: filter var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.ref-item:hover img { filter: none; opacity: 1; }
.ref-item .name {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---------- Contact page grid ---------- */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: var(--sp-8);
	align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.info-item {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 14px;
	align-items: flex-start;
	padding: var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	transition: border-color var(--dur-fast) var(--ease);
}
.info-item:hover { border-color: var(--ink); }
.info-item .chip-icon { margin-bottom: 0; }
.info-item .lbl {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 4px;
}
.info-item .val { font-size: var(--fs-md); font-weight: 500; color: var(--ink); line-height: 1.4; }
.info-item .val a { color: var(--ink); }
.info-item .val a:hover { color: var(--accent); }
.info-item .val span { display: block; }

/* ---------- Formulaires ---------- */
.form-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: var(--sp-7);
}
.form-card h3 { margin-top: 0; }
.form-row { display: grid; gap: var(--sp-4); }
.form-row.two-cols { grid-template-columns: 1fr 1fr; }
.form-field label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink);
}
.form-field .required { color: var(--accent); }
.form-field input,
.form-field textarea,
.form-field select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--white);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	color: var(--ink);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
	min-height: 48px;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
	outline: 0;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px var(--ring);
}
.form-actions { margin-top: var(--sp-5); }
.form-message {
	padding: 12px 14px;
	border-radius: var(--radius);
	margin-bottom: var(--sp-4);
	font-size: var(--fs-sm);
	line-height: 1.5;
}
.form-message.success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.form-message.error   { background: var(--error-bg); color: var(--error);   border: 1px solid var(--error-border); }
@media (max-width: 640px) { .form-row.two-cols { grid-template-columns: 1fr; } }

/* ---------- Gallery ---------- */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--sp-4);
}
.gallery-item {
	aspect-ratio: 4/3;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--stone-100);
	border: 1px solid var(--line);
}
.gallery-item img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--ease);
}
.gallery-item:hover img { transform: scale(1.03); }
.gallery-item.tall { aspect-ratio: 3/4; }
.gallery-item.wide { aspect-ratio: 16/10; }

/* ---------- Reveal on scroll ---------- */
.reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Legacy Gutenberg compat (au minimum) ---------- */
.wp-block-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.wp-block-button__link, .wp-element-button {
	background: var(--ink);
	color: var(--white);
	padding: 12px 18px;
	border-radius: var(--radius);
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: var(--fs-sm);
	display: inline-block;
	text-decoration: none;
}
.wp-block-button__link:hover, .wp-element-button:hover { background: var(--ink-2); color: var(--white); }
.wp-block-image img { border-radius: var(--radius); }
.wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

/* ---------- Bascule clair / sombre ---------- */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.theme-toggle:hover { border-color: var(--line-strong); background: var(--stone-100); }
.theme-toggle svg { width: 18px; height: 18px; }
/* Une seule des deux icones est visible : soleil en sombre, lune en clair. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
	:root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
/* Pas de transition de couleur au chargement : evite un fondu parasite au
   moment ou le script pose data-theme. */
.sv-theme-switching, .sv-theme-switching * { transition: none !important; }

/* ---------- Pages legales ---------- */
.footer-bottom-links { list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.legal-updated {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--sp-6);
}
.legal-footnote {
	font-size: var(--fs-sm);
	color: var(--muted);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--line);
	margin-top: var(--sp-7);
}
.legal-footnote a { text-decoration: underline; text-underline-offset: 3px; }
.legal-footnote a:hover { color: var(--accent); }
/* Numerotation des articles / conditions : lisible et alignee. */
.prose ol { padding-left: 1.25em; }
.prose ol li, .prose ul li { margin-bottom: var(--sp-2); }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--sp-6); }
.prose code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--stone-100);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 1px 5px;
}

/* =========================================================================
   Refonte rouge / noir + composants dynamiques (2026-08-27)
   Base blanche, bandes noires pleine largeur pour rythmer, rouge de marque
   #E72915 en accent unique.
   ========================================================================= */

/* ---------- Bandes sombres pleine largeur ----------
   Rythment le scroll : une section sur deux bascule en noir. La bande porte
   ses propres tokens, donc tous les composants qu'elle contient s'adaptent
   sans avoir besoin de variantes dediees. */
.band-dark {
	background: var(--band-bg);
	color: var(--fixed-white);
	position: relative;
	overflow: hidden;

	/* Tokens semantiques. */
	--bg: #0A0A0B;
	--fg: #F2F2F0;
	--fg-2: #DEDEDA;
	--fg-muted: #A8A29E;
	--fg-subtle: #8A857F;
	--surface-1: #141416;
	--surface-2: #1B1B1E;
	--surface-3: #2A2A2E;
	--surface-4: #3A3A3F;
	--border: rgba(255, 255, 255, 0.12);
	--border-strong: rgba(255, 255, 255, 0.22);
	--accent-text: var(--accent-on-dark);
	--shadow-color: rgba(0, 0, 0, 0.5);
	--ring: rgba(255, 255, 255, 0.14);

	/* ATTENTION — les alias doivent etre redeclares ICI, pas seulement les
	   tokens semantiques ci-dessus.
	   Un var() ecrit dans la declaration d'une custom property est resolu sur
	   l'element ou cette propriete est declaree, puis la valeur DEJA calculee
	   est heritee. `--white: var(--bg)` pose sur :root vaut donc #FFFFFF pour
	   toute la page : redefinir --bg ici ne le met pas a jour.
	   (Le theme sombre, lui, fonctionne sans cela parce qu'il redefinit sur
	   :root lui-meme, ou les alias sont re-resolus.) */
	--white: #0A0A0B;
	--ink: #F2F2F0;
	--ink-2: #DEDEDA;
	--stone-50: #141416;
	--stone-100: #1B1B1E;
	--stone-200: #2A2A2E;
	--stone-300: #3A3A3F;
	--muted: #A8A29E;
	--muted-2: #8A857F;
	--line: rgba(255, 255, 255, 0.12);
	--line-strong: rgba(255, 255, 255, 0.22);
}
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--fixed-white); }
.band-dark h5 { color: var(--accent-on-dark); }
.band-dark p, .band-dark li { color: #C9C6C2; }
.band-dark .lead { color: #DEDBD7; }

/* Filet rouge en tete de bande : signature graphique repetee du site. */
.band-dark::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--accent);
}

/* ---------- Emplacements d'images (voir inc/images.php) ---------- */
.sv-media {
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--surface-2);
	aspect-ratio: var(--slot-ratio, 4 / 3);
}
.sv-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 700ms var(--ease);
}
/* Quand l'emplacement est pose dans un conteneur qui definit deja sa boite
   (.case-media, .showcase-visual...), la figure ne doit pas imposer son propre
   ratio : elle remplit le parent. Sinon deux aspect-ratio se disputent la place. */
.case-media > .sv-media,
.showcase-visual > .sv-media,
.hero-visual > .sv-media {
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

/* Zoom au survol — uniquement quand l'element est dans un conteneur interactif. */
.zoomable:hover .sv-media img,
.sv-media.zoomable:hover img { transform: scale(1.06); }

/* Placeholder : lisible et volontairement identifiable en recette. */
.sv-media-empty {
	background:
		repeating-linear-gradient(
			45deg,
			var(--surface-2) 0 10px,
			var(--surface-1) 10px 20px
		);
	border: 1px dashed var(--border-strong);
	display: grid;
	place-items: center;
	text-align: center;
}
.sv-media-empty-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: var(--sp-4);
	max-width: 90%;
}
.sv-media-empty-icon { color: var(--accent); opacity: 0.85; }
.sv-media-empty-icon svg { width: 26px; height: 26px; }
.sv-media-empty-label {
	font-weight: 500;
	font-size: var(--fs-sm);
	color: var(--fg);
	line-height: 1.25;
}
.sv-media-empty-meta {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--fg-subtle);
	letter-spacing: 0.02em;
	line-height: 1.5;
}

/* Banniere large en tete de page service : on force le ratio ici plutot que
   dans l'emplacement, car le meme visuel sert aussi en 3/2 sur l'accueil. */
.service-hero-media {
	aspect-ratio: 21 / 9;
	border-radius: var(--radius-md);
	border: 1px solid var(--line);
}
@media (max-width: 700px) {
	.service-hero-media { aspect-ratio: 3 / 2; }
}

/* ---------- Hero avec parallaxe ---------- */
.hero-v4 {
	position: relative;
	padding: var(--sp-10) 0 var(--sp-9);
	overflow: hidden;
}
.hero-v4-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--sp-8);
	align-items: center;
}
.hero-v4 h1 {
	/* Titre en deux phrases : on ne peut pas reprendre --fs-display (jusqu'a 8rem),
	   calibre pour un mot unique. Cette echelle tient sur deux lignes en desktop
	   et reste imposante. */
	font-size: clamp(2.5rem, 5.2vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	font-weight: 500;
	margin: 0 0 var(--sp-5);
	max-width: 15ch;
}
/* Le dernier mot du titre est souligne d'un trait rouge qui se dessine. */
.hero-underline {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}
.hero-underline::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.08em;
	height: 0.09em;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
	animation: sv-underline 900ms var(--ease) 350ms forwards;
}
@keyframes sv-underline { to { transform: scaleX(1); } }

.hero-v4-visual { position: relative; }
.hero-v4-visual .sv-media { border-radius: var(--radius-md); }
/* La translation est pilotee en JS (--parallax), bornee pour rester discrete. */
.parallax img { will-change: transform; transform: translate3d(0, var(--parallax, 0px), 0) scale(1.12); }

.hero-v4-badge {
	position: absolute;
	left: var(--sp-4);
	bottom: var(--sp-4);
	background: var(--accent);
	color: var(--fixed-white);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 9px 14px;
	border-radius: var(--radius-sm);
}

/* ---------- Bandeau defilant ---------- */
.marquee {
	overflow: hidden;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: var(--sp-4) 0;
	background: var(--bg);
	--marquee-duration: 38s;
}
.marquee-track {
	display: flex;
	gap: var(--sp-6);
	width: max-content;
	animation: sv-marquee var(--marquee-duration) linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-6);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--fg-muted);
	white-space: nowrap;
}
.marquee-item::after {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--accent);
	flex: none;
}
@keyframes sv-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Compteurs animes ---------- */
.counter { font-variant-numeric: tabular-nums; }

/* ---------- Reveal au scroll, avec decalage ----------
   Le decalage est porte par --i, pose en JS sur chaque enfant. */
.reveal-group > * {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 600ms var(--ease), transform 600ms var(--ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal-group.is-visible > * { opacity: 1; transform: none; }

/* ---------- Comparatif avant / apres ---------- */
.compare {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
	aspect-ratio: 4 / 3;
	background: var(--surface-2);
	touch-action: pan-y;
	cursor: ew-resize;
	user-select: none;
}
/* Les deux couches sont des soeurs empilees, pas des elements imbriques :
   l'aspect-ratio du conteneur fait foi, chaque couche le remplit. */
.compare-layer {
	position: absolute;
	inset: 0;
	border-radius: 0;
	aspect-ratio: auto;
	margin: 0;
}
/* La couche "apres" est rognee par --pos, pilote au pointeur et au clavier. */
.compare-layer.is-after { clip-path: inset(0 0 0 var(--pos, 50%)); }

/* Quand les deux couches sont vides, leurs libelles de placeholder se
   superposeraient pile sur la poignee : on les ecarte de part et d'autre. */
.compare-layer .sv-media-empty-inner { max-width: 40%; }
.compare-layer.is-before .sv-media-empty-inner { transform: translateX(-56%); }
.compare-layer.is-after  .sv-media-empty-inner { transform: translateX(56%); }
.compare-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos, 50%);
	width: 3px;
	background: var(--accent);
	transform: translateX(-50%);
	pointer-events: none;
}
.compare-handle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--accent);
	border: 3px solid var(--fixed-white);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.compare-label {
	position: absolute;
	top: var(--sp-3);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: rgba(10, 10, 11, 0.72);
	color: var(--fixed-white);
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	pointer-events: none;
}
.compare-label.is-before { left: var(--sp-3); }
.compare-label.is-after  { right: var(--sp-3); }
/* Cible clavier : invisible mais focalisable, pour piloter le comparatif. */
.compare-range {
	position: absolute;
	inset: auto 0 0 0;
	width: 100%;
	opacity: 0;
	height: 44px;
	cursor: ew-resize;
}
.compare-range:focus-visible + .compare-handle::after { outline: 3px solid var(--fixed-white); outline-offset: 3px; }

/* Trois comparatifs cote a cote : empiles en pleine largeur, la bande faisait
   plus de 2 000 px de haut pour trois curseurs. */
.compare-set {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-5);
}
.compare-caption {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
}
.compare-caption .idx {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--accent-text);
}

/* ---------- Galerie filtrable ---------- */
.gallery-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--sp-6);
}
.gallery-filter {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding: 9px 15px;
	border: 1px solid var(--border-strong);
	background: transparent;
	color: var(--fg-muted);
	border-radius: 100px;
	cursor: pointer;
	min-height: 40px;
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.gallery-filter:hover { color: var(--fg); border-color: var(--fg); }
.gallery-filter[aria-pressed="true"] {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--fixed-white);
}
.works-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-4);
}
/* Variante 5 colonnes (les cinq expertises). Declaree en classe et non en style
   inline : un style inline l'emporterait sur les media queries et la grille
   resterait a cinq colonnes sur telephone. */
.works-grid-5 { grid-template-columns: repeat(5, 1fr); }
.work-item {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.work-item[hidden] { display: none; }
.work-item.is-filtered-out {
	opacity: 0;
	transform: scale(0.96);
	pointer-events: none;
}
.work-item .sv-media { border-radius: var(--radius); }
.work-item-tag {
	position: absolute;
	left: 10px;
	bottom: 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	background: rgba(10, 10, 11, 0.78);
	color: var(--fixed-white);
	padding: 5px 9px;
	border-radius: var(--radius-sm);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.work-item:hover .work-item-tag { opacity: 1; transform: none; }

/* ---------- Bande equipe / atelier ---------- */
.crew {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-4);
	align-items: start;
}
.crew .sv-media:nth-child(2) { margin-top: var(--sp-7); }

/* ---------- Accents rouges reutilisables ---------- */
.rule-accent {
	width: 56px;
	height: 3px;
	background: var(--accent);
	border: 0;
	margin: 0 0 var(--sp-5);
}
.text-accent { color: var(--accent-text); }
.band-dark .text-accent { color: var(--accent-on-dark); }

/* Puce numerotee rouge, utilisee dans les listes de methode. */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: var(--sp-4);
	padding: var(--sp-5) 0;
	border-top: 1px solid var(--border);
}
.steps li::before {
	content: counter(step, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	color: var(--accent-text);
	padding-top: 3px;
}
.steps h4 { margin: 0 0 6px; font-size: var(--fs-md); }
.steps p { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.works-grid { grid-template-columns: repeat(3, 1fr); }
	.works-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.compare-set { grid-template-columns: 1fr; max-width: 560px; }
	.hero-v4-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
	.hero-v4 { padding: var(--sp-8) 0 var(--sp-7); }
	.works-grid, .works-grid-5 { grid-template-columns: repeat(2, 1fr); }
	.crew { grid-template-columns: 1fr 1fr; }
	.crew .sv-media:nth-child(2) { margin-top: 0; }
	.crew .sv-media:nth-child(3) { display: none; }
}
@media (max-width: 560px) {
	.works-grid, .works-grid-5 { grid-template-columns: 1fr 1fr; gap: 10px; }
	.steps li { grid-template-columns: 32px 1fr; gap: var(--sp-3); }
}

/* ---------- Mouvement reduit ----------
   On neutralise tout ce qui bouge de lui-meme ; les etats au survol et les
   transitions courtes de couleur restent, ils n'induisent pas de mouvement. */
@media (prefers-reduced-motion: reduce) {
	.reveal-group > * { opacity: 1; transform: none; transition: none; }
	.marquee-track { animation: none; transform: none; }
	.hero-underline::after { animation: none; transform: scaleX(1); }
	.parallax img { transform: none; }
	.sv-media img { transition: none; }
	.zoomable:hover .sv-media img, .sv-media.zoomable:hover img { transform: none; }
}

/* ---------- Logos clients en theme sombre ----------
   Le jeu de logos melange des PNG transparents (dessin sombre) et des JPEG a
   fond blanc. Aucun filtre ne convient aux deux : invert() rend les PNG
   lisibles mais transforme les JPEG en rectangles blancs. On pose donc une
   plaque claire sous chaque logo et on retire l'attenuation en niveaux de gris.
   Resultat lisible quel que soit le fichier d'origine. */
:root[data-theme="dark"] .logos,
:root[data-theme="dark"] .refs-grid,
:root[data-theme="dark"] .logos-item,
:root[data-theme="dark"] .ref-item {
	/* La plaque est posee AUSSI sur le conteneur : les cellules ont un
	   aspect-ratio fixe, donc une ligne dont un libelle passe sur deux lignes
	   laisse une bande de fond visible. En theme clair elle se confond avec la
	   page ; en sombre elle trancherait. */
	background: #F2F2F0;
}
:root[data-theme="dark"] .logos-item:hover,
:root[data-theme="dark"] .ref-item:hover {
	background: var(--fixed-white);
}
:root[data-theme="dark"] .logos-item img,
:root[data-theme="dark"] .ref-item img {
	filter: none;
	opacity: 0.85;
}
:root[data-theme="dark"] .logos-item:hover img,
:root[data-theme="dark"] .ref-item:hover img {
	opacity: 1;
}
:root[data-theme="dark"] .ref-item .name { color: var(--fixed-ink); }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .logos,
	:root:not([data-theme="light"]) .refs-grid,
	:root:not([data-theme="light"]) .logos-item,
	:root:not([data-theme="light"]) .ref-item {
		background: #F2F2F0;
	}
	:root:not([data-theme="light"]) .logos-item:hover,
	:root:not([data-theme="light"]) .ref-item:hover {
		background: var(--fixed-white);
	}
	:root:not([data-theme="light"]) .logos-item img,
	:root:not([data-theme="light"]) .ref-item img {
		filter: none;
		opacity: 0.85;
	}
	:root:not([data-theme="light"]) .logos-item:hover img,
	:root:not([data-theme="light"]) .ref-item:hover img {
		opacity: 1;
	}
	:root:not([data-theme="light"]) .ref-item .name { color: var(--fixed-ink); }
}

/* ---------- Print ---------- */
@media print {
	.site-header, .site-footer, .cta-final, .nav-toggle, .theme-toggle { display: none !important; }
	body { color: #000; background: #fff; }
}