/* ==========================================================================
   Synergaïa — système de design
   Traduction des jetons de marque (site-tokens.jsx) en CSS.
   Ton : éditorial sobre, registre « honnête-sobre ».
   ========================================================================== */

/* --- Polices hébergées localement (Loi 25 : aucune donnée envoyée à Google) --- */
@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/source-serif-4-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Serif 4';
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/source-serif-4-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/ibm-plex-sans-500.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}

/* --- Jetons --- */
:root {
	/* Couleurs */
	--sg-teal:        #49BABE;
	--sg-teal-deep:   #176164; /* teal foncé conforme AA : texte et boutons sur fond clair (≥4.5:1). Le teal vif #49BABE reste pour les accents sur fond sombre. */
	--sg-teal-soft:   #D6EEEE;
	--sg-teal-ink:    #103E42;
	--sg-forest:      #2D4A2B;
	--sg-forest-soft: #DCE4D4;
	--sg-earth:       #8B5A2B;
	--sg-earth-soft:  #EFE4D2;
	--sg-ink:         #1C1A17;
	--sg-charcoal:    #3A3733;
	--sg-graphite:    #6B6862;
	--sg-stone:       #A09C94;
	--sg-fog:         #E6E2D8;
	--sg-cream:       #F5F1E7;
	--sg-paper:       #FBF8EF;
	--sg-white:       #FFFFFF;
	/* Teintes sombres dérivées (pied de page, hero foncé) */
	--sg-dark-border: #2A2724;
	--sg-dark-text:   #C8C4BB;
	--sg-dark-muted:  #8B8780;

	/* États & voiles */
	--sg-alert-err-bg:   #F4E2D9;
	--sg-alert-err-text: #8A3D20;
	--sg-scrim:          rgba(28, 26, 23, 0.4); /* voile sombre (menu mobile) */

	/* Polices */
	--sg-serif: 'Source Serif 4', Georgia, serif;
	--sg-sans:  'IBM Plex Sans', system-ui, sans-serif;
	--sg-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

	/* Échelle typographique (px) */
	--sg-t-micro:   10px;
	--sg-t-caption: 12px;
	--sg-t-small:   13px;
	--sg-t-body:    15px;
	--sg-t-body-lg: 17px;
	--sg-t-lead:    20px;
	--sg-t-h6:      18px;
	--sg-t-h5:      22px;
	--sg-t-h4:      28px;
	--sg-t-h3:      36px;
	--sg-t-h2:      48px;
	--sg-t-h1:      64px;
	--sg-t-display: 84px;

	/* Espacements */
	--sg-s1: 4px;
	--sg-s2: 8px;
	--sg-s3: 12px;
	--sg-s4: 16px;
	--sg-s5: 24px;
	--sg-s6: 32px;
	--sg-s7: 48px;
	--sg-s8: 64px;
	--sg-s9: 96px;
	--sg-s10: 128px;

	/* Rayons */
	--sg-r-sm: 2px;
	--sg-r-md: 4px;
	--sg-r-pill: 999px;

	/* Ombres */
	--sg-shadow-subtle: 0 1px 2px rgba(28,26,23,0.05), 0 2px 6px rgba(28,26,23,0.04);
	--sg-shadow-raised: 0 2px 8px rgba(28,26,23,0.08), 0 8px 24px rgba(28,26,23,0.05);

	/* Largeurs de contenu */
	--sg-w-text: 1120px;
	--sg-w-wide: 1280px;
}

/* --- Réinitialisation légère --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--sg-cream);
	color: var(--sg-ink);
	font-family: var(--sg-sans);
	font-size: var(--sg-t-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
button { font-family: inherit; }

/* Accessibilité : focus visible sobre */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--sg-teal-deep);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--sg-ink);
	color: var(--sg-paper);
	padding: 12px 18px;
	z-index: 100;
	font-family: var(--sg-sans);
	font-size: var(--sg-t-small);
}
.skip-link:focus { left: 0; }

/* --- Mise en page --- */
.container {
	max-width: var(--sg-w-text);
	margin: 0 auto;
	padding-left: var(--sg-s7);
	padding-right: var(--sg-s7);
}
.container--wide { max-width: var(--sg-w-wide); }

.section { padding: var(--sg-s8) 0; }
.section--tight { padding: var(--sg-s7) 0; }
.section--cream  { background: var(--sg-cream); }
.section--paper  { background: var(--sg-paper); }
.section--forest { background: var(--sg-forest-soft); }
.section--ink    { background: var(--sg-ink); color: var(--sg-paper); }

