/*!
Theme Name:  Max Agency
Theme URI:   https://max-agency.fr
Author:      Max Agency
Description: Thème sur mesure, full HTML/CSS. Navigation codée en dur, aucun framework, aucune dépendance JS.
Version:     1.0.0
Requires at least: 6.5
Requires PHP: 8.0
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: max-agency
*/

/* ==========================================================================
   00. POLICES
   --------------------------------------------------------------------------
   Auto-hébergées. Aucun appel à fonts.googleapis.com : cette requête
   transmet l'IP du visiteur à Google. Voir functions.php pour la procédure
   de téléversement (WordPress bloque le woff2 par défaut).

   `font-display: swap` : le texte s'affiche immédiatement dans la police
   de repli, puis bascule. Un `block` laisserait la page muette 3 secondes.
   ========================================================================== */

@font-face {
	font-family: "Montserrat";
	src: url("/wp-content/uploads/fonts/montserrat-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("/wp-content/uploads/fonts/montserrat-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Open Sans";
	src: url("/wp-content/uploads/fonts/opensans-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Open Sans";
	src: url("/wp-content/uploads/fonts/opensans-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   SOMMAIRE
   --------------------------------------------------------------------------
   00. Polices             — @font-face auto-hébergés
   01. Tokens              — couleurs, typo, rythme, structure
   02. Reset & base
   03. Utilitaires         — sr-only, skip-link, focus
   04. Boutons
   05. Header              — logo, burger
   06. Navigation          — mobile puis desktop
   07. Méga-menu
   08. Footer              (à venir)
   09. Hub Services        (à venir)
   10. Réalisations        (à venir)
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   --------------------------------------------------------------------------
   Seul endroit du fichier où une valeur esthétique a le droit d'exister.
   Tout le reste consomme ces variables. Quand la DA sera figée, ce bloc
   est le seul à modifier.
   ========================================================================== */

:root {

	/* ---------------------------------------------------------------
	   MARQUE — charte graphique Max-Agency, mars 2021
	   --------------------------------------------------------------- */
	--c-noir:    #363432;   /* Pantone 10399 C — couleur identitaire */
	--c-rouge:   #E06D52;   /* Pantone P 34-7 U — couleur identitaire */

	/* Couleurs sectorielles. La charte les réserve aux sous-marques
	   (Max-Web, Max-Print, Max-Seo, Max-Ux) et impose un usage « par
	   petites touches ». On les emploie donc en accent de pôle, jamais
	   en fond de section. */
	--c-vert:    #3A9489;   /* Max-Web    -> pôle Sites internet */
	--c-bleu:    #1992A4;   /* Max-Seo    -> pôle Référencement SEO */
	--c-orange:  #E28D41;   /* Max-Print  -> pôle Identité & print */
	--c-jaune:   #F3D56A;   /* Max-Ux     -> à réaffecter (voir note) */

	/* ---------------------------------------------------------------
	   CONTRASTE — extension web de la charte
	   ---------------------------------------------------------------
	   #E06D52 ne donne que 3,24:1 sur blanc. WCAG AA exige 4,5:1 pour
	   du texte courant. Le rouge de marque reste donc réservé aux
	   aplats, filets et titres > 24px. Pour tout texte lisible, on
	   utilise --c-rouge-ink, le même rouge assombri de 19 % (4,52:1).
	   Le noir #363432 donne 12,4:1 : il porte tout le texte.

	   Idem pour les couleurs sectorielles : aucune ne dépasse 3,7:1.
	   Elles ne portent jamais de texte, seulement des filets et des
	   pictogrammes.
	   --------------------------------------------------------------- */
	--c-rouge-ink: #D24626;

	/* ---------------------------------------------------------------
	   RÔLES — la seule couche que le reste du CSS a le droit de citer
	   --------------------------------------------------------------- */
	--c-surface:         #ffffff;
	--c-surface-alt:     #F4F3F1;
	--c-text:            var(--c-noir);
	--c-text-muted:      #6B6864;
	--c-accent:          var(--c-rouge);       /* aplats, filets */
	--c-accent-ink:      var(--c-rouge-ink);   /* texte, liens */
	--c-accent-contrast: #ffffff;
	--c-border:          #E3E1DE;
	--c-focus:           #0B57D0;

	/* Le CTA du header est NOIR, pas rouge : blanc sur #E06D52 ne fait
	   que 3,24:1. Le rouge sert de survol et de soulignement. */
	--c-btn-bg:          var(--c-noir);
	--c-btn-text:        #ffffff;

	/* ---------------------------------------------------------------
	   TYPOGRAPHIE
	   ---------------------------------------------------------------
	   Champagne & Limousines (typo du logotype) n'est pas libre de
	   droits : elle ne peut pas être servie en webfont. Le logo la
	   conserve, vectorisée dans le SVG. Le site utilise Montserrat,
	   déjà secondaire dans la charte, et Open Sans en courant.
	   À auto-héberger en woff2 : pas d'appel à fonts.googleapis.com.
	   --------------------------------------------------------------- */
	--f-display: "Montserrat", system-ui, sans-serif;
	--f-body:    "Open Sans", system-ui, sans-serif;
	--fs-nav:    0.9375rem;   /* 15px */
	--fs-desc:   0.8125rem;   /* 13px */

	/* --- Rythme --- */
	--sp-1:  0.25rem;
	--sp-2:  0.5rem;
	--sp-3:  0.75rem;
	--sp-4:  1rem;
	--sp-6:  1.5rem;
	--sp-8:  2rem;
	--sp-12: 3rem;

	/* --- Structure --- */
	--header-h: 72px;
	--wrap-max: 1240px;
	--radius:   6px;
	--ease:     cubic-bezier(0.2, 0, 0, 1);
	--dur:      180ms;
	--z-header: 100;

	/* Bascule desktop. Doit rester identique à MOBILE_QUERY dans nav.js. */
	--bp-nav: 62rem; /* 992px */
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--f-body);
	color: var(--c-text);
	background: var(--c-surface);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

button { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================================
   03. UTILITAIRES
   ========================================================================== */

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: var(--sp-2);
	left: var(--sp-2);
	z-index: calc(var(--z-header) + 10);
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-surface);
	color: var(--c-text);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	transform: translateY(-200%);
	transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* :where() garde une spécificité nulle : n'importe quelle règle plus tard
   dans le fichier pourra surcharger le focus sans se battre. */
:where(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--c-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

#contenu:focus { outline: none; }


/* ==========================================================================
   04. BOUTONS
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-nav);
	line-height: 1;
	text-decoration: none;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	transition: opacity var(--dur) var(--ease);
}

.btn--primary { background: var(--c-btn-bg); color: var(--c-btn-text); }
.btn--primary:hover { background: var(--c-rouge-ink); }


/* ==========================================================================
   05. HEADER
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-border);
}

/* Ombre posée par nav.js au scroll. Un box-shadow permanent alourdit
   le haut de page pour rien. */
.site-header[data-scrolled] { box-shadow: 0 1px 12px rgb(0 0 0 / 0.06); }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	max-width: var(--wrap-max);
	min-height: var(--header-h);
	margin-inline: auto;
	padding-inline: var(--sp-4);
}

.site-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.site-header__logo svg { height: 32px; width: auto; }

.nav-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 44px; height: 44px;   /* cible tactile minimale WCAG */
	margin-right: calc(var(--sp-2) * -1);
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.nav-burger__bars,
.nav-burger__bars::before,
.nav-burger__bars::after {
	display: block;
	width: 22px; height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-burger__bars::before,
.nav-burger__bars::after { content: ""; position: absolute; }
.nav-burger__bars::before { transform: translateY(-7px); }
.nav-burger__bars::after  { transform: translateY(7px); }

.nav-burger[aria-expanded="true"] .nav-burger__bars { background: transparent; }
.nav-burger[aria-expanded="true"] .nav-burger__bars::before { transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger__bars::after  { transform: rotate(-45deg); }


/* ==========================================================================
   06. NAVIGATION — base commune
   ========================================================================== */

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

.nav__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-nav);
	color: var(--c-text);
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Le survol et l'état actif partagent le même biseau que le reste du site.
   `scaleX` depuis 0 : la ligne se déplie, elle n'apparaît pas. */
.nav__link { font-family: var(--f-display); font-weight: 600; }

.nav__item:not(.nav__item--cta) .nav__link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0.35rem;
	height: 2px;
	background: var(--c-accent);
	transform: skewX(calc(var(--angle) * -1)) scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}
.nav__item:not(.nav__item--cta) .nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: skewX(calc(var(--angle) * -1)) scaleX(1); }

.nav__link[aria-current="page"] { font-weight: 700; }

.nav__chevron { transition: transform var(--dur) var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }


/* ==========================================================================
   07. MÉGA-MENU
   ========================================================================== */

.panel__title {
	margin: 0 0 var(--sp-3);
	font-family: var(--f-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

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

.panel__list a {
	display: block;
	padding: var(--sp-3);
	margin-inline: calc(var(--sp-3) * -1);
	border-radius: var(--radius);
	color: var(--c-text);
	text-decoration: none;
	transition: background-color var(--dur) var(--ease);
}
.panel__list a:hover { background: var(--c-surface-alt); }

.panel__name { display: block; font-size: var(--fs-nav); }
.panel__desc { display: block; margin-top: 2px; font-size: var(--fs-desc); color: var(--c-text-muted); }

.panel__all {
	display: inline-block;
	margin-top: var(--sp-4);
	font-size: var(--fs-desc);
	color: var(--c-text);
}


/* ==========================================================================
   MOBILE — tiroir plein écran (sous 62rem)
   ========================================================================== */

@media (width < 62rem) {

	.nav {
		position: fixed;
		inset: var(--header-h) 0 0 0;
		z-index: var(--z-header);
		padding: var(--sp-6) var(--sp-4) var(--sp-12);
		background: var(--c-surface);
		overflow-y: auto;
		overscroll-behavior: contain;
		/* `visibility` sort les liens de l'ordre de tabulation.
		   `opacity: 0` seul ne le fait pas : le tiroir fermé resterait
		   navigable au clavier. */
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity var(--dur) var(--ease),
		            transform var(--dur) var(--ease),
		            visibility 0s linear var(--dur);
	}

	.nav[data-open] {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	.nav__item { border-bottom: 1px solid var(--c-border); }
	.nav__item--cta { border: 0; padding-top: var(--sp-6); }

	.nav__link {
		justify-content: space-between;
		width: 100%;
		padding-block: var(--sp-4);
		font-size: 1.125rem;
	}

	.nav__item--cta .btn { width: 100%; padding-block: var(--sp-4); }

	.panel__inner { padding-bottom: var(--sp-4); }
	.panel__col + .panel__col { margin-top: var(--sp-6); }

	body:has(.nav[data-open]) { overflow: hidden; }
}


/* ==========================================================================
   DESKTOP (62rem et plus)
   ========================================================================== */

@media (width >= 62rem) {

	.nav-burger { display: none; }

	.nav__list {
		display: flex;
		align-items: center;
		gap: var(--sp-6);
	}

	/* `position: static` : le panneau s'ancre sur .site-header, pas sur
	   l'item. C'est ce qui lui permet d'occuper toute la largeur. */
	.nav__item--has-panel { position: static; }

	.nav__link { padding-block: var(--sp-3); }

	.panel {
		position: absolute;
		left: 0; right: 0; top: 100%;
		background: var(--c-surface);
		border-block: 1px solid var(--c-border);
		box-shadow: 0 12px 24px rgb(0 0 0 / 0.06);
	}

	/* `hidden` reste l'unique source de vérité de l'état ouvert/fermé :
	   c'est ce que lisent les lecteurs d'écran. On ne l'écrase jamais. */
	.panel[hidden] { display: none; }

	.panel__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-12);
		max-width: var(--wrap-max);
		margin-inline: auto;
		padding: var(--sp-8) var(--sp-4);
	}

	@media (prefers-reduced-motion: no-preference) {
		.panel:not([hidden]) { animation: panel-in var(--dur) var(--ease); }
	}
	@keyframes panel-in {
		from { opacity: 0; transform: translateY(-4px); }
	}
}


/* ==========================================================================
   08. FOOTER
   --------------------------------------------------------------------------
   Fond noir, comme la section témoignages : le bas de page ferme ce que
   le haut a ouvert. L'isotype y vit seul, en grand — la charte l'autorise
   explicitement (« il peut vivre seul, en rappel du logo »).
   ========================================================================== */

.site-footer {
	position: relative;
	overflow: hidden;
	padding-block: clamp(var(--sp-12), 6vw, 5rem) var(--sp-6);
	background: var(--c-noir);
	color: #fff;
}

/* Isotype en filigrane, débordant du cadre. Décoratif, donc aria-hidden
   dans le markup et opacité basse : il ne doit jamais gêner la lecture. */
.site-footer__mark {
	position: absolute;
	right: -6%;
	bottom: -30%;
	width: min(38%, 420px);
	opacity: 0.06;
	pointer-events: none;
}
.site-footer__mark svg { width: 100%; height: auto; }

.site-footer__inner { position: relative; }

.site-footer__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-12);
	padding-bottom: var(--sp-12);
}
@media (width >= 48rem) { .site-footer__top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sp-8); } }

