/* =============================================================
   Woonet Theme — styles globaux
   Variables CSS injectées par inc/dynamic-css.php
   ============================================================= */

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

/* Reset font-family pour les form elements — par défaut HTML, button/input/ */
button,
input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	background: var(--surface);
	color: var(--text);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	overflow-x: hidden;
	overflow-x: clip;
}

/* ═══ Long-form content — appliqué partout où on rend du contenu rédactionnel ═══ */
.entry-content,
.article-body .entry-content,
.service-content,
.project-content,
.about-story .story-content,
.contact-info__intro,
.legal-content {
	font-size: 0.9375rem; /* 15px mobile → 16px PC */
	line-height: var(--leading-relaxed);
	color: var(--text);
}

@media (min-width: 768px) {
	.entry-content,
	.article-body .entry-content,
	.service-content,
	.project-content,
	.about-story .story-content,
	.contact-info__intro,
	.legal-content {
		font-size: 1rem; /* 16px */
	}
}

.entry-content>*+*,
.service-content>*+*,
.project-content>*+*,
.about-story .story-content>*+*,
.legal-content>*+* {
	margin-top: 0.8rem;
}

.entry-content h2,
.service-content h2,
.project-content h2,
.about-story .story-content h2,
.legal-content h2 {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: var(--text-3xl);
	font-weight: 700;
	color: var(--text-strong);
	letter-spacing: -0.02em;
	line-height: var(--leading-tight);
	margin: 1.5rem 0 0.6rem;
}

.entry-content h3,
.service-content h3,
.project-content h3,
.about-story .story-content h3,
.legal-content h3 {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--text-strong);
	letter-spacing: -0.01em;
	line-height: var(--leading-tight);
	margin: 1.15rem 0 0.4rem;
}

.entry-content h4,
.service-content h4,
.project-content h4,
.about-story .story-content h4,
.legal-content h4 {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--text-strong);
	line-height: var(--leading-tight);
	margin: 1rem 0 0.4rem;
}

.entry-content h5,
.service-content h5,
.project-content h5,
.about-story .story-content h5,
.legal-content h5 {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 0.9375rem; /* 15px mobile → 18px PC */
	font-weight: 700;
	color: var(--text-strong);
	line-height: var(--leading-tight);
	margin: 1.1rem 0 0.4rem;
}

.entry-content h6,
.service-content h6,
.project-content h6,
.about-story .story-content h6,
.legal-content h6 {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 0.8125rem; /* 13px mobile → 15px PC */
	font-weight: 700;
	color: var(--text-soft);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: var(--leading-tight);
	margin: 1rem 0 0.35rem;
}

@media (min-width: 768px) {
	.entry-content h5,
	.service-content h5,
	.project-content h5,
	.about-story .story-content h5,
	.legal-content h5 { font-size: 1.125rem; } /* 18px */

	.entry-content h6,
	.service-content h6,
	.project-content h6,
	.about-story .story-content h6,
	.legal-content h6 { font-size: 0.9375rem; } /* 15px */
}

.entry-content ul,
.entry-content ol,
.service-content ul,
.project-content ul {
	padding-left: 2rem;
}

.entry-content li+li,
.service-content li+li,
.project-content li+li {
	margin-top: 0.4rem;
}

a {
	color: inherit;
}

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

/* Accessibilité — skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--black);
	color: var(--white);
	padding: 0.75rem 1rem;
	z-index: var(--z-toast);
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Layout — conteneur. Mobile : 16px fixe (Material). PC ≥768px : 5%. */
.wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 16px;
}

@media (min-width: 768px) {
	.wrap {
		padding: 0 5%;
	}
}

/* .content-narrow : le wrapper conserve la grille .wrap (1280px max).
   Le cap typographique 760px (long-form) s'applique aux ENFANTS, qui
   s'alignent à gauche sur la même position que les titres de hero et
   les sections en-dessous — au lieu d'être centrés au milieu de l'écran. */
.wrap.content-narrow > * {
	max-width: 760px;
	margin-left: 0;
	margin-right: auto;
}

/* =============================================================
   HEADER / NAV
   ============================================================= */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-header);
	background: rgba(250, 250, 248, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--gray-200);
	height: var(--header-height);
}

/* Mobile par défaut : flex space-between → logo gauche, hamburger droite. */
.site-header__inner {
	height: 100%;
	padding: 0 max(5%, calc(55% - 640px));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	position: relative;
}

/* Desktop : grid 3 colonnes — logo gauche, menu centré, CTA absolute droite. */
@media (min-width: 769px) {
	.site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		justify-content: initial;
	}

	.site-header__inner .nav-links li.nav-cta {
		position: absolute;
		right: max(5%, calc(55% - 640px));
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
	}
}

.logo,
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 800;
	font-size: var(--text-xl);
	color: var(--black);
	text-decoration: none;
	letter-spacing: -0.02em;
	line-height: 0;
	justify-self: start;
}

.logo span {
	color: var(--primary);
}

.logo img,
.custom-logo {
	height: 40px;
	width: auto;
	max-width: 100%;
	display: block;
}

.footer-brand .logo img {
	height: 44px;
}

@media (max-width: 480px) {

	.logo img,
	.custom-logo {
		height: 32px;
	}
}

.nav-links {
	display: flex;
	gap: 2rem;
	list-style: none;
	align-items: center;
	margin: 0;
	padding: 0;
}

.nav-links a {
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--black);
	text-decoration: none;
	transition: color var(--dur-base);
	position: relative;
}

/* Active-page indicator + hover : barre bleue animée sous le lien.
   Ne s'applique pas à .nav-cta (qui est un bouton). */
.nav-links a:not(.nav-cta)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--accent);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur-base) ease-out;
}

.nav-links a:not(.nav-cta):hover::after,
.nav-links .current-menu-item > a:not(.nav-cta)::after,
.nav-links .current-menu-ancestor > a:not(.nav-cta)::after,
.nav-links .current_page_item > a:not(.nav-cta)::after {
	transform: scaleX(1);
}

.nav-links a:hover,
.nav-links .current-menu-item>a {
	color: var(--text-strong);
}

/* Scroll progress bar en bas du header sticky.
   Largeur pilotée via --scroll (0..1) par le JS. */
.scroll-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: transparent;
	pointer-events: none;
}

.scroll-progress > span {
	display: block;
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--primary), var(--accent));
	transform: scaleX(var(--scroll, 0));
	transform-origin: left center;
	will-change: transform;
}

/* IMPORTANT : qualifier a.nav-cta uniquement.
   WordPress propage la classe « nav-cta » du menu-item sur le <li> ET le <a>
   (via le nav-walker). Cibler `.nav-cta` seul stylerait aussi le <li>,
   ce qui créait un pill autour du pill du <a>.
   Couleur bleue (accent = primary = #2563EB), palette monochrome bleu. */
a.nav-cta,
.nav-links a.nav-cta {
	background: var(--accent);
	color: var(--white) !important;
	padding: 0.55rem 1.25rem;
	border-radius: var(--radius-pill);
	font-weight: 600 !important;
	transition: background var(--dur-base) !important;
}

a.nav-cta:hover,
.nav-links a.nav-cta:hover {
	background: var(--accent-dark) !important;
	color: var(--white) !important;
}

/* Au cas où WordPress ajoute aussi la classe au <li>, on neutralise
   tout fond/padding qui aurait pu être hérité. */
.nav-links li.nav-cta {
	background: none;
	padding: 0;
	border-radius: 0;
}

.hamburger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
	background: none;
	border: none;
	/* Touch target ≥ 44×44 (Apple HIG / WCAG 2.5.5) */
	min-width: 44px;
	min-height: 44px;
	padding: 10px;
	border-radius: 50%;
	position: relative;
	z-index: var(--z-sticky-bar); /* au-dessus de l'overlay menu (z 99) ET du header lui-même */
	transition: background var(--dur-base);
}

.hamburger:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* Icône moderne — 3 barres asymétriques (stack) qui morphent en X à l'ouverture.
   Les barres ont des largeurs différentes au repos, uniformisent à 22px à l'ouverture. */
.hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--text-strong);
	border-radius: 2px;
	transform-origin: center;
	/* Cubic-bezier avec léger overshoot → mouvement plus organique et moderne */
	transition:
		transform 0.4s cubic-bezier(0.68, -0.4, 0.27, 1.4),
		opacity 0.15s,
		width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		background var(--dur-base);
}
.hamburger span:nth-child(2) { width: 14px; }
.hamburger span:nth-child(3) { width: 18px; }

.hamburger:hover span:nth-child(2),
.hamburger:hover span:nth-child(3) {
	width: 22px;
}

.hamburger[aria-expanded="true"] span {
	width: 22px;
}

/* Stagger : la barre du milieu disparaît en premier, puis les deux extrêmes
   pivotent en se croisant avec un mini-rebond. À la fermeture, l'ordre s'inverse. */
.hamburger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
	transition-delay: 0.08s;
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
	transition-delay: 0s;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
	transition-delay: 0.08s;
}

/* À la fermeture, le milieu réapparaît AFTER que les autres reviennent en place */
.hamburger span:nth-child(2) {
	transition-delay: 0.15s;
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
	transition-delay: 0s;
}

/* En état "ouvert" — léger fond gris visible sur le header clair,
   barres en text-strong (le menu n'est plus plein écran derrière). */
.hamburger[aria-expanded="true"] {
	background: var(--gray-100);
}

.hamburger[aria-expanded="true"]:hover {
	background: var(--gray-200);
}

/* Header opaque quand menu mobile ouvert (sépare proprement le dropdown du contenu). */
body.has-mobile-menu-open .site-header {
	background: var(--white);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Hauteur du header en variable CSS (DRY) — chaque template gère son propre
   décalage haut via .hero/.page-hero (padding-top: 120-140px). */
:root {
	--header-height: 68px;
	/* Système design v3.1 — Bleu électrique monochrome (1-color brand + neutres navy/cream) */
	--primary: #2563EB;
	--primary-dark: #1D4ED8;
	--primary-soft: #DBEAFE;
	/* Aliases monochrome v3.1 : --accent reprend --primary (1-color brand) */
	--accent: var(--primary);
	--accent-dark: var(--primary-dark);
	/* Aliases compat : tokens historiques mappes sur la palette v3.1 (evite les
	   fallback inline tout en gardant la retrocompat des selecteurs existants) */
	--white: #fff;
	--black: #0A0A0A;
	--gray-100: #F2F2EF;
	--gray-200: #E0E0DA;
	--gray-600: #7A7A76;
	--surface-dark: #0F1B3D; /* fond bleu marine pour hero/page-hero/footer */
	--text-strong: #0A0A0A;
	--text: #3A3A36;
	--text-soft: #7A7A76;
	--text-mute: #A8A8A4;
	--surface: #FAFAF8;
	--surface-alt: #F2F2EF;
	--border: #E0E0DA;

	/* ═══ Échelle typographique modulaire (ratio 1.25) ═══ */
	--text-xs: 0.75rem;
	/* 12px — overline, label, badge */
	--text-sm: 0.875rem;
	/* 14px — caption, meta */
	--text-base: 0.875rem;
	/* 14px mobile → 16px PC (corps de base, responsive plus bas) */
	--text-lg: 1.125rem;
	/* 18px — body long-form (articles) */
	--text-xl: 1.0625rem;
	/* 17px mobile → 20px PC (H4, responsive plus bas) */
	--text-2xl: 1.1875rem;
	/* 19px mobile → 24px PC (H3, responsive plus bas) */
	--text-3xl: 1.375rem;
	/* 22px mobile → 28px PC (titre de contenu H2, responsive plus bas) */
	--text-4xl: clamp(2.25rem, 4.5vw, 3rem);
	/* 36-48px — H1 page */
	--text-display: clamp(2.8rem, 6vw, 5rem);
	/* 45-80px — H1 hero homepage */

	/* ═══ Line-heights normalisés ═══ */
	--leading-none: 1;
	/* stat numbers */
	--leading-tight: 1.15;
	/* titres H1-H4 */
	--leading-snug: 1.3;
	/* cards courts */
	--leading-normal: 1.5;
	/* UI, captions */
	--leading-relaxed: 1.7;
	/* body, articles long-form */

	/* ═══ Espacement vertical des sections — clamp() pour responsive auto ═══
	   sm  ≈ 40-60px : sections denses (related posts, services suivants, footer)
	   md  ≈ 48-80px : sections standard (about-story, contact, cta-band)
	   lg  ≈ 56-100px : sections aérées (homepage default)
	   xl  ≈ 80-140px : hero / page-hero (compense aussi le header fixe)
	*/
	--space-section-sm: clamp(40px, 5vw, 60px);
	--space-section-md: clamp(48px, 7vw, 80px);
	--space-section-lg: clamp(56px, 9vw, 100px);
	--space-section-xl: clamp(80px, 12vw, 140px);

	/* ═══ Border radius (système 3 niveaux + pill) ═══ */
	--radius-sm: 4px;   /* badges, tags, inputs */
	--radius-md: 8px;   /* cards intermédiaires */
	--radius-lg: 12px;  /* cards principales, images */
	--radius-xl: 16px;  /* hero visuals, sections */
	--radius-pill: 100px; /* boutons */

	/* ═══ Box-shadows (système 3 niveaux, basé sur navy primary) ═══ */
	--shadow-sm: 0 8px 20px rgba(15, 27, 61, 0.08);
	--shadow-md: 0 16px 40px rgba(15, 27, 61, 0.08);
	--shadow-lg: 0 24px 48px rgba(15, 27, 61, 0.10);

	/* ═══ Couleurs sémantiques (success/error/warning) ═══ */
	--success: #16A34A;
	--success-soft: #DCFCE7;
	--success-text: #4ADE80;  /* utilisé sur fond sombre (footer) */
	--error: #DC2626;
	--error-dark: #B91C1C;
	--error-soft: #FEF2F2;
	--error-text: #FCA5A5;    /* utilisé sur fond sombre */
	--warning: #D97706;
	--warning-soft: #FEF3C7;

	/* ═══ Z-index stack (système nommé) ═══ */
	--z-base: 1;
	--z-fab: 90;          /* back-to-top button */
	--z-dropdown: 95;
	--z-mobile-menu: 99;
	--z-header: 100;
	--z-sticky-bar: 101;  /* progress bar au-dessus du header */
	--z-modal: 1000;
	--z-toast: 9999;

	/* ═══ Durées d'animation ═══ */
	--dur-fast: var(--dur-fast);
	--dur-base: var(--dur-base);
	--dur-slow: var(--dur-slow);
}

/* Palier PC : l'échelle typo monte d'un cran (mobile → PC).
   Corps 14→16 · H2 22→28 · H3 19→24 · H4 17→20 (H5/H6 gérés sur leurs sélecteurs). */
@media (min-width: 768px) {
	:root {
		--text-base: 1rem;    /* 16px */
		--text-xl: 1.25rem;   /* 20px — H4 */
		--text-2xl: 1.5rem;   /* 24px — H3 */
		--text-3xl: 1.75rem;  /* 28px — H2 */
	}
}

/* Compatibilité avec la barre admin WordPress (utilisateur connecté) */
.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* =============================================================
   HERO (homepage + 404)
   ============================================================= */

/* HOME HERO — bandeau sombre pleine largeur (style Kronix simplifié). */
.hero {
	padding: calc(100px + var(--woonet-admin-offset, 0px)) max(5%, calc(50% - 600px)) 90px;
	position: relative;
	background: var(--surface-dark);
	color: var(--white);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.5rem;
}

/* ============================================================================
   HERO HOME — image full-background + overlay dégradé pour lisibilité texte.
   L'image est injectée via style="background-image: url(...)" côté template
   (pour permettre l'override Customizer). Overlay CSS : cream opaque à gauche
   → transparent à droite pour laisser la personne visible.
   ============================================================================ */

.hero-split {
	position: relative;
	padding: calc(var(--header-height, 68px) + var(--woonet-admin-offset, 0px)) 0 0;
	overflow: hidden;
	min-height: 560px;
	display: flex;
	align-items: center;
	background-color: var(--surface);
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
}

/* Overlay dégradé — cream 92% à gauche → transparent au milieu droite.
   Permet au texte gauche d'être lisible sur n'importe quelle photo, tout en
   laissant le sujet à droite visible. */
.hero-split__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--surface) 0%,
		var(--surface) 25%,
		color-mix(in srgb, var(--surface) 85%, transparent) 45%,
		color-mix(in srgb, var(--surface) 40%, transparent) 65%,
		transparent 85%
	);
	pointer-events: none;
	z-index: 1;
}

.hero-split__inner {
	position: relative;
	z-index: 2;
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	padding: 3rem 5%;
	display: block;
}

.hero-split__content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 540px;
}

.hero-split__overline {
	font-family: var(--font-body, 'Mona Sans', sans-serif);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-mute, #7A7A76);
	letter-spacing: 0.02em;
}

.hero-split__title {
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--text-strong, #0F1B3D);
	margin: 0;
}

.hero-split__title em {
	color: var(--primary);
	font-style: normal;
}

/* Sur desktop le <br> respecte la coupure voulue par l'utilisateur.
   Sur mobile étroit, on le neutralise pour éviter les coupures au milieu
   d'un mot (ex. "monde | digital") qui rend le titre bancal. */