.divider {
	max-width: var(--sg-w-text);
	margin: 0 auto;
	border-top: 1px solid var(--sg-fog);
}

/* --- Typographie --- */
.t-display, .t-h1, .t-h2, .t-h3, .t-h4, .t-h5 {
	font-family: var(--sg-serif);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.08;
	color: var(--sg-charcoal);
}
.t-display { font-size: clamp(48px, 8vw, var(--sg-t-display)); line-height: 1.02; }
.t-h1 { font-size: clamp(40px, 6.2vw, var(--sg-t-h1)); line-height: 1.05; }
.t-h2 { font-size: clamp(32px, 5vw, var(--sg-t-h2)); }
.t-h3 { font-size: clamp(28px, 3.6vw, var(--sg-t-h3)); line-height: 1.12; letter-spacing: -0.015em; }
.t-h4 { font-size: var(--sg-t-h4); line-height: 1.15; }
.t-h5 { font-size: var(--sg-t-h5); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.t-h6 { font-family: var(--sg-serif); font-size: var(--sg-t-h6); font-weight: 500; line-height: 1.3; }

.t-lead {
	font-family: var(--sg-sans);
	font-size: var(--sg-t-lead);
	line-height: 1.55;
	color: var(--sg-graphite);
}
.t-body-lg { font-size: var(--sg-t-body-lg); line-height: 1.6; }
.t-body { font-size: var(--sg-t-body); line-height: 1.6; }
.t-small { font-size: var(--sg-t-small); }

.t-em { color: var(--sg-teal-deep); font-style: italic; }

/* Étiquette « eyebrow » (mono, espacée) */
.eyebrow {
	font-family: var(--sg-mono);
	font-size: var(--sg-t-caption);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sg-teal-deep);
	margin: 0 0 var(--sg-s3);
}
.eyebrow--forest { color: var(--sg-forest); }
.eyebrow--teal   { color: var(--sg-teal); }
.eyebrow--micro  { font-size: var(--sg-t-micro); letter-spacing: 0.16em; }

/* Couleurs texte utilitaires */
.c-teal-deep { color: var(--sg-teal-deep); }
.c-forest    { color: var(--sg-forest); }
.c-graphite  { color: var(--sg-graphite); }
.c-ink       { color: var(--sg-ink); }
.c-paper     { color: var(--sg-paper); }

/* Contenu riche éditeur (.prose) */
.prose { font-size: var(--sg-t-body-lg); line-height: 1.7; color: var(--sg-ink); }
.prose p { margin: 0 0 var(--sg-s4); }
.prose h2 { font-family: var(--sg-serif); font-size: var(--sg-t-h3); font-weight: 400; margin: var(--sg-s7) 0 var(--sg-s4); }
.prose h3 { font-family: var(--sg-serif); font-size: var(--sg-t-h5); font-weight: 500; margin: var(--sg-s6) 0 var(--sg-s3); }
.prose a { color: var(--sg-teal-deep); }
.prose ul, .prose ol { margin: 0 0 var(--sg-s4); padding-left: var(--sg-s5); }
.prose li { margin-bottom: var(--sg-s2); }