.site-footer__brand svg { height: 40px; width: auto; margin-bottom: var(--sp-6); }

.site-footer__pitch {
	max-width: 32ch;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgb(255 255 255 / 0.62);
}

.f-title {
	margin: 0 0 var(--sp-4);
	font-family: var(--f-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 0.45);
}

.f-list { list-style: none; margin: 0; padding: 0; }
.f-list li + li { margin-top: var(--sp-3); }

/* Sur fond noir, le blanc à 78 % donne encore 8,4:1. Le rouge de marque,
   lui, tombe à 3,8:1 sur ce fond : il ne sert qu'au biseau, jamais au texte. */
.f-list a,
.site-footer__contact a {
	position: relative;
	font-size: 0.9375rem;
	color: rgb(255 255 255 / 0.78);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}
.f-list a:hover,
.site-footer__contact a:hover { color: #fff; }

.f-list a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -3px;
	height: 1.5px;
	background: var(--c-accent);
	transform: skewX(calc(var(--angle) * -1)) scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}
.f-list a:hover::after { transform: skewX(calc(var(--angle) * -1)) scaleX(1); }

.site-footer__contact { font-style: normal; }
.site-footer__contact p { margin: 0 0 var(--sp-4); font-size: 0.9375rem; color: rgb(255 255 255 / 0.62); line-height: 1.6; }
.site-footer__contact strong { display: block; font-weight: 600; color: #fff; }

.site-footer__socials { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.site-footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid rgb(255 255 255 / 0.2);
	color: rgb(255 255 255 / 0.78);
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-footer__socials a:hover { border-color: var(--c-accent); color: #fff; }
.site-footer__socials svg { width: 17px; height: 17px; fill: currentColor; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-top: var(--sp-6);
	border-top: 1px solid rgb(255 255 255 / 0.14);
	font-size: var(--fs-desc);
	color: rgb(255 255 255 / 0.45);
}
.site-footer__bottom nav { display: flex; gap: var(--sp-6); }
.site-footer__bottom a { color: rgb(255 255 255 / 0.62); text-decoration: none; }
.site-footer__bottom a:hover { color: #fff; text-decoration: underline; }

/* Le focus visible doit rester lisible sur fond noir. */
.site-footer :where(a):focus-visible { outline-color: #fff; }


/* ==========================================================================
   09. ACCUEIL
   --------------------------------------------------------------------------
   Signature de la page : « l'entaille ». Une diagonale à 27°, l'angle exact
   de la fente blanche qui traverse l'isotype. On la retrouve sous les liens,
   devant les titres de section et dans le mot accentué du H1. Nulle part
   ailleurs. Pas d'ombre, pas de dégradé, pas de rayon sur les images.
   ========================================================================== */

:root {
	--angle: 27deg;
	--slash-w: 3px;
}

.wrap {
	max-width: var(--wrap-max);
	margin-inline: auto;
	padding-inline: var(--sp-4);
}

/* --- Éléments de langage communs ---------------------------------------- */

.eyebrow {
	margin: 0 0 var(--sp-4);
	font-family: var(--f-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}
.eyebrow--light { color: rgb(255 255 255 / 0.6); }

.sec-title {
	margin: 0 0 var(--sp-4);
	font-family: var(--f-display);
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.sec-title--light { color: #fff; }

.sec-lead {
	max-width: 58ch;
	margin: 0;
	font-size: 1.0625rem;
	color: var(--c-text-muted);
}

.sec-head { margin-bottom: var(--sp-12); }
.sec-head--row {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--sp-6);
	flex-wrap: wrap;
}

/* L'entaille. Un pseudo-élément incliné : c'est tout le dispositif. */
.link-slash {
	position: relative;
	font-family: var(--f-display);
	font-weight: 600;
	color: var(--c-text);
	text-decoration: none;
	white-space: nowrap;
}
.link-slash::after {
	content: "";
	position: absolute;
	right: -0.7em;
	bottom: 0.1em;
	width: var(--slash-w);
	height: 1.05em;
	background: var(--c-accent);
	transform: rotate(var(--angle));
	transition: transform var(--dur) var(--ease);
}
.link-slash:hover::after { transform: rotate(var(--angle)) translateY(-0.15em); }

.btn--ghost {
	background: none;
	color: var(--c-text);
	box-shadow: inset 0 0 0 1px var(--c-border);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--c-noir); }
.btn--lg { padding: var(--sp-4) var(--sp-8); font-size: 1rem; }

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(var(--sp-12), 8vw, 7rem); }

.hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-12);
	align-items: center;
}

.hero__title {
	margin: 0 0 var(--sp-6);
	font-family: var(--f-display);
	font-size: clamp(2.25rem, 5.6vw, 4.25rem);
	font-weight: 700;
	line-height: 1.03;
	letter-spacing: -0.03em;
}

/* Le mot accentué reçoit l'entaille en soulignement, pas une couleur :
   #E06D52 sur blanc ne fait que 3,24:1. */
.slash-word {
	position: relative;
	display: inline-block;
}
/* Un biseau posé SOUS les jambages, pas dessus. Le skew reprend l'angle de
   l'entaille ; la hauteur reste fine pour ne pas concurrencer la lettre. */
.slash-word::after {
	content: "";
	position: absolute;
	inset-inline: -0.02em;
	bottom: -0.14em;
	height: 0.09em;
	background: var(--c-accent);
	transform: skewX(calc(var(--angle) * -1));
}

.hero__lead {
	max-width: 52ch;
	margin: 0 0 var(--sp-8);
	font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
	color: var(--c-text-muted);
}

.hero__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

.hero__mark svg { width: 100%; max-width: 460px; margin-inline: auto; }

@media (width >= 62rem) {
	.hero__inner { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-12); }
	.hero__mark svg { margin-inline: 0 auto; }
}

/* --- Preuve chiffrée ----------------------------------------------------- */

.proof {
	border-block: 1px solid var(--c-border);
	padding-block: var(--sp-8);
}
.proof__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-8) var(--sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (width >= 48rem) { .proof__list { grid-template-columns: repeat(4, 1fr); } }

.proof__num {
	display: block;
	font-family: var(--f-display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}
.proof__plus { color: var(--c-accent); }
.proof__label {
	display: block;
	margin-top: var(--sp-2);
	font-size: var(--fs-desc);
	color: var(--c-text-muted);
}

/* --- Services ------------------------------------------------------------ */

.services { padding-block: clamp(var(--sp-12), 7vw, 6rem); }

.cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--c-border);   /* les filets sont l'espace entre les cartes */
	border: 1px solid var(--c-border);
}
@media (width >= 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 62rem) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-8) var(--sp-6) var(--sp-6);
	background: var(--c-surface);
	color: var(--c-text);
	text-decoration: none;
	transition: background-color var(--dur) var(--ease);
}
.card:hover { background: var(--c-surface-alt); }