.hero-split__title br {
	display: block;
}

@media (max-width: 600px) {
	.hero-split__title br {
		display: none;
	}
}

.hero-split__sub {
	font-size: clamp(1rem, 1.15vw, 1.125rem);
	line-height: 1.6;
	color: var(--text-soft, #4A4A46);
	margin: 0;
	max-width: 480px;
}

.hero-split__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 0.75rem;
}

/* Responsive : sur mobile l'image devient moins dominante — overlay + fort
   pour garantir lisibilité même quand le sujet est proche du texte. */
@media (max-width: 900px) {
	.hero-split {
		min-height: 500px;
		background-position: center right 20%;
	}

	.hero-split__overlay {
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--surface) 95%, transparent) 0%,
			color-mix(in srgb, var(--surface) 85%, transparent) 40%,
			color-mix(in srgb, var(--surface) 70%, transparent) 100%
		);
	}

	.hero-split__inner {
		padding: 2rem 5% 2.5rem;
	}

	.hero-split__content {
		max-width: 100%;
	}

	.hero-split__sub {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.hero-split {
		min-height: 420px;
	}

	.hero-split__title {
		font-size: clamp(2rem, 8vw, 2.5rem);
	}
}

.hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	position: relative;
	z-index: var(--z-base);
}

.admin-bar {
	--woonet-admin-offset: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar {
		--woonet-admin-offset: 46px;
	}
}

/* Lueur radiale (Kronix-style) — accent primary dans le coin haut-gauche */
.hero-bg {
	display: block;
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle 700px at 15% 25%,
			color-mix(in srgb, var(--primary) 45%, transparent) 0%,
			transparent 60%);
	pointer-events: none;
}

.hero h1 {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 800;
	color: var(--white);
	line-height: 1.05;
	letter-spacing: -0.03em;
	max-width: 880px;
	position: relative;
	z-index: var(--z-base);
	margin: 0 auto 1.5rem;
	text-align: center;
}

.hero h1 em {
	color: var(--primary);
	font-style: italic;
	font-weight: 800;
}

.hero-sub {
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	color: rgba(255, 255, 255, 0.6);
	max-width: 620px;
	line-height: 1.65;
	position: relative;
	z-index: var(--z-base);
	margin: 0 auto 2.5rem;
	text-align: center;
}

.hero-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	z-index: var(--z-base);
}

/* =============================================================
   BUTTONS
   ============================================================= */

.btn-primary,
.btn-outline,
.btn-outline--light {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.85rem 1.75rem;
	border-radius: var(--radius-pill);
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all var(--dur-base);
	letter-spacing: -0.01em;
	white-space: nowrap;
	line-height: 1;
}

.btn-primary {
	background: var(--primary);
	color: var(--white);
}

.btn-primary:hover {
	background: var(--primary-dark);
	transform: translateY(-1px);
}

/* Variante "dark" — historique. Pointe désormais sur le primary brand (bleu).
   Le suffixe est conservé pour back-compat (utilisée dans comments + portfolio-grid). */
.btn-primary--dark {
	background: var(--primary);
	color: var(--white);
}

.btn-primary--dark:hover {
	background: var(--primary-dark);
	color: var(--white);
}

.btn-primary--lg {
	font-size: 1rem;
	padding: 1rem 2rem;
}

.btn-outline {
	background: transparent;
	color: var(--white);
	border: 1px solid color-mix(in srgb, var(--white) 30%, transparent);
	font-weight: 500;
}

.btn-outline:hover {
	border-color: color-mix(in srgb, var(--white) 70%, transparent);
	background: color-mix(in srgb, var(--white) 5%, transparent);
}

/* État actif (clic enfoncé) — feedback tactile sur tous les boutons */
.btn-primary:active,
.btn-primary--dark:active,
.btn-outline:active {
	transform: translateY(0);
}

/* État désactivé — visuel + interaction neutralisée */
.btn-primary[disabled],
.btn-primary[aria-disabled="true"],
.btn-outline[disabled],
.btn-outline[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Variante outline pour fond clair (texte + bordure en primary) */
.btn-outline--light {
	background: transparent;
	color: var(--primary);
	border: 1px solid var(--primary);
	font-weight: 500;
}
.btn-outline--light:hover {
	background: var(--primary-soft);
	border-color: var(--primary-dark);
	color: var(--primary-dark);
}

/* =============================================================
   SECTIONS GÉNÉRIQUES
   ============================================================= */

.section {
	padding: var(--space-section-lg) 0;
}

.section-label {
	/* Sur-titres masqués partout (heros + sections de contenu) — demande client.
	   Les styles d'origine sont conservés ci-dessous pour réactivation éventuelle. */
	display: none;
	align-items: center;
	gap: 8px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--primary);
	margin-bottom: 1rem;
}

/* Barre décorative supprimée globalement (demande client : pas de "tiret"
   visuel avant l'eyebrow texte). Seul le label texte reste visible. */
.section-label::before,
.section-label--accent::before,
.section-label--green::before {
	display: none;
}

.section-label--accent {
	color: var(--accent);
}

.section-title {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--black);
	margin-bottom: 1rem;
}

.section-title--light {
	color: var(--white);
}

.section-sub {
	font-size: 1rem;
	color: var(--text-soft);
	max-width: 500px;
	line-height: var(--leading-relaxed);
	margin-bottom: 2.5rem;
}

.section-sub--light {
	color: rgba(255, 255, 255, 0.5);
}

.section-cta {
	text-align: center;
	margin-top: 2.5rem;
}

.empty-state {
	padding: 2rem;
	background: var(--gray-100);
	border-radius: var(--radius-lg);
	color: var(--gray-600);
	text-align: center;
}

/* =============================================================
   PAGES ARCHIVE — respiration verticale entre page-hero + grilles + CTA band
   ============================================================= */

.site-main--archive {
	padding-top: clamp(20px, 2.5vw, 40px);
	padding-bottom: clamp(20px, 2.5vw, 40px);
}

@media (max-width: 768px) {
	.site-main--archive {
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

/* =============================================================
   SERVICES GRID
   ============================================================= */

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
	background: transparent;
	border: none;
}

.service-card {
	background: var(--white);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition:
		transform var(--dur-base) ease,
		box-shadow var(--dur-base) ease,
		border-color var(--dur-base);
	text-decoration: none;
	color: inherit;
}

.service-card:hover {
	border-color: transparent;
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.service-card:hover .svc-icon {
	background: var(--primary);
	color: var(--white);
}

.service-card:hover .svc-arrow {
	color: var(--primary);
}

.svc-icon {
	width: 48px;
	height: 48px;
	border-radius: 6px;
	background: var(--gray-100);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	margin-bottom: 1.5rem;
	transition: none;
	color: var(--black);
}

.svc-icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

.service-card:hover .svc-icon {
	color: var(--white);
}

.svc-title {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
	transition: none;
}

.svc-desc {
	font-size: 0.9rem;
	color: var(--gray-600);
	line-height: 1.65;
	flex: 1;
	transition: none;
}

.svc-arrow {
	margin-top: 1.5rem;
	font-size: 1.2rem;
	color: var(--gray-400);
	transition: none;
	align-self: flex-end;
}

/* Service card variante illustrée — illustration au-dessus du contenu */
.service-card--illustrated {
	padding: 0;
}

.service-card--illustrated .svc-illus {
	aspect-ratio: 16 / 9;
	background: var(--gray-100);
	overflow: hidden;
	transition: none;
}

.service-card--illustrated .svc-illus img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: none;
}

.service-card--illustrated:hover .svc-illus img {
	transform: scale(1.04);
}

/* Illustrations SVG (4:3 designées) : pas de crop, on les montre entières.
   Les vraies photos uploadées en featured image gardent le 'cover' du parent. */
.service-card--illustrated .svc-illus img[src$=".svg"] {
	object-fit: contain;
	padding: 1rem;
	background: var(--surface-alt);
}

/* SVG illustrations dans les cards portfolio : edge-to-edge sans padding */
.portfolio-card__media img[src$=".svg"] {
	object-fit: cover;
	background: var(--surface-alt);
}

.service-card--illustrated .svc-body {
	padding: 1.25rem 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.service-card--illustrated .svc-desc {
	flex: 1;
	margin-bottom: 1rem;
}

.service-card--illustrated .svc-arrow {
	margin-top: 0;
}

/* =============================================================
   PORTFOLIO GRID
   ============================================================= */

/* Section Réalisations home — fond navy sombre + textes clairs.
   Les cards portfolio conservent leur fond blanc → contraste fort. */
.section--realisations {
	background: var(--surface-dark);
}

.section--realisations .section-title {
	color: var(--white);
}

.section--realisations .section-sub {
	color: rgba(255, 255, 255, 0.65);
}

/* Eyebrow label — passer sur une teinte plus lumineuse pour contraste sur navy. */
.section--realisations .section-label,
.section--realisations .section-label--green,
.section--realisations .section-label--accent {
	color: var(--primary-soft, #DBEAFE);
}

/* =============================================================
   PORTFOLIO — Archive réalisations (refonte v3.1 monochrome bleu)
   ============================================================= */

/* Grid : 3 cards/ligne sur PC pour donner du poids visuel à chaque projet */
.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2vw, 2rem);
}

@media (max-width: 1100px) {
	.portfolio-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

/* Card : flex column pour aligner le footer en bas, hauteurs uniformes par grid */
/* ============================================================================
   PORTFOLIO CARD — inspiré de la référence UX blog-post style :
   card blanche bordée, image top, meta ligne (tag + durée), titre,
   séparateur, footer (avatar client + date + flèche cercle).
   ============================================================================ */

.portfolio-card {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: 14px;
	padding: 10px;
	transition:
		transform var(--dur-base) ease,
		box-shadow var(--dur-base) ease,
		border-color var(--dur-base) ease;
	height: 100%;
	overflow: hidden;
}

.portfolio-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(15, 27, 61, 0.08);
	border-color: transparent;
}

.portfolio-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

/* Media : ratio 4/3, coins arrondis à l'intérieur du padding. */
.portfolio-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--surface-alt);
	border-radius: 10px;
	overflow: hidden;
}

.portfolio-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform var(--dur-slow) ease;
	display: block;
}

.portfolio-card:hover .portfolio-card__media img {
	transform: scale(1.04);
}

/* Initiales fallback — 4 variants gradient. */
.portfolio-card__initials {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--surface-dark) 0%, var(--primary-dark) 100%);
	color: var(--primary-soft);
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-weight: 800;
	font-size: var(--text-4xl);
	letter-spacing: -0.04em;
}

.portfolio-card__initials.v2 { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); }
.portfolio-card__initials.v3 { background: linear-gradient(135deg, var(--surface-dark) 0%, var(--primary) 100%); }
.portfolio-card__initials.v4 { background: linear-gradient(135deg, var(--primary) 0%, var(--surface-dark) 100%); }

/* Body : padding réduit (le card lui-même a déjà 10px de padding) */
.portfolio-card__body {
	padding: 1rem 0.5rem 0.5rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Meta ligne top : tag pill (gauche) + durée/secteur (droite). */
.portfolio-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.875rem;
}

.portfolio-card__tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--white);
	background: var(--primary);
	padding: 0.35rem 0.7rem;
	line-height: 1;
	border-radius: 999px;
}

.portfolio-card__duration {
	font-size: 0.8125rem;
	color: var(--gray-600, #6B7280);
	font-weight: 500;
}

.portfolio-card__title {
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--text-strong);
	line-height: 1.3;
	margin: 0 0 1rem;
	letter-spacing: -0.01em;
	transition: color var(--dur-fast) ease;
	/* Cap à 3 lignes pour cards uniformes */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.portfolio-card:hover .portfolio-card__title {
	color: var(--primary);
}

/* Footer : séparateur haut + avatar/nom client (gauche) + flèche cercle (droite) */
.portfolio-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	margin-top: auto;
	padding-top: 0.875rem;
	border-top: 1px solid var(--gray-200);
}

.portfolio-card__client {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 0;
}

/* Avatar client — cercle 40px avec initiale (fallback quand pas d'image). */
.portfolio-card__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--surface-dark) 0%, var(--primary) 100%);
	color: var(--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-weight: 700;
	font-size: 1rem;
	flex-shrink: 0;
	line-height: 1;
}

.portfolio-card__client-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.portfolio-card__client-name {
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--text-strong);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.portfolio-card__date {
	font-size: 0.75rem;
	color: var(--gray-600, #6B7280);
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	line-height: 1;
}

.portfolio-card__date svg {
	color: var(--gray-400, #9CA3AF);
	flex-shrink: 0;
}

/* Flèche cercle — bordure primary, hover: remplissage primary + slide de l'icône. */
.portfolio-card__arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid var(--primary);
	color: var(--primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition:
		background var(--dur-base) ease,
		color var(--dur-base) ease,
		transform var(--dur-base) ease;
}

.portfolio-card:hover .portfolio-card__arrow {
	background: var(--primary);
	color: var(--white);
}

.portfolio-card__arrow svg {
	transition: transform var(--dur-base) ease;
}

.portfolio-card:hover .portfolio-card__arrow svg {
	transform: translateX(2px);
}

/* =============================================================
   TÉMOIGNAGES
   ============================================================= */

.temoignages-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
}

/* Mobile : scroll horizontal moderne avec scroll-snap (même pattern que .team-grid).
   Peek de la prochaine card pour signaler qu'on peut swiper, edge-to-edge avec
   margins négatifs pour casser le padding 5% du .wrap parent. */
@media (max-width: 768px) {
	.temoignages-grid {
		display: flex;
		grid-template-columns: none;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: visible;
		gap: 0.85rem;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 5%;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-left: calc(-1 * 5%);
		margin-right: calc(-1 * 5%);
		padding: 0.5rem 5% 1.25rem;
	}

	.temoignages-grid::-webkit-scrollbar { display: none; }

	.temoignages-grid > * {
		flex: 0 0 80%;
		max-width: 340px;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
}

@media (max-width: 420px) {
	.temoignages-grid > * {
		flex: 0 0 86%;
	}
}

.temoignage-card {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	transition:
		transform var(--dur-base) ease,
		box-shadow var(--dur-base) ease,
		border-color var(--dur-base);
}

.temoignage-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.stars {
	color: var(--warning);
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

.temoignage-card blockquote {
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--gray-600);
	margin-bottom: 1.5rem;
	font-style: italic;
}

.temoignage-author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--white);
	flex-shrink: 0;
	overflow: hidden;
}

.avatar--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.author-name {
	font-weight: 600;
	font-size: 0.9rem;
}

.author-role {
	font-size: 0.8rem;
	color: var(--gray-400);
}

/* =============================================================
   DIFFÉRENCIATEURS (section sombre)
   ============================================================= */

.diff-section {
	background: var(--surface-alt);
}

/* Override les classes light héritées (le contenu fonctionnait en blanc sur noir) */
.diff-section .section-title--light {
	color: var(--black);
}

.diff-section .section-sub--light {
	color: var(--text-soft);
}

.diff-section .section-label--accent {
	color: var(--primary);
}

.diff-section .section-label--accent::before {
	background: var(--primary);
}

.diff-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	background: transparent;
	border: none;
}

.diff-item {
	padding: 1.5rem;
	background: var(--white);
	border-radius: 6px;
	border: 1px solid var(--border);
}

.diff-num {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 2.75rem;
	font-weight: 800;
	color: var(--primary);
	line-height: 1;
	margin-bottom: 1rem;
	letter-spacing: -0.03em;
}

.diff-title {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--black);
	margin-bottom: 0.5rem;
}

.diff-desc {
	font-size: 0.9rem;
	color: var(--text-soft);
	line-height: 1.65;
}

/* =============================================================
   FAQ
   ============================================================= */

.faq-list {
	max-width: 720px;
}
@media (min-width: 769px) {
	.section--faq .section-title,
	.section--faq .section-sub {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
	.section--faq .faq-list {
		margin-left: auto;
		margin-right: auto;
	}
}

.faq-item {
	border-bottom: 1px solid var(--gray-200);
}

.faq-q {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 1.5rem 0;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 1rem;
	font-weight: 500;
	color: var(--black);
}

.faq-q .icon {
	font-size: 1.2rem;
	transition: transform var(--dur-slow);
	flex-shrink: 0;
}

.faq-q[aria-expanded="true"] .icon {
	transform: rotate(45deg);
}

.faq-a {
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--dur-slow) ease;
}

.faq-a__inner {
	font-size: 0.9rem;
	color: var(--gray-600);
	line-height: 1.75;
	padding-bottom: 1.5rem;
}

/* =============================================================
   CTA BAND
   ============================================================= */

/* CTA band : aligné sur .project-cta (fond primary-soft, texte sombre).
   Couleur uniforme sur toutes les CTA au-dessus du footer. */
.cta-band {
	background: var(--primary-soft);
	text-align: center;
	padding: var(--space-section-md) max(5%, calc(55% - 640px));
}