/* --- Grilles utilitaires --- */
.grid { display: grid; gap: var(--sg-s6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--1-2 { grid-template-columns: 1fr 2fr; gap: var(--sg-s7); }
.grid--2-1 { grid-template-columns: 2fr 1fr; gap: var(--sg-s7); }
.grid--3-2 { grid-template-columns: 3fr 2fr; gap: var(--sg-s8); }

/* --- Boutons --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px; /* cible tactile WCAG 2.5.8 */
	padding: 12px 22px;
	font-family: var(--sg-sans);
	font-size: var(--sg-t-body);
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--sg-r-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn svg { width: 14px; height: 14px; flex: none; }
.btn--lg { padding: 14px 28px; font-size: var(--sg-t-body-lg); }
.btn--sm { padding: 8px 14px; font-size: var(--sg-t-small); }

.btn--primary { background: var(--sg-teal-deep); color: var(--sg-white); border-color: var(--sg-teal-deep); }
.btn--primary:hover { background: var(--sg-teal-ink); border-color: var(--sg-teal-ink); }

.btn--secondary { background: transparent; color: var(--sg-charcoal); border-color: var(--sg-charcoal); }
.btn--secondary:hover { background: var(--sg-charcoal); color: var(--sg-paper); }

.btn--dark { background: var(--sg-ink); color: var(--sg-paper); border-color: var(--sg-ink); }
.btn--dark:hover { background: var(--sg-charcoal); }

.btn--ghost { background: transparent; color: var(--sg-teal-deep); padding: 0; border: none; }
.btn--ghost:hover { color: var(--sg-teal-ink); }
.btn--ghost svg { margin-left: -2px; }

/* --- En-tête de site --- */
.site-header {
	background: var(--sg-paper);
	border-bottom: 1px solid var(--sg-fog);
	padding: var(--sg-s4) 0;
	position: sticky;
	top: 0;
	z-index: 50;
}
.site-header__inner {
	max-width: var(--sg-w-wide);
	margin: 0 auto;
	padding: 0 var(--sg-s7);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sg-s6);
}
.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--sg-charcoal);
}
.site-logo__mark {
	width: 38px; height: 38px;
	flex: none;
}
.site-logo__word {
	font-family: var(--sg-serif);
	font-size: 22px;
	letter-spacing: -0.01em;
}
.site-nav { display: flex; }
.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--sg-s5);
	font-family: var(--sg-sans);
	font-size: var(--sg-t-small);
}
.site-nav a {
	color: var(--sg-charcoal);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	white-space: nowrap;
}
.site-nav a:hover { color: var(--sg-teal-deep); }
.site-nav .current-menu-item > a,
.site-nav a[aria-current="page"] {
	color: var(--sg-teal-deep);
	font-weight: 500;
	border-bottom-color: var(--sg-teal-deep);
}
.site-header__cta {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	background: var(--sg-teal-deep);
	color: var(--sg-white);
	text-decoration: none;
	font-family: var(--sg-sans);
	font-size: var(--sg-t-small);
	font-weight: 500;
	border-radius: var(--sg-r-sm);
	white-space: nowrap;
}
.site-header__cta:hover { background: var(--sg-teal-ink); }

/* Bouton menu mobile (caché en bureau) */
.nav-toggle { display: none; }

/* --- Pied de page --- */
.site-footer {
	background: var(--sg-ink);
	color: var(--sg-paper);
	padding: var(--sg-s8) 0 var(--sg-s6);
}
.site-footer__inner {
	max-width: var(--sg-w-wide);
	margin: 0 auto;
	padding: 0 var(--sg-s7);
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--sg-s7);
}
.site-footer__brand-word { font-family: var(--sg-serif); font-size: 22px; }
.site-footer p { color: #B8B4AB; font-size: var(--sg-t-small); line-height: 1.6; max-width: 360px; }
.footer-col__title {
	font-family: var(--sg-mono);
	font-size: var(--sg-t-micro);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sg-teal);
	margin-bottom: var(--sg-s3);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; font-size: var(--sg-t-small); line-height: 1.9; color: var(--sg-dark-text); }
.footer-col a { color: var(--sg-dark-text); text-decoration: none; }
.footer-col a:hover { color: var(--sg-teal); }
.site-footer__bottom {
	max-width: var(--sg-w-wide);
	margin: var(--sg-s7) auto 0;
	padding: var(--sg-s4) var(--sg-s7) 0;
	border-top: 1px solid var(--sg-dark-border);
	display: flex;
	justify-content: space-between;
	gap: var(--sg-s4);
	font-family: var(--sg-mono);
	font-size: var(--sg-t-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sg-stone);
}

/* --- Formulaire --- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
	font-family: var(--sg-mono);
	font-size: var(--sg-t-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sg-charcoal);
	display: flex;
	justify-content: space-between;
}
.field__req { color: var(--sg-earth); margin-left: 4px; }
.field__opt { color: var(--sg-graphite); }
.input, .textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--sg-stone);
	background: var(--sg-paper);
	font-family: var(--sg-sans);
	font-size: var(--sg-t-body);
	color: var(--sg-ink);
	border-radius: var(--sg-r-sm);
}
.textarea { resize: vertical; min-height: 160px; }
.input::placeholder, .textarea::placeholder { color: var(--sg-graphite); opacity: 1; } /* AA : 5,2:1 sur le fond du champ */

/* --- Emplacement image (placeholder) --- */
.ph {
	position: relative;
	width: 100%;
	background: repeating-linear-gradient(135deg, var(--sg-fog) 0 10px, #d8d3c7 10px 20px);
	border-radius: var(--sg-r-sm);
	overflow: hidden;
	min-height: 200px;
}
.ph__label {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--sg-mono); font-size: var(--sg-t-caption);
	color: var(--sg-stone); letter-spacing: 0.14em; text-transform: uppercase;
	text-align: center; padding: var(--sg-s4);
}
.ph__label span { background: var(--sg-paper); padding: 6px 12px; }