/* L'entaille sectorielle, en haut de carte. Elle code le pôle : c'est la
   seule information que porte la couleur. Elle ne porte aucun texte. */
.card::before {
	content: "";
	position: absolute;
	top: var(--sp-6);
	left: var(--sp-6);
	width: var(--slash-w);
	height: 1.4rem;
	background: var(--c-pole, var(--c-noir));
	transform: rotate(var(--angle));
	transition: height var(--dur) var(--ease);
}
.card:hover::before { height: 2rem; }

.card[data-pole="web"]   { --c-pole: var(--c-vert); }
.card[data-pole="seo"]   { --c-pole: var(--c-bleu); }
.card[data-pole="rs"]    { --c-pole: var(--c-jaune); }
.card[data-pole="print"] { --c-pole: var(--c-orange); }
/* data-pole="sea" : pas de couleur attribuée, hérite du noir. */

.card__title {
	margin: var(--sp-6) 0 0;
	font-family: var(--f-display);
	font-size: 1.1875rem;
	font-weight: 700;
}
.card__desc { margin: 0; font-size: 0.9375rem; color: var(--c-text-muted); }

.card__more {
	margin-top: auto;
	padding-top: var(--sp-4);
	font-family: var(--f-display);
	font-size: var(--fs-desc);
	font-weight: 600;
	color: var(--c-accent-ink);   /* 4,52:1 — le rouge de marque ne passe pas */
	text-decoration: none;
}
.card--quiet { background: var(--c-surface-alt); }
.card--quiet::before { display: none; }
.card--quiet .card__title { margin-top: 0; }