.cta-band h2 {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	color: var(--text-strong);
	margin-bottom: 1rem;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.cta-band p {
	color: var(--text-soft);
	margin-bottom: 2rem;
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
}

/* =============================================================
   FOOTER
   ============================================================= */

.site-footer {
	background: var(--surface-dark);
	padding: 2.5rem 0 1.25rem;
	color: rgba(255, 255, 255, 0.45);
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 3rem;
	margin-bottom: 1.5rem;
}

.footer-brand .logo {
	color: var(--white);
	display: block;
	margin-bottom: 1rem;
}

/* .logo span : dead code retiré — on utilise désormais le logo SVG officiel (logo-light.svg). */
.footer-brand p {
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 1rem;
	line-height: 1.65;
	max-width: 340px;
	color: rgba(255, 255, 255, 0.78);
}

/* Newsletter dans la colonne Brand — visual identique à la référence UX :
   titre "hook" de 2 lignes + container pilule sombre (bg blanc 6%) avec
   input transparent + bouton blanc plein à droite. Form action = "#" pour
   l'instant : le user peut wire à Mailchimp/Brevo en éditant le PHP. */
.footer-brand__newsletter {
	margin-top: 1.5rem;
	max-width: 480px;
}

.footer-brand__newsletter-title {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--white);
	margin: 0 0 1.25rem;
}

.footer-brand__newsletter-form {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 4px;
	max-width: 100%;
}

.footer-brand__newsletter-form input[type="email"] {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--white);
	padding: 10px 12px;
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 0.9rem;
}

.footer-brand__newsletter-form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.footer-brand__newsletter-form button {
	flex-shrink: 0;
	background: var(--white);
	color: var(--surface-dark);
	border: none;
	padding: 10px 20px;
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background var(--dur-base), color var(--dur-base);
}

.footer-brand__newsletter-form button:hover {
	background: var(--primary);
	color: var(--white);
}

/* Messages retour après submit (success = vert doux, error = rouge doux).
   Border-left 3px pour signal sémantique, fond très subtil sur navy. */
.footer-brand__newsletter-msg {
	margin: 0 0 0.75rem;
	padding: 0.75rem 0.875rem;
	border-radius: 4px;
	font-size: 0.85rem;
	line-height: 1.45;
	border-left: 3px solid;
}

.footer-brand__newsletter-msg--ok {
	background: rgba(74, 222, 128, 0.08);
	color: var(--success-text, #4ADE80);
	border-color: var(--success-text, #4ADE80);
}

.footer-brand__newsletter-msg--error {
	background: rgba(252, 165, 165, 0.08);
	color: var(--error-text, #FCA5A5);
	border-color: var(--error-text, #FCA5A5);
}

.footer-col h4 {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--white);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 1.25rem;
}

.footer-col a,
.footer-col .footer-address,
.footer-col .footer-zones {
	display: block;
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	margin-bottom: 0.6rem;
	transition: color var(--dur-base);
}

/* Bouton WhatsApp direct : bouton pill primary, contraste fort sur footer navy */
.footer-col a.footer-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	background: var(--primary);
	color: #fff;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: var(--text-sm);
	margin: 0.25rem 0 1rem;
	width: fit-content;
	transition: background var(--dur-fast);
}

.footer-col a.footer-whatsapp:hover {
	background: var(--primary-dark);
	color: #fff;
}

.footer-col a.footer-whatsapp::after {
	display: none;
}

/* Adresse : info clé du contact → légèrement renforcée (poids, taille) sans
   crier visuellement. */
.footer-col .footer-address {
	font-size: 0.95rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.55;
}

/* Zones d'intervention : ligne discrete sous l'adresse */
.footer-col .footer-zones {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.55);
	margin-top: -0.25rem;
	margin-bottom: 1rem;
	line-height: var(--leading-relaxed);
}

/* Contact items — pattern icône ronde + texte (inspiré de la référence UX).
   Chaque item (téléphone / email / WhatsApp / adresse) est structuré comme
   [cercle icône 40×40] + [texte multi-ligne éventuel]. Cercle très subtil
   sur le fond navy : rgba blanc 5% seulement — le contenu reste star. */
.footer-col--contact .contact-item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	line-height: 1.4;
	transition: color var(--dur-base);
}

.footer-col--contact a.contact-item:hover {
	color: var(--white);
}

.footer-col--contact a.contact-item:hover .contact-item__icon {
	background: rgba(255, 255, 255, 0.1);
	color: var(--white);
}

.footer-col--contact .contact-item__icon {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.8);
	flex-shrink: 0;
	transition: background var(--dur-base), color var(--dur-base);
}

.footer-col--contact .contact-item__icon svg {
	width: 16px;
	height: 16px;
	display: block;
}

.footer-col--contact .contact-item__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--text-sm);
	min-width: 0;
}

.footer-col--contact .contact-item__zones {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.4;
}

/* Reset cascade : la règle générique .footer-col a impose fit-content + padding
   qui casse le layout icône+texte. On force width auto + zéro padding pour que
   la structure interne du .contact-item reprenne la main. */
.footer-col--contact a.contact-item {
	width: auto;
	max-width: 100%;
	padding: 0;
}


.footer-col a {
	position: relative;
	width: fit-content;
}

/* Pas d'underline sur les liens du footer — l'affordance passe par
   le changement de couleur au hover (color → white). */
.footer-col a::after {
	display: none;
}

.footer-col a:hover {
	color: var(--white);
}

/* Cap Services desktop à 8 entrées (mobile cap à 6 redéfini plus bas).
   Les liens 9+ restent dans le HTML pour le crawl SEO mobile-first,
   mais ne s'affichent pas → footer équilibré, lien "Tous nos services" en relais. */
.footer-col--services .footer-menu li:nth-child(n+9) {
	display: none;
}

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

/* Lien « Tous nos services → » sous la liste auto */
.footer-col__view-all {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.5rem;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--white);
	text-decoration: none;
	transition: color var(--dur-base);
}

.footer-col__view-all:hover {
	color: var(--accent, var(--primary));
}

.footer-col__view-all::after {
	display: none; /* pas d'underline animée — l'icône → suffit */
}

.footer-socials {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 0.75rem;
}

.footer-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.7);
	transition: all var(--dur-base);
}

.footer-socials a:hover {
	background: var(--primary);
	color: var(--white);
}

.footer-socials a svg {
	width: 16px;
	height: 16px;
	display: block;
}

.site-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 2rem;
	padding-bottom: 3rem;
	margin-bottom: 3rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__widgets .widget-title {
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.1);
}

.site-footer__widgets .widget,
.site-footer__widgets .widget li a {
	color: rgba(255, 255, 255, 0.55);
}

.site-footer__widgets .widget li a:hover {
	color: var(--primary);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 1.25rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.55); /* up de 0.45 → 0.55 (lisibilité, garde le rang secondaire) */
}

/* Bloc meta gauche : copyright + menu légal groupés (comme la référence). */
.footer-bottom__meta {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.footer-legal {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-legal a {
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
}

.footer-legal a:hover {
	color: var(--white);
}

/* Widget Cloudflare Turnstile — espacement propre dans les formulaires. */
.woonet-turnstile {
	margin: 1rem 0;
}

/* =============================================================
   BACK-TO-TOP — bouton flottant bas-droit
   ============================================================= */
.woonet-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: var(--z-fab);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--primary);
	color: var(--white);
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(15, 27, 61, 0.25);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--dur-base), transform var(--dur-base), background var(--dur-base);
}

.woonet-back-to-top:not([hidden]) {
	opacity: 1;
	transform: translateY(0);
}

.woonet-back-to-top:hover {
	background: var(--accent);
}

.woonet-back-to-top:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.woonet-back-to-top {
		right: 14px;
		bottom: 14px;
		width: 40px;
		height: 40px;
	}
}

/* =============================================================
   PAGES (page-hero / a-propos / contact / legal)
   ============================================================= */

/* Hero unifié — fond navy sombre (cohérent avec le home), contenu centré,
   eyebrow primary pour signer la marque. Marges généreuses pour la respiration. */
.page-hero {
	/* padding-top calculé pour compenser le header fixe (--header-height = 68px)
	   + clearance minimale visuelle de 82px sur mobile, jusqu'a 132px sur PC. */
	padding: calc(var(--header-height) + clamp(82px, 9vw, 132px)) max(5%, calc(55% - 640px)) clamp(80px, 9vw, 130px);
	background: var(--surface-dark);
	color: var(--white);
	text-align: center;
}

/* Modifier universel pour aligner les hero à gauche (pattern standard du site
   sauf home page). Eyebrow + breadcrumbs au-dessus du titre, sub limité à 640px
   pour preserver la lecture. */
.page-hero--align-left {
	text-align: left;
}

.page-hero--align-left .page-hero__title,
.page-hero--align-left .page-hero__sub,
.page-hero--align-left .page-title {
	margin-left: 0;
	margin-right: 0;
}

.page-hero--align-left .page-hero__sub {
	max-width: 640px;
}

/* Pages SANS .page-hero (ex : single article apres refonte) : compensate le
   header fixe via padding-top sur body — sinon le contenu est masque dessous. */
body.single-post {
	padding-top: var(--header-height);
}

/* Single article — header inline au-dessus de l'image, aligné sur le contenu 760px
   (.article-layout__main). Plus de hero navy : tout est en flux normal. */
.article-header {
	margin: clamp(1.5rem, 4vw, 3rem) 0 clamp(1.75rem, 3vw, 2.5rem);
}

.article-header__title {
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--text-strong);
	margin: 0 0 1rem;
}

.article-header__sub {
	font-size: var(--text-lg);
	color: var(--text-soft);
	line-height: var(--leading-relaxed);
	margin: 0 0 1.5rem;
}

.article-header .article-meta {
	color: var(--text-soft);
	justify-content: flex-start;
	margin: 0;
}

.article-header .article-meta__author {
	color: var(--text-strong);
}

.article-header .article-meta__sep {
	color: var(--text-mute);
}

.article-header .woonet-breadcrumbs,
.article-header .woonet-breadcrumbs a {
	color: var(--text-soft);
}

.article-header .woonet-breadcrumbs a:hover,
.article-header .woonet-breadcrumbs [aria-current="page"] {
	color: var(--text-strong);
}

.article-header .woonet-breadcrumbs__sep {
	color: var(--text-mute);
}

/* Variant clair : fond cream, titre navy, sub gris doux.
   Cohérent avec le hero-split de la home (background var(--surface)).
   Utilisé par index.php (blog listing) et page.php (pages génériques). */
.page-hero--light {
	background: var(--surface);
	color: var(--text-strong);
}

.page-hero--light .page-hero__title,
.page-hero--light .page-title {
	color: var(--text-strong);
}

.page-hero--light .page-hero__sub {
	color: var(--text-soft);
}

.page-hero--light .woonet-breadcrumbs,
.page-hero--light .woonet-breadcrumbs a {
	color: var(--text-soft);
}

.page-hero--light .woonet-breadcrumbs a:hover,
.page-hero--light .woonet-breadcrumbs [aria-current="page"] {
	color: var(--text-strong);
}

.page-hero--light .woonet-breadcrumbs__sep {
	color: var(--text-mute);
}

/* Eyebrow (sur-titre) : réactivé UNIQUEMENT dans le contexte page-hero. */
.page-hero .section-label,
.page-hero .section-label--accent,
.page-hero .section-label--green {
	display: inline-flex;
	margin-bottom: 1rem;
	color: var(--primary);
}

.page-hero .wrap {
	padding: 0;
}

.page-hero__title,
.page-hero .page-title {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	max-width: 760px;
	margin: 0 auto 1.25rem;
	color: var(--white);
}

.page-hero__sub {
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	color: rgba(255, 255, 255, 0.65);
	max-width: 600px;
	line-height: 1.6;
	margin: 0 auto;
}

/* About — Valeurs */
.section--valeurs {
	background: var(--gray-100);
}

.valeurs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.valeur-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem 1.75rem 1.75rem;
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition:
		transform var(--dur-base) ease,
		box-shadow var(--dur-base) ease,
		border-color var(--dur-base) ease;
}

.valeur-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-base) ease;
}

.valeur-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.valeur-card:hover::before {
	transform: scaleX(1);
}

.valeur-card__icon,
.valeur-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 0.25rem;
	border-radius: var(--radius-md, 10px);
	background: var(--primary-soft, #DBEAFE);
	color: var(--primary);
	flex-shrink: 0;
}

.valeur-card__icon svg,
.valeur-icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

.valeur-card__title,
.valeur-card h3 {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--text-strong, #0F1B3D);
	margin: 0;
	letter-spacing: -0.01em;
}

.valeur-card__desc,
.valeur-card p {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--text-soft, var(--gray-600));
	margin: 0;
}

/* About — Équipe */
.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}

/* Mobile : scroll horizontal moderne avec scroll-snap (style iOS / Stripe).
   Les cards s'alignent au bord gauche du contenu, le peek de la suivante
   (~22%) indique qu'on peut faire glisser. Edge-to-edge avec margins négatifs. */
@media (max-width: 768px) {
	.team-grid {
		display: flex;
		grid-template-columns: none;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: visible;
		gap: 0.85rem;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 5%;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
		/* Break out de la grille .wrap (padding 5%) pour scroll edge-to-edge */
		margin-left: calc(-1 * 5%);
		margin-right: calc(-1 * 5%);
		padding: 0.5rem 5% 1.25rem;
	}

	.team-grid::-webkit-scrollbar { display: none; }

	.team-grid > * {
		flex: 0 0 78%;
		max-width: 320px;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
}

@media (max-width: 420px) {
	.team-grid > * {
		flex: 0 0 84%;
	}
}

.team-card {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition:
		transform var(--dur-base) ease,
		box-shadow var(--dur-base) ease,
		border-color var(--dur-base);
}

.team-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.team-avatar {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 800;
	font-size: 3.5rem;
}

.team-avatar.c1 {
	background: linear-gradient(135deg, var(--primary), #1D4ED8);
	color: var(--accent);
}

.team-avatar.c2 {
	background: linear-gradient(135deg, var(--surface-dark), var(--primary-dark));
	color: var(--primary-soft);
}

.team-avatar.c3 {
	background: linear-gradient(135deg, var(--primary-dark), var(--primary));
	color: var(--primary-soft);
}

.team-avatar.c4 {
	background: linear-gradient(135deg, var(--surface-dark), var(--primary));
	color: var(--primary-soft);
}

.team-avatar--photo {
	padding: 0;
	height: 240px;
}

.team-avatar--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-info {
	padding: 1.25rem;
}

.team-name {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 2px;
}

.team-role {
	font-size: 0.8rem;
	color: var(--primary);
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.team-bio {
	font-size: 0.825rem;
	color: var(--gray-600);
	line-height: 1.6;
}

/* About — Story (page contenu) */
.about-story {
	padding: var(--space-section-md) 0;
}

/* .about-story p : typo héritée du bloc long-form unifié en haut du fichier */
.story-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5rem;
	align-items: center;
}

.story-visual {
	border-radius: var(--radius-xl);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--primary);
}

.story-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.story-content h2 {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	letter-spacing: -0.02em;
}

@media (max-width: 900px) {
	.story-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* =============================================================
   CONTACT PAGE
   ============================================================= */

.contact-section {
	padding: var(--space-section-md) 5%;
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 5rem;
	align-items: start;
}

.contact-info__title,
.contact-form-wrap__title {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--text-strong);
	margin-bottom: 1rem;
	letter-spacing: -0.02em;
	line-height: var(--leading-tight);
}

.contact-info__intro p {
	margin-bottom: 2rem;
	/* typo héritée du bloc long-form unifié */
}

.contact-form-wrap__intro {
	font-size: var(--text-sm);
	color: var(--text-soft);
	margin-bottom: 2rem;
}

.contact-cards {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.contact-card {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--gray-200);
	background: var(--white);
	text-decoration: none;
	color: inherit;
	transition:
		transform var(--dur-base) ease,
		box-shadow var(--dur-base) ease,
		border-color var(--dur-base);
}

.contact-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.contact-card--static {
	cursor: default;
}

.contact-card--static:hover {
	transform: none;
}

.cc-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--primary-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	flex-shrink: 0;
}

.cc-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--gray-400);
	margin-bottom: 2px;
}

.cc-value {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--black);
}

.horaires {
	padding: 1.25rem 1.5rem;
	background: var(--gray-100);
	border-radius: var(--radius-lg);
}

.horaires h4 {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 700;
	font-size: 0.9rem;
	margin-bottom: 0.75rem;
}

.horaire-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.875rem;
	padding: 4px 0;
	color: var(--gray-600);
}

.horaire-row strong {
	color: var(--black);
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.form-group.full {
	grid-column: 1 / -1;
}

.form-group label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--black);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.form-group input,
.form-group select,
.form-group textarea {
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 0.95rem;
	border: 1.5px solid var(--gray-200);
	border-radius: var(--radius-md);
	padding: 0.75rem 1rem;
	background: var(--white);
	color: var(--black);
	outline: none;
	transition: border-color var(--dur-base);
	width: 100%;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	border-color: var(--primary);
}

.form-group textarea {
	min-height: 130px;
	resize: vertical;
}

.form-group select {
	cursor: pointer;
}