/* Photo de membre d'équipe */
.team-photo {
	width: 100%;
	height: 180px;
	object-fit: cover;
	object-position: center center;
	border-radius: var(--sg-r-sm);
	display: block;
}
.team-photo--card { height: 280px; }

/* Avatar monogramme (portraits en attente) */
.avatar-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border-radius: var(--sg-r-sm);
}
.avatar-tile__initials { font-family: var(--sg-serif); font-size: 52px; font-weight: 400; letter-spacing: 0.02em; }
.avatar-tile--0 { background: var(--sg-teal-soft); color: var(--sg-teal-deep); }
.avatar-tile--1 { background: var(--sg-forest-soft); color: var(--sg-forest); }
.avatar-tile--2 { background: var(--sg-earth-soft); color: var(--sg-earth); }

/* Image plein cadre */
.media { border-radius: var(--sg-r-sm); overflow: hidden; }
.media img { width: 100%; height: auto; display: block; }
.media__caption { font-family: var(--sg-mono); font-size: var(--sg-t-caption); color: var(--sg-graphite); letter-spacing: 0.04em; margin-top: var(--sg-s3); }

/* Utilitaires */
.flow > * + * { margin-top: var(--sg-s4); }
.mt-3 { margin-top: var(--sg-s3); }
.mt-4 { margin-top: var(--sg-s4); }
.mt-5 { margin-top: var(--sg-s5); }
.mt-6 { margin-top: var(--sg-s6); }
.mt-7 { margin-top: var(--sg-s7); }
.maxw-text { max-width: 640px; }
.visually-hidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Composants de page
   ========================================================================== */

/* Hero (accueil + en-têtes de page) */
.hero { padding: var(--sg-s8) 0 var(--sg-s7); }
.hero__title {
	font-family: var(--sg-serif);
	font-weight: 400;
	font-size: clamp(40px, 6.4vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.022em;
	color: var(--sg-charcoal);
	margin: 0;
	max-width: 980px;
}
.hero__grid {
	margin-top: var(--sg-s6);
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--sg-s7);
	align-items: start;
}
.hero__actions { display: flex; flex-direction: column; gap: var(--sg-s3); align-items: flex-start; }

/* En-tête de page intérieure */
.page-head { padding: var(--sg-s8) 0 var(--sg-s6); }
.page-head__title {
	font-family: var(--sg-serif);
	font-weight: 400;
	font-size: clamp(36px, 5.6vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--sg-charcoal);
	margin: 0;
	max-width: 920px;
}

/* Cartes service (bord supérieur, numérotées) */
.service-card { border-top: 2px solid var(--sg-charcoal); padding-top: var(--sg-s4); }
.service-card__num {
	font-family: var(--sg-mono);
	font-size: var(--sg-t-micro);
	letter-spacing: 0.18em;
	color: var(--sg-teal-deep);
	text-transform: uppercase;
	margin-bottom: var(--sg-s3);
}
.service-card h3 { margin-bottom: var(--sg-s3); }

/* Cartes équipe (aperçu accueil) */
.team-card__meta { margin-top: var(--sg-s3); }
.team-card__role { font-size: var(--sg-t-small); color: var(--sg-graphite); margin: 4px 0 var(--sg-s2); }
.team-card__spec {
	font-family: var(--sg-mono);
	font-size: var(--sg-t-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sg-teal-deep);
}

/* Appel à l'action contact (bloc foncé) */
.contact-cta__phone {
	font-family: var(--sg-serif);
	font-size: var(--sg-t-h4);
	color: var(--sg-teal);
	text-decoration: none;
	display: inline-block;
}
.contact-cta__email {
	font-size: var(--sg-t-body-lg);
	color: var(--sg-paper);
	text-decoration: none;
	border-bottom: 1px solid var(--sg-teal);
	padding-bottom: 2px;
}

.section-head { display: flex; justify-content: space-between; align-items: end; gap: var(--sg-s5); margin-bottom: var(--sg-s6); flex-wrap: wrap; }