/* --- Réalisations -------------------------------------------------------- */

.works { padding-block: clamp(var(--sp-12), 7vw, 6rem); background: var(--c-surface-alt); }

.works__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (width >= 48rem) { .works__list { grid-template-columns: repeat(3, 1fr); } }

.work a { color: inherit; text-decoration: none; }

.work__media {
	margin: 0 0 var(--sp-4);
	overflow: hidden;
	background: var(--c-border);
	aspect-ratio: 4 / 3;   /* réserve la place : zéro décalage au chargement */
}
.work__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease);
}
.work a:hover .work__media img { transform: scale(1.03); }

.work__title {
	margin: 0 0 var(--sp-1);
	font-family: var(--f-display);
	font-size: 1.0625rem;
	font-weight: 700;
}
.work__meta { margin: 0; font-size: var(--fs-desc); color: var(--c-text-muted); }

/* --- Témoignages --------------------------------------------------------- */

.quotes {
	padding-block: clamp(var(--sp-12), 7vw, 6rem);
	background: var(--c-noir);
	color: #fff;
}
.quotes__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
}
@media (width >= 48rem) { .quotes__grid { grid-template-columns: repeat(3, 1fr); } }

.quote { margin: 0; padding-top: var(--sp-6); border-top: 1px solid rgb(255 255 255 / 0.18); }
.quote blockquote { margin: 0 0 var(--sp-6); }
.quote p { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.quote__name { display: block; font-family: var(--f-display); font-weight: 600; font-size: 0.9375rem; }
.quote__role { display: block; margin-top: 2px; font-size: var(--fs-desc); color: rgb(255 255 255 / 0.6); }

/* --- Ancrage local ------------------------------------------------------- */

.local { padding-block: clamp(var(--sp-12), 7vw, 6rem); }
.local__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-12);
}
@media (width >= 62rem) { .local__inner { grid-template-columns: 1.3fr 0.7fr; align-items: center; } }

.local__list { list-style: none; margin: 0; padding: 0; }
.local__list li {
	padding-block: var(--sp-4);
	border-top: 1px solid var(--c-border);
}
.local__list li:last-child { border-bottom: 1px solid var(--c-border); }
.local__list span { display: block; margin-top: var(--sp-1); font-size: var(--fs-desc); color: var(--c-text-muted); }

/* --- Appel final --------------------------------------------------------- */

.cta { padding-block: clamp(var(--sp-12), 7vw, 6rem); border-top: 1px solid var(--c-border); }
.cta__inner { max-width: 44rem; }
.cta__title {
	margin: 0 0 var(--sp-4);
	font-family: var(--f-display);
	font-size: clamp(1.75rem, 3.6vw, 2.75rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.cta__lead { margin: 0 0 var(--sp-8); font-size: 1.0625rem; color: var(--c-text-muted); }
.cta__phone { margin: var(--sp-4) 0 0; font-size: var(--fs-desc); color: var(--c-text-muted); }
.cta__phone a { color: var(--c-accent-ink); }


/* ==========================================================================
   10. RÉALISATIONS
   ========================================================================== */

/* À venir. */