.form-submit {
	margin-top: 1.5rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.form-note {
	font-size: 0.8rem;
	color: var(--gray-400);
}

.form-success {
	display: none;
	text-align: center;
	padding: 3rem;
	background: var(--primary-soft);
	border-radius: var(--radius-lg);
	border: 1px solid var(--primary);
	margin-top: 1.5rem;
}

.form-success.show {
	display: block;
}

.form-success h3 {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 0.5rem;
}

.form-success p {
	color: var(--gray-600);
	font-size: 0.9rem;
}

.form-error {
	display: none;
	text-align: center;
	padding: 1.25rem 1.5rem;
	background: var(--error-soft);
	border-radius: var(--radius-lg);
	border: 1px solid var(--error);
	margin-top: 1.5rem;
}

.form-error.show {
	display: block;
}

.form-error p {
	color: var(--error-dark);
	font-size: 0.9rem;
	margin: 0;
}

/* =============================================================
   LEGAL
   ============================================================= */

.legal-page {
	padding-top: var(--space-section-lg);
}

.legal-content {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--space-section-md) 5%;
}

.legal-title {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 0.5rem;
	letter-spacing: -0.03em;
}

.legal-subtitle {
	color: var(--text-soft);
	margin-bottom: 3rem;
	font-size: var(--text-sm);
}

.legal-content li {
	margin-bottom: 0.5rem;
}

.legal-content a {
	color: var(--primary);
}

/* =============================================================
   ENTRY / BLOG
   ============================================================= */

.entry {
	margin-bottom: 3rem;
}

.entry-header {
	margin-bottom: 1rem;
}

.entry-title {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: var(--text-2xl);
	font-weight: 700;
	line-height: var(--leading-tight);
}

.entry-title a {
	text-decoration: none;
	color: var(--text-strong);
}

.entry-title a:hover {
	color: var(--primary);
}

/* .entry-content typo héritée du bloc long-form unifié */

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 900px) {
	/* Tablette : Brand en pleine largeur en haut, puis 3 cols Services/Agence/Contact. */
	.footer-grid {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1.5rem 1.5rem;
	}

	.footer-brand {
		grid-column: 1 / -1; /* span tout le row du haut */
	}

	.footer-brand p {
		max-width: 100%;
		font-size: 1rem;
	}

	.footer-col h4 {
		font-size: 1.1rem;
		margin-bottom: 1rem;
	}

	/* Liens : ≥16px contre l'auto-zoom iOS + padding 10px pour cible tactile ≥40px. */
	.footer-col a,
	.footer-col .footer-address {
		font-size: 1rem;
		line-height: 1.4;
		padding: 10px 0;
		margin-bottom: 0;
	}

	/* Zones d'intervention : remontées à 0.875rem (avant 0.75rem, peu lisible). */
	.footer-col .footer-zones {
		font-size: 0.875rem;
		margin: 0.5rem 0 1rem;
	}

	.footer-bottom {
		font-size: 0.95rem;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		gap: 0.75rem;
	}

	.footer-legal {
		justify-content: center;
		flex-wrap: wrap;
	}

	.valeurs-grid {
		grid-template-columns: 1fr 1fr;
	}

	.contact-section {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
}

/* Hero — padding allégé sur mobile */
@media (max-width: 768px) {
	.hero {
		padding: calc(78px + var(--woonet-admin-offset, 0px)) 5% 48px;
	}
}

@media (max-width: 480px) {
	.hero {
		padding: calc(66px + var(--woonet-admin-offset, 0px)) 5% 40px;
	}

	.hero h1 {
		line-height: 1.1;
	}

	.service-card {
		padding: 1.5rem;
	}

	.service-card--illustrated .svc-body {
		padding: 1.25rem 1.5rem 1.5rem;
	}
}

/* Push le contenu vers le haut quand le cookie banner est visible (mobile) */
@media (max-width: 720px) {
	body.has-cookie-banner {
		padding-bottom: 160px;
	}
}

@media (max-width: 768px) {
	.hamburger {
		display: flex;
	}

	/* Mobile menu — overlay déroulé du HAUT vers le BAS (slide-down).
	   On garde l'élément rendu en permanence (pas de display:none), masqué
	   via transform + visibility pour permettre l'animation à l'ouverture ET
	   à la fermeture. */
	/* Drawer latéral DROIT — slide depuis la droite avec fond navy sombre. */
	.nav-links {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: calc(var(--woonet-admin-offset, 0px));
		right: 0;
		bottom: 0;
		left: auto;
		width: min(85vw, 360px);
		background: var(--surface-dark);
		padding: calc(var(--header-height) + 1.5rem) 1.75rem 2rem;
		gap: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		justify-content: flex-start;
		align-items: stretch;
		z-index: var(--z-mobile-menu);
		box-shadow: -8px 0 24px rgba(15, 27, 61, 0.15);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--dur-base) ease,
			visibility 0s var(--dur-base);
	}

	.nav-links.open {
		transform: translateX(0);
		visibility: visible;
		transition: transform var(--dur-base) ease,
			visibility 0s;
	}

	.nav-links li {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		/* Stagger d'apparition à l'ouverture du drawer : chaque item glisse depuis la droite. */
		opacity: 0;
		transform: translateX(12px);
	}

	.nav-links.open li {
		animation: woonet-nav-item-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
	}

	.nav-links.open li:nth-child(1) { animation-delay: 60ms; }
	.nav-links.open li:nth-child(2) { animation-delay: 110ms; }
	.nav-links.open li:nth-child(3) { animation-delay: 160ms; }
	.nav-links.open li:nth-child(4) { animation-delay: 210ms; }
	.nav-links.open li:nth-child(5) { animation-delay: 260ms; }
	.nav-links.open li:nth-child(6) { animation-delay: 310ms; }
	.nav-links.open li:nth-child(7) { animation-delay: 360ms; }
	.nav-links.open li:nth-child(8) { animation-delay: 410ms; }

	@keyframes woonet-nav-item-in {
		to { opacity: 1; transform: translateX(0); }
	}

	.nav-links a {
		display: block;
		padding: 1.1rem 0;
		font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
		font-size: 1.05rem;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.85);
		letter-spacing: 0;
		transition: color var(--dur-fast);
	}

	.nav-links a:not(.nav-cta)::after { display: none; }

	/* Item actif : blanc plein + barre verticale gauche blanche. */
	.nav-links .current-menu-item > a,
	.nav-links .current_page_item > a,
	.nav-links .current-menu-ancestor > a {
		color: var(--white);
		font-weight: 700;
		position: relative;
		padding-left: 0.85rem;
	}

	.nav-links .current-menu-item > a::before,
	.nav-links .current_page_item > a::before,
	.nav-links .current-menu-ancestor > a::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 3px;
		height: 60%;
		background: var(--white);
		border-radius: 2px;
	}

	.nav-links a:hover {
		color: var(--white);
	}

	/* Le <li> du CTA : pas de border-bottom (c'est un bouton, pas un lien),
	   espacement plus généreux au-dessus, et bouton centré horizontalement. */
	.nav-links li:has(.nav-cta) {
		border-bottom: none;
		margin-top: 1.5rem;
		text-align: center;
	}

	/* Supprime aussi le séparateur du dernier item (souvent le CTA) pour un rendu propre. */
	.nav-links li:last-child {
		border-bottom: none;
	}

	.nav-links a.nav-cta {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: auto;
		padding: 0.85rem 1.6rem !important;
		font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
		font-size: 0.95rem;
		font-weight: 600 !important;
		background: var(--white) !important;
		color: var(--primary) !important;
		border-radius: var(--radius-pill);
		letter-spacing: -0.01em;
		transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base);
	}

	.nav-links a.nav-cta::after {
		content: "→";
		font-size: 1.05rem;
		font-weight: 400;
		line-height: 1;
		transition: transform var(--dur-base);
	}

	.nav-links a.nav-cta:hover {
		background: var(--gray-100) !important;
		color: var(--primary-dark) !important;
	}

	.nav-links a.nav-cta:hover::after {
		transform: translateX(3px);
	}


	/* Empêche le scroll body quand menu ouvert (géré via class JS) */
	body.has-mobile-menu-open {
		overflow: hidden;
	}

	/* Voile semi-transparent derrière le dropdown — isole le panneau du contenu page.
	   Z-index entre le contenu (auto) et le dropdown (z-mobile-menu = 99). */
	body.has-mobile-menu-open::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(15, 27, 61, 0.5);
		z-index: 80;
		pointer-events: none;
	}

	/* Note : .section et .page-hero ont leurs paddings en clamp() responsive
	   dans :root, plus besoin d'overrides ici. */
}

/* Compense la barre admin sur desktop (32px) — la nav mobile n'est ouverte
   qu'en dessous de 768px, donc la règle ci-dessus suffit. */

@media (max-width: 600px) {
	/* Phone : tout en 1 colonne, réordonné Brand → Contact → Services → Agence
	   pour faire remonter l'info actionnable (tel / WhatsApp / email) au-dessus
	   des longues listes de liens. */
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.footer-brand           { order: 1; }
	.footer-col--contact    { order: 2; }
	.footer-col             { order: 3; } /* Services + Agence dans l'ordre du DOM */

	/* Cap Services à 6 entrées en mobile — au-delà, lien « Tous nos services → »
	   (rendu côté PHP) dirige vers l'archive. Évite le footer kilométrique
	   quand le catalogue CPT grossit. */
	.footer-col--services .footer-menu li:nth-child(n+7) {
		display: none;
	}

	.valeurs-grid {
		grid-template-columns: 1fr;
	}

	.form-grid {
		grid-template-columns: 1fr;
	}
}

/* Ultra-petit (≤360px) : on lâche le 2-col, tout passe en 1 col centré pour
   les iPhone SE 1ère gen / vieux Android. Les phones modernes (361-600px)
   gardent le layout 2-col du breakpoint ≤600px. */
@media (max-width: 360px) {
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}

	.footer-brand p {
		margin-left: auto;
		margin-right: auto;
	}

	.footer-socials {
		justify-content: center;
		gap: 1rem;
		flex-wrap: wrap;
		max-width: 240px;
		margin-left: auto;
		margin-right: auto;
	}

	.footer-col a {
		margin-left: auto;
		margin-right: auto;
	}

	.footer-col .footer-address {
		margin: 8px auto;
	}

	.footer-bottom {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		gap: 0.75rem;
	}

	.footer-legal {
		justify-content: center;
		flex-wrap: wrap;
	}
}

/* =============================================================
   ACCESSIBILITÉ
   ============================================================= */

/* Focus ring brand sur les éléments interactifs (liens + cards) */
.nav-links a:focus-visible,
.footer-col a:focus-visible,
.footer-legal a:focus-visible,
.footer-socials a:focus-visible,
.service-card:focus-visible,
.portfolio-card__link:focus-visible,
.contact-card:focus-visible,
.faq-q:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* Focus ring sur tous les boutons (préserve leur forme pill — pas d'override de border-radius) */
.btn-primary:focus-visible,
.btn-primary--dark:focus-visible,
.btn-primary--lg:focus-visible,
.btn-outline:focus-visible,
.btn-outline--light:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 3px;
}

/* Respecte la préférence "reduce motion" du système d'exploitation */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.faq-q .icon {
		transition: none;
	}

	.portfolio-card:hover {
		transform: none;
	}

	.team-card:hover {
		transform: none;
	}

	.contact-card:hover {
		transform: none;
	}

	.service-card--illustrated:hover .svc-illus img {
		transform: none;
	}

	/* Coupe explicitement les animations récentes (mega-menu, scroll progress,
	   gallery hover, post hover) pour les utilisateurs sensibles au mouvement. */
	.mega-menu,
	.elementor-gallery-item img,
	.elementor-post,
	.woonet-back-to-top,
	.scroll-progress > span {
		transition: none !important;
		animation: none !important;
	}
}

/* =============================================================
   BLOG — listing, cards, pagination
   ============================================================= */

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 1rem 0;
}

/* Tablette : 2 cols */
@media (max-width: 900px) {
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile : 1 col pleine largeur */
@media (max-width: 600px) {
	.blog-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

/* Page Actualités (liste blog) : hérite du 3 cols par défaut. */
.site-main--archive .blog-grid {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
	.site-main--archive .blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.site-main--archive .blog-grid {
		grid-template-columns: 1fr;
	}
}

.blog-card {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: 10px;
	overflow: hidden;
	transition:
		transform var(--dur-base) ease,
		box-shadow var(--dur-base) ease,
		border-color var(--dur-base);
}

.blog-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(15, 27, 61, 0.08);
	border-color: transparent;
}

.blog-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.blog-card__media {
	aspect-ratio: 16 / 9;
	background: var(--gray-100);
	overflow: hidden;
}

.blog-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dur-base) ease;
}

.blog-card:hover .blog-card__media img {
	transform: scale(1.04);
}

.blog-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--primary), #1D4ED8);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 800;
	font-size: 3rem;
	color: var(--white);
	letter-spacing: -0.05em;
}

.blog-card__body {
	padding: 1.35rem 1.35rem 1.5rem;
}

/* Meta ligne (calendrier + auteur) — deux items séparés, icône SVG + texte. */
.blog-card__meta {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 0.9rem;
	font-size: 0.8125rem;
	color: var(--gray-600, #6B7280);
	flex-wrap: wrap;
}

.blog-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--gray-600, #6B7280);
}

.blog-card__meta-icon {
	width: 14px;
	height: 14px;
	color: var(--gray-400, #9CA3AF);
	flex-shrink: 0;
}

.blog-card__meta time {
	color: inherit;
}

.blog-card__title {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.35;
	letter-spacing: -0.01em;
	margin: 0 0 0.6rem;
	color: var(--text-strong, #0F1B3D);
	/* Cap à 2 lignes pour cohérence de hauteur des cards */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-card:hover .blog-card__title {
	color: var(--primary);
}

.blog-card__excerpt {
	font-size: 0.875rem;
	color: var(--gray-600, #6B7280);
	line-height: 1.55;
	margin: 0 0 1.15rem;
	/* Cap à 2 lignes pour l'harmonie de la grille */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* « Lire plus ↗ » — lien primary avec icône diagonale (pattern moderne). */
.blog-card__read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--primary);
	transition: gap var(--dur-base) ease, color var(--dur-base) ease;
}

.blog-card__read-more-icon {
	width: 14px;
	height: 14px;
	color: currentColor;
	transition: transform var(--dur-base) ease;
}

.blog-card:hover .blog-card__read-more {
	color: var(--primary-dark, #1D4ED8);
	gap: 0.55rem;
}

.blog-card:hover .blog-card__read-more-icon {
	transform: translate(2px, -2px);
}

/* Mobile (≤768px) : typo compacte, extrait toujours affiché (contrairement à
   l'ancienne version qui le masquait — la référence garde l'excerpt en mobile). */
@media (max-width: 768px) {
	.blog-card__body { padding: 1.15rem 1.15rem 1.35rem; }
	.blog-card__title { font-size: 1rem; line-height: 1.3; }
	.blog-card__meta { font-size: 0.75rem; gap: 0.85rem; margin-bottom: 0.75rem; }
	.blog-card__meta-icon { width: 13px; height: 13px; }
	.blog-card__excerpt { font-size: 0.8125rem; margin-bottom: 1rem; }
	.blog-card__read-more { font-size: 0.85rem; }
}

/* =============================================================
   PAGINATION
   ============================================================= */

.woonet-pagination {
	margin: 3rem auto;
	display: flex;
	justify-content: center;
}

.woonet-pagination ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.woonet-pagination a,
.woonet-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.85rem;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--gray-200);
	background: var(--white);
	color: var(--black);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: all var(--dur-base);
}

.woonet-pagination a:hover {
	border-color: var(--primary);
	background: var(--primary);
	color: var(--white);
}

.woonet-pagination .current {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white);
}

.woonet-pagination .dots {
	background: transparent;
	border: none;
}

/* =============================================================
   ARTICLE SINGLE
   ============================================================= */

.article-meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
	color: var(--text-soft);
	font-size: 0.9rem;
	flex-wrap: wrap;
}

.article-meta__author {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text-strong);
	font-weight: 600;
}

.article-meta__avatar {
	border-radius: 50%;
}

.article-meta__sep {
	color: var(--text-mute);
}

.article-featured {
	/* Image positionnée dans .article-layout__main → hérite naturellement
	   du max-width 760px de la colonne contenu. Pas besoin de centrage manuel. */
	margin: 0 0 2rem;
	padding: 0;
}

.article-featured img {
	width: 100%;
	max-height: 540px;
	display: block;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: var(--shadow-md);
}

.article-body {
	padding: 40px 0 40px;
}

/* .article-body .entry-content typo héritée du bloc long-form unifié.
   Restent ici uniquement les éléments spécifiques aux articles (links, blockquote, img, code) : */
.article-body .entry-content a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-body .entry-content a:hover {
	color: var(--text-strong);
}

/* Liens-boutons + liens du sommaire : jamais soulignés (même dans le contenu).
   Nécessaire car .article-body .entry-content a a une spécificité plus forte. */
.article-body .entry-content a.btn-primary,
.article-body .entry-content a.btn-outline,
.article-body .entry-content a.nav-cta,
.article-body .entry-content a.article-toc__link,
.article-body .entry-content .wp-block-button__link,
.article-body .entry-content .wp-element-button {
	text-decoration: none;
}