/* Équipe — lignes-document avec CV dépliable */
.team-row { border-top: 1px solid var(--sg-charcoal); padding: var(--sg-s5) 0; }
.team-row:last-child { border-bottom: 1px solid var(--sg-charcoal); }
.team-row__main { display: grid; grid-template-columns: 180px 1.1fr 1.4fr auto; gap: var(--sg-s5); align-items: start; }
.team-row__role { font-family: var(--sg-mono); font-size: var(--sg-t-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-teal-deep); margin-bottom: var(--sg-s2); }
.team-row__name { font-family: var(--sg-serif); font-size: var(--sg-t-h3); font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; color: var(--sg-charcoal); margin: 0; }
.team-row__tags { font-family: var(--sg-mono); font-size: var(--sg-t-caption); color: var(--sg-graphite); letter-spacing: 0.08em; margin-top: var(--sg-s3); }
.team-row__bio { font-size: var(--sg-t-body); line-height: 1.65; color: var(--sg-ink); margin: 0; }
.cv-toggle {
	justify-self: end;
	background: transparent;
	color: var(--sg-charcoal);
	border: 1px solid var(--sg-charcoal);
	min-height: 44px; /* cible tactile WCAG 2.5.8 */
	padding: 10px 14px;
	cursor: pointer;
	font-family: var(--sg-mono);
	font-size: var(--sg-t-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}
.cv-toggle[aria-expanded="true"] { background: var(--sg-charcoal); color: var(--sg-paper); }
.cv-toggle__more::before { content: '+ CV'; }
.cv-toggle[aria-expanded="true"] .cv-toggle__more::before { content: '— Fermer'; }
.cv-panel { margin-top: var(--sg-s6); padding: var(--sg-s5) 0 0 200px; border-top: 1px dotted var(--sg-fog); }
.cv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sg-s6); }
.cv-section__h {
	font-family: var(--sg-mono); font-size: var(--sg-t-micro); letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--sg-teal-deep);
	margin-bottom: var(--sg-s3); padding-bottom: var(--sg-s2);
	border-bottom: 1px solid var(--sg-fog);
}
.cv-list { list-style: none; padding: 0; margin: 0; font-size: var(--sg-t-small); line-height: 1.6; color: var(--sg-ink); }
.cv-list li { padding-left: 16px; position: relative; margin-bottom: var(--sg-s3); }
.cv-list li::before { content: '·'; position: absolute; left: 0; color: var(--sg-teal-deep); }

/* Services — blocs détaillés */
.svc-row { padding: var(--sg-s7) 0; border-top: 1px solid var(--sg-fog); }
.svc-row:first-child { border-top: none; padding-top: var(--sg-s5); }

/* R&D — liste numérotée */
.rd-list { counter-reset: rd; list-style: none; padding: 0; margin: var(--sg-s5) 0 0; display: grid; gap: var(--sg-s5); }
.rd-list li { position: relative; padding-left: var(--sg-s7); font-size: var(--sg-t-body-lg); line-height: 1.55; color: var(--sg-ink); }
.rd-list li::before {
	counter-increment: rd;
	content: counter(rd, decimal-leading-zero);
	position: absolute; left: 0; top: 4px;
	font-family: var(--sg-mono); font-size: var(--sg-t-caption);
	color: var(--sg-teal-deep); letter-spacing: 0.1em;
}

/* Bande d'appel intermédiaire */
.callout { background: var(--sg-teal-soft); border-radius: var(--sg-r-md); padding: var(--sg-s6); }