/* Boutons Gutenberg dans le contenu — alignés sur le style .btn-primary du thème */
.article-body .entry-content .wp-block-button__link,
.article-body .entry-content .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.85rem 1.75rem;
	border: none;
	border-radius: var(--radius-pill);
	background: var(--primary);
	color: var(--white);
	letter-spacing: -0.01em;
	transition: all var(--dur-base);
}
.article-body .entry-content .wp-block-button__link:hover,
.article-body .entry-content .wp-element-button:hover {
	background: var(--primary-dark);
	color: var(--white);
	transform: translateY(-1px);
}
.article-body .entry-content .wp-block-button__link:active,
.article-body .entry-content .wp-element-button:active {
	transform: translateY(0);
}
/* Variante outline Gutenberg = équivalent .btn-outline--light (fond clair) */
.article-body .entry-content .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--primary);
	border: 1px solid var(--primary);
	font-weight: 500;
}
.article-body .entry-content .is-style-outline .wp-block-button__link:hover {
	background: var(--primary-soft);
	color: var(--primary-dark);
	border-color: var(--primary-dark);
}

.article-body .entry-content blockquote {
	border-left: 4px solid var(--primary);
	background: var(--surface-alt);
	padding: 1.5rem 2rem;
	margin: 2rem 0;
	font-style: italic;
	color: var(--text-strong);
	border-radius: 0 12px 12px 0;
}

.article-body .entry-content img {
	border-radius: var(--radius-lg);
	margin: 1.5rem auto;
	display: block;
}

/* Alignements Gutenberg */
.article-body .entry-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.article-body .entry-content .alignleft {
	float: left;
	margin: 0.5rem 1.5rem 1rem 0;
	max-width: 50%;
}
.article-body .entry-content .alignright {
	float: right;
	margin: 0.5rem 0 1rem 1.5rem;
	max-width: 50%;
}
.article-body .entry-content .alignwide {
	margin-left: -160px;
	margin-right: -160px;
	max-width: none;
	width: auto;
}
.article-body .entry-content .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: auto;
}

/* Clearfix pour les images float left/right */
.article-body .entry-content::after {
	content: "";
	display: table;
	clear: both;
}

/* Mobile : neutraliser les sorties de cadre + flottants pour éviter le débordement */
@media (max-width: 1100px) {
	.article-body .entry-content .alignwide {
		margin-left: 0;
		margin-right: 0;
	}
}
@media (max-width: 768px) {
	.article-body .entry-content .alignleft,
	.article-body .entry-content .alignright {
		float: none;
		max-width: 100%;
		margin: 1.5rem auto;
	}
}

.article-body .entry-content code {
	background: var(--surface-alt);
	padding: 0.2rem 0.4rem;
	border-radius: var(--radius-sm);
	font-size: 0.9em;
	color: var(--text-strong);
}

/* Bloc de code multiline */
.article-body .entry-content pre,
.article-body .entry-content .wp-block-code {
	background: var(--surface-dark);
	color: var(--surface);
	padding: 1.25rem 1.5rem;
	border-radius: 10px;
	overflow-x: auto;
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 1.5rem 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.article-body .entry-content pre code,
.article-body .entry-content .wp-block-code code {
	background: transparent;
	padding: 0;
	color: inherit;
	font-size: inherit;
	border-radius: 0;
}

/* Tableaux dans le contenu */
.article-body .entry-content table,
.article-body .entry-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 0.95em;
}
.article-body .entry-content th,
.article-body .entry-content td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
}
.article-body .entry-content thead th {
	background: var(--surface-alt);
	color: var(--text-strong);
	font-weight: 700;
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
}
.article-body .entry-content tbody tr:hover {
	background: color-mix(in srgb, var(--primary) 4%, transparent);
}

/* Figures + légendes */
.article-body .entry-content figure,
.article-body .entry-content .wp-block-image {
	margin: 1.5rem auto;
}
.article-body .entry-content figcaption,
.article-body .entry-content .wp-block-image figcaption {
	font-size: 0.85rem;
	color: var(--text-soft);
	text-align: center;
	margin-top: 0.6rem;
	font-style: italic;
	line-height: 1.5;
}

/* Séparateurs (hr + wp-block-separator) */
.article-body .entry-content hr,
.article-body .entry-content .wp-block-separator {
	border: none;
	height: 1px;
	background: var(--border);
	margin: 2.5rem 0;
	max-width: 100%;
}
.article-body .entry-content .wp-block-separator.is-style-wide {
	max-width: 100%;
}
.article-body .entry-content .wp-block-separator.is-style-dots {
	background: none;
	color: var(--text-soft);
	height: auto;
	text-align: center;
	letter-spacing: 1rem;
}

/* Galeries Gutenberg */
.article-body .entry-content .wp-block-gallery {
	margin: 1.5rem 0;
}
.article-body .entry-content .wp-block-gallery img {
	border-radius: var(--radius-md);
	margin: 0;
}

/* Embeds (YouTube, Vimeo, etc.) — responsive */
.article-body .entry-content .wp-block-embed,
.article-body .entry-content .wp-block-embed__wrapper {
	margin: 1.5rem 0;
}
.article-body .entry-content iframe {
	max-width: 100%;
	border-radius: var(--radius-lg);
}

/* Tags inline rares (kbd, mark, abbr) */
.article-body .entry-content kbd {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-bottom-width: 2px;
	border-radius: var(--radius-sm);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.85em;
	color: var(--text-strong);
	line-height: 1;
}
.article-body .entry-content mark {
	background: color-mix(in srgb, var(--primary) 18%, transparent);
	color: var(--text-strong);
	padding: 0.05em 0.25em;
	border-radius: 3px;
}
.article-body .entry-content abbr[title] {
	border-bottom: 1px dotted var(--text-soft);
	text-decoration: none;
	cursor: help;
}

/* Lede — 1er paragraphe de l'article, hook narratif.
   Convention journalistique : le premier § porte l'accroche → il gagne
   +10% de taille et une couleur text-strong pour signaler visuellement
   "c'est ici que ça commence". S'applique aussi au premier § après un H2
   (ouverture de nouvelle section). */
.article-body .entry-content > p:first-of-type {
	font-size: 1.125em;
	line-height: 1.55;
	color: var(--text-strong);
}

/* Accordions natifs Gutenberg (bloc « Details », WP 6.3+).
   Usage type : FAQ inline dans un article, sources dépliables, "voir plus". */
.article-body .entry-content .wp-block-details,
.article-body .entry-content details {
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 10px);
	padding: 0.25rem 1.25rem;
	margin: 1.5rem 0;
	transition: background var(--dur-base) ease;
}

.article-body .entry-content .wp-block-details[open],
.article-body .entry-content details[open] {
	background: var(--white);
}

.article-body .entry-content .wp-block-details > summary,
.article-body .entry-content details > summary {
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-weight: 600;
	font-size: 1rem;
	color: var(--text-strong);
	padding: 0.85rem 0;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2rem;
}

/* Chevron custom (natif ▶ masqué) — rotation à l'ouverture. */
.article-body .entry-content .wp-block-details > summary::-webkit-details-marker,
.article-body .entry-content details > summary::-webkit-details-marker { display: none; }

.article-body .entry-content .wp-block-details > summary::after,
.article-body .entry-content details > summary::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--primary);
	border-bottom: 2px solid var(--primary);
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--dur-base) ease;
}

.article-body .entry-content .wp-block-details[open] > summary::after,
.article-body .entry-content details[open] > summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.article-body .entry-content .wp-block-details > *:not(summary),
.article-body .entry-content details > *:not(summary) {
	margin-top: 0.5rem;
	padding-bottom: 0.85rem;
}

/* Callouts — encadrés d'aside pour flaguer une info importante mid-article.
   Usage : <div class="callout callout--info">…</div> (via bloc "HTML personnalisé" Gutenberg).
   4 variantes : info (bleu, aside neutre), tip (vert, best practice), warning (ambre, prudence), danger (rouge, ne pas faire).
   Structure attendue : un <strong> comme label + un <p> ou <ul>. */
.article-body .entry-content .callout {
	position: relative;
	margin: 2rem 0;
	padding: 1.15rem 1.25rem 1.15rem 3.25rem;
	border-radius: var(--radius-md, 10px);
	border-left: 3px solid;
	background: var(--surface-alt);
	color: var(--text);
	font-size: 0.95em;
	line-height: 1.6;
}

.article-body .entry-content .callout > *:first-child { margin-top: 0; }
.article-body .entry-content .callout > *:last-child  { margin-bottom: 0; }

.article-body .entry-content .callout strong {
	display: block;
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-weight: 700;
	color: var(--text-strong);
	margin-bottom: 0.25rem;
	letter-spacing: -0.005em;
}

/* Icône marker (pseudo-element) — cercle avec initiale/glyph selon variante. */
.article-body .entry-content .callout::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 1.25rem;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.15;
}

.article-body .entry-content .callout--info    { border-color: var(--primary); color: var(--primary); }
.article-body .entry-content .callout--info    { background: var(--primary-soft, #DBEAFE); }
.article-body .entry-content .callout--tip     { border-color: var(--success); color: var(--success); background: var(--success-soft); }
.article-body .entry-content .callout--warning { border-color: var(--warning); color: var(--warning); background: var(--warning-soft); }
.article-body .entry-content .callout--danger  { border-color: var(--error);   color: var(--error);   background: var(--error-soft); }

/* Le texte du callout reprend la couleur texte de base — seul le label + bord + icône
   portent la couleur sémantique. */
.article-body .entry-content .callout p,
.article-body .entry-content .callout ul,
.article-body .entry-content .callout ol,
.article-body .entry-content .callout li {
	color: var(--text);
}

/* Post tags */
/* Pied d'article : tags à gauche, partage à droite — barre fine horizontale. */
.article-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 2.5rem 0 2rem;
	padding: 1.25rem 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.article-foot .post-tags,
.article-foot .share-buttons {
	margin: 0;
}

.post-tags {
	margin: 2rem 0 1.5rem;
	display: flex;
	gap: 0.75rem;
	align-items: center;
	flex-wrap: wrap;
}

.post-tags__label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gray-400);
}

.post-tags ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.post-tags a {
	display: inline-block;
	background: var(--gray-100);
	color: var(--gray-600);
	padding: 0.35rem 0.85rem;
	border-radius: var(--radius-pill);
	font-size: 0.8rem;
	font-weight: 500;
	text-decoration: none;
	transition: all var(--dur-base);
}

.post-tags a:hover {
	background: var(--primary);
	color: var(--white);
}

/* Share buttons : sans borders (déjà encadrés par .article-foot) */
.share-buttons {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.share-buttons__label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--black);
	margin-right: 0.5rem;
}

.share-buttons__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--gray-100);
	color: var(--gray-600);
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none;
	transition: all var(--dur-base);
}

.share-buttons__btn:hover {
	background: var(--primary);
	color: var(--white);
	transform: translateY(-2px);
}

/* Author box */
.author-box {
	margin-top: 2rem;
	padding: 1.75rem;
	background: var(--surface-alt);
	border-radius: var(--radius-xl);
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
}

.author-box__avatar img {
	border-radius: 50%;
}

.author-box__label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--primary);
	margin-bottom: 0.25rem;
}

.author-box__name {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0.5rem;
}

.author-box__bio {
	font-size: 0.9rem;
	color: var(--gray-600);
	line-height: 1.6;
	margin-bottom: 0.75rem;
}

.author-box__link {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
}

.author-box__link:hover {
	color: var(--black);
}

/* Related posts section */
.related-posts {
	padding: var(--space-section-sm) 0 var(--space-section-md);
	background: var(--gray-100);
}

.related-posts .blog-grid {
	margin: 2rem 0 0;
}

/* Comments — espace réduit, collé directement à la fin de l'article */
.article-comments {
	padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(2rem, 4vw, 3rem);
}

.woonet-comments__title {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 2rem;
	letter-spacing: -0.02em;
}

.woonet-comments .comment-list {
	list-style: none;
	padding: 0;
	margin-bottom: 2rem;
}

.woonet-comments .comment-list li {
	margin-bottom: 1rem;
}

.woonet-comments .comment-body {
	background: var(--gray-100);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
}

.woonet-comments .comment-author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.woonet-comments .comment-author .avatar {
	border-radius: 50%;
}

.woonet-comments .comment-author .fn {
	font-weight: 700;
	color: var(--black);
	font-style: normal;
}

.woonet-comments .comment-meta {
	font-size: 0.8rem;
	color: var(--gray-400);
	margin-bottom: 0.75rem;
}

.woonet-comments .comment-content {
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--gray-600);
}

.woonet-comments .reply {
	margin-top: 0.5rem;
}

.woonet-comments .comment-reply-link {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
}

.woonet-comments .children {
	list-style: none;
	margin: 1rem 0 0 2rem;
	padding: 0;
}

.woonet-comments__closed {
	color: var(--gray-400);
	font-style: italic;
	margin-bottom: 2rem;
}

.woonet-comment-form {
	margin-top: 1.5rem;
}

.woonet-comment-form .form-group {
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.woonet-comment-form label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--black);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.woonet-comment-form input[type=text],
.woonet-comment-form input[type=email],
.woonet-comment-form input[type=url],
.woonet-comment-form textarea {
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 0.95rem;
	border: 1.5px solid var(--gray-200);
	border-radius: var(--radius-md);
	padding: 0.75rem 1rem;
	background: var(--white);
	color: var(--black);
	outline: none;
	transition: border-color var(--dur-base);
}

.woonet-comment-form input:focus,
.woonet-comment-form textarea:focus {
	border-color: var(--primary);
}

.woonet-comment-form .comment-notes,
.woonet-comment-form .form-allowed-tags {
	font-size: 0.85rem;
	color: var(--gray-400);
}

.woonet-comment-form .submit {
	margin-top: 1rem;
}

/* =============================================================
   SEARCH FORM
   ============================================================= */

.woonet-search {
	display: flex;
	background: var(--white);
	border: 1.5px solid var(--gray-200);
	border-radius: var(--radius-pill);
	padding: 4px;
	max-width: 480px;
	transition: border-color var(--dur-base), box-shadow var(--dur-base);
}

.woonet-search:focus-within {
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(26, 122, 92, 0.1);
}

.woonet-search input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 0.6rem 1rem;
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 0.95rem;
	outline: none;
	color: var(--black);
}

.woonet-search input::placeholder {
	color: var(--gray-400);
}

.woonet-search button {
	background: var(--primary);
	color: var(--white);
	border: none;
	cursor: pointer;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--dur-base);
}

.woonet-search button:hover {
	background: var(--primary-dark);
}

.page-hero__searchform {
	margin-top: 2rem;
	max-width: 480px;
}

.page-hero__searchform .woonet-search {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.15);
}

.page-hero__searchform .woonet-search input {
	color: var(--white);
}

.page-hero__searchform .woonet-search input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.page-hero__searchform .woonet-search:focus-within {
	border-color: var(--primary);
}

/* Author hero avatar */
.author-hero__avatar {
	vertical-align: middle;
	margin-right: 1rem;
	border-radius: 50%;
}

/* Responsive blog */
@media (max-width: 768px) {
	.article-featured {
		margin-bottom: 1.25rem;
	}

	.author-box {
		flex-direction: column;
		gap: 1rem;
	}
}

/* =============================================================
   SINGLE SERVICE — landing page
   ============================================================= */

.service-hero {
	padding-bottom: var(--space-section-sm);
	text-align: left;
}

/* Override des centrages hérités de .page-hero pour le hero service */
.service-hero .page-hero__title,
.service-hero .page-hero__sub,
.service-hero .page-title {
	margin-left: 0;
	margin-right: 0;
}

.service-hero__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 4rem;
	align-items: center;
}

.service-hero__content {
	color: var(--text-strong);
}

.service-hero__cta {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1rem;
}

.service-hero__visual {
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-hero__visual img {
	max-width: 100%;
	height: auto;
}

.service-content {
	padding: clamp(70px, 9vw, 110px) 0 60px;
}

/* .service-content typo (h2/h3/p/ul/li) héritée du bloc long-form unifié */
.service-content h2:first-child {
	margin-top: 0;
}

/* H2 du contenu service — accent visuel via une petite barre primaire à gauche */
.service-content h2 {
	position: relative;
	padding-left: 1rem;
	margin-top: 2.5rem;
}

.service-content h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 70%;
	background: var(--primary);
	border-radius: 2px;
}

/* Images en pleine largeur avec radius, ombre subtile, espacement généreux */
.service-content figure,
.service-content .wp-block-image {
	margin: 2.5rem 0;
}

.service-content figure img,
.service-content .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

/* =============================================================
   .svc-accent : le span reste dans le DOM (Gutenberg-éditable) mais sans
   différenciation de couleur — titres en une seule couleur.
   ============================================================= */
.service-content h2 .svc-accent,
.service-content h3 .svc-accent,
.service-content .svc-faq__title .svc-accent {
	color: inherit;
}

/* =============================================================
   LISTES — chaque <li> devient une CARD BOX
   - UL : cards blanches avec ✓ vert accent en pastille
   - OL : timeline cards numérotées
   ============================================================= */

.service-content ul {
	list-style: none;
	padding-left: 0;
}