/* Schéma de procédé (biométhanisation) */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sg-s5); margin-top: var(--sg-s6); list-style: none; padding: 0; }
.process__step { background: var(--sg-paper); border: 1px solid var(--sg-fog); border-radius: var(--sg-r-md); padding: var(--sg-s5); }
.process__num { font-family: var(--sg-mono); font-size: var(--sg-t-caption); letter-spacing: 0.16em; color: var(--sg-teal-deep); margin-bottom: var(--sg-s3); }
.process__step h3 { font-family: var(--sg-serif); font-size: var(--sg-t-h5); font-weight: 500; margin: 0 0 var(--sg-s2); color: var(--sg-charcoal); }
.process__step p { font-size: var(--sg-t-small); line-height: 1.55; color: var(--sg-graphite); margin: 0; }
.feature-list { list-style: none; padding: 0; margin: var(--sg-s4) 0 0; display: grid; gap: var(--sg-s3); }
.feature-list li { padding-left: var(--sg-s5); position: relative; font-size: var(--sg-t-body); line-height: 1.55; }
.feature-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--sg-teal); border-radius: 50%; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--sg-s8); align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: var(--sg-s5); }
.contact-aside { display: flex; flex-direction: column; gap: var(--sg-s5); }
.contact-block { background: var(--sg-paper); padding: var(--sg-s5); border: 1px solid var(--sg-fog); border-radius: var(--sg-r-md); }
.contact-block__eyebrow { font-family: var(--sg-mono); font-size: var(--sg-t-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sg-teal-deep); margin-bottom: var(--sg-s3); }
.contact-block__name { font-family: var(--sg-serif); font-size: var(--sg-t-h5); font-weight: 500; color: var(--sg-charcoal); line-height: 1.15; }
.contact-block__role { font-size: var(--sg-t-small); color: var(--sg-graphite); margin: 4px 0 var(--sg-s4); }
.contact-block__lines { display: flex; flex-direction: column; gap: 4px; }
.contact-block a { color: var(--sg-teal-deep); text-decoration: none; }
.contact-block__addr { font-size: var(--sg-t-small); color: var(--sg-graphite); line-height: 1.6; padding-top: var(--sg-s3); margin-top: var(--sg-s3); border-top: 1px dotted var(--sg-fog); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--sg-t-small); color: var(--sg-graphite); line-height: 1.5; cursor: pointer; }
.consent input { margin-top: 3px; flex: none; }
.form-row { display: flex; align-items: center; gap: var(--sg-s4); flex-wrap: wrap; margin-top: var(--sg-s2); }
.form-note { font-size: var(--sg-t-small); color: var(--sg-graphite); margin: var(--sg-s3) 0 0; }
.form-note a { color: var(--sg-teal-deep); }
.alert { padding: var(--sg-s4) var(--sg-s5); border-radius: var(--sg-r-md); margin-bottom: var(--sg-s5); font-size: var(--sg-t-body); }
.alert--ok { background: var(--sg-teal-soft); color: var(--sg-teal-ink); }
.alert--err { background: var(--sg-alert-err-bg); color: var(--sg-alert-err-text); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
	.container, .site-header__inner, .site-footer__inner, .site-footer__bottom { padding-left: var(--sg-s5); padding-right: var(--sg-s5); }
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
	.process { grid-template-columns: repeat(2, 1fr); }
	.site-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--sg-s6); }
	/* Équipe : photo fixe à gauche, identité à droite, bio et bouton CV pleine largeur dessous (tablette). */
	.team-row__main { grid-template-columns: 140px 1fr; }
	.team-row__bio { grid-column: 1 / -1; }
	.cv-toggle { grid-column: 1 / -1; justify-self: start; }
	.cv-panel { padding-left: 0; }
}

@media (max-width: 760px) {
	.section { padding: var(--sg-s7) 0; }
	.grid--2, .grid--3, .grid--1-2, .grid--2-1, .grid--3-2 { grid-template-columns: 1fr; gap: var(--sg-s6); }
	.hero__grid { grid-template-columns: 1fr; }
	.team-row__main { grid-template-columns: 1fr; gap: var(--sg-s4); }
	.cv-toggle { justify-self: start; }
	.cv-panel { padding-left: 0; }
	.cv-grid { grid-template-columns: 1fr; gap: var(--sg-s5); }
	.process { grid-template-columns: 1fr; }
	.contact-grid { grid-template-columns: 1fr; gap: var(--sg-s6); }
	.site-footer__inner { grid-template-columns: 1fr; }
	.site-footer__bottom { flex-direction: column; gap: var(--sg-s2); }

	/* Navigation mobile : repliée derrière un bouton */
	.site-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(80vw, 320px);
		background: var(--sg-paper);
		padding: 88px var(--sg-s6) var(--sg-s6);
		box-shadow: var(--sg-shadow-raised);
		transform: translateX(100%);
		transition: transform 0.25s ease;
		z-index: 60;
	}
	.site-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sg-s5);
		font-size: var(--sg-t-body-lg);
	}
	.site-nav[data-open="true"] { transform: translateX(0); }
	.site-nav a { font-size: var(--sg-t-body-lg); }
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px; height: 44px;
		background: transparent;
		border: 1px solid var(--sg-fog);
		border-radius: var(--sg-r-sm);
		cursor: pointer;
		z-index: 70;
	}
	.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
		content: ''; display: block; width: 18px; height: 2px; background: var(--sg-charcoal); position: relative;
	}
	.nav-toggle span::before { position: absolute; top: -6px; }
	.nav-toggle span::after  { position: absolute; top: 6px; }
	.site-header__cta { display: none; }
	body[data-nav-open="true"] { overflow: hidden; }
	.nav-backdrop {
		position: fixed; inset: 0; background: var(--sg-scrim); z-index: 55;
		opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
	}
	body[data-nav-open="true"] .nav-backdrop { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}