/* Chaque <li> = card blanche avec bordure légère + ombre subtile */
.service-content ul li {
	position: relative;
	padding: 0.85rem 1rem 0.85rem 3rem;
	margin-bottom: 0.6rem;
	line-height: 1.5;
	background: var(--white, #fff);
	border: 1px solid var(--gray-100, #F1F5F9);
	border-radius: var(--radius-md, 12px);
	box-shadow: 0 1px 2px rgba(15, 27, 61, 0.04);
	transition: transform var(--dur-fast, 0.18s), box-shadow var(--dur-fast, 0.18s);
}

.service-content ul li:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(15, 27, 61, 0.06);
}

.service-content ul li::before {
	content: "✓";
	position: absolute;
	left: 0.85rem;
	top: 0.95rem;
	width: 22px;
	height: 22px;
	background: var(--accent);
	color: var(--white, #fff);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 700;
}

/* "Ce qui est inclus" (svc-row--full) : grid 2 cols de cards pour scan rapide */
.service-content .svc-row--full ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem 0.85rem;
}

.service-content .svc-row--full ul li {
	margin-bottom: 0;
}

@media (max-width: 760px) {
	.service-content .svc-row--full ul {
		grid-template-columns: 1fr;
	}
}

/* OL : timeline en cards box numérotées avec ligne connectrice subtile */
.service-content ol {
	counter-reset: service-step;
	list-style: none;
	padding-left: 0;
	position: relative;
}

.service-content ol > li {
	counter-increment: service-step;
	position: relative;
	padding: 1.1rem 1.25rem 1.1rem 4.25rem;
	margin: 0 0 0.75rem;
	background: var(--white, #fff);
	border: 1px solid var(--gray-100, #F1F5F9);
	border-radius: var(--radius-md, 12px);
	box-shadow: 0 1px 2px rgba(15, 27, 61, 0.04);
	line-height: 1.55;
	transition: transform var(--dur-fast, 0.18s), box-shadow var(--dur-fast, 0.18s);
}

.service-content ol > li:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(15, 27, 61, 0.06);
}

.service-content ol > li::before {
	content: counter(service-step, decimal-leading-zero);
	position: absolute;
	left: 0.85rem;
	top: 1rem;
	width: 38px;
	height: 38px;
	background: var(--primary);
	color: var(--white, #fff);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
}

/* Premier <strong> = titre de l'étape : plus gros, gras, séparé */
.service-content ol > li > strong:first-child {
	display: block;
	font-size: 1.05rem;
	color: var(--text-strong);
	margin-bottom: 0.3rem;
	font-weight: 700;
}

/* FAQ — accordéons déroulables élégants */
.service-content details {
	background: var(--gray-100);
	border-radius: var(--radius-lg);
	padding: 1.25rem 1.5rem;
	margin-bottom: 0.75rem;
	transition: background var(--dur-fast);
}

.service-content details[open] {
	background: var(--primary-soft);
}

.service-content details summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--text-strong);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.service-content details summary::-webkit-details-marker { display: none; }

.service-content details summary::after {
	content: "+";
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--primary);
	transition: transform var(--dur-base);
	flex-shrink: 0;
	line-height: 1;
}

.service-content details[open] summary::after {
	transform: rotate(45deg);
}

.service-content details p {
	margin: 0.75rem 0 0;
	color: var(--text);
	line-height: 1.65;
}

/* En tête FAQ — visuellement distincte */
.service-content h2 + details {
	margin-top: 1.25rem;
}

/* =============================================================
   SVC-ROW — sections 2 colonnes alternées (texte + image)
   Utilisé sur la page de chaque service pour structurer le contenu
   ============================================================= */
/* Lede aligné à gauche (cohérence avec hero + svc-row), pas centré */
.service-content .svc-lede {
	font-size: 1.15rem;
	line-height: 1.7;
	color: var(--text-strong);
	max-width: 880px;
	margin: 0 0 3.5rem;
	padding: 1.5rem 1.75rem;
	background: var(--primary-soft, rgba(37, 99, 235, 0.06));
	border-left: 4px solid var(--primary);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Grille 1fr 1fr équilibrée : texte et illustration occupent la même largeur
   pour un alignement visuel parfait. Texte plafonné à 560px pour lecture.
   Position relative requise pour le pseudo-element ::before des fonds alternés. */
.service-content .svc-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
	margin: 0;
	padding: clamp(2.5rem, 5vw, 4.5rem) 0;
	position: relative;
	isolation: isolate;
}

/* Fond alterné edge-to-edge sur les rows paires (2, 4, 6...) — donne du
   rythme visuel entre sections sans surcharger le design. Utilise un
   pseudo-element en position absolute qui s'étend au-delà du wrap via
   100vw, calé au centre de la page. */
.service-content .svc-row:nth-of-type(even)::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	background: var(--surface-alt);
}

.service-content .svc-row--reverse .svc-row__text {
	order: 2;
}

.service-content .svc-row--reverse .svc-row__media {
	order: 1;
}

.service-content .svc-row--full {
	grid-template-columns: 1fr;
	max-width: 880px;
	margin-left: 0;
	margin-right: auto;
}

.service-content .svc-row__text {
	max-width: 560px;
	min-width: 0;
	width: 100%;
}

/* Override des défauts Gutenberg sur wp-block-column qui peuvent contraindre
   la largeur des colonnes media/text en grid */
.service-content .svc-row > .wp-block-column {
	flex-basis: auto;
	width: 100%;
}

/* H2 dans svc-row : suppression de la barre primary + alignement sur section-title home */
.service-content .svc-row h2 {
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--text-strong);
	padding-left: 0;
	margin-top: 0.25rem;
	margin-bottom: 1rem;
}

.service-content .svc-row h2::before {
	display: none;
}

.service-content .svc-row__text > *:last-child {
	margin-bottom: 0;
}

/* Média : SVG occupe toute la largeur de sa colonne, alignement centré */
.service-content .svc-row__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.service-content .svc-row__media svg {
	width: 100%;
	height: auto;
	max-width: 100%;
	display: block;
}

/* =============================================================
   SVC-STAT — pill inline pour les chiffres clés dans la prose
   ============================================================= */
.service-content .svc-stat {
	display: inline-block;
	padding: 0.12rem 0.55rem;
	background: var(--primary-soft);
	color: var(--primary);
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-weight: 700;
	font-size: 0.94em;
	border-radius: var(--radius-pill);
	white-space: nowrap;
	letter-spacing: -0.01em;
	line-height: 1.4;
}

/* =============================================================
   SVC-ROW__ACTIONS — boutons CTA inline en fin de dernière section
   ============================================================= */
.service-content .svc-row__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
}

.service-content .svc-row__actions .btn-primary,
.service-content .svc-row__actions .btn-outline--light {
	white-space: nowrap;
}

@media (max-width: 480px) {
	.service-content .svc-row__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.service-content .svc-row__actions .btn-primary,
	.service-content .svc-row__actions .btn-outline--light {
		text-align: center;
		justify-content: center;
	}
}

/* Mobile : empilage 1 col, texte avant illustration. SVG pleine largeur
   d'écran avec marge respiratoire pour ne pas toucher les bords du wrap. */
@media (max-width: 860px) {
	.service-content .svc-row,
	.service-content .svc-row--reverse {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.service-content .svc-row__text,
	.service-content .svc-row--reverse .svc-row__text {
		order: 1;
		max-width: 100%;
	}
	.service-content .svc-row__media,
	.service-content .svc-row--reverse .svc-row__media {
		order: 2;
		width: 100%;
	}
	.service-content .svc-row__media svg {
		width: 100%;
		max-width: 100%;
	}
}

/* =============================================================
   Override de la règle WP core "is-layout-flow > * { margin-block-start: 24px }"
   sur les pages services : on contrôle l'espacement vertical via nos propres
   marges sur .svc-row, .svc-pack, .svc-choose, etc. Le 24px global casse le
   layout des cards et 3-cols.
   ============================================================= */
.service-content :where(.is-layout-flow) > *,
.service-content :where(.is-layout-constrained) > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* =============================================================
   SVC-CHOOSE — section "Pourquoi nous choisir" en 3 colonnes :
   intro (pill + titre 2 lignes + paragraphe) | liste checkmarks | illustration
   Pattern inspiré de la capture "Smart Payments. Stronger Business." adapté
   à la palette monochrome bleue du thème.
   ============================================================= */
.service-content .svc-choose {
	display: grid;
	grid-template-columns: 1fr 1.1fr 0.8fr;
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
	align-items: stretch;
	margin: clamp(2rem, 4vw, 3rem) 0;
}

/* svc-choose n'est pas une .svc-row : pas de numéro counter, pas d'eyebrow */

/* ─── Colonne 1 : pill + titre 2 lignes + paragraphe ─── */
.service-content .svc-choose__intro {
	max-width: 100%;
}

.service-content .svc-choose__pill {
	display: inline-block;
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary);
	background: var(--primary-soft);
	padding: 0.35rem 0.85rem;
	border-radius: var(--radius-pill);
	margin: 0 0 0.85rem;
	line-height: 1;
}

.service-content .svc-choose__title {
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--text-strong);
	margin: 0 0 0.85rem;
	padding: 0;
	letter-spacing: -0.03em;
}

/* Désactive la barre verticale primary (override .service-content h2::before) */
.service-content .svc-choose__title::before {
	display: none;
}

.service-content .svc-choose__intro-text {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--text);
	margin: 0;
}

/* ─── Colonne 2 : liste de 4 features avec checkmarks ─── */
.service-content .svc-choose__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.service-content .svc-choose__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--border);
}

.service-content .svc-choose__item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.service-content .svc-choose__item:first-child {
	padding-top: 0;
}

/* Reset : si Gutenberg ajoute du padding sur wp-block-group, on l'enlève ici */
.service-content .svc-choose__item.wp-block-group {
	padding: 0.75rem 0;
}

.service-content .svc-choose__item:first-child.wp-block-group {
	padding-top: 0;
}

.service-content .svc-choose__item:last-child.wp-block-group {
	padding-bottom: 0;
}

.service-content .svc-choose__check {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	background: var(--primary);
	color: #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.service-content .svc-choose__check svg {
	width: 14px;
	height: 14px;
}

.service-content .svc-choose__item-body {
	min-width: 0;
}

.service-content .svc-choose__item-title {
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--text-strong);
	margin: 0 0 0.15rem;
	padding: 0;
	line-height: var(--leading-snug);
}

/* Désactive la barre primary du h3 dans ce contexte */
.service-content .svc-choose__item-title::before {
	display: none;
}

.service-content .svc-choose__item-desc {
	font-size: var(--text-sm);
	color: var(--text-soft);
	margin: 0;
	line-height: var(--leading-normal);
}

/* ─── Colonne 3 : illustration SVG ─── */
.service-content .svc-choose__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-content .svc-choose__media svg {
	width: 100%;
	height: auto;
	max-width: 380px;
	display: block;
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
	.service-content .svc-choose {
		grid-template-columns: 1fr 1fr;
	}
	.service-content .svc-choose__media {
		grid-column: 1 / -1;
		order: -1;
	}
	.service-content .svc-choose__media svg {
		max-width: 400px;
	}
}

@media (max-width: 720px) {
	.service-content .svc-choose {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
	.service-content .svc-choose__media svg {
		max-width: 340px;
	}
}

/* =============================================================
   SVC-PACK — section "Ce qui est inclus" en cards horizontales avec icônes.
   Titre centré avec lignes décoratives, cards auto-fit responsive.
   ============================================================= */
.service-content .svc-pack-wrap {
	margin: clamp(3rem, 6vw, 5rem) 0;
}

/* Titre centré avec lignes décoratives à gauche et droite (pattern reference) */
.service-content .svc-pack__title {
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	text-align: center;
	padding: 0;
	margin: 0 0 2.5rem;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	color: var(--text-strong);
}

.service-content .svc-pack__title::before,
.service-content .svc-pack__title::after {
	content: "";
	flex: 0 1 80px;
	height: 1px;
	background: var(--primary);
	opacity: 0.35;
}

/* Override la barre primary du h2 (qui n'a pas de sens ici) */
.service-content .svc-pack__title:first-child {
	margin-top: 0;
}

/* Grid 4 cols sur PC, 2 cols sur tablette, 1 col sur mobile */
.service-content .svc-pack__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

@media (max-width: 980px) {
	.service-content .svc-pack__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.service-content .svc-pack__grid {
		grid-template-columns: 1fr;
	}
}

.service-content .svc-pack__card {
	background: var(--white, #fff);
	padding: 1.75rem 1rem;
	border-radius: var(--radius-lg, 16px);
	border: 1px solid var(--gray-100, #F1F5F9);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 1px 2px rgba(15, 27, 61, 0.04);
	transition: transform var(--dur-fast, 0.18s), box-shadow var(--dur-fast, 0.18s);
}

.service-content .svc-pack__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(15, 27, 61, 0.06);
}

/* Cercle icône : fond primary-soft, stroke primary */
.service-content .svc-pack__icon {
	width: 64px;
	height: 64px;
	background: var(--primary-soft, rgba(37, 99, 235, 0.08));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 1.1rem;
	color: var(--primary);
}

.service-content .svc-pack__icon svg {
	width: 28px;
	height: 28px;
}

.service-content .svc-pack__name {
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: var(--text-base);
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--text-strong);
	padding: 0;
	line-height: var(--leading-snug);
}

/* Désactive la barre primary du h3 dans ce contexte (pas pertinent) */
.service-content .svc-pack__name::before {
	display: none;
}

.service-content .svc-pack__desc {
	font-size: var(--text-sm);
	color: var(--text-soft);
	margin: 0;
	line-height: var(--leading-normal);
}

/* =============================================================
   SVC-STATS — cards stats horizontales (gros chiffres + label)
   Fond navy + bordure verte accent. Utilisé pour "Le résultat mesurable".
   ============================================================= */
.service-content .svc-stats-wrap {
	margin: clamp(3rem, 6vw, 5rem) 0;
}

.service-content .svc-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.25rem;
	margin: 1.75rem 0 0;
}

.service-content .svc-stats__card {
	background: var(--surface-dark, #0F1B3D);
	color: #fff;
	padding: clamp(1.5rem, 3vw, 2.25rem) 1.25rem;
	border-radius: var(--radius-lg);
	text-align: center;
	border-top: 4px solid var(--accent);
	box-shadow: var(--shadow-md);
	transition: transform var(--dur-base, 0.25s);
}

.service-content .svc-stats__card:hover {
	transform: translateY(-4px);
}

.service-content .svc-stats__num {
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: var(--text-4xl);
	font-weight: 800;
	color: #fff;
	margin: 0 0 0.4rem;
	line-height: var(--leading-none);
	letter-spacing: -0.02em;
}

.service-content .svc-stats__label {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
	line-height: var(--leading-normal);
}


/* =============================================================
   SVC-FAQ — section FAQ centrée sur PC, max 760px + eyebrow
   ============================================================= */
.service-content .svc-faq {
	max-width: 760px;
	margin: clamp(3rem, 6vw, 5rem) auto 0;
	text-align: center;
}

.service-content .svc-faq__eyebrow {
	display: inline-block;
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--primary);
	background: var(--primary-soft);
	padding: 0.35rem 0.85rem;
	border-radius: var(--radius-pill);
	margin-bottom: 0.75rem;
	text-transform: uppercase;
}

.service-content .svc-faq__title {
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	text-align: center;
	margin: 0 0 2.5rem;
	padding-left: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--text-strong);
}

.service-content .svc-faq__title::before {
	display: none;
}

/* Items FAQ : align text left (lecture confortable) à l'intérieur du bloc centré */
.service-content .svc-faq details {
	text-align: left;
}

.section--other-services {
	background: var(--gray-100);
	padding: var(--space-section-sm) 0;
}

.section--related-projects {
	padding: var(--space-section-sm) 0;
}

/* =============================================================
   SINGLE RÉALISATION — case study (refonte v3.1 monochrome)
   ============================================================= */

/* .project-hero utilise .page-hero.page-hero--align-left (défini plus haut).
   Aucune règle CSS spécifique nécessaire ici — cf. single-woonet_realisation.php. */

/* Featured image : à l'intérieur de article-layout__main (760px), pleine largeur */
.project-featured {
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
	padding: 0;
}

.project-featured img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

/* Gap entre hero et contenu : responsive plus serré sur mobile */
.single-woonet_realisation .site-main {
	padding-top: clamp(1.75rem, 5vw, 4rem);
}

/* Contenu long-form : prend la largeur de article-layout__main (760px max) */
.project-content {
	margin: 0 0 clamp(2rem, 5vw, var(--space-section-md));
	padding: 0;
}

.project-content h2:first-child {
	margin-top: 0;
}

/* =============================================================
   Sidebar projet (--project-info) : card épurée alignée sur la sidebar blog
   ============================================================= */
.widget-area--project {
	min-width: 0;
}

.widget--project-info {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* Mobile : sidebar projet pleine largeur + placée AVANT le contenu pour montrer
   les infos clés (client, secteur, lien) en premier. La spécificité accrue
   (.article-layout .widget-area--project) override la règle globale
   .widget-area max-width: 480px définie plus loin dans le fichier. */
@media (max-width: 900px) {
	.article-layout .widget-area--project {
		order: -1;
		max-width: none;
		width: 100%;
		margin: 0;
	}
	/* Gap serré entre sidebar et contenu sur mobile (override du gap 2.5rem
	   hérité de .article-layout qui crée trop d'espace blanc) */
	.article-layout:has(.widget-area--project) {
		gap: 1.5rem;
	}
}

.widget--project-info .widget-title {
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin: 0 0 1.25rem;
}

.project-info__list {
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.project-info__row {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border);
}

.project-info__row:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.project-info__row dt {
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin: 0;
}

.project-info__row dd {
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--text-strong);
	margin: 0;
	line-height: var(--leading-snug);
	word-break: break-word;
}

.project-info__cta {
	width: 100%;
	justify-content: center;
}

.project-info__cta svg {
	transition: transform var(--dur-fast) ease;
}

.project-info__cta:hover svg {
	transform: translate(2px, -2px);
}

/* CTA final : tinted primary-soft, centré */
.project-cta {
	background: var(--primary-soft);
	padding: var(--space-section-md) 0;
	text-align: center;
}

.project-cta__title {
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--text-strong);
	max-width: 640px;
	margin: 0 auto 0.85rem;
}

.project-cta__sub {
	color: var(--text-soft);
	font-size: var(--text-base);
	max-width: 540px;
	margin: 0 auto 1.75rem;
	line-height: var(--leading-relaxed);
}


/* =============================================================
   PORTFOLIO FILTERS (chips)
   ============================================================= */

.portfolio-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding-bottom: clamp(1.5rem, 3vw, 2rem);
	border-bottom: 1px solid var(--border);
}

.portfolio-filter {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border-radius: var(--radius-pill);
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-soft);
	font-family: var(--font-heading, 'Mona Sans', sans-serif);
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}

.portfolio-filter:hover {
	border-color: var(--text-strong);
	color: var(--text-strong);
}

.portfolio-filter.active {
	background: var(--text-strong);
	border-color: var(--text-strong);
	color: #fff;
}

@media (max-width: 600px) {
	.portfolio-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: -16px;
		padding-inline: 16px;
	}
	.portfolio-filters::-webkit-scrollbar {
		display: none;
	}
	.portfolio-filter {
		flex-shrink: 0;
	}
}

/* =============================================================
   RESPONSIVE — Lot B
   ============================================================= */

@media (max-width: 900px) {
	.service-hero__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.service-hero__visual {
		order: -1;
		max-width: 480px;
	}
}

/* =============================================================
   BREADCRUMBS
   ============================================================= */

.woonet-breadcrumbs {
	margin: 0 0 2rem;
	font-size: 0.85rem;
	color: var(--gray-600);
}

.woonet-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.woonet-breadcrumbs a {
	color: var(--gray-600);
	text-decoration: none;
	transition: color var(--dur-base);
}

.woonet-breadcrumbs a:hover {
	color: var(--black);
}

.woonet-breadcrumbs [aria-current="page"] {
	color: var(--black);
	font-weight: 500;
}

.woonet-breadcrumbs__sep {
	color: var(--gray-400);
	margin-left: 0.4rem;
}

/* Variante claire pour heros sombres */
.page-hero .woonet-breadcrumbs {
	color: rgba(255, 255, 255, 0.65);
}

.page-hero .woonet-breadcrumbs a {
	color: rgba(255, 255, 255, 0.65);
}

.page-hero .woonet-breadcrumbs a:hover {
	color: var(--white);
}

.page-hero .woonet-breadcrumbs [aria-current="page"] {
	color: var(--white);
}

.page-hero .woonet-breadcrumbs__sep {
	color: rgba(255, 255, 255, 0.35);
}

/* =============================================================
   BACK TO TOP
   ============================================================= */

.woonet-back-to-top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: var(--z-fab);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--primary);
	color: var(--white);
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	transition: transform var(--dur-base), background var(--dur-base);
}

.woonet-back-to-top:hover {
	background: var(--primary-dark);
	transform: translateY(-2px);
}

.woonet-back-to-top[hidden] {
	display: none;
}

/* Décalage si le cookie banner est visible (évite la superposition mobile) */
body.has-cookie-banner .woonet-back-to-top {
	bottom: 130px;
}

@media (min-width: 720px) {
	body.has-cookie-banner .woonet-back-to-top {
		bottom: 24px;
	}

	/* sur desktop, le banner ne couvre pas le coin droit */
}

/* =============================================================
   COOKIE BANNER
   ============================================================= */

.woonet-cookie-banner {
	position: fixed;
	bottom: 16px;
	left: 16px;
	right: 16px;
	z-index: var(--z-dropdown);
	background: var(--surface-dark);
	color: var(--white);
	border-radius: var(--radius-xl);
	padding: 1.25rem 1.5rem;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--dur-slow), transform var(--dur-slow);
	max-width: 720px;
	margin: 0 auto;
}

.woonet-cookie-banner.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.woonet-cookie-banner[hidden] {
	display: none;
}

.woonet-cookie-banner__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.woonet-cookie-banner__text {
	flex: 1;
	min-width: 260px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

.woonet-cookie-banner__text a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woonet-cookie-banner__text a:hover {
	color: var(--white);
}

.woonet-cookie-banner__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.woonet-cookie-banner__btn {
	font-size: 0.85rem;
	padding: 0.55rem 1.25rem;
}

.woonet-cookie-banner .btn-outline {
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.3);
}

.woonet-cookie-banner .btn-outline:hover {
	border-color: var(--white);
	background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 600px) {
	.woonet-cookie-banner {
		padding: 1rem;
	}

	.woonet-cookie-banner__actions {
		width: 100%;
	}

	.woonet-cookie-banner__btn {
		flex: 1;
	}
}

/* =============================================================
   PRINT — impression / sauvegarde PDF
   ============================================================= */

@media print {

	/* Reset pour impression — noir sur blanc, pas d'ombres, sans-serif */
	*,
	*::before,
	*::after {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	html,
	body {
		background: #fff !important;
		color: #000 !important;
		font-size: 11pt;
		line-height: 1.5;
	}

	/* Cacher tout ce qui n'est pas du contenu utile */
	.site-header,
	.hamburger,
	.woonet-back-to-top,
	.woonet-cookie-banner,
	.cta-band,
	.section--realisations .section-cta,
	.share-buttons,
	.related-posts,
	.article-comments,
	.widget-area,
	.site-footer,
	.skip-link,
	.portfolio-filters,
	.section--related-projects,
	.section--other-services,
	.hero-actions,
	.footer-bottom,
	.woonet-pagination {
		display: none !important;
	}

	/* Adapter le hero pour l'impression — gros titre, fond blanc */
	.hero,
	.page-hero {
		min-height: auto !important;
		padding: 0 0 1cm 0 !important;
		page-break-after: avoid;
		border-bottom: 2px solid #000;
		margin-bottom: 1cm;
	}

	.hero h1,
	.page-hero__title,
	.page-title {
		font-size: 24pt !important;
		color: #000 !important;
		margin: 0 0 0.5cm 0 !important;
	}

	.hero-sub,
	.page-hero__sub {
		font-size: 12pt !important;
		color: #333 !important;
	}

	/* Contenu d'article */
	.entry-content,
	.article-body,
	.project-content,
	.legal-content {
		font-size: 11pt;
		line-height: 1.6;
	}

	.entry-content h2,
	.article-body h2,
	.project-content h2 {
		font-size: 16pt !important;
		margin-top: 0.8cm;
		page-break-after: avoid;
	}

	.entry-content h3,
	.article-body h3 {
		font-size: 13pt !important;
		page-break-after: avoid;
	}

	.entry-content p,
	.article-body p {
		orphans: 3;
		widows: 3;
		page-break-inside: avoid;
	}

	/* Liens : afficher l'URL après le texte */
	a[href^="http"]::after,
	a[href^="https"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555 !important;
		font-weight: normal;
	}

	/* Sauf liens internes de navigation et liens dont l'URL est déjà visible */
	a[href^="#"]::after,
	a[href^="mailto:"]::after,
	a[href^="tel:"]::after,
	.entry-title a::after {
		content: '' !important;
	}

	/* Images & illustrations */
	img {
		max-width: 100% !important;
		page-break-inside: avoid;
	}

	/* Article meta */
	.article-meta {
		font-size: 10pt !important;
		color: #555 !important;
		border-bottom: 1px solid #ddd;
		padding-bottom: 0.5cm;
		margin-bottom: 0.5cm;
	}

	.article-meta__author,
	.article-meta time {
		color: #000 !important;
	}

	.article-meta__avatar {
		display: none !important;
	}

	/* Breadcrumbs */
	.woonet-breadcrumbs {
		font-size: 9pt;
		color: #555 !important;
		margin-bottom: 0.5cm;
	}

	/* Tableaux et blockquotes */
	blockquote {
		border-left: 3px solid #000 !important;
		padding-left: 0.5cm;
		font-style: italic;
		page-break-inside: avoid;
	}

	table {
		border-collapse: collapse;
		page-break-inside: avoid;
	}

	/* Page-break utiles */
	h1,
	h2,
	h3,
	h4 {
		page-break-after: avoid;
	}

	ul,
	ol,
	blockquote {
		page-break-inside: avoid;
	}

	/* Marges page (à imprimer) */
	@page {
		margin: 1.8cm 1.5cm;
	}
}

/* =============================================================
   ARTICLE LAYOUT — content + sidebar grid
   ============================================================= */

.article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 3rem;
	align-items: start;
}

@media (min-width: 1200px) {
	.article-layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 4rem;
	}
}

.article-layout__main {
	max-width: 760px;
	min-width: 0;
}

.article-layout__main--wide {
	max-width: none;
}

.widget-area {
	position: sticky;
	top: calc(var(--header-height, 68px) + 24px);
	align-self: start;
	display: block;
	will-change: transform;
	/* hint navigateur pour optimiser sticky */
}

.widget-area>*+* {
	margin-top: 2rem;
}

.admin-bar .widget-area {
	top: calc(var(--header-height, 68px) + 32px + 24px);
}

.article-layout--no-sidebar {
	grid-template-columns: 1fr;
}

.article-layout:has(.article-layout__main:only-child) {
	grid-template-columns: 1fr;
}

.article-layout__spacer {
	display: none;
}

@media (min-width: 901px) {
	.article-layout:not(.article-layout--no-sidebar) .article-layout__spacer {
		display: block;
	}
}

@media (max-width: 900px) {
	.article-layout {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	/* Sur mobile : la sidebar widgets du single post est DÉPLACÉE via JS
	   à la fin du document (après .related-posts) pour que les commentaires
	   apparaissent directement après l'article. Quand elle est positionnée
	   après related-posts on lui donne une marge supérieure pour respirer. */
	.widget-area {
		position: static;
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}

	/* État après déplacement : sidebar placée après .article-comments ou
	   .article-body sur mobile. Padding latéral aligné sur le wrap. */
	.article-comments + .widget-area--blog,
	.article-body + .widget-area--blog {
		margin-top: 2rem;
		margin-bottom: 2rem;
		padding: 0 16px;
	}
}

/* =============================================================
   WIDGETS — base
   ============================================================= */

.widget {
	font-size: var(--text-sm);
	color: var(--text);
}

.widget-title {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--border);
}

/* WP core widgets minimal styling (recent posts, categories, archives, tag-cloud) */
.widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget li+li {
	margin-top: 0.5rem;
}

.widget li a {
	color: var(--text);
	text-decoration: none;
	transition: color var(--dur-base);
	display: inline-flex;
	align-items: center;
}

.widget li a:hover {
	color: var(--text-strong);
}

.widget .tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.widget .tagcloud a {
	background: var(--surface-alt);
	color: var(--text-soft) !important;
	padding: 0.35rem 0.85rem;
	border-radius: var(--radius-pill);
	font-size: 0.78rem !important;
	transition: all var(--dur-base);
}

.widget .tagcloud a:hover {
	background: var(--primary);
	color: var(--white) !important;
}

/* search widget — brand styling pour le widget WP natif (legacy + bloc) */
.widget.widget_search,
.widget_block .wp-block-search {
	margin: 0;
}

.widget_search form,
.wp-block-search__inside-wrapper {
	display: flex;
	background: var(--white);
	border: 1.5px solid var(--gray-200);
	border-radius: var(--radius-pill);
	padding: 4px;
	overflow: hidden;
	transition: border-color var(--dur-base), box-shadow var(--dur-base);
}

.widget_search form:focus-within,
.wp-block-search__inside-wrapper:focus-within {
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(26, 122, 92, 0.1);
}

.widget_search input[type="search"],
.wp-block-search__input {
	flex: 1;
	border: none !important;
	background: transparent !important;
	padding: 0.55rem 1rem !important;
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 0.9rem;
	outline: none;
	color: var(--black);
	min-width: 0;
}

.widget_search input[type="submit"],
.wp-block-search__button {
	background: var(--primary) !important;
	color: var(--white) !important;
	border: none !important;
	border-radius: var(--radius-pill) !important;
	padding: 0.45rem 1.1rem !important;
	font-size: 0.85rem !important;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--dur-base);
}

.widget_search input[type="submit"]:hover,
.wp-block-search__button:hover {
	background: var(--primary) !important;
}

/* =============================================================
   WIDGET CTA (custom Woonet)
   ============================================================= */

.woonet-cta-card {
	padding: 1.75rem;
	border-radius: var(--radius-xl);
	text-align: center;
}

.woonet-cta-card__title {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 0.5rem;
	line-height: 1.3;
}

.woonet-cta-card__text {
	font-size: 0.875rem;
	line-height: 1.6;
	margin: 0 0 1.25rem;
}

.woonet-cta-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0.6rem 1.25rem;
	border-radius: var(--radius-pill);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: all var(--dur-base);
}

/* Variant : sombre (par défaut) — fond bleu marine, bouton primary pour cohérence brand */
.woonet-cta-card--dark {
	background: var(--surface-dark);
	color: var(--white);
}

.woonet-cta-card--dark .woonet-cta-card__title {
	color: var(--white);
}

.woonet-cta-card--dark .woonet-cta-card__text {
	color: rgba(255, 255, 255, 0.7);
}

.woonet-cta-card--dark .woonet-cta-card__btn {
	background: var(--primary);
	color: var(--white);
}

.woonet-cta-card--dark .woonet-cta-card__btn:hover {
	background: var(--primary-dark);
	transform: translateY(-1px);
}

/* Variant : clair — fond gris clair, bouton vert */
.woonet-cta-card--light {
	background: var(--surface-alt);
	color: var(--black);
	border: 1px solid var(--border);
}

.woonet-cta-card--light .woonet-cta-card__title {
	color: var(--black);
}

.woonet-cta-card--light .woonet-cta-card__text {
	color: var(--text-soft);
}

.woonet-cta-card--light .woonet-cta-card__btn {
	background: var(--primary);
	color: var(--white);
}

.woonet-cta-card--light .woonet-cta-card__btn:hover {
	background: var(--primary-dark);
	transform: translateY(-1px);
}

/* Variant : vert — fond primary, bouton blanc inversé (comme la CTA band globale) */
.woonet-cta-card--green {
	background: var(--primary);
	color: var(--white);
}

.woonet-cta-card--green .woonet-cta-card__title {
	color: var(--white);
}

.woonet-cta-card--green .woonet-cta-card__text {
	color: color-mix(in srgb, var(--white) 80%, transparent);
}

.woonet-cta-card--green .woonet-cta-card__btn {
	background: var(--white);
	color: var(--primary);
}

.woonet-cta-card--green .woonet-cta-card__btn:hover {
	background: var(--accent);
	color: var(--white);
	transform: translateY(-1px);
}

/* =============================================================
   WIDGET SERVICES
   ============================================================= */

.widget-services-list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.widget-services-list li {
	margin: 0 !important;
}

/* Item : bordure sombre solide, fond transparent, texte noir plein.
   Au hover : inversion — fond navy plein + texte blanc pour un contraste net. */
.widget-services-list li a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.85rem;
	border-radius: 10px;
	background: transparent;
	border: 1px solid var(--surface-dark);
	color: #000;
	font-weight: 500;
	text-decoration: none;
	transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base);
}

.widget-services-list li a:hover {
	background: var(--surface-dark);
	color: var(--white);
	transform: translateX(2px);
}

/* Icône : transparente au repos (pas de pill blanc sur fond transparent),
   inversion propre en blanc au hover pour rester lisible. */
.widget-services-list__icon {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--surface-dark);
	border-radius: var(--radius-md);
	flex-shrink: 0;
	transition: color var(--dur-base);
}

.widget-services-list li a:hover .widget-services-list__icon {
	background: transparent;
	color: var(--white);
}

.widget-services-list__icon svg {
	width: 16px;
	height: 16px;
}

.widget-services-list__label {
	flex: 1;
	font-size: var(--text-sm);
	min-width: 0; /* permet à l'ellipsis si label trop long */
}

/* Flèche → masquée par défaut, glisse à droite au hover (pattern Stripe/Linear).
   Hérite de la couleur du lien pour rester lisible sur le fond navy au hover. */
.widget-services-list li a::after {
	content: "→";
	margin-left: 0.25rem;
	font-size: 0.95rem;
	color: currentColor;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--dur-base), transform var(--dur-base);
}

.widget-services-list li a:hover::after {
	opacity: 1;
	transform: translateX(0);
}

.widget-services-list__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 0.75rem;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--primary) !important;
	text-decoration: none;
}

.widget-services-list__more:hover {
	color: var(--text-strong) !important;
}

/* =============================================================
   WIDGET RÉALISATIONS
   ============================================================= */

.widget-realisations-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.widget-realisations-list li {
	margin: 0 !important;
}

/* Mini-carte : bordure sombre solide, fond transparent, texte noir plein.
   Au hover : inversion — fond navy plein + texte blanc. Même pattern que
   .widget-services-list pour une cohérence sidebar totale. */
.widget-realisations-list li a {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 0.85rem;
	align-items: center;
	color: inherit;
	padding: 0.5rem;
	border-radius: 10px;
	background: transparent;
	border: 1px solid var(--surface-dark);
	transition: background var(--dur-base), transform var(--dur-base);
}

.widget-realisations-list li a:hover {
	background: var(--surface-dark);
	transform: translateY(-2px);
}

.widget-realisations-list__thumb {
	width: 60px;
	height: 60px;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--surface-alt);
	flex-shrink: 0;
}

.widget-realisations-list__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dur-slow) ease;
}

.widget-realisations-list li a:hover .widget-realisations-list__thumb img {
	transform: scale(1.08);
}

.widget-realisations-list__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.widget-realisations-list__tag {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--primary);
	transition: color var(--dur-base);
}

.widget-realisations-list__title {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 700;
	font-size: var(--text-sm);
	color: #000;
	line-height: var(--leading-snug);
	transition: color var(--dur-base);
}

.widget-realisations-list li a:hover .widget-realisations-list__title {
	color: var(--white);
}

.widget-realisations-list li a:hover .widget-realisations-list__tag {
	color: var(--primary-soft, #DBEAFE);
}

/* =============================================================
   WIDGET AUTHOR
   ============================================================= */

.widget-author {
	background: var(--surface-alt);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
}

.widget-author__avatar {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 0.85rem;
}

.widget-author__avatar img {
	border-radius: 50%;
	display: block;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
}

.widget-author__name {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 700;
	font-size: var(--text-base);
	color: var(--text-strong);
	line-height: var(--leading-snug);
}

.widget-author__bio {
	font-size: var(--text-sm);
	color: var(--text-soft);
	line-height: var(--leading-relaxed);
	margin-bottom: 0.85rem;
	text-align: left;
}

.widget-author__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--primary) !important;
	text-decoration: none;
}

.widget-author__link:hover {
	color: var(--text-strong) !important;
}

/* =============================================================
   BLOG GRID 2-col (quand il y a une sidebar)
   ============================================================= */

/* Grille blog en mode 2-col : auto-fill se débrouille (les cartes ≥280px wrappent
   automatiquement en 1 col quand la place manque — pas besoin de breakpoint dur). */
.blog-grid--2col {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* =============================================================
   ARTICLE TOC — sommaire moderne inline (en haut de l'article)
   `<details>` natif + chevron animé + items numérotés
   ============================================================= */

.article-toc {
	background: var(--primary-soft);
	padding: 0;
	margin: 2.5rem 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.article-toc[hidden] { display: none; }

/* Desktop : sommaire sticky → reste visible pendant toute la lecture de l'article.
   Sur mobile, comportement normal (inline, replié au besoin). */
@media (min-width: 900px) {
	.article-toc {
		position: sticky;
		top: calc(var(--header-height) + 16px);
		z-index: 1;
	}
}

/* Summary clickable — masque le marker par défaut du <details> */
.article-toc__summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1.25rem;
	cursor: pointer;
	list-style: none;
	user-select: none;
	color: var(--text-strong);
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-weight: 600;
	font-size: 1rem;
	transition: background var(--dur-fast);
}

.article-toc__summary::-webkit-details-marker { display: none; }
.article-toc__summary::marker { content: ''; }

.article-toc__summary:hover {
	background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.article-toc__summary:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}

/* Icon dans un cercle bleu doux */
.article-toc__icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--primary);
	color: var(--white);
	flex-shrink: 0;
}

.article-toc__label {
	flex: 1;
	letter-spacing: -0.01em;
}

.article-toc__count {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--text-soft);
}

.article-toc__count:empty { display: none; }

/* Chevron : rotation 180° quand <details open> */
.article-toc__chevron {
	color: var(--text-soft);
	transition: transform var(--dur-base) ease-out;
}

.article-toc[open] .article-toc__chevron {
	transform: rotate(180deg);
}

/* Liste avec compteur CSS pour numérotation */
.article-toc__list {
	list-style: none;
	margin: 0;
	padding: 0.25rem 1.25rem 1.25rem 1.25rem;
	counter-reset: woonet-toc-h2 woonet-toc-h3;
	background: var(--white);
	/* Plafonne la hauteur même avec 20+ titres : scroll interne au lieu de pousser le contenu. */
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (max-width: 768px) {
	.article-toc__list {
		max-height: 50vh;
	}
}

.article-toc__item {
	margin: 0;
	padding: 0;
}

.article-toc__item--h2 {
	counter-increment: woonet-toc-h2;
	counter-reset: woonet-toc-h3;
}

.article-toc__item--h3 {
	counter-increment: woonet-toc-h3;
	padding-left: 2.25rem;
}

.article-toc__link {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.35rem 0.6rem;
	margin-left: -0.6rem;
	font-family: var(--font-body, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--text);
	text-decoration: none;
	border-radius: 6px;
	transition: background var(--dur-fast), color var(--dur-fast);
}

@media (min-width: 768px) {
	.article-toc__link { font-size: 1rem; }
}

.article-toc__item--h2 > .article-toc__link::before {
	content: counter(woonet-toc-h2);
	min-width: 1.25rem;
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--primary);
	letter-spacing: 0;
	text-align: left;
}

.article-toc__item--h3 > .article-toc__link::before {
	content: counter(woonet-toc-h2) "." counter(woonet-toc-h3);
	min-width: 1.75rem;
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--text-soft);
	letter-spacing: 0;
	text-align: left;
}

.article-toc__link:hover {
	color: var(--primary);
	background: var(--primary-soft);
}

.article-toc__link:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	color: var(--primary);
}

.article-toc__link.is-active {
	color: var(--primary);
	background: color-mix(in srgb, var(--primary) 12%, transparent);
	font-weight: 600;
}

.article-toc__item--h2 > .article-toc__link.is-active::before {
	color: var(--primary-dark);
}

/* Mobile : padding et tailles légèrement réduits */
@media (max-width: 640px) {
	.article-toc { margin-bottom: 2rem; }
	.article-toc__summary { padding: 0.75rem 1rem; gap: 0.6rem; font-size: 0.95rem; }
	.article-toc__icon-wrap { width: 28px; height: 28px; }
	.article-toc__list { padding: 0.25rem 0.85rem 1rem; }
	.article-toc__link { padding: 0.3rem 0.5rem; margin-left: -0.5rem; gap: 0.45rem; }
	.article-toc__item--h3 { padding-left: 1.5rem; }
}

/* =============================================================
   WIDGETS WP NATIFS — modernisation (categories en chips + recent posts en bg)
   ============================================================= */

/* Catégories : chips horizontaux rounded (style Vercel/Linear). Couvre :
   - widget legacy .widget_categories
   - bloc Gutenberg .wp-block-categories-list (et son archive equivalent) */
.widget_categories ul,
.wp-block-categories-list,
.widget_archive ul {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.5rem !important;
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget_categories li,
.wp-block-categories-list li,
.widget_archive li {
	margin: 0 !important;
}

.widget_categories li a,
.wp-block-categories-list li a,
.widget_archive li a {
	display: inline-flex !important;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.85rem;
	background: var(--surface-alt);
	color: var(--text) !important;
	border-radius: var(--radius-pill);
	font-size: 0.8rem;
	font-weight: 500;
	text-decoration: none;
	transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base);
}

.widget_categories li a:hover,
.wp-block-categories-list li a:hover,
.widget_archive li a:hover {
	background: var(--primary);
	color: var(--white) !important;
	transform: translateY(-1px);
}

/* Compte entre parenthèses (option WP "afficher le nombre") */
.widget_categories li,
.wp-block-categories-list li,
.widget_archive li {
	font-size: 0.75rem;
	color: var(--text-mute);
}

/* Articles récents (legacy + bloc Gutenberg) : carte subtile + flèche au hover */
.widget_recent_entries ul,
.wp-block-latest-posts__list {
	display: flex !important;
	flex-direction: column;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget_recent_entries li,
.wp-block-latest-posts__list li {
	margin: 0 !important;
}

.widget_recent_entries li a,
.wp-block-latest-posts__list li > a,
.wp-block-latest-posts__list .wp-block-latest-posts__post-title {
	display: flex !important;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.85rem;
	background: var(--surface-alt);
	color: var(--text) !important;
	border-radius: 10px;
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: none;
	transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base);
}

.widget_recent_entries li a::after,
.wp-block-latest-posts__list li > a::after,
.wp-block-latest-posts__list .wp-block-latest-posts__post-title::after {
	content: "→";
	margin-left: auto;
	color: var(--primary);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--dur-base), transform var(--dur-base);
}

.widget_recent_entries li a:hover,
.wp-block-latest-posts__list li > a:hover,
.wp-block-latest-posts__list .wp-block-latest-posts__post-title:hover {
	background: var(--primary-soft);
	color: var(--primary) !important;
	transform: translateX(2px);
}

.widget_recent_entries li a:hover::after,
.wp-block-latest-posts__list li > a:hover::after,
.wp-block-latest-posts__list .wp-block-latest-posts__post-title:hover::after {
	opacity: 1;
	transform: translateX(0);
}

/* =============================================================
   MEGA-MENU — sous-menu Services en panneau full-width
   ============================================================= */

.nav-links .has-mega-menu {
	align-self: stretch;
	display: flex;
	align-items: center;
}

.nav-links .has-mega-menu > a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	height: 100%;
}

.nav-links .nav-caret {
	transition: transform var(--dur-base) ease-out;
	color: currentColor;
}

.nav-links .has-mega-menu:hover > a .nav-caret,
.nav-links .has-mega-menu:focus-within > a .nav-caret {
	transform: rotate(180deg);
}

.mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	/* Pont vertical élargi (-16px / +16px) pour absorber les mouvements
	   de souris diagonaux entre le lien parent et le contenu du menu. */
	margin-top: -16px;
	padding-top: 16px;
	background: transparent;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--dur-base) ease-out, transform var(--dur-base) ease-out, visibility var(--dur-base);
	pointer-events: none;
	z-index: var(--z-base);
}

/* Visible quand le parent est hover, contient le focus, est ouvert via JS
   (intent-based delayed close), OU quand on hover directement le panneau. */
.has-mega-menu:hover > .mega-menu,
.has-mega-menu:focus-within > .mega-menu,
.has-mega-menu.is-open > .mega-menu,
.has-mega-menu > .mega-menu:hover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* Caret retourné aussi quand is-open (cohérent avec hover/focus-within). */
.nav-links .has-mega-menu.is-open > a .nav-caret {
	transform: rotate(180deg);
}

/* Le fond/border/shadow vivent sur __inner pour que le pont (padding-top)
   reste vraiment invisible — espace transparent qui ne capture que le hover. */
.mega-menu__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 2.5rem 2.5rem;
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 3rem;
	align-items: start;
	background: var(--white);
	border-top: 1px solid var(--gray-200);
	box-shadow: var(--shadow-lg);
}

/* Colonne gauche : intro / titre / CTA */
.mega-menu__intro {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.mega-menu__label {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--primary);
}

.mega-menu__title {
	font-family: var(--font-heading, 'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #000;
	margin: 0;
}

.mega-menu__sub {
	font-size: 0.9rem;
	line-height: 1.55;
	color: #000;
	margin: 0;
}

.mega-menu__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
	width: fit-content;
	transition: gap var(--dur-base);
}

.mega-menu__cta:hover {
	gap: 0.7rem;
}

/* Colonne droite : grille 2 colonnes des services */
.mega-menu__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-menu__item {
	margin: 0;
}

.mega-menu__link {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 0.85rem;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: background var(--dur-base), transform var(--dur-fast);
}

.mega-menu__link:hover {
	background: var(--primary-soft);
	transform: translateX(2px);
}

/* Icône : style sidebar Services (transparent + couleur sombre) sans bordure. */
.mega-menu__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: transparent;
	color: #000;
	border-radius: var(--radius-md);
	flex-shrink: 0;
	transition: color var(--dur-base);
}

.mega-menu__link:hover .mega-menu__icon {
	color: var(--primary);
}

.mega-menu__icon svg {
	width: 18px;
	height: 18px;
}

.mega-menu__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mega-menu__name {
	font-size: 0.9rem;
	font-weight: 600;
	color: #000;
	line-height: 1.3;
}

.mega-menu__excerpt {
	font-size: 0.78rem;
	color: #000;
	line-height: 1.45;
}

/* Mobile : on désactive complètement le mega-menu.
   Sur l'overlay fullscreen mobile, le lien Services pointe simplement
   sur l'archive (comportement standard) — pas besoin de panneau ici. */
@media (max-width: 768px) {
	.mega-menu { display: none; }
	.nav-links .nav-caret { display: none; }
}

/* =============================================================
   Template page-full-width — padding-top pour compenser le header fixe,
   et permettre aux blocs/sections de prendre toute la largeur.
   ============================================================= */
.site-main--full-width {
	padding-top: calc(var(--header-height) + var(--woonet-admin-offset, 0px));
}
.entry--full-width > * {
	max-width: none;
}

/* =============================================================
   Bandeau d'annonce — affiché tout en haut, au-dessus du header sticky.
   ============================================================= */
.woonet-announcement {
	position: relative;
	z-index: var(--z-sticky-bar);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	padding: 8px 5%;
	text-align: center;
}
.woonet-announcement__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
}
.woonet-announcement__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 600;
	white-space: nowrap;
}
.woonet-announcement__link:hover { opacity: 0.85; }

/* Avec la bannière active, on pousse le header fixe vers le bas dynamiquement.
   Cette règle est neutre par défaut : si .woonet-announcement n'est pas rendue,
   rien ne se passe. Sinon JS pourrait gérer le décalage, ici on s'appuie sur
   le fait que le header reste position:fixed top:0 et que l'utilisateur scrolle.
   Pour éviter le saut visuel au chargement, on ajoute simplement un padding-top
   au body via la classe ci-dessous (à poser via JS ou body_class si désiré).
*/

/* =============================================================
   Fallback color-mix() — Safari ≤16.1, Firefox ≤112, navigateurs anciens.
   Pour les éléments où le rendu est critique (hero, badges, hero-sub),
   on bascule sur des rgba() pré-calculés équivalents à color-mix(in srgb)
   avec la valeur primary par défaut (#2563EB) ou white (#FAFAF8).
   Les couleurs custom du Customizer ne seront pas reflétées sur ces
   navigateurs — fallback statique acceptable (~5% du parc mondial).
   ============================================================= */
@supports not (background: color-mix(in srgb, red, blue)) {
	.hero-bg {
		background: radial-gradient(circle 700px at 15% 25%, rgba(37, 99, 235, 0.45) 0%, transparent 60%);
	}
	.hero-sub {
		color: rgba(255, 255, 255, 0.6);
	}
	.btn-outline {
		border-color: rgba(255, 255, 255, 0.3);
	}
}

/* =============================================================
   Cards — compaction mobile.
   Réduit padding interne + gap grid sur petits écrans pour exploiter
   la largeur disponible (les cards en pleine largeur sur 375-430px de
   viewport ne devraient pas gaspiller 64-80px en marges internes).
   ============================================================= */
@media (max-width: 768px) {
	.service-card {
		padding: 1.5rem;
	}

	.service-card--illustrated {
		padding: 0;
	}

	.service-card--illustrated .svc-body {
		padding: 1.25rem 1.5rem 1.5rem;
	}

	.temoignage-card,
	.diff-item,
	.valeur-card {
		padding: 1.5rem;
	}

	.services-grid,
	.portfolio-grid,
	.temoignages-grid,
	.diff-grid,
	.team-grid,
	.valeurs-grid,
	.blog-grid {
		gap: 1rem;
	}
}

@media (max-width: 480px) {
	.service-card,
	.temoignage-card,
	.diff-item,
	.valeur-card {
		padding: 1.25rem;
	}

	.service-card--illustrated {
		padding: 0;
	}

	.service-card--illustrated .svc-body {
		padding: 1rem 1.25rem 1.25rem;
	}

	.diff-num {
		font-size: 2rem;
	}

	.team-info {
		padding: 1rem;
	}
}

/* ============================================================================
   RADIUS UNIFIÉ — boutons + champs à 4px
   Convention design : géométrie sobre sur toutes les surfaces interactives
   (boutons, inputs, selects, textarea). Les tags/chips/eyebrows conservent
   leur forme pill (var(--radius-pill) = 100px) car ce sont des décorations
   catégorielles, pas des cibles d'interaction primaires.
   ============================================================================ */
.btn-primary,
.btn-outline,
.btn-outline--light,
.btn-secondary,
a.nav-cta,
.nav-links a.nav-cta,
.footer-whatsapp,
.wp-block-button__link,
.wp-element-button,
.woonet-cta-card__btn,
.portfolio-filter,
.woonet-search,
.widget_search form,
.wp-block-search__inside-wrapper,
.widget_search input[type="submit"],
.wp-block-search__button,
.form-group input,
.form-group select,
.form-group textarea,
.woonet-comment-form input[type="text"],
.woonet-comment-form input[type="email"],
.woonet-comment-form input[type="url"],
.woonet-comment-form textarea,
.woonet-search input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
	border-radius: 4px !important;